Расширенный сборник CSS-хаков

    Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
    Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
    Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

    Всем известные Conditional comments в IE


    Несмотря на известность, в них есть много редко используемого.
    Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.
    <!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->

    Conditional comments для 6, 7, 8й версии (8я версия тоже их поддерживает — не удивляйтесь):
    <!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
    <!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
    <!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->


    Другие хаки для IE


    * html .class{background:red}
    В случае если у html-страницы есть доктайп, этот хак работает только для IE6.
    В случае quirks-mode, хак работает в IE6 и IE7.

    *+html .class{background:red}
    или
    *:first-child+html .class{background:red}
    В случае, если у html-страницы есть доктайп, этот хак работает в IE7.


    Грязные хаки, работающие только в IE6

    .class{<br>_background:red<br>}
    .class{<br>-background:red<br>}


    Грязные хаки, работающие только в IE7

    -,.class{<br>background:red;<br>}


    Грязные хаки, работающие в IE6 и IE7

    .class{<br>*background:red<br>}
    .class{<br>//background:red;<br>}

    .class{background:red!ie}
    Хак, работающий в IE6 и IE7 по аналогии со свойством !important.


    Грязный хак для IE6, IE7 & Safari


    html*.class{background:red}
    Нюанс — в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от 8-ки


    Грязный хак для Safari 3


    html:root*.class{background:red}
    Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь.


    Грязный хак для FF2, FF3


    @-moz-document url-prefix(){<br>.class{background:red}<br>}


    Грязный хак для FF2, FF3 и IE7


    x:-moz-any-link,.class{background:red}


    Грязный хак для FF3 и IE7


    x:-moz-any-link,x:default,.class{background:red}


    Грязный хак для Opera 9.5 и IE7


    noindex:-o-prefocus,.class{background:red}
    Для того, чтобы превратить его в хак только для оперы, воспользуйтесь любым обрамляющим хаком, который не поддерживает IE7.


    Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5


    html:root .class{background:red}


    Хак для Safari 3 и 4!, Chrome 2


    @media screen and (-webkit-min-device-pixel-ratio:0) {<br>body:first-of-type .class {background: red}<br>}


    Хаки для Safari 3, Chrome 2, Opera 9.5


    body:first-of-type .class{background:red}
    @media all and (min-width:0){<br>.class{background:red}<br>}


    Хак для FF2, FF3, Safari 3 и Chrome 2


    html:not([lang*=""]):not(:only-child) .class{background:red}
    Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.

    Отделение стилей от IE6


    <!--[if !IE 6]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
    html>body .class{background:red}
    head+body .class{background:red}
    html:first-child .class{background:red}


    Отделение стилей от IE6 и IE7

    html>/**/body .class{background:red}


    Отделение стилей от IE6-8


    *|html .class{background:red}
    html:not([lang*=""]) .class{background:red}


    Об отделении стилей для IE


    Сама Microsoft рекомендует использовать conditional comments (официальный блог). Я в своей работе использую conditional comments для всех IE:
    <!--[if IE]><link href="ie.css" rel="stylesheet" media="all" /><![endif]-->
    А затем дополнительно отделяю хаками * html и *+html стили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.


    Изменение рендеринга IE8


    Добавление данной строчки в заголовок web-страницы изменяет тип рендеринга в зависимости от значения content (это не хак, но всё же вещь очень похожая по свойствам на хак):
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    Основные значения content следующие (взято отсюда):
    • «IE=7» — включает режим Strict в котором рендерятся все страницы;
    • «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
    • «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
    • «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».
    В случае нежелания переписывать старые проекты под IE8 — вы можете воспользоваться IE=EmulateIE7

    Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.

    P.S. Напишите пожалуйста в комментариях какие статьи о верстке вы бы хотели видеть — если я разбираюсь в предложенной вами теме — то напишу об этом статьи.
    Поделиться публикацией

    Похожие публикации

    Комментарии 77
      0
      Не всеми из этих хаков приходилось пользоваться, а из конишнл комеммент, использую на последних проектах только <!--[if lt IE 8]>Контент<![endif]-->, а дальше уже css хаками выбираю, удобно просто все стили для IE в одном месте. Для 8-ки писать хаков пока не приходилось.
        0
        Любопытно, что производители альтернативных броузеров (особенно Opera) очень любят кидать банановыми шкурками в IE по поводу несоблюдения стандартов, при этом сами не будучи безгрешными, до сих пор не смогли повторить такое изящное и абсолютно валидное решение как conditional comments.
          +1
          Потому что сделать так — значит официально признать, что твой браузер не соблюдает стандарты.
            0
            Да. Проще в суд подать на MS, чем собственные ляпы признать.
          • НЛО прилетело и опубликовало эту надпись здесь
              +1
              <link type="opera/css" ...> не работает в Opera 9.5
              В 9.2 работает.

              А подобные хаки опера исправляет относительно быстро
          +1
          большинство хаков знал и юзал...) понравились грязные хаки)))) некоторые увидел впервые! :) автору респект
            +2
            Эх, не люблю я хаки…
            Надеюсь придет время, когда я не буду ими пользоваться. Спасибо за полезную подборку. В закладки.
              0
              Учитывая то, насколько хорошо (по сравнению с ie6 и ie7) написан ie8, то до этого времени действительно недалеко
                +4
                  +2
                    0
                    Я каждый понедельник распечатываю этот график и вешаю на стенку, честно )))
                    ИЕ8 хорош, спору нет, но… всё же он осел.
                    В любом случае осталось дождаться кончины ИЕ6, ИЕ7 должен по идее обновится до новой версии (на сколько я знаю ИЕ8 идет как горячее обновление), и тогда будет мне счастье!
                      0
                      IE6 тоже до 8 обновляется сам.
                        +2
                        По иронии судьбы у студии, в которой я работаю, обычно заказчики сидят на древнем оборудовании с древним ПО (не потому что денег нет, а потому что бюрократия процветает), и автообновление у них не предусмотрено, и админы у них жестокие — раз работает, значит пусть работает, неважно сколько этому лет. Уверен, что таких организаций много, и благодаря им вышепоказанный график не будет иметь лавинообразной линии ИЕ6.
                          0
                          Прекрасно понимаю этих админов. Сам такой же :)))
                          Кое-где до сих пор стоит Win2K + IE5.0. В инет они, правда, и не ходят совсем, а IE для интранет-справочников всяких используется.
                          Автообновление, само собой, работает, но обновления IE и прочих MediaPlayer-ов :) я просто не аппрувлю в WSUS. ИМХО, незачем утяжелять систему на слабых машинах.
                      +2
                      Доля ie6, конечно упала, но вот что-то мне подсказывает что последние 10-15% дадутся очень тяжело и еще долго будут вынуждать пользоваться и костылями и хаками.
                        +2
                        подскажите, на каком ресурсе строится такой график?
                        тоже хочу каждую неделю такой график на стену вешать
                0
                Скажите, из каких соображений решается, считать ли хак «грязным»?
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    В принципе да.
                    Грязный хак всегда не валиден и не использует css3-свойства, а основан обычно на багах парсинга css-кода браузером.
                  +4
                  добавьте к star-хакам, сработает только в ie6
                  .class{
                  -background:red;
                  }
                    +1
                    было бы сказкой, если бы все браузеры понимали бы Conditional comments
                      +18
                      было бы сказкой если бы не было необходимости применять Conditional comments!
                      0
                      Условные комментарии ≠ хаки. Разница — всякий хак не валиден, в то время как условные комментарии для ie ­­— не что иное как специфическое выражение используемое для конкретного пользовательского агента. При это СС, являясь комментарием по своей сути, не нарушает валидность, поскольку строка не обрабатывается валидатором.
                        +3
                        * html и *+html валидные
                          0
                          Личное мое мнение — писать многобуквенные конструкции только для того, чтобы валидатор позеленел от счастья нужно только для очень привередливого клиента, который будет настолько же счастлив при виде зеленого цвета.
                          По сути все эти комментарии и прочие способы сделать документ валидным — просто обман валидатора, от которого мы эти хаки прячем. Документ не становится валиднее от этого.
                          Когда я верстаю для себя или адекватных заказчиков, то пользуюсь простыми хаками, что упрощает мне жизнь.
                          0
                          Извините, да. За был про них. Но все-таки, думаю стоит разделять понятие хака и СС.
                            0
                            Пользуюсь в основном 2 хаками, -property и *property, хотя один раз надо было хак написать только под Оперу, вот тогда пришлось извращаться :)
                              +3
                              В статье был обойдён хак
                              #id {
                              //width:for-ie6,7
                              }
                                0
                                И самый удобный из вышеперечисленных (имхо конечно).
                                +1
                                piumosso, только по-моему этот хак выглядит как:
                                // для ие7 и ниже
                                \\ для ие6 и ниже

                                и как-то еще можно было писать только для ие5, но я забыл за ненадобностью
                                  0
                                  И не надо для IE5, тут бы IE6 похоронить, надеюсь не больше двух лет он протянет.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    и что, реально работает только для IE8?
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        У меня однажды не выпадало в восьмом ишаке меню, генерируемое программно (на ASP.NET, а потому жуткими таблицами и js). Во всех остальных ишаках и в браузерах выпадало. Долго бился, после чего плюнул и сделал
                                        />
                                        Работает.
                                          0
                                          Проглотил коммент.
                                          Сделал
                                          meta http-equiv=«X-UA-Compatible» content=«IE=EmulateIE7» /
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Протестировал — работает только в IE7, в IE8 (в режиме IE=8) не работает
                                      +2
                                      Вот из моей подборки, хаки для IE. Восьмой тогда не вышел ещё. Пользовался ими давно, не гарантирую что 100% будет работать именно так. Проверяйте при необходимости.

                                      /* 5 5.5 7 */
                                      #visual-portal-wrapper {
                                      border /**/: 1px solid red;
                                      }

                                      /* 5, 7 */
                                      * > #visual-portal-wrapper {
                                      border: 1px solid blue;
                                      }

                                      /* 5, 5.5, 6 */
                                      * html #visual-portal-wrapper {
                                      border: 1px solid red;
                                      }

                                      /* 5.5 6 7 */
                                      #visual-portal-wrapper {
                                      border/* */: 1px solid red;
                                      }

                                      /* 6, 7 */
                                      #visual-portal-wrapper {
                                      b\order: 1px solid blue;
                                      }

                                      /* 5 */
                                      * html > #visual-portal-wrapper {
                                      border: 1px solid red;
                                      }

                                      /* 6 */
                                      * html #visual-portal-wrapper {
                                      b\order: 1px solid red;
                                      }
                                        0
                                        Это же как надо было делать движок, чтобы в одних версиях одно и то же работало, в других — нет, а в третьих — как-то еще. Ужас. Всегда поражался политике этому.
                                          +1
                                          Бррр… политике надо вычеркнуть ) пассаж про политику MS я решил не писать, но стер не весь )))
                                          +1
                                          «Нюанс». Пишется именно так.
                                            0
                                            я как-то нашёл
                                            -, class {}
                                            работает в IE7, IE8
                                              +2
                                              Жестоко. В последнее время присваиваю body класс с именем движка, броузера и его версии, а также ОС.
                                              Например, для Firefox 3 «gecko firefox3 win», и уже можно специфицировать стили под конкретной движок/браузер/ОС.
                                                –2
                                                Идея очень понравилась. Да такой способ по-моему лучше всяких хаков будет.
                                                  0
                                                  Спасибо за идею. Неплохо коррелирует с css-framework'ами типа 960.gs
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    Интересно, а на нашей памяти будет момент, когда мы сможем обходиться без «них»?
                                                    P.S. Спасибо за статью.
                                                      +1
                                                      Минус грязных хаков в их непрозрачности.
                                                      Представьте себя человеком, которого попросили «кое-что поправить» в существующем сайте. Вам приходится затронуть стили, и тут вы видите вот такое: html/**/body .class x:-moz-any-link,.class x:-moz-any-link,x:default,.class html:not([lang*=""]):not(:only-child), распиханное по всем углам файлов стилей. А ведь нервные клетки не восстанавливаются!

                                                      В своих работах я стараюсь ограничиваться условными комментариями для IE, а для браузеров, основанных на webkit, использую:
                                                      <link type="text/css" media="screen and (-webkit-min-device-pixel-ratio:0)" href="/css/fix_safari.css"/>

                                                      Все файлы с фиксами называю соответственно fix_ie.css, fix_ie6.css, fix_safari.css и т.д.

                                                      Пока что этого всегда хватало.

                                                        +1
                                                        Ради одного/двух хаков необязательно выносить код в другой файл. Если же хаков набирается много, стоит подумать, а привильно ли верстаешь.
                                                          0
                                                          Значит на Хабре тоже неправильно верстают:)
                                                          Количество хаков зачастую зависит не от «правильности» вёрстки, а от сложности макета и от того, как бережно верстальщик относится к различным мелочам.
                                                            0
                                                            На хабре разве сложный макет и он позиционируется как идеально свёрстанный?
                                                            Хаки применяют тогда, когда не знают как сверстать то же без хаков, и если их много, то стоит поискать другие методы вёрстки. При использовании большого количества хаков, в будущем на новых браузерах сайт может «поплыть». В идеале нужно вообще от них отказаться.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Обёртка в тейбл с высотой в 100% спасёт отца русской демократии.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Это уже миллион раз повторялось. Есть низкоуровневые элементы (формы например) и попиксельно точная верстка. Ясное дело, что пихать их без разбора в каждый проект — великое зло. Особняком стоят хаки для IE — тут уж ничего не поделать, раз его при рождении нужным вещам не обучили — будем обучать в процессе. Хаками. AlphaImageLoader — своего рода тоже хак, т.к. работает только в IE. И в спецификации не прописан.
                                                            0
                                                            когда предлагают что-то поправить в таком тексте, то эти хаки не вызовут непонимания у людей, разбирающихся в верстке
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                              0
                                                              Я гляжу, что для FF2 таки ничего индивидуального так и нет…
                                                                0
                                                                А в какой ситуации такой хак нужен?

                                                                x:-moz-any-link,html:root .class{background:red; /* красный фон для FF2 */}
                                                                x:-moz-any-link,x:default,html:root .class{background:green; /* будет зеленый фон для FF3 */}
                                                                  0
                                                                  Это мне известно. Интересен именно хак для FF2 и не для FF3. Пример — я не хочу обнулять для FF3 селекторы для полей SELECT — они рендерятся по-разному. Ну это так, для души скорее.
                                                                0
                                                                вот есть интересный сборник грязных хаков для любителей:
                                                                centricle.com/ref/css/filters/
                                                                  0
                                                                  Он для старых версий браузеров
                                                                    0
                                                                    Из актуального только IE6 и IE7
                                                                  0
                                                                  Мне кажется, умелое применение CSS вместе с правильной разметкой документа упраздняет любые хаки.
                                                                    0
                                                                    Это не совсем относится к хакам, но все же… В нормальных браузерах существует возможность переключить через CSS режим box-model'а на нужное значение:
                                                                    • box-sizing — опера
                                                                    • -webkit-box-sizing — само собой Safari
                                                                    • moz-box-sizing — угадайте ;)
                                                                    • -ms-box-sizing — даже MS анонсировали такое свойство для IE8, по аналогии с -ms-filter, который будет как замена обычному невалидному filter

                                                                    Так вот. Нет ли какого-либо хака, чтобы заставить IE6,7 при включенном режиме стандартов переключиться на режим border-box? Предвидя возможные ответы, что border-box нестандартен, скажу, что стандартная модель многим кажется не очень удобной (автор quirksmode, например). Поэтому было бы замечательно получить способ кроссбраузерно верстать в более логичной модели. Дело в том, что все подобные хаки, которые я видел, приводили к полному падению обратно в Quirks со всеми вытекающими последствиями.

                                                                    PS. За стандартную модель взята именно padding-box, видимо, чтобы корректно считать картинки, у которых итоговая ширина всегда будет состоять именно из ширины и прибавленного border'а.
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                        0
                                                                        Само собой, что можно и в Quirks провалиться, но вот, к примеру, отличный скрипт аналог lightbox под названием Shadowbox (http://shadowbox-js.com) работает отменно во всех браузерах и без доктайпа, а в IE требует его наличия, иначе начинаются ошибки JS (я сам не вполне понимаю, как это связано, но реально во всех IE с 6 по 8).
                                                                      0
                                                                      Вот, отличная штука
                                                                      Ява скриптик:

                                                                      var cssFix = function(){

                                                                      var u = navigator.userAgent.toLowerCase(),

                                                                      addClass = function(el,val){

                                                                      if(!el.className) {

                                                                      el.className = val;

                                                                      } else {

                                                                      var newCl = el.className;

                                                                      newCl+=(" "+val);

                                                                      el.className = newCl;

                                                                      }

                                                                      },

                                                                      is = function(t){return (u.indexOf(t)!=-1)};

                                                                      addClass(document.getElementsByTagName('html')[0],[

                                                                      (!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)

                                                                      :is('firefox/2')?'gecko ff2'

                                                                      :is('firefox/3')?'gecko ff3'

                                                                      :is('gecko/')?'gecko'

                                                                      :is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1

                                                                      :is('konqueror')?'konqueror'

                                                                      :is('applewebkit/')?'webkit safari'

                                                                      :is('mozilla/')?'gecko':'',

                                                                      (is('x11')||is('linux'))?' linux'

                                                                      :is('mac')?' mac'

                                                                      :is('win')?' win':''

                                                                      ].join(" "));

                                                                      }();

                                                                      в css просто пишите, к примеру:
                                                                      .ie7 #root {color: #FFF;}

                                                                      и т. д.
                                                                        0
                                                                        Использование navigator.userAgent можно обмануть (к примеру в сафари в меню Разработать — Пользовательский агент);
                                                                        и + это Javascript, а значит пользователь увидит разницу в странице до загрузки скрипта и после.
                                                                          –1
                                                                          Ну пользователь и css отключить может))))
                                                                        0
                                                                        прошу прощения за некропост, но никто не хочет апгрейднут топик под современные реалии в виде Хрома15 (хотя, учитывая скорость его релизов — пока статья выйдет — уже под 18 можно будет писать), фф7 (аналогичная ситуация), оперу12 (которая тоже скоро может выйти) и ie9 (ну, может к тому момету и 10 выйдет)? :)
                                                                          0
                                                                          Проблема в том, что там уже нет хаков — все возможности для этого закрывают.
                                                                          В IE 10 закроют conditional comments

                                                                          Подход уже меняется — есть например задача построить структуру из 2 колонок — на первой float:left с шириной, на второй overflow:hidden и margin-left равный ширине первой. Если сделать это в опере по диву на каждую колонку — вёрстка развалится. Теперь вместо хаков ищется решение, которое решит проблему и будет работать во всех браузерах.

                                                                          Из актуальный проблем я бы сказал такие:
                                                                          display:inline-block между блоками с пробелами в хроме дают однопиксельный отступ
                                                                          td+td в хроме дают шокирующие результаты в рамках одной таблицы
                                                                          баги в опере без логики появления

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

                                                                        Самое читаемое