“Условные комментарии” и “CSS-хаки”. Round 1.

28 августа 2009 20 Рубрика: HTML&CSS

« Предыдущая запись
 		   Следующая запись »
 

Как мне кажется, все уважающие себя верстальщики (и не уважающие тоже – прим.ред.) обязаны проверять свои сайты на максимальную кроссбраузерность и по возможности подстраивать каждый из них так, чтобы он выглядел во всех браузерах максимально похоже. К сожалению не всегда можно подстроить все правила так, чтобы везде и всегда всё было идеально. Собственно для таких случаев существуют "условные комментарии", появившиеся в Internet Explorer 5.0, и "CSS-хаки", появившиеся неизвестно когда.

Условные комментарии (УК)

Прежде всего вспомним, как выглядят обычные комментарии в HTML, которые существуют для того, чтобы оставлять различные пометки в коде. А выглядят они так:

<!–– обычный комментарий, советы всякие оставлять -–>

УК имеют два вида.

  1. Первый имеет схожее написание с обычными комментариями, поэтому браузеры, которые поддерживают УК воспримут их как надо, а те которые не поддерживают – посчитают их обычными комментариями.
  2. Второй вид используется крайне редко. Дело в том, что браузеры, которые не поддерживают УК, будут на такое написание просто ругаться. Однако есть область и для их применения, о чём будет написано ниже.
<!––[if IE 5.5]>
Блок, содержание которого будет видно только в 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 и остальных браузерах.

Предложенные примеры вы можете посмотреть на отдельной странице, кликнув по ссылке – пример.

