ArtShok. Сайтостроение и немного SEO

Уроки и примеры по CSS, jQuery. Советы по монетизации и продвижению сайтов


6 июля 2010

Условные комментарии для ie6 и хаки (hacks) для СSS

Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий “косяк” там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.

Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)

Условные комментарии и хаки (hacks) для ie6 и СSS

Итак, для получения кроссбраузерной верстки, мы можем использовать:

  1. условные комментарии
  2. хаки для CSS

Условные комментарии для IE

Условные комментарии используются для написания инструкций для Intenet Explorer (как правило просто дается ссылка на отдельный файл стилей). Код выглядит следующим образом:

<!­­--[if IE]>Действие для IE<![endif]-->

Например:

<!­­--[if IE]><link rel="stylesheet" type="text/css" href="styles/ie.css" /><![endif]-->

Обратите внимание на содержимое квадратных скобок. Там возможно использование следующих операторов с указание версии браузера:

  1. lt (less than) - меньше чем
  2. lte (less than or equal) - меньше или равно
  3. gt (greater than) - больше чем
  4. gte (greater than or equal) - больше или равно

Например:

<!--[if lte IE 7]>Действие для версии IE, меньшей или равной 7<![endif]-->
<!--[if gt IE 6.0]>Действие для версии IE выше 6.0<![endif]-->

CSS xаки для IE

Для правильного отображения в IE6 в файле стилей к требуемому элементу добавляем *html, для EI7 - *+html.

Например:

*html .header {padding: 15px 0px 25px;} /* для IE6 */
*+html .header {padding: 13px 0px 22px;} /* для IE7 */

Также для IE6 срабатывает добавление нижнего подчеркивания (_), дефиса (-), двойной наклонной (//) и звездочки (*) перед свойством (я, например, чаще всего использую последний способ).

Например:

.menu {_padding: 15px 0px;}
.phone {-padding: 15px 20px;}
.footer {*padding: 20px 15px 35px;}
.content {<code>//width: 600px;</code>} /* Для IE 7 и ниже */

IE6 игнорирует следующие правила:

div>span {}
div+span {}

Например:

html>body .header {paddung: 20px 15px;}

Еще пару хаков для IE7:

*:first-child+html {} * html {} /* IE7 и ниже */
*:first-child+html {} /* только IE7 */
html>body {} /* Новые браузеры и IE7 */
html>/**/body {} /* Новые браузеры, без IE7 */
>p {} /* выбирает элемент p только в IE7 */

Ну еще один мной любимый хак - !important

Пример:

p {padding-bottom: 15px !important;} /* Все браузеры кроме IE6 */
p {padding-bottom: 13px;} /* для IE6 */

Все! Этого вам более чем хватит, для кроссбраузерной верстки. Желаю удачной практики.

Рекомендуемые статьи:

  • Пока нет ничего по данной тематике

Обязательно к использованию:



Комментарии к этой записи


  1. Познавательно :)
    Вообще, конечно, жизнь веб-дизайнера трудна, и чем дальше, тем больше браузеров выходит ))) и под каждый оптимизировать надо.
    Кстати, IE 9 на подходе.

    По верстке еще есть интересное видео от Яндекса:
    Yandex - CSS Framework своими руками (2009)
    Его можно найти на просторах сети.

    [Ответить]

    ArtShok:

    9-ая версия меня не пугает. Страшно то, что на 6-ке еще много народу сидит. И либо надо на них плевать и верстать сайт с учетом новых тенденций, либо жертвовать красотой в угоду кроссбраузерности.

    [Ответить]


  2. а есть подобные хаки для других браузеров?

    [Ответить]

    ArtShok:

    Да, есть, но как правило они не нужны

    [Ответить]

    overbag:

    понятно, спасибо

    [Ответить]


  3. а почему Вы так редко пишите в свой блог? я посмотрел на даты постов, иногда перерывы по пол года!!!

    [Ответить]

    ArtShok:

    Потому что для меня блоггинг - это скорее путь к саморазвитию и помощь другим, а не способ заработка (хотя попытки монетизации тоже есть, но мелкие). Есть основная работа, на которую уходит все время и силы. Здесь же пишу как приходит вдохновение, или назревает какая-то тема. Так как статьи по теме блога пишутся с примерами, на них уходит времени больше, чем если бы просто писалась всякая никому не нужна фигня.

    Так что если интересует какой-то вопрос или часто сталкиваетесь с какой-то проблемой - то welcome. Помогу решить.

    [Ответить]

    overbag:

    ну, это в какой-то степени правильный подход, уменьшает количество “пустых” статей. Но так и читателей растерять можно, но если цель - саморазвитие, то гда всё правильно делаешь

    [Ответить]

    ArtShok:

    Скажу по секрету, что за время отсутствия новых статей количество читателей само увеличилось почти в 2 раза. В плане продвижения и рекламы сайта ничего не делалось, поэтому делаю вывод, что все имеющиеся читатели ценят имеющийся материал. Что не может не радовать меня как автора)

    [Ответить]

Оставить комментарий или два