Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
6 г. назад

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

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

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

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

Решение:

.box { border-radius: 12px
}

Примечание:

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

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

Решение

.box { 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 координате. Полное описание найдете здесь.
  3. Префикс для старых бразуеров не нужны.

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

Решение

.box { background: -ms-linear-gradient(top, #4444440%,#999999 100%);
   background: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
   background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
   background: -o-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Opera */
   background: gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
}

Примечание

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

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

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

Решение

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

Примечание

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

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

Решение

.box { 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

.box { 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.

Комментарии

#john11.07.2010 17:12
Как сделать наклонный градиент в webkit, как здесь? emfire.ru/Ответить
#PaLyCH11.07.2010 17:14
FireBug тебе в помощь. Кстати весьма хороший инструмент для разработчикаОтветить
#PaLyCH11.07.2010 17:15
Там кстати два решенияОтветить
#danik.html20.11.2010 06:08
Для скругления в ie с успехом использую либо border-radius.htc, либо DD_Roundies.js(который к тому же фиксит png24 в iе6) . Бывает когда их невозможно применить. Сразу распишу косяки. .htc не позволяет скруглять резиновые блоки. Нередки проблемы с позиционированием фона скругленного блока - обычно решается position: relative. В ие8 пропадают фоновые изображения, тоесть скруглять можно только блоки залитые цветом а не картиками. это очень печально. Чаще всего решаю это переводом в режим эмуляции ие7. На первый взгляд проблем много, но применять можно в 80% случаев.Ответить
#PaLyCH20.11.2010 09:54
НУ вот, смысла в твоем комменте нет, если не работает. Я делаю просто, фиг с ним с ИЕ, пусть везде будет красиво, а у них будут костылиОтветить
#danik.html20.11.2010 13:55
Ну если смысла нет - удали камент. Только не пойму, почему "не работает" ? я сказал что не всегда удается применить. В простых, и довольно частых случаях гораздо проще прописать в ie.css чета типа .content{behavior: url(border-radius.htc)}, чем городить кучу тэгов и мучаться с нарезкой уголков. Или мне так одному кажется?Ответить
#Гость03.03.2011 07:01
background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome

Это задается цвет, никакой прозрачности эти строки не придадутОтветить
#Иван14.10.2011 07:22
ну в rgba(x,x,x,Y), Y-это и есть прозрачностьОтветить
#moolkin23.10.2011 19:53
а вы не пробовали вот этот скрипт: pie.htc - отлично дорабатывает функциональность IE до CSS3 (точно работает для IE7-8) - скругления, градиенты, тени...
css3pie.com/Ответить
#PaLyCH23.10.2011 19:58
Вообще уже давно это использую, но проектах, где много элементов, ИЕ начинает виснуть. Так что не лучший костыльОтветить

Добавить комментарий

Наверх