пятница, 2 апреля 2010 г.

CSS хаки� - Студия веб-дизайна WEB-to-BIZ

CSS хаки� - Студия веб-дизайна WEB-to-BIZ

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, т.к. в нем такая запись вызывает существенную ошибку.
Пример (посмотреть):
"http://www.w3.org/TR/html4/strict.dtd">






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 приводит к ошибке чтения всей таблицы стилей!




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

Комментариев нет:

Отправить комментарий