Применение CSS. Часть 5: «Девятка» - уже пристойней, но всё ещё догоняет
9-я версия IE, вышедшая прошлой весной, ввела ряд возможностей, как обычно, ставших доступными в передовых браузерах ранее. К сожалению, пользователи WinXP апгрейдиться до него не могут.
Добавилась поддержка пространств имён (с помощью CSS3-инструкции @namespace и указания префикса в формате ns|E).
Правило @font-face было реализовано в Firefox 3.5 и Opera 10, а в IE фактически присутствовало ещё аж в 4-й версии 1997 г. (но только для формата EOT). Девятка же добавила поддержку WOFF и устанавливаемого TrueType.
Внедрены CSS3-селекторы :root, :not(), :empty, :first-of-type, :last-of-type и :only-of-type, :last-child и :only-child, :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :target, а также селекторы контролов (элементов форм) :enabled, :disabled и :checked.
Исправлен баг с игнорированием свойства letter-spacing для псевдоэлемента :first-letter (сам псевдоэлемент поддерживался и в 6-й версии). Кстати, для этого (и пока только для этого) псевдоэлемента девятка поддерживает введённую CSS3 для псевдоэлементов запись через два двоеточия, чтобы отличать их от псевдоклассов,- ::first-letter.
Добавились поддержка ключевого слова для цвета currentColor и записи цвета rgba(r, g, b, a), hsl(h, s, l), hsla(h, s, l, a). Формат HSL - это очень хорошо, это удобно для верстальщика, которому командуют, типа, «сделай чуть посветлее» или «чуть понасыщеннее». Конечно, при некотором опыте такое и с RGB проделываешь без большого затруднения, но… Увы и ах, Photoshop использует модель HSB (она же HSV), а это не то же самое, и различаются в них не только третья координата, но и понимание одинаково называемой «насыщенностью» второй.
А зачем нужен currentColor? Чтобы передать цвет в свойство, которое его не наследует. Например, background-color может таким образом получить цвет из свойства color. Ещё border - но он и так наследует цвет. Интереснее с двумя другими свойствами, которые упоминаются в связи с применением currentColor - outline и box-shadow (-moz-box-shadow, -webkit-box-shadow). Для outline цвет наследует только движок Webkit (GCh12/S5), остальные браузеры в соответствии с CSS 2.1 делают его чёрным по умолчанию, так что для них значение currentColor здесь уместно. Что касается -webkit-box-shadow, то Webkit требует прямого указания цвета, иначе не отрисовывает тень, так что тут значение currentColor пригодится уже ему. …Кстати, Firefox не так взаимно располагает обрамление и тень, как Opera и Webkit,- он рисует обрамление вокруг тени, а другие браузеры рисуют их в одном месте.
Для звуковых стилей добавлены из CSS3 единицы измерения углов deg, grad, rad и времени - ms и s.
Наконец-то ликвидированы баги в реализации свойства overflow (само оно поддерживалось давно), множественные, но, к счастью, не очень частые на практике.
Наконец-то реализовано свойство opacity, которое раньше приходилось изображать с помощью альфа-фильтра.
Реализованы CSS3-возможности работы с фонами: множественные слои, свойства background-clip и background-origin (управляют позиционированием и отображением фона относительно границ и внутренних отступов), background-size (масштабирование фона). В других браузерах они тоже появились не так давно - в Opera 10.5 и Firefox 4.0 (множественные слои - в Fx3.6).
Реализована полностью CSS3-рекомендация Media Queries (см. также «Адаптивный и мобильный дизайн с CSS3 Media Queries»): width и height; device-width, device-height и device-aspect-ratio; color, color-index и monochrome. Кроме того: ещё не реализованные в уэбкитах resolution и aspect-ratio, в уэбкитах и Opera - orientation, и в уэбкитах и Firefox - grid и scan. Кстати, с помощью библиотеки css3-mediaqueries.js от Ваутера ван дер Графа мы можем иметь медиа-куиэриез в IE начиная аж с 5-й версии и в Firefox с 1-й!
CSS3-спецификация CSS 2D Transforms Module Level 3 имеет уже экспериментальные реализации во всех браузерах: IE9 (а до того был Matrix Filter, Firefox 3.5, Webkit 525, Opera 10.5.