Кроссбраузерная поддержка и справочник CSS3
Давно что-то не писал в свой блог. Как-то увлекся работой. За долгое время я уже набил руку по верстке, так что могу гвозди забивать. Изучил поведение аттрибутов, псеводоклассов (божественная штука) и конечно плотно изучаю спецификации. И конечно дело дошло до CSS3. Куда же без этого дела?
Возможностей море: от скруглений до трансформаций и анимации. Последние два касаться пока не буду. Займемся пока что только скруглениями, тенями, прозрачностями и градиентами. Данные инструменты очень полезны, так как позволяют сэкономить на количестве запросов на сервер за картинками. Так что, решил для себя набросать небольшой справочник CSS3.
Скругленные углы
Решение:
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
Примечание:
- К сожалению для браузеров Internet Explorer младше 9 версии решения нет
- Можно задавать радиус отдельно для каждого угла т.е.: 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+ */
Примечание
- Тени работают практически во всех браузерах.
- Удивил в этот раз 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 */
Примечание
- Как видно из решения, работает везде кроме Opera. В каждой бочке меда есть ложка дегтя.
- Работает и в ИЕ. Но предупреждаю, чрезмерное использование фильтров приводит к зависанию браузера. Особенности браузера
Прозрачность в цвете
Самое любимый элемент из CSS3. С помощью него можно сделать оформление в виде Windows 7.
Решение
background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome
Примечание
- к сожалению снова проигрывает ИЕ.
- Прозрачность коснется только это блока, все вложенные элементы будут непрозрачные. Что и является главным отличием от 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:
- Первое значение (2px) — смещение тени по горизонтали. При положительном значении смещает тень вправо, при отрицательном – влево;
- Второе значение (3px) — смещение тени по вертикали. При положительное значении смещает тень вниз, при отрицательном – вверх;
- Третье значение (1px) — размытие тени. Параметр не обязателен и поддерживается не всеми браузерами (напрмиер Safari, свои стандарты).
- Четвертое значение (#ddd) — цвет тени. Параметр не обязателен, по-умолчанию используется цвет текста.
Теперь разберем параметры тени для текста для ИЕ. Как видите ИЕ имеют поддержку с довольно ранних версий, аж с 5,5. Наверно можно сказать, что ИЕ все таки продвинутый браузер. И так разбираем
- Первое значение (#000000) - цвет тени
- Второй параметр (direction=135) - угол наклона тени.
- Третий параметр (strength=3) - сила тени, очень похоже на смещение. Размытие отсутствует
Поворот текста с помощью css3
.class {
-webkit-transform: rotate(180deg); /* для safari и chrome браузеров */
-moz-transform: rotate(180deg); /* для FF */
-o-transform: rotate(180deg); /* для Opera */
transform: rotate(180deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* для ИЕ 6-8 */
}
Значение поворота может быть любим: 179deg или -54deg. Положительное значение поворачивает текст по часовой стрелке и соответственно отрицательное против.
Поворот текста работает везде, но как всегда в ИЕ работает по другому. Где rotation:
- 1 – поворот на 90 градусов
- 2 – поворот на 180 градусов
- 3 – поворот на 270 градусов
- 4 – поворот на 360 градусов
Рендеринг повернуто текста в основном терпим. В Firefox просто ужасно выглядит текст.
Еще один вариант поворота текста в IE
Для IE можно применять свойство writing-mode. Возможные значения
- lr-tb – Значение по умолчанию. Слева направо
- rl-tb – Справа налево
- tb-rl – Сверху вниз. В правом верхнем углу
- bt-rl – Сверху вниз. В правом нижнем углу
- tb-lr – Это значение работает только в IE8+, нужно использовать с префиксом -ms-writing-mode. Сверху вниз, в левом верхнем угл
- bt-lr – Сверху вниз. В левом нижнем углу
- lr-bt – Снизу вверх. Текст слева направо
- rl-bt – Снизу вверх. текст справа налево
p {
writing-mode: tb-rl;
}
Примечание.
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl.
Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.
В связи с тем, что все ростут и тянутся, я постоянно вносить поправки в данный справочник по стандартам CSS3.
А тут можно глянуть пример использования спецификации CSS3.
Комментарии
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome
Это задается цвет, никакой прозрачности эти строки не придадут Ответить
css3pie.com/ Ответить