Page 180 - Сила CSS3 Освой новейший стандарт

180 • Глава 5. Повышение эффективности за счет псевдоклассов

• при прокручивании списка записей в блоге или микроблоге Twitter — отображение
старых записей более мелким или светлым шрифтом;
• оформление элементов на странице с использованием псевдослучайных атрибутов
(например, у каждого третьего поля один фоновый цвет, а у каждого четвертого —
другой и т. д.);
• принудительный разрыв строки или изменение размера поля, например возле каждого
четвертого эскиза изображения, — чтобы создать галерею изображений с несколькими
строками эскизов из одного-единственного списка HTML (см. http://mondaybynoon.
com/2010/03/18/css3-center-thumbnail-galleries);
• особая стилизация отдельных столбцов таблицы (например, выравнивание числового
содержимого третьего столбца по правой стороне);
• изменение ширины соседних элементов в зависимости от их количества, для того
чтобы всегда равномерно заполнять имеющееся пространство (см. http://andr3.net/
blog/post/142).

Обходные пути для IE
Браузер IE версии 8 и более ранних не поддерживает :nth-child(), зато в IE 9 этот
псевдокласс поддерживается. В данном случае чередующиеся цвета — это небольшое
стилистическое усовершенствование, отсутствие которого нисколько не испортит
впечатление от страницы у пользователей IE 8 и более ранних версий. IE попросту
игнорирует новое правило и сохраняет единый фоновый цвет во всех облачках с
текстом. Никакие составляющие страницы не выглядят сломанными, неполными
или некрасивыми.
Тем не менее если вы все же решите добавить обходной путь для IE 8 и более ранних
версий, вам понадобится помощь JavaScript. Что касается «раскраски под зебру»,
существует масса разнообразных сценариев, добавляющих чередующиеся классы.
На каком остановиться — зависит от конкретного проекта, поэтому просто поищи-
те доступные варианты по запросу «zebra stripe JavaScript» или «zebra stripe PHP».

В качестве альтернативного варианта можно применить сценарий, добавляющий в IE
поддержку сложных селекторов, и решить поставленную задачу — любую, необяза-
тельно чередование цветов — с помощью этих селекторов. Один из подобных сцена-
риев мы применили в предыдущей главе, это IE7.js автора Dean Edwards (http://code.
google.com/p/ie7-js). Обратите внимание, что для того, чтобы получить возможность
использовать псевдоклассы, потребуется обновить сценарий до версии IE9.js. Версия
IE7.js заставляет работать только селекторы атрибутов и несколько других селекторов.
Еще один превосходный сценарий, добавляющий поддержку псевдоклассов, — это
Selectivizr (http://selectivizr.com); однако, как я уже упоминала в главе 4, он требует
наличия одной из нескольких библиотек JavaScript, таких как jQuery, MooTools или
DOMAssistant. Тем не менее оба этих сценария заставляют IE распознавать селекторы
в вашем коде CSS и отображать определяемые с помощью них стили.

www.trk.kg