<!—-обычный комментарий, нигде отображён не будет ––><!––[if IE]><p>Ваш браузер IE</p><![endif]––><!––[if IE 6]><p>Ваш браузер IE6</p><![endif]––><!––[if gt IE 6]><p>Ваш браузер IE старше 6 версии</p><![endif]––><!––[if lt IE 6]><p>Ваш браузер IE младше 6 версии</p><![endif]—-><!––[if IE]><![if !IE]><![endif]––>
<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 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Сергей
    01/02/2010 at 23:32 Постоянная ссылка Цитировать

    Вроде везде используется но нигде толком не описывается ) полезный пост, как и все остальные

  2. Александр Шуйский
    01/02/2010 at 23:38 Постоянная ссылка Цитировать

    спасибо :)
    обычно баги в ишаке меньше 7, а там css-хаками можно обойтись, а вот если для 8 надо, то валидно, кроме как через условники, не сделать, так что вещь может быть полезной. правда всё равно не часто. а вот с чужими вёрстками иногда может придётся работать, так что… :)

  3. Искусство создания сайта
    16/02/2010 at 20:29 Постоянная ссылка Цитировать

    При сборке сайта нужно стараться применять наименее уязвимые способы. Очень не желательно использовать css-хаки. Достаточно использовать условные комментарии для старых версий ИЕ.

  4. Александр Шуйский
    16/02/2010 at 22:31 Постоянная ссылка Цитировать

    не вижу ничего плохого и зазорного в использовании хаков для 6 и 7 ишака, которые считаются валидными (я о * html и *+html), тем более они меньше места занимают, чем условные, и их не надо отдельно от файла CSS выносить. для восьмого ишака да, условные комментарии незаменимы, потому что пока вроде как нету валидных цсс-хаков непосредственно для него

  5. Искусство создания сайта
    17/02/2010 at 0:03 Постоянная ссылка Цитировать

    Когда я не знал об условных комментариях, я тоже пользовался подобными приемами. Но тут смысл в том, что со временем, когда отомрут старые браузеры, можно просто удалить эти индивидуальные css-файлы вместе с условными комментариями. А общий css останется нетронутым.

  6. Александр Шуйский
    17/02/2010 at 0:34 Постоянная ссылка Цитировать

    эммм, мне кажется это практически полностью бесполезным. хотя бы потому, что все цсс файлы можно просто просканить на наличие конструкций * html и *+html и просто удалить их. при этом опять же не вижу смысла даже в этом – пускай парой строк поддерживаются старые браузеры.
    и я не говорю о том, что вымрут они хз когда, да и за лет 5 почти всегда удосуживаются сделать редизайн, ведь надо поддерживать марку.

  7. Искусство создания сайта
    17/02/2010 at 11:10 Постоянная ссылка Цитировать

    А как вы собираетесь решать проблему, если, например, в ИЕ8 сайт отображается нормально, в ИЕ7 по-другому, а в ИЕ6 по-третьему?

  8. Александр Шуйский
    17/02/2010 at 11:20 Постоянная ссылка Цитировать

    Вот так и решаю, для 6 один хак (валидный), для 7 второй хак, тоже валидный. Но вот если вдруг каким-либо чудным образом везде нормально, кроме ие8, то тогда тут либо перевёрстываю чутка, так что работает нормально, либо применяю условный комментарий.
    К тому же на практике уже само собой получается, что почти везде всё выглядит одинаково, и не приходится прибегать ни к хакам, ни к условным.
    Да, я применяю условные только в 2 случаях: когда нужен хак для ие 8, и когда нужно поставить для шестого ишака пнг-фикс.

  9. Искусство создания сайта
    17/02/2010 at 11:47 Постоянная ссылка Цитировать

    Понятно. т. е. в некоторых ситуациях и проявляется их главное преимущество «разделяй и властвуй». Кроме того, использование условных комментариев позволяет технологичней подходить к процессу. Стили не смешиваются. Если в последствии еще чего-нибудь проблематичное для старых браузеров придется реализовать на сайте, то тогда не окажется, что часть хаков находится в общем файле, другие правила вынесены в отдельный файл. И основная цсс-ка не перегружается лишним кодом. Кто пользуется 8 ИЕ, тому не нужно подгружать костыли, предназначенные для динозавров.

  10. Александр Шуйский
    17/02/2010 at 12:00 Постоянная ссылка Цитировать

    Да, свои плюсы определённо есть, полностью согласен. Есть два решения подстановки костылей, но какое использовать, когда и как и что для него важнее – каждый выбирает сам.

  11. Степан Макаров
    28/03/2010 at 21:13 Постоянная ссылка Цитировать

    Спасибо автору за интересную статью ;)

  12. Александр Шуйский
    30/03/2010 at 11:11 Постоянная ссылка Цитировать

    Всегда пожалуйста =)

  13. Andrey
    21/04/2010 at 15:30 Постоянная ссылка Цитировать

    Здравствуйте! Мне нужно сделать так, чтобы если Google Chrome, то подключалась одна версия jquery, а если другой браузер, то другая версия jquery. Есть ли условные комментарии или что-нибудь аналогичное для Google Chrome?

  14. Александр Шуйский
    21/04/2010 at 16:16 Постоянная ссылка Цитировать

    День добрый!
    Ну, вообще-то лучше сделать так, чтобы всё под одной версией работало =)
    А если по теме, то вообще для хрома индивидуальных хаков валидных вроде как нет. Единственное, что могу посоветовать – конструкция на php, где проверяется браузер и в зависимости от него подгружается та или иная штука.

    <?
    $browser=$_SERVER["HTTP_USER_AGENT"];
    if (strstr($browser, “Chrome”)) {
        ?>
         <script></script>
        <?
    }
    else {
        ?>
         <script></script>
        <?
    }
    ?>

    Правда у хрома хттпюзер агент может не Chrome, а как-нить иначе, нужно проверить, но думаю оно так норма будет. в общем в первом случае ставить путь к кьюри для хрома, во втором случае для остального

  15. Andrey
    21/04/2010 at 16:25 Постоянная ссылка Цитировать

    Спасибо за оперативный ответ и за совет тоже спасибо.

  16. Александр Шуйский
    21/04/2010 at 18:19 Постоянная ссылка Цитировать

    Пожалуйста!

  17. Виталий
    18/02/2011 at 12:55 Постоянная ссылка Цитировать

    Практический пример для [if true] – это когда нужно показать какую-то информацию только в браузерах, поддерживающих УК. Например некий блок текста.
    Логично? Вроде бы да…
    А вот подобрать пример для [if false] ума не хватило. Если предположить, что он отсеивает браузеры, не понимающие УК, то каким местом они должны его увидеть и понять – неизвестно.

  18. Александр Шуйский
    18/02/2011 at 13:14 Постоянная ссылка Цитировать

    УК обычно только ишак и поддерживает, поэтому проще написать if IE, а не if true, т.к. мало ли кто ещё их поддерживает – потом с кроссбраузерностью беда будет.
    а с if false реально хз. может для чего-то это и сделали, но явно сейчас это неактуально

  19. Виталий
    18/02/2011 at 13:18 Постоянная ссылка Цитировать

    Александр, гляньте на футер этого сайта http://westciv.com/tools/box-properties/index.html (ссылку взял где-то с вашего же блога) и подскажите, как сделать такой же прозрачный, но чтобы под IE понимался?
    А сделан он просто одной строчкой в css:
    background-color: rgba(0, 0, 0, .6);

  20. Александр Шуйский
    18/02/2011 at 13:25 Постоянная ссылка Цитировать

    подскажу.
    http://shublog.ru/html-and-css/svojjstva-css3-chast-4-rgba-hsla-i-prozrachnost-fona/
    я там писал про прозрачность блоков воообще.
    самый кроссбраузерный и с ишаком – картинка пнг.