22 Мая 2010, в 00:00

Кроссбраузерная поддержка и справочник CSS3

Давно что-то не писал в свой блог. Как-то увлекся работой. За долгое время я уже набил руку по верстке, так что могу гвозди забивать. Изучил поведение аттрибутов, псеводоклассов (божественная штука) и конечно плотно изучаю спецификации. И конечно дело дошло до CSS3. Куда же без этого дела?

Возможностей море: от скруглений до трансформаций и анимации. Последние два касаться пока не буду. Займемся пока что только скруглениями, тенями, прозрачностями и градиентами. Данные инструменты очень полезны, так как позволяют сэкономить на количестве запросов на сервер за картинками.

Скругленные углы

Решение:

-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */

Примечание:

1. К сожалению для браузеров Internet Explorer младше 9 версии решения нет
2. Можно задавать радиус отдельно для каждого угла т.е.: 12px 0 5px 5px. Порядок не много не обычный - Вверхний левый - верхний правый - нижний правый - нижний левый угол

Тени для блоков

Решение

-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#ededed,offX=5,offY=5, positive=true);  /* IE 5.5+ */

Примечание

1. Тени работают практически во всех браузерах.
2. Удивил в этот раз Microsoft. Оказывает тени в ИЕ были аж с 5.5 версии и старше. Но тут есть ограничение: нельзя задать размер и размытие. Задается только цвет и смещение по X и Y координате. Полное описание найдете здесь.

Градиент для блоков

Решение

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */  

Примечание

1. Как видно из решения, работает везде кроме Opera. В каждой бочке меда есть ложка дегтя.
2. Работает и в ИЕ. Но предупреждаю, чрезмерное использование фильтров приводит к зависанию браузера. Особенности браузера

Прозрачность в цвете

Самое любимый элемент из CSS3. С помощью него можно сделать оформление в виде Windows 7.

Решение

background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome  

Примечание

1. к сожалению снова проигрывает ИЕ.
2. Прозрачность коснется только это блока, все вложенные элементы будут непрозрачные. Что и является главным отличием от opacity.

Тень для текста text-shadow

Решение

text-shadow: 3px 3px 6px #000; // Saf3+, FF3.1+, O9.5+,Chrome 2+
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,direction=135,strength=3); // IE5.5+

Параметры теней для текстов text-shadow:

1. Первое значение (2px) — смещение тени по горизонтали. При положительном значении смещает тень вправо, при отрицательном – влево;
2. Второе значение (3px) — смещение тени по вертикали. При положительное значении смещает тень вниз, при отрицательном – вверх;
3. Третье значение (1px) — размытие тени. Параметр не обязателен и поддерживается не всеми браузерами (напрмиер Safari, свои стандарты).
4. Четвертое значение (#ddd) — цвет тени. Параметр не обязателен, по-умолчанию используется цвет текста.

Теперь разберем параметры тени для текста для ИЕ. Как видите ИЕ имеют поддержку с довольно ранних версий, аж с 5,5. Наверно можно сказать, что ИЕ все таки продвинутый браузер. И так разбираем

1. Первое  значение (#000000) - цвет тени
2. Второй параметр (direction=135) - угол наклона тени.
3. Третий параметр (strength=3) - сила тени, очень похоже на смещение. Размытие отсутствует

В связи с тем, что все ростут и тянутся, я постоянно вносить поправки в данный справочник по стандартам CSS3.

А тут можно глянуть пример использования спецификации CSS3.