[Temp] CSS3 селекторы

CSS3 селекторы позволяют создавать сложный дизайн веб-страниц гораздо проще, нежели в CSS и с меньшим количеством скриптов, чем раньше. Как мы объявляли еще в ноябре, а затем в марте и в мае, после выхода сборки IE9 Platform Preview, IE9 включает в себя полную поддержку CSS3 селекторов. Это функция, которую рьяно просили веб-разработчики, и мы рады, что выполнили эту задачу.

Наша цель заключается в предоставлении новых селекторов для ваших веб-страниц таким образом, чтобы они позволяли одинаковую разметку во всех браузерах. Приятный побочный эффект от этой работы -это более лучшие результаты в тестах, измеряющих поддержку селекторов. IE9 в настоящее время показывает 100% результат теста на css3.info, 100% в W3C CSS3 Selectors Test Suite, а также в Acid3 тестах показывает 34 из 37 и 39 из 44.

Nth-child и другие структурные псевдо-классы

Селекторы Nth-child и других структурных псевдо-классов позволяют стилистическим элементам основываться на структурной информации о том, как они вписываются в дерево DOM, не требуя присвоении элементов в любой форме. Селектор Nth-child особенно полезен, если вы хотите сохранить стиль, даже если структура вашей страницы измененится.

Один из лучших вариантов использования селектора Nth-child - это чередовать цвет фона строк таблицы, например так:

Вот таблица

где цвет фона

каждой строки

чередуется

от голубого

до

синего

...

Но можно добиться такого же результата и без использования Nth-child селекторов, самый распространенный метод заключается в отметке каждой строки в разметке, а затем присвоении стиля для каждого класса строк:

<table>

   <tr class="odd"> <td>row1</td> <td></td> </tr>

   <tr class="even"> <td>row2</td> <td></td> </tr>

   <tr class="odd"> <td>row3</td> <td></td> </tr>

    …

</table>

Тогда в CSS у вас есть:

.odd {background-color:lightblue;}

.even {background-color:blue;}

Эта разметка придаст таблице желаемый формат, однако, это решение не сработает, если таблица динамическая и интерактивная, то есть строки могут быть добавлены или удалены. Если вы вставляете строку в верхнюю части таблицы, вы должны использовать сценарий изменения имени класса каждой строки в таблице.

Используя Nth-child селектор, вам не нужно размечать строки. Таблица стилей просто содержит:

tr:nth-child(odd) { background-color:lightblue;}

tr:nth-child(even) {background-color:blue;}

Теперь, если вы добавляете или удаляете строки из таблицы, стиль остается правильным без какого-либо сценария.

Как вы можете видеть выше, Nth-child селекторы принимают ключевые слова ‘even’ и ‘odd’. Эти селекторы также принимают аргумент формулы an+b. 'a' и 'b' значения - это константы, а значения 'N' увеличивается, начиная с 0 до такого значения, когда нет больше элементов, которые можно выбрать. Например, tr:nth-child(2n+1) будет оцениваться следующим образом:

n=0, 2n+1 = 1, выбирает tr элемент, т.е. первого ребенка

n=1, 2n+1 = 3, выбирает tr элемент, т.е. третьего ребенка

n=2, 2n+1 = 5, выбирает tr элемент, т.е. пятого ребенка

…

а
n=2, 2n+1 = 5, выбирает tr элемент, т.е. пятого ребенка
…[/code]

Вы можете заметить, что 2n +1 эквивалентно ‘odd’ и ‘2n’ эквивалентно ‘даже’. Для простоты, если 'а' равно 1, вы можете опустить 'а'. 'n+3' выбирает каждого ребенка, начиная с третьего ребенка. Если ‘a’ равно 0, вы можете пропустить ‘an’. ‘0n+6’ == ‘6’ выберет только шестого ребенка. Если ‘b’ равно 0, вы можете опустить ‘b’. ‘3n’ выберет каждого третьего ребенка.


Элемент пользовательского интерфейса состояния псевдо-классов

Элемент пользовательского интерфейса состояния псевдо-классов позволяет выбирать элементы пользовательского интерфейса на основе их текущего состояния. Вы можете выбрать элементы, которые включены или выключены, проверены, и в неопределенном состоянии. Это полезно, например, если вы хотите, чтобы напомнить пользователям принять пользовательское соглашение перед загрузкой пробной версии. Если флажок для вашего лицензионного соглашения не установлен, можно добавить текст, напоминающий клиентам о флажке, и этот текст может быть скрыт, когда поле уже проверено. Не так сложно включить этот сценарий скриптом, но с элементом интерфейса псевдо-класса не нужны сложности в сценарии и страница запустится быстрее.

Отрицание псевдо-класса

Отрицание псевдо-класса позволяет отрицать простые селекторы. *:not(div) выбирает все элементы, кроме элементов Div, p:not(.explanation) выбирает все пункты не из класса ‘explanation’. Отрицание псевдо-класса псевдо не может принять себя в качестве аргумента, так что двойные отрицания, как :not(:not()) не являются действительными и псевдо-элементы также не принимаются в качестве аргументов к селектору ‘not’.

::selection

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



Используя псевдо-элемент ::selection можно настроить выбор цвета текста и фона, чтобы соответствовать тематике вашего сайта. Если вы хотите, чтобы выделенный текст был на оранжевом фоне, а сам текст - черного цвета, как например на сайте http://www.zeldman.com, вы можете применить следующий селектор:
[code]::selection {
background-color:orange;
color:black;
}[/code]


Хотя выбор псевдо-элемента это интересный сценарий, делающий произвольный стиль, тем не менее селектор может вызвать некоторые нежелательные побочные эффекты. Например, если селектор псевдо-элемента изменяет шрифта или размера шрифта, который будет изменять размер текста, а пользователь выбирает его, это создаст путаницу. По этой причине, IE поддерживает лишь цвет фона и цвет текста при выборе псевдо-элемента. Это равносильно тому, как другие браузеры поддерживают этот селектор.

Помимо ограничения свойств, которые могут быть установлены посредством псевдо-класса ::selection, IE9 определяет несколько значений по умолчанию в том случае, если веб-разработчик устанавливает только цвет фона или цвет текста, но не оба:

- Если установлен только цвет текста, то выбор цвета фона ::selection по умолчанию прозрачный
- Если установлен только цвет фона, то цвет текста останется такой же, как и до селектора
- Если выбраны не поддерживаемые CSS свойства в ::selection, то применяется стиль IE по умолчанию.

Внимательные читатели могли заметить, что селектор псевдо-элемент не входит в последнюю версию проекта CSS3 Selectors. Мы реализовали ::selection, чтобы позволить разработчикам писать одинаковую разметку, которую мы видим в использовании в Интернете и которая поддерживается в других браузерах.

CSS3 селекторы привносят много энергии в ваши таблицы стилей. Мы хотели бы услышать об интересных способах использования этих селекторов на ваших сайтах и, конечно, если у вас возникнут какие-либо вопросы или вы заметили ошибки, дайте нам знать.

Шэрон Ньюмэн (Sharon Newman), программный менеджер.



Источник: http://blogs.msdn.com/b/ie/archive/2010/05/13/the-css-corner-css3-selectors.aspx
Перевод: houseboy