CSS-хаки
Другие статьи по теме:
В большинстве случаев для кроссбраузерной верстки необходимы лишь небольшие изменения и дополнения к таблице стилей. Они могут быть внесены с помощью специальных CSS-селекторов, называемых хаками.
Ниже приведены конформные CSS-хаки и пример HTML-документа с их применением.
Ниже приведены конформные CSS-хаки и пример HTML-документа с их применением.
Атрибут-селектор:
p[id] {
border: 1px solid green;
}
p[id]#attribut {
color: lime;
}
Селектирует элемент (в данном случае
), который указывает на любое значение id-атрибута. Приведенная в примере структура селектирует все элементы border: 1px solid green;
}
p[id]#attribut {
color: lime;
}
Селектирует элемент (в данном случае
, содержащие id. Игнорируется IE, включая 6 версию.
Дополнительное задание #ID, в принцире, избыточно. Однако, позволяет исключить стили для IE версий 6 и ниже, а также Netscape 4.
Дочерний селектор:
html>body #ИМЯ {
свойство:значение;
}
Отбирает элементы с ID "ИМЯ", которые располагаются внутри тега body, причем body является дочерним потомком html. Хотя body всегда является дочерним потомком html, этот селектор был применен специально, чтобы исключить влияние данного стиля в браузерах IE 6 и ниже, а также Netscape 4.
свойство:значение;
}
Отбирает элементы с ID "ИМЯ", которые располагаются внутри тега body, причем body является дочерним потомком html. Хотя body всегда является дочерним потомком html, этот селектор был применен специально, чтобы исключить влияние данного стиля в браузерах IE 6 и ниже, а также Netscape 4.
Звездочка-HTML-хак:
* html #ID {
свойство:значение;
}
Универсальный селектор * обозначает любой элемент. В данном хаке он бессмысленен с точки зрения конформного CSS, т.к. html-элемент не имеет родительского. Однако все ранние IE-версии, включая 6, принимают стиль в данной нотации. Такой хак исключает стилевое свойство для всех браузеров, включая Netscape 4, оставляя его выполним только для ранних IE-версий вплоть до 6.
свойство:значение;
}
Универсальный селектор * обозначает любой элемент. В данном хаке он бессмысленен с точки зрения конформного CSS, т.к. html-элемент не имеет родительского. Однако все ранние IE-версии, включая 6, принимают стиль в данной нотации. Такой хак исключает стилевое свойство для всех браузеров, включая Netscape 4, оставляя его выполним только для ранних IE-версий вплоть до 6.
Звездочка-плюс-HTML-хак:
*:first-child+html #ID {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 7. Его более простая интерпретация *+html принимается также в Opera.
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 7. Его более простая интерпретация *+html принимается также в Opera.
Селектор-комментарий:
#ID/* */ {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 4 и 5 для Windows, а также для Mac.
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 4 и 5 для Windows, а также для Mac.
Медиа-хак:
@media all {
#ID {
свойство:значение;
}
}
Данный хак открывает записанное в нем стилевое свойство только для IE 4 для Windows и для всех Mac-версий, а также для Netscape 4.
#ID {
свойство:значение;
}
}
Данный хак открывает записанное в нем стилевое свойство только для IE 4 для Windows и для всех Mac-версий, а также для Netscape 4.
Селектор ID:
p#ИМЯ {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство для всех браузеров кроме Netscape 4.
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство для всех браузеров кроме Netscape 4.
Tan-хак (модифицированный упрощенный хак блочной модели):
* html #id {
с\войство:значение;
}
Хак звездочка-HTML воздействует на все ранние версии IE, включая 6, а наклонная черта \ в названии стилевого свойства исключает из этой области влияния все браузеры кроме IE 6ю Так достигается воздействие только на IE6. Обратите внимание, что косая черта в названии свойства не должна располагаться непосредственно перед буквами a - f, т.к. это будет интерпретироваться как шестнадцатиричное число.
с\войство:значение;
}
Хак звездочка-HTML воздействует на все ранние версии IE, включая 6, а наклонная черта \ в названии стилевого свойства исключает из этой области влияния все браузеры кроме IE 6ю Так достигается воздействие только на IE6. Обратите внимание, что косая черта в названии свойства не должна располагаться непосредственно перед буквами a - f, т.к. это будет интерпретироваться как шестнадцатиричное число.
Tantek-хак:
селектор {
свойство:значение; /* запись для IE 5.x */
voice-family:"\"}\""; /* с этих пор игнорирует IE 5.x последующие записи */
voice-family:inherit;
свойство:значение; /* определение свойств для остальных браузеров */
}
Этот хак влияет только на Internet Explorer 5.x. Применяйте Tantek-хак только в CSS-таблицах, скрытых от Netscape 4, т.к. в нем такая запись вызывает существенную ошибку.
свойство:значение; /* запись для IE 5.x */
voice-family:"\"}\""; /* с этих пор игнорирует IE 5.x последующие записи */
voice-family:inherit;
свойство:значение; /* определение свойств для остальных браузеров */
}
Этот хак влияет только на Internet Explorer 5.x. Применяйте Tantek-хак только в CSS-таблицах, скрытых от Netscape 4, т.к. в нем такая запись вызывает существенную ошибку.
Пример (посмотреть):
CSS-хаки
Следующие примеры будут отображаться конформно зеленым шрифтом в рамках, в противном случае красным шрифтом или без рамки.
Атрибут-селектор: IE 4.х, 5.х, 6.х игнорирует селектор [id], [id]#attribut .
Дочерний селектор: IE 4.х, 5.х, 6.х игнорирует дочерний селектор типа BODY > P { line-height: 1.3 }.
Звездочка-HTML: ранние IE-версии, включая 6, принимают стили, записанные с хаком * html.
Звездочка-плюс-HTML: Internet Explorer 7 принимает стиль, записанный в хаке *:first-child+html.
Cелектор-комментарий: IE 5 версии и ниже для Windows, а также для Mac принимает стиль, записанный в хаке #ID /* */.
Медиа-хак: IE 4 для Windows и для Mac, а также Netscape 4 принимает стиль, записанный в хаке @media all.
Селектор ID: данный конформный селектор вида p#ИМЯ не читает только Netscape 4.
Tan-хак: влияет только на IE 6. Комбинация звездочка-HTML- и Tantek-хака действует толька на IE 6.
Tantek-хак: предназначен для IE 5 версии, в Netscape 4 приводит к ошибке чтения всей таблицы стилей!
Это важно:
Применяйте хаки только по необходимости. Наиболее валидным вариантом корректировки разночтения таблиц стилей браузерами является применение условных комментариев. Остальные же способы, в т.ч. и хаки могут быть в последующих версиях браузеров ошибочно интерпретированы.
Комментариев нет:
Отправить комментарий