CSS Lint — «умный» валидатор css

Мы раним ваши чувства (и поможем писать код лучше)

— перевод слогана на странице сервиса

Валидатор находится по адресу http://csslint.net/

Основной упор делается на обнаружение: логических ошибок внутри css-файла; неэффективного использования селекторов и элементов, которые могут вызвать проблемы в отдельных браузерах.

css lint

Рекомендации этого сервиса, на мой взгляд, полезнее валидатора от w3c.

CSS transform кроссбраузерно

css transform

Представляю вашему вниманию генератор свойства css-transform, который производит преобразование значений CSS3 transform в параметры filter:Matrix, позволяющий нам отобразить результат в IE6-8.

Для решения подобных задач зачастую используется JavaScript, например, библиотека cssSandpaper.
Отличительная особенность способа, указанного в статье,— получение css transform кроссбраузерно без использования яваскрипта.

Пример конечного результата:

#transformedObject {
     width:             220px;
     height:            70px;

     -moz-transform:    rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -o-transform:      rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -webkit-transform: rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     transform:         rotate(15deg)
                         translateX(230px)
                         scale(1.5);
}

А для IE через условные комментарии:

#transformedObject {
   /* для IE8+  */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
   
   /* IE6 и 7 */
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.4488887394336025,
            M12=-0.388228567653781,
            M21=0.388228567653781,
            M22=1.4488887394336025,
            SizingMethod='auto expand');

   /* Для корректировки центра трансформации объекта.   */

   margin-left: 58px;
   margin-top: -32px;

}