Как мне кажется, все уважающие себя верстальщики (и не уважающие тоже – прим.ред.) обязаны проверять свои сайты на максимальную кроссбраузерность и по возможности подстраивать каждый из них так, чтобы он выглядел во всех браузерах максимально похоже. К сожалению не всегда можно подстроить все правила так, чтобы везде и всегда всё было идеально. Собственно для таких случаев существуют "условные комментарии", появившиеся в Internet Explorer 5.0, и "CSS-хаки", появившиеся неизвестно когда.
Условные комментарии (УК)
Прежде всего вспомним, как выглядят обычные комментарии в HTML, которые существуют для того, чтобы оставлять различные пометки в коде. А выглядят они так:
УК имеют два вида.
-
Первый имеет схожее написание с обычными комментариями, поэтому браузеры, которые поддерживают УК воспримут их как надо, а те которые не поддерживают – посчитают их обычными комментариями.
-
Второй вид используется крайне редко. Дело в том, что браузеры, которые не поддерживают УК, будут на такое написание просто ругаться. Однако есть область и для их применения, о чём будет написано ниже.
Блок, содержание которого будет видно только в IE 5.5
и который будет адекватно воспринят всеми браузерами.
<![endif]––><![if lte IE 6]>
Блок, содержание которого будет видно в IE6 и младше.
Браузеры, не поддерживающие УК, могут воспринять код неадекватно.
<![endif]>
Условия для УК
Условия записываются в первых квадратных скобках в виде [if *условие*] и направлены, как правило, на какую-нибудь версию IE. В зависимости от условия комментарий
| Пример | Описание |
|---|---|
| [if IE] | IE. Комментарий отобразится, если браузер будет Internet Explorer. |
| [if IE 5.5] | Версия IE. Комментарий отобразится, если IE 5.5 версии и никакой другой. |
| [if !IE] | Отрицание. Комментарий отобразится в браузерах, которые поддерживают УК, но не IE. |
| [if !(IE 7)] | Скобки. Комментарий отобразится, если IE не 7 версии. |
| [if lt IE 6] | Меньше чем (less than). Комментарий отобразится, если IE младше 6 версии (но в IE6 отображено не будет). |
| [if lte IE 6] | Меньше или равно (less than or equal). Комментарий отобразится, если IE младше или равен 6 версии. |
| [if gt IE 5] | Больше чем (greater than). Комментарий отобразится, если IE старше IE5 (в IE5 отображено не будет). |
| [if gte IE 5] | Больше или равно (greater than or equal). Комментарий отобразится, если IE старше или равен 5 версии. |
| [if (gt IE 5)&(lt IE 8)] | Оператор “И”. Комментарий отобразится, если IE старше 5 и младше 8 версии. |
| [if (IE 5)|(IE 6)] | Оператор “ИЛИ”. Комментарий отобразится, если IE 5 или 6 версии. |
| [if true] | Практического применения этих выражений я не нашёл. True работает как первый пример из списка, а False как третий или как обычный комментарий. |
| [if false] |
Живые примеры
Предлагаемые первые пять примеров сделаны на основе предложенной таблицы. А вот на два последних примера стоит обратить внимание. Там как раз используются УК второго вида, но вместе с комментариями первого вида. Это позволяет отображать набранный комментарий во всех браузерах, кроме IE, либо в некоторых версиях IE и остальных браузерах.
Предложенные примеры вы можете посмотреть на отдельной странице, кликнув по ссылке – пример.
<p>Ваш браузер не IE. Дайте пожать вашу руку</p>
<!––[if IE]><![endif]><![endif]-—>
<!––[if IE]><![if gte IE 8]><![endif]––>
<p>Ваш браузер либо не IE, либо IE 8 и старше</p>
<!––[if IE]><![endif]><![endif]––>
Послесловие и одно веское вводное слово о CSS hacks.
Условные комментарии используются, как правило, при решении вопросов кроссбраузерности, которые возникают постоянно. Как было показано выше, они позволяют выделять различные версии Internet Explorer, и нечто, что можно назвать “Остальные браузеры”. А что делать, если нужны правки в CSS только для Opera или только для Firefox? С такими задачами справляются CSS-хаки, о которых и будет рассказано в следующий раз.
Ссылки по теме
Часть 1: условные комментарии
Часть 2: 15 основных CSS-хаков.
(голосов: 1, средний: 5.00 из 5)Похожие записи:
- “Условные комментарии” и “CSS-хаки”. Round 2. 15 основных CSS-хаков.
- Сайты: проверка на кроссбраузерность
- Окна на jQuery в стиле Windows 7 – плагин AeroWindow
- "Нестандартные шрифты на сайте" или "CSS свойство @font-face"
- Два способа, как сделать вертикальный и горизонтальный скролл div’а через jQuery и не только
Загрузка ...
01/02/2010 at 23:32 Постоянная ссылка Цитировать
Вроде везде используется но нигде толком не описывается ) полезный пост, как и все остальные
01/02/2010 at 23:38 Постоянная ссылка Цитировать
спасибо
обычно баги в ишаке меньше 7, а там css-хаками можно обойтись, а вот если для 8 надо, то валидно, кроме как через условники, не сделать, так что вещь может быть полезной. правда всё равно не часто. а вот с чужими вёрстками иногда может придётся работать, так что…
16/02/2010 at 20:29 Постоянная ссылка Цитировать
При сборке сайта нужно стараться применять наименее уязвимые способы. Очень не желательно использовать css-хаки. Достаточно использовать для старых версий ИЕ.
16/02/2010 at 22:31 Постоянная ссылка Цитировать
не вижу ничего плохого и зазорного в использовании хаков для 6 и 7 ишака, которые считаются валидными (я о * html и *+html), тем более они меньше места занимают, чем условные, и их не надо отдельно от файла CSS выносить. для восьмого ишака да, условные комментарии незаменимы, потому что пока вроде как нету валидных цсс-хаков непосредственно для него
17/02/2010 at 0:03 Постоянная ссылка Цитировать
Когда я не знал об условных комментариях, я тоже пользовался подобными приемами. Но тут смысл в том, что со временем, когда отомрут старые браузеры, можно просто удалить эти индивидуальные css-файлы вместе с условными комментариями. А общий css останется нетронутым.
17/02/2010 at 0:34 Постоянная ссылка Цитировать
эммм, мне кажется это практически полностью бесполезным. хотя бы потому, что все цсс файлы можно просто просканить на наличие конструкций * html и *+html и просто удалить их. при этом опять же не вижу смысла даже в этом – пускай парой строк поддерживаются старые браузеры.
и я не говорю о том, что вымрут они хз когда, да и за лет 5 почти всегда удосуживаются сделать редизайн, ведь надо поддерживать марку.
17/02/2010 at 11:10 Постоянная ссылка Цитировать
А как вы собираетесь решать проблему, если, например, в ИЕ8 сайт отображается нормально, в ИЕ7 по-другому, а в ИЕ6 по-третьему?
17/02/2010 at 11:20 Постоянная ссылка Цитировать
Вот так и решаю, для 6 один хак (валидный), для 7 второй хак, тоже валидный. Но вот если вдруг каким-либо чудным образом везде нормально, кроме ие8, то тогда тут либо перевёрстываю чутка, так что работает нормально, либо применяю условный комментарий.
К тому же на практике уже само собой получается, что почти везде всё выглядит одинаково, и не приходится прибегать ни к хакам, ни к условным.
Да, я применяю условные только в 2 случаях: когда нужен хак для ие 8, и когда нужно поставить для шестого ишака пнг-фикс.
17/02/2010 at 11:47 Постоянная ссылка Цитировать
Понятно. т. е. в некоторых ситуациях и проявляется их главное преимущество «разделяй и властвуй». Кроме того, использование условных комментариев позволяет технологичней подходить к процессу. Стили не смешиваются. Если в последствии еще чего-нибудь проблематичное для старых браузеров придется реализовать на сайте, то тогда не окажется, что часть хаков находится в общем файле, другие правила вынесены в отдельный файл. И основная цсс-ка не перегружается лишним кодом. Кто пользуется 8 ИЕ, тому не нужно подгружать костыли, предназначенные для динозавров.
17/02/2010 at 12:00 Постоянная ссылка Цитировать
Да, свои плюсы определённо есть, полностью согласен. Есть два решения подстановки костылей, но какое использовать, когда и как и что для него важнее – каждый выбирает сам.
28/03/2010 at 21:13 Постоянная ссылка Цитировать
Спасибо автору за интересную статью
30/03/2010 at 11:11 Постоянная ссылка Цитировать
Всегда пожалуйста =)
21/04/2010 at 15:30 Постоянная ссылка Цитировать
Здравствуйте! Мне нужно сделать так, чтобы если Google Chrome, то подключалась одна версия jquery, а если другой браузер, то другая версия jquery. Есть ли условные комментарии или что-нибудь аналогичное для Google Chrome?
21/04/2010 at 16:16 Постоянная ссылка Цитировать
День добрый!
Ну, вообще-то лучше сделать так, чтобы всё под одной версией работало =)
А если по теме, то вообще для хрома индивидуальных хаков валидных вроде как нет. Единственное, что могу посоветовать – конструкция на php, где проверяется браузер и в зависимости от него подгружается та или иная штука.
<?
$browser=$_SERVER["HTTP_USER_AGENT"];
if (strstr($browser, “Chrome”)) {
?>
<script></script>
<?
}
else {
?>
<script></script>
<?
}
?>
Правда у хрома хттпюзер агент может не Chrome, а как-нить иначе, нужно проверить, но думаю оно так норма будет. в общем в первом случае ставить путь к кьюри для хрома, во втором случае для остального
21/04/2010 at 16:25 Постоянная ссылка Цитировать
Спасибо за оперативный ответ и за совет тоже спасибо.
21/04/2010 at 18:19 Постоянная ссылка Цитировать
Пожалуйста!
18/02/2011 at 12:55 Постоянная ссылка Цитировать
Практический пример для [if true] – это когда нужно показать какую-то информацию только в браузерах, поддерживающих УК. Например некий блок текста.
Логично? Вроде бы да…
А вот подобрать пример для [if false] ума не хватило. Если предположить, что он отсеивает браузеры, не понимающие УК, то каким местом они должны его увидеть и понять – неизвестно.
18/02/2011 at 13:14 Постоянная ссылка Цитировать
УК обычно только ишак и поддерживает, поэтому проще написать if IE, а не if true, т.к. мало ли кто ещё их поддерживает – потом с кроссбраузерностью беда будет.
а с if false реально хз. может для чего-то это и сделали, но явно сейчас это неактуально
18/02/2011 at 13:18 Постоянная ссылка Цитировать
Александр, гляньте на футер этого сайта (ссылку взял где-то с вашего же блога) и подскажите, как сделать такой же прозрачный, но чтобы под IE понимался?
А сделан он просто одной строчкой в css:
background-color: rgba(0, 0, 0, .6);
18/02/2011 at 13:25 Постоянная ссылка Цитировать
подскажу.
я там писал про прозрачность блоков воообще.
самый кроссбраузерный и с ишаком – картинка пнг.