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;

}

Старый знакомый — CSS word-wrap: break-word и вертикальный текст

Свойство css word-wrap указывает, переносить ли длинное слово, если оно не вмещается по ширине в заданную область.
Поддерживается в браузерах IE6+, Opera 10.5+, Firefox 3.6+, Chrome, Safari.
Пример использования:

<style type="text/css">
.narrow-column{
width:200px;
font-size:1.5em;
word-wrap:break-word;
}
</style>
<div class="narrow-column">
съешь еще этих мягких
тысячавосемьсотвосьмидесятидевятимиллиметровых булок,
да выпей чаю.
</div>

Указание word-wrap: break-word весьма полезно, когда нужно быть уверенным, что текст в блоке никоим образом не выйдет за его пределы, и при этом может быть прочитан полностью.

Примечание:
Правила переноса в русском языке это свойство не соблюдает и, зачастую, разбивает слова некорректно.

Вертикальный текст с помощью word-wrap:break-word

На мой взгляд, это очень простой способ для создания эффекта вертикального текста

К примеру

<style type="text/css">
.vertical-text{
width:1em; /*шириной в одну букву*/
word-wrap:break-word;
letter-spacing:.3ex /*У Оперы свое мнение. Фикс.*/
}
</style>
<div class="vertical-text">
What is the matrix?
</div>

Таким образом, использование свойства css word-wrap считаю полезным во многих проектах, особенно с учетом его кроссбраузерности.

CSS transform: scale или как отразить элемент по горизонтали/вертикали

Для кроссбраузерного отражения элемента совсем необязательно прибегать к помощи jS:

.flip-horizontal{
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;
-ms-filter: "FlipH";
}

Для отражения по вертикали соответственно:

.flip-vertical{
-moz-transform: scale(1,-1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
filter: FlipV;
-ms-filter: "FlipV";
}

Об эмуляции свойства css-transform в IE и других трансформациях, читайте в статье CSS transform кроссбраузерно.