Селекторы

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

1. универсальный селектор: * (совместим, но не рекомендован к использованию);
2. селектор элемента: tagName;
3. селектор класса: .className;
4. селектор идентификатора ID: #elementId;
5. селектор потомка: selector selector;
6. дочерний селектор: selector > selector;
7. селектор множественного выбора: selector, selector;
8. селекторы псевдоклассов (link, visited, active, focus): selector:pseudoclass.

Как я уже ранее говорил, некоторые браузеры понимают определенные дополнительные стили в CSS 2.1. Сжатый список других селекторов, которые могут применяться в этих мобильных браузерах:

1. селектор атрибутов: selector[attribute];
2. селектор с условием атрибута: selector[attribute<operator>value].

   <operator> одним из далее перечисленных: эквивалентен (=), содержит одно из значений (~=), начинается с(^=), заканчивается ($=), содержит строку (*=), или начинается и продолжается дефисом (|=).

3. отрицание: selector:not(selector);
4. непосредственно перед: selector + selector;
5. предшественник: selector ~ selector;
6. псевдоклассы (after, before, root, nth-child(n), first-child, last-child, empty, и другие): selector:pseudoclass;

Некоторые CSS3 селекторы не работают на мобильных устройствах. Как все может быть сложно с мобильным веб-сайтом, правда? И если здесь так много сложностей, то мы должны подумать как все упростить.

Селекторы CSS3 должны использоваться только для некритичных базовых функций. Например, для тегов input мы можем использовать один стиль, и, если в устройстве есть соответствующая поддержка — другой стиль для разных input types. Для важных функций мы должны рассмотреть возможность использования class.

В таблице 7.3 приводится список браузеров, поддерживающих CSS3, а также их результаты в ACID 3 (по шкале от 0 до 100, где 100 — высший балл). Тест ACID — хорошо известный тест от Web Standards Project, в котором оценивается, насколько близка к стандарту реализация в браузере тех или иных моментов.

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

input {
	background-color: yellow;
	border: 1px solid gray;
}
/* The next style will only work in CSS3-compatible browsers */
input[type=button] {
	background-color: silver;
}

По теме

• Селекторы: общие сведения
• Селекторы псевдоэлементов
• Составные селекторы. Комбинаторы

Куда дальше

• следующая — CSS методы
• предыдущая — Куда вставлять CSS
• содержание