Селекторы

Автор: Анна Лысак и Татьяна Головко Дата публикации: 07.07.2011

Классические селекторы 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, в котором оценивается, насколько близка к стандарту реализация в браузере тех или иных моментов.

Табл. 7.3. Таблица поддержки CSS3 селекторов
Браузер/ Платформа Поддержка CSS3 селекторов Результаты ACID 3
Safari Да 100%
браузер Android Да 93%
Symbian/S60 Частично в 5-м выпуске: проблемы с селекторами атрибутов и дочерним селектором
Слабая поддержка до 5-го выпуска
47% (5-й выпуск)
Nokia Series 40 Нет 40% (6-й выпуск)
Полный провал предыдущих
webOS Частично 92% в webOS 1.4
Несовместимый с тестом до версии 1.2
BlackBerry Нет
NetFront Нет
Openwave (Myriad) Нет
Internet Explorer Нет
Motorola Internet Browser Нет
Opera Mobile Да 99%
Opera Mini Частично в 5.0 98%
Firefox on Maemo Да 94%

Если какие-нибудь атрибуты или селекторы в браузере поддерживаются только частично, то это значит, что действие в итоге не будет закончено. Например, браузер не может принять все возможные значения или же он может осуществить правильный рендеринг селектора в исходном документе, но уже не способен применить стиль если мы динамически изменяем 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;
}

По теме

Куда дальше