CSS-хаки

Другие статьи по теме:

В большинстве случаев для кроссбраузерной верстки необходимы лишь небольшие изменения и дополнения к таблице стилей. Они могут быть внесены с помощью специальных CSS-селекторов, называемых хаками.
Ниже приведены конформные CSS-хаки и пример HTML-документа с их применением.

Атрибут-селектор:

p[id] {
border: 1px solid green;
}
p[id]#attribut {
color: lime;
}

Селектирует элемент (в данном случае ), который указывает на любое значение id-атрибута. Приведенная в примере структура селектирует все элементы , содержащие id. Игнорируется IE, включая 6 версию.
Дополнительное задание #ID, в принцире, избыточно. Однако, позволяет исключить стили для IE версий 6 и ниже, а также Netscape 4.

Дочерний селектор:

html>body #ИМЯ {
свойство:значение;
}
Отбирает элементы с ID "ИМЯ", которые располагаются внутри тега body, причем body является дочерним потомком html. Хотя body всегда является дочерним потомком html, этот селектор был применен специально, чтобы исключить влияние данного стиля в браузерах IE 6 и ниже, а также Netscape 4.

Звездочка-HTML-хак:

* html #ID {
свойство:значение;
}
Универсальный селектор * обозначает любой элемент. В данном хаке он бессмысленен с точки зрения конформного CSS, т.к. html-элемент не имеет родительского. Однако все ранние IE-версии, включая 6, принимают стиль в данной нотации. Такой хак исключает стилевое свойство для всех браузеров, включая Netscape 4, оставляя его выполним только для ранних IE-версий вплоть до 6.

Звездочка-плюс-HTML-хак:

*:first-child+html #ID {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 7. Его более простая интерпретация *+html принимается также в Opera.

Селектор-комментарий:

#ID/* */ {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство только для Internet Explorer 4 и 5 для Windows, а также для Mac.

Медиа-хак:

@media all {
    #ID {
      свойство:значение;
      }
}
Данный хак открывает записанное в нем стилевое свойство только для IE 4 для Windows и для всех Mac-версий, а также для Netscape 4.

Селектор ID:

p#ИМЯ {
свойство:значение;
}
Данный хак открывает записанное в нем стилевое свойство для всех браузеров кроме Netscape 4.

Tan-хак (модифицированный упрощенный хак блочной модели):

* html #id {
с\войство:значение;
}
Хак звездочка-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, т.к. в нем такая запись вызывает существенную ошибку.

Пример (посмотреть):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-хаки</title>
<style type="text/css">
body {
 color: white; background: black;
 font-family: Helvetica, Arial, sans-serif;
 }
p {
 padding: 0.2em;
 }

#attribut {
 color: red;
 }
p[id]#attribut {
 color: lime;
 }
p[id] {
 border: 1px solid green;
 }

#childselector {
 color: red;
 }
html>body #childselector {
 color: lime;
 }

#starhtml {
 color: lime;
 }
* html #starhtml {
 color: red;
 }

#starplushtml {
 color: lime;
 }
*:first-child+html #starplushtml {
 color: red;
 }

#comment {
 color: red;
 }
#comment/* */ {
 color: lime;
 }

#atmedia {
 color: red;
 }
@media all {
 #atmedia {
 color: lime;
 }
 }

#element {
 color: red;
 }
p#element {
 color: lime;
 }

#tanhack {
 color: lime;
 }
* html #tanhack {
 color: red;
 c\olor: lime;
 }
#tantek {
 color: red;
 }
#tantek {
 voice-family: "\"}\"";
 voice-family: inherit;
 color: lime;
}
</style>
</head>
<body>
<h1>CSS-хаки</h1>
Следующие примеры будут отображаться конформно зеленым шрифтом в рамках, в противном случае красным шрифтом или без рамки.
Атрибут-селектор: 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 приводит к ошибке чтения всей таблицы стилей!

</body>
</html>

Это важно:

Применяйте хаки только по необходимости. Наиболее валидным вариантом корректировки разночтения таблиц стилей браузерами является применение условных комментариев. Остальные же способы, в т.ч. и хаки могут быть в последующих версиях браузеров ошибочно интерпретированы.

Главная

О нас

Услуги

Портфолио

Полезные статьи

Веб-дизайн

SEO

CMS

CSS

Партнеры