Записки под рукой

«Пищит, но лезет …», именно так можно охарактеризовать ситуацию с CSS3, происходящую сейчас в вебмастерском мире. Google полностью отказывается от поддержки IE, интернет все чаще пестрит статьями о HTML5 с его SVG и скорой смерти Flash, в моду входит забытый font-face, со своей возможностью отображать на сайтах какие-угодно шрифты (помнится еще в эпоху недоразвитой поддержки UTF-8, он меня очень выручал), в общем прогресс, как-говорится, на лице … и мне это нравится.

Нравится минимализм и однозначность, одним словом – простота решения. Вот поэтому я влюбился в PNG формат, когда подошло время и появилось достаточно правильное решение по его использованию в любом браузере и поэтому я сейчас пользуюсь решениями выполненными в этом-же духе: одно из них, это поддержка закругленных углов (border-radius) и второе – отрисовка тени у блокового элемента (box-shadow), правда и здесь не обходится без ложечки дегтя, ну что-ж, не без этого.

VML спешит на помощь!

Думаю никто не удивится, если речь будет идти только о его величестве IE6, а другие браузеры как-то не будут упомянуты, – такова «заслуга» Интернет Эксплорера. Как и в предыдущем решении с PNG форматом, для обеспечения работоспособности border-radius и box-shadow в IE6 и далее, будет использоваться язык Microsoft VML.

На этот раз в роли укротителя Internet Explorer’а выступает Remiz Rahnas, со своими проектами на Google Code: curved-corner и box-shadow.

Что не работает

Начнем сразу задом на перед, так думаю полезнее, лучше сразу знать недостатки:

• В Oper’е эта замечательная штука не работает, по крайней мере для Opera Presto 2.2, но обещали, и очень скоро, «подвезти» Presto 2.3, в которой все будет хорошо, ну а пока, кому не терпится, можно пользоваться вот этим решением: New development techniques using Opera Kestrel (9.5)
  Обновлено: в начале марта подвезли Presto/2.5.22 Version/10.50, в котором все работает!
• В закругленных углах есть проблемы с z позиционированием и радиус закругления для всех углов может быть только одним
• С тенями те-же проблемы с z индексом и цвет тени может быть только черным

Как это работает

Скачиваем с вышеуказанных URI (ага, я теперь знаю, как это называется), .htc файлы и к необходимым элементам прицепляем необходимый стиль:

Для border-radius:

	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	behavior: url(border-radius.htc);

Для box-shadow:

	-moz-box-shadow: 10px 10px 20px #000;
	-webkit-box-shadow: 10px 10px 20px #000;
	box-shadow: 10px 10px 20px #000;
	behavior: url(ie-css3.htc);

Это все. Ждем полной победы CSS3 и HTML5.