Дополнения приветствуются, т.к. некоторые вещи пришлось домысливать почти без опоры на хоть какое либо объяснение.
Заранее прошу извинить за обилие ссылок — честно приводил все пруфлинки, к этим сайтам сам никакого отношения ни имею.
Под селектором прошу понимать отдельный тэг, отдельный класс или идентификатор.
«источник» — откуда брал инфу
«статус» — насколько можно доверять объяснению
«принцип работы» — на основе чего данный хак разные браузеры понимают по-разному.
html*селектор {...}
Предположительно фича Safari версии 3.2 — она обрабатывает данную конструкцию как селектор * селектор.
Например, возьмем кусок html-кода
<p> <span><b>текст</b></span> </p>
Так вот CSS правило
p*b {...} работает только в Safari 3.2, работает так же как p * b {...}источник: эксперимент
статус: гипотеза
принцип работы: баг
@-moz-document url-prefix(){
селектор {...}
}
Правило
@-moz-document позволяет задавать стили в зависимости от адреса текущего документа;url-prefix() — задает в скобках строку, с которой адрес может начинаться, пустая строка = любой адрес,('/') — не работает, что логично. Затем открывается блок {...} и внутри него можно написать любую CSS конструкцию, которая будет обрабатываться если сработает описанное условие.Для справки: так же можно задать адрес полностью — url(), домен — domain().
источник: developer.mozilla.org
статус: инфа 100%
принцип работы: фича
x:-moz-any-link,селектор{...}
Объяснений нет, очевидно фича движка FF. Интересно то, что работает даже так
y:-moz-any-link,селектор{...}
и даже так
-moz-any-link,селектор{...}
источник: — статус: работает и все тут
принцип работы: фича
x:-moz-any-link,x:default,селектор {...}
Тоже без объяснений, псевдо-класса default в спецификации нет — он чисто FF, так что правило можно отнести к особенностям FF > 3.0.
источник: — статус: работает и все тут
принцип работы: фича
noindex:-o-prefocus,селектор {...}
Правила начинающиеся с -o- это фичи Оперы. Вместо noindex может стоять любой тэг — это неважно.
источник: — статус: работает и все тут
принцип работы: фича
html:root селектор {...}
Псевдо-класс :root выбирает элемент, являющийся корневым для всего документа. В HTML4 (прямо указано в стандарте) это всегда тэг html. Следовательно, данное правило будет работать во всех браузерах, поддерживающих данный псевдо-класс.
Можно также писать
*:root селектор {...}
источник: http://www.w3.org/
статус: информация точная
принцип работы: неполная поддержка CSS3
body:first-of-type селектор {...}
Псевдо-класс :first-of-type выбирает первый элемента данного типа среди всех детей того же типа заданного родителя.
Кроме данного псевдо-класса есть еще куча, приведу их для справки:
:nth-child(n) — n-й данного типа потомок
:nth-last-child(n) — n-й данного типа потомок с конца
:nth-of-type(n) — n-й элемент данного типа в документе
:nth-last-of-type(n) — n-й элемент данного типа в документе
:first-child — первый потомок
:last-child — последний потомок
:first-of-type — первый элемент данного типа
:last-of-type — последний элемент данного типа
:only-child — единственный потомок своих родителей данного типа
:only-of-type — элемент, который является единственным потомком своих родителей, того же типа
Наглядно объяснено например здесь http://goldblog.com.ua/2009/09/selektor-css/
источник: http://www.w3.org/
статус: информация точная
принцип работы: неполная поддержка CSS3
media all and (min-width:0){
селектор {...}
}
Как известно (http://www.w3.org/TR/CSS2/media.html#x0) правило media ограничивает CSS стили в зависимости от устройства, на котором воспроизводится документ. Правило можно задавать при подключении .css файла и внутри самого описания стилей.
По спецификации есть следующие медиа-типы:
all — подразумеваются все устройства
braille — устройства воспроизводящие контент шрифтом Брайля.
embossed — для принтеров шрифта Брайля
handheld — мобильные устройства с малым размером экрана и пропускной способностью канала
print — все что печатает, рисует etc.
projection — забито для проекторов и подобной техники
screen — для цветных мониторов в графическом режиме
speech — для устройств, выводящих контент путем синтеза речи
tty — для мониторов в текстовом режиме
tv — забито для систем воспроизводящих контент по-телевизионному: низкое разрешение, наличие звукового тракта, отсутствие или слабая поддержка скролла.
Названия медиа-типов должны быть чувствительны к регистру.
Первая часть правила — понятна. Что такое «and» я не нашел ни в гугле, ни в стандартах.
Исходя из того что конструкция вида «div and (...)» не работает, можно заключить что это специфичный оператор медиа-типа.
От чего он считается, т.к. у кого должен быть min-width=0 я не понял, однако пустыми скобки оставлять нельзя — верстка «разъезжается», т.е. () — это неверная конструкция. Кроме того работает min-height, а просто wight и height не пашут. Если кто пояснит — буду признателен.
Кароче, данное правило работает если браузер понимает что такое media=all и поддерживает присутствующую там логическую конструкцию. Скорее всего без «and (...)» данный стиль поймут все браузеры моложе наверно чем с 95-го года.
источник: http://www.w3.org/
источник: эксперимент
статус: информация неполная
принцип работы: фича
html:not([lang*='']):not(:only-child) селектор {...}
Псевдо-класс :not(), позволяет исключить элементы, которые совпадают с аргументом селектора, причем
в not должен идти простой селектор, «относящийся» к главному селектору.
Атрибут lang — возвращает язык документа. Язык можно задавать любому тэгу путем присвоения значения атрибуту, например:
<HTML lang="en">
Оператор сравнения *= выбирает элементы по атрибуту, в котором содержится заданное значение.
Следовательно,
html:not([lang*='']) выбирает только те элементы документа, у которых язык не пустое значение.not(:only-child) выбирает элементы которые не являются единственными потомками html — т.к. минимальная валидная страница это <html> <head>...</head> <body> <тэг>текст</тэг> </body> </html>
то
<тэг> мы отфильтруем в любом случае, даже если он в документе один.Как это все работает. Браузер, если может, выбирает все элементы, имеющие язык (у бразуера есть язык отображения по умолчанию, если язык не задан ни в теле документа, ни в заголовке HTTP «Content-Language»), затем, опять же, если может, все элементы как я написал выше. Если что то не поддерживается — фэйл, стиль не применится.
источник: http://www.w3.org/
источник: http://www.w3.org/TR/xhtml1/#C_7
статус: информация достаточно надежная
принцип работы: неполная поддержка CSS3
not all and (-webkit-min-device-pixel-ratio:0) {
селектор {...}
}
Конструкция не работает.
Что сдесь не так? Во-первых только опера поддерживает конструкцию вида "...not all and..." причем в виде " media not all and...". Во-вторых, свойство "-webkit-min-device-pixel-ratio" фича движка WebKit, поддержку которой за каким то впилили в Opera 9.5.
Поэтому правильная конструкция такова
media not all and (-webkit-min-device-pixel-ratio:0) селектор {...}
источник: http://www.internet-technologies.ru/articles/article_1410.html
статус: информация достаточно надежная
*|html[xmlns*=''] селектор {...}
Селектор *| работает с пространством имен. *|html означает элемент, имеющий имя html в любом пространстве имен. Этот элемент еще фильтруется по атрибуту xmlns, который задает пространство имен документа, в данном случае очевидно — любое, т.к. xmlns*=''.
Есть в обзоре подобный хак
html[xmlns*=""] body:last-child селектор {...}
FF его понимает, а конструкцию вида html[xmlns*=''] селектор {...} — нет.
источник: http://www.w3.org/
статус: информация достаточно надежная
принцип работы: неполная поддержка CSS3
body:last-child:not(:root:root) селектор {...}
:root:root должен выбрать элемент html. Указание внутри not() родительского элемента по отношению к текущему — не по стандарту. Кроме того не все браузеры могу обработать правило
:root:root, т.е. выбрать корневого элемента для корневого, тем более вообще говоря это тоже не правильно.Нарушение стандарта, очевидно, дает различие в поддержке для разных браузеров.
источник: http://www.w3.org/
статус: гипотеза
принцип работы: сознательная ошибка в правиле, неполная поддержка CSS3
html:not([lang*=""]) селектор {...} и html:not([lang]) селектор {...}
Работают одинаково — очевидно выражение
[lang] без условий эквивалентно «любой не пустой»источник: — статус: гипотеза
принцип работы: неполная поддержка CSS3
html:not(:nth-child(1)) селектор {...}
Ввиду того что не все браузеры это понимают можно предпложить о том, что не все версии поддерживают выборку потомков по их номеру (индексу).
источник: — статус: гипотеза
принцип работы: неполная поддержка CSS3
html:not[lang*=''] селектор {...}
Данный хак не работает из за синтаксической ошибки. Условие псевдо-класса not должно быть в ().
источник: http://www.w3.org/
статус: достоверно

