Pull to refresh

Анализ хаков — 2

Reading time6 min
Views834
Понимая отрывочность сведений в предыдущем посте, решил нарыть сколько смогу инфы на представленные мной хаки.
Дополнения приветствуются, т.к. некоторые вещи пришлось домысливать почти без опоры на хоть какое либо объяснение.
Заранее прошу извинить за обилие ссылок — честно приводил все пруфлинки, к этим сайтам сам никакого отношения ни имею.

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

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/
статус: достоверно
Tags:
Hubs:
Total votes 13: ↑10 and ↓3+7
Comments2

Articles