Front-end developer
0,0
рейтинг
8 августа 2011 в 13:38

Разработка → CSS хаки из песочницы

CSS*
Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore

Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore

CSS-хаки для браузера Internet Explorer


ZOOM:1 :
Хак, предназначенный для определения hasLayout
* { zoom : 1 ; }

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.
* { behavior : url ( "css/iepngfix.htc" ); }

Если важны байты есть пример использования фильтра для IE:
.class { 
  background : none ; 
 	 filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( 
    src= '/images/png-image.png' , 
    sizingMethod= 'scale' 
  ); 
}

Отделение стилей от IE6 :
html>body .class { }
head+body .class { }
html:first-child .class { }

Отделение стилей от IE6 и IE7 :
html>/**/body { }

Отделение стилей от IE6 — IE8 :
*|html .class { }
html:not([lang*=""]) .class { }

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:
<!--[if условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]-->
<!--[if !условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]-->
/* Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте !условие */
/* Условие может быть таким:
IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v. */

Conditional comments в IE6, IE7, IE8 :
<!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]-->
/* Таблица стилей для IE6 */
<!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]-->
/* Таблица стилей для IE7 */
<!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]-->
/* Таблица стилей для IE8 */

Box Model хак :
В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.
.class { 
  padding : 4em ; 
  border : 1em solid red ; 
  width : 30em; 
  width /**/ : /**/ 25em ; 
}
/* Для IE ширина блока меньше на величину padding + border */

Min-width и max-width в IE :
IE не понимает эти свойства css. Хак для блока выглядит так:
.class { 
  min-width : 500px ; 
  width : expression ( 
    document.body.clientWidth < 500? "500px" : "auto" 
  );
}
/* Для IE ширина блока меньше на величину padding + border */

.class { 
  min-width : 500px ; 
  max-width : 750px ; 
  width : expression ( 
    document.body.clientWidth < 500? "500px" : 
    document.body.clientWidth > 750? "750px" : "auto" 
  );
}
/* Для IE ширина блока меньше на величину padding + border */

Min-height хак от Дастина Диаза
.class { 
  min-height : 100% ; 
  height : auto !important ; 
  height : 100% ; 
}

Простые селекторы:
Не обязательно создавать отдельный файл для разных браузеров. Можно использовать индивидуальные css-селекторы в основном css-файле:
* html .class { } /* В случае, если у html-страницы есть доктайп, этот хак работает в IE6 */
/* В случае quirks-mode, хак работает в IE6 и IE7. */
*:first-child+html .class { } /* Для IE 7 и ниже (first-child) */
*+html .class { } /* Для IE 7 */
*:first-child+html .class { } /* Для IE 7 */
html>body .class { } /* Для IE 7 и нормальных браузеров */
html>/**/body .class { } /* Для нормальных браузеров (кроме IE 7) */
/* Пример:
.class { background:red }
*html .class { background:green }
Во всех браузерах кроме IE6 и ниже бэкграунд будет красный, а в IE6 и ниже браузерах - зеленый */

Грязные хаки для IE6 :
.class { _background : #F00 ; }
.class { -background : #F00 ; }
.class { c\olor : #F00 ; } /* Не работает перед буквами a, b, c, d, e, f */

Грязные хаки для IE7 :
>body { background : #F00 ; }
/* выбирает элемент body только в IE7 */
html* { background : #F00 ; }
/* выделяет все элементы внутри элемента html. Только для IE7 и ниже */
-,.class { background : #F00 ; }
.class { background : #F00 !important! ; }
/* Хак работает по аналогии со свойством !important. Работает для IE7 и ниже */

Грязные хаки для IE8 :
.class { background : #F00\0/ ; }
/* выбирает элемент body только в IE7 */

Грязные хаки, работающие в IE6 и IE7 :
.class { *background : #F00 ; }
.class { //background : #F00 ; }
.class { background : #F00 !ie ; }
/* Хак работает по аналогии со свойством !important */


CSS-хаки для браузера Mozila FireFox


Хаки для всех версий MFF :
#class[id=class] { color : #F00 ; }
@-moz-document url-prefix () { .class { color : #F00 ; } }
*>.class { color : #F00 ; }

Для MFF 1.5 и выше :
.class, x:-moz-any-link, x:only-child { color : #F00 ; }

Для MFF 2.0 и выше :
body:empty .class { color : #F00 ; }
#class[id=CLASS] { color : #F00 ; }
html>/**/body .class, x:-moz-any-link { color : #F00 ; }

Для MFF 3.0 и возможно выше :
html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; }


CSS-хаки для браузера Google Chrome


body:nth-of-type(1) .class {
  background : #000 ;
}


CSS-хаки для браузера Opera


Хаки для всех версий Opera :
@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and ( -webkit-min-device-pixel-ratio : 0 ) { 
  .style { background : #F00 ; }
}

@media all and ( min-width : 0px )	 { 
  .class { 
    color : #F00 ; 
  } 
}

Для Opera 6 :
@media all and ( min-width : 1px )	 { { } 
  .class { 
    color : #F00 ; 
  } 
}

Для Opera 7, 8 :
@media all and ( min-width : 1px )	 { 
  .class { 
    color : #F00 ; 
  } 
}

Для Opera 9 :
@media all and ( width )	 { 
  .class { 
    color : #F00 ; 
  } 
}

@media all and ( min-width : 0px )	 { 
  head~body .class { 
    color : #F00 ; 
  } 
}


CSS-хаки для браузера Safari


body:first-of-type .class	 { color : #F00 ; }
html:root*.class	 { color : #F00 ; }
body:first-of-type .class	 { color : #F00 ; }
body:first-of-type .class	 { color : #F00 ; }

@media screen and ( -webkit-min-device-pixel-ratio : 0 )	 { 
  .class { 
    color : #F00 ; 
  } 
}
/* Хак для Opera и Safari */
Паша @Grammka
карма
9,2
рейтинг 0,0
Front-end developer

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

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (147)

  • +1
    Спасибо за подборку! Многое знал, но тут в одном месте, очень удобно!
  • +1
    Спасибо огромное за подборку, добавлю в избранное!
  • +36
    Может пора отказать от использования хаков под IE6?
    • +3
      Когда президент официально объявит об этом всему миру, тогда возможно, а в наше время, особено в нашей стране, огромное кол-во компаний используют старое оборудование с ненавистным IE6
      • +13
        Даже по данным на начало года IE6 в России используют ~3% пользователей (http://habrahabr.ru/blogs/browsers/111108/), а Вы все хаки для него пишете.
        • 0
          Клиенту бывает пофиг, что по России всего 3%.
          • +20
            Если брать дополнительную плату (а это, я считаю, вполне разумно) за поддержку IE6, то:
            1. Клиент задумается насчет необходимости,
            2. Доля использование IE6 резко пойдет вниз.
            • 0
              1. Есть упертые. Возможно где-то их мало, но у нас, в глубинке, до сих пор достаточно.
              2. Не пойдет, если это корпоративный браузер. Вон, в Билайне он таковым и является.

              Я не говорю, что все в ие6 должно быть точь в точь как в других браузерах. Просто иногда надо писать небольшие такие хаки (наподобие эмуляции inline-block), чтобы там хотя бы прилично выглядело.
              • 0
                Согласен, особенно для крупных компаний, используется старое ПО, которое адекватно поддерживает только «осёл» и только шестой. При попытке перехода на что-то новое, всё упало. Пришлось даунгрейдить.
              • +3
                1. Есть упертые. Возможно где-то их мало, но у нас, в глубинке, до сих пор достаточно.
                Да и ради бога — как говорится, «любой каприз за ваши деньги».
                Даже если клиент готов платить дополнительную плату всего лишь за 0.001% пользователей — вопрос лишь поиска им соответствующего разработчика, готового взяться за такую антикварную работу, и согласования с ним стоимости работ. Поэтому вариант дополнительной платы считаю самым справедливым.

                2. Не пойдет, если это корпоративный браузер.
                Пойдёт-пойдёт — если будет выполняться правило дополнительной платы. Сайтов, включающих поддержку IE6, станет еще меньше и корпоративные упрямцы наконец-то задумаются «А чего это мы так уперлись в IE6 и из-за этого очень многие сайты теперь видим сикось-накось? Стоит ли наше упрямство тех сомнительных выгод, которые мы получаем?».

                P.S. А хаками под IE6 всё же стоит делиться. Хотя бы для тех, кому достались упрямые, но богатые заказчики. :)
            • 0
              Резко? Это по 0.01% в месяц? :)
              • 0
                Вообще-то, в 2,5 раза в год.
                • 0
                  Ого!
            • 0
              Я уже давно так делаю, по схеме:
              IE6 = +75%
              IE7 = +50%
              IE8 = +25%

              Итого поддержка всех ослов это +150%. При виде этой цифры мозг заказчика сразу прочищается и он начинает принимать адекватное решение исходя из имеющейся статистики браузеров. Ессно цену накидываю на стоимость верстки, а не всей работы.
        • +3
          «по данным на начало года в России» — это средняя температура по больнице.

          По статистике наших клиентов получается не ~3%, а почти 30% :-/
          • +1
            Упс, у меня ниже получился коммент почти один в один как у вас.
        • +2
          Это средняя температура по больнице. У нас есть сервисы, где доля IE6 достигает 50% пользователей.
          • +3
            Я знаю такие примерно такие сервисы :)

            Мне приходилось специально ставить шестой ИЕ, чтобы интернет банкинг нормально работал.

            И я наверное попадал в статистику, которую подавали айтишники на стол руководству при обосновании, что не нужно ничего делать, ведь смотрите сколько у нас пользователей ие6.

            Это правда года три назад было, на позапрошлой работе. Тогда действительно пользователей шестерки было еще достаточно много.
            • 0
              Припоминаю также личный кабинет одного из операторов большой тройки, который нормально работал только в ИЕ. Приходилось пользоваться, зато в статистике у них было, наверное «90% — ИЕ, 10% — Макстон»и говорили руковдству «гики с фоксами и операми к нам не ходят, не фиг под них верстку скрипты оптимизировать».
            • 0
              Ситуация у нас такая как вы говорите и в то же время не совсем такая :) т.е. помимо технической необходимости иметь IE (любой, не обязательно IE6), пользователи такие, что они не могут ничего сделать со своими браузерами — если удастся обновиться до IE8 — это будет большой удачей.
        • +5
          Да, и эти ~3% это программисты пишущие хаки под IE6
    • +4
      Но тогда статья будет в 2 раза меньше! =)
  • 0
    В избранное. В одном месте собраны те вещи которые постоянно гуглишь. Спасибо.
  • +1
    Очень хорошо. Только хромо-хак я не понял что делает.
    • –2
      Поправил. Раньше хак реагировал на chrome. Сейчас только для оперы.
  • +6
    >Min-width и max-width в IE:
    Только в ие6, в ие7 все работает. А метод от Дастина Диаза иногда глючит в Опере, поэтому лучше использовать такой способ:
    .class		{
    	min-height: 600px;
    	_height: 600px;
    }
    
    • 0
      Чуть выше такой хак назвали грязным :) Но согласна )
  • +2
    ошибка в if ie, там не надо коментарии закрывать
    <!--[if IE]><![endif]-->
    • 0
      Спс поправил. Писал статью для своего сайта) нада было так.
  • 0
    Подборка хороша, но мне приходилось писать хаки только для IE6-7. Может я что-то делал не так?
    • +1
      Либо вам повезло, либо вы просто хороший верстальщик ;) Я вот верстальщик посредственный и хаки для не-ИЕ браузеров мне бывали нужны.
    • 0
      Все так. Тоже только для ие6-7 бывает нужны хаки. И то уже теперь только для ие7, ибо ие6 не поддерживаем.
      • 0
        Все хаки для IE6-7 зло. Нужны отдельные стили для «ослика» пишите условные комментарии. Не нужно будет потом вычищать код от мусора, если отказываться от поддержки какой-либо версии браузера.
        • +1
          Я сторонник хаков. Т.к. создавать целый файл, чтобы написать пару строчек с «zoom:1;», потом лазить туда-сюда по файлам и смотреть к какому блоку это относится, считаю глупостью. Ну если вы только не валидатор-наци =)
          • +1
            Если из всех хаков для IE у вас только zoom:1;, то вы очень хороший верстальщик.
    • 0
      Вы молодец. Но, видимо, вам никогда не приходилось поддерживать чужую верстку сделанную не пойми когда и совсем для других размеров картинок, блоков и т.п. Условие: переверстывать некогда…
  • +10
    Уже который год не применяю хаки вообще, как-то все само работает…
    • +2
      Если всё идёт хорошо, значит вы чего-то не замечаете ;)
      • +1
        У нас просто нет IE6 в списке поддерживаемых ;)
        • +6
          Это самый грязный хак для IE6!
          • +4
            Я бы сказал единственно верный и чистый
            • 0
              Наслаждение версткой — никакой поддержки IE 6 & 7, и вообще никакой Opera! Рай есть!
  • +39
    Если честно, тут одни баяны и ИЕ6. Зачем вообще хаки для оперы 6,7,8,9? Пользователи оперы — не некрофилы. Зато для 10, 11 оперы — нету. Нету хаков для актуальных версий браузеров.

    > В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.

    Боже, вы из прошлого что ли пишите? Корректный доктайп исправляет блочную модель даже в ИЕ6.

    > Хаки для всех версий Opera:
    > @media all and ( min-width: 0px )

    Аха, в один прекрасный день это могут начать понимать ВСЕ браузеры, если уже не понимают.

    > CSS-хаки для браузера Safari

    аха, а хроме не вебкит уже?

    > Хак, предназначенный для определения hasLayout

    Хотя бы пояснили бы, зачем это нужно. А нужно это в 1ую очередь для эмуляции inline-block в ИЕ6-7 у изначально блочных элементов:
    div {
    display:inline-block;
    *display:inline;
    *zoom:1;
    }

    Вообщем, я не пойму, зачем за такое давать инвайт и плюсовать еще. Сборник неактуальных баянов и дизы.
    • +1
      Согласен баян, но кому-то может быть полезен. Тем более, что старые браузеры пока никто не отменял. Если Вы верстаете сайт для себя, то это одно, а если для глупого клиента, которому лень, или он не может, обновить свой комп, то увы. И, как Вы правильно подметили, «в один прекрасный день это могут начать понимать ВСЕ браузеры», вот когда такой день настанет, все могут с легкой душой «уйти на покой» )
      • +12
        Я верстаю в студии для глупых клиентов и мы уже давно от ИЕ6 отказались. ИЕ7 верстаю с погрешностью, что какие то декорации могут не работать, но хак для него нужен только 1 — это hasLayout. Разумеется под древние оперы и фф тоже не верстаем. ХЗ, кому это все может пригодиться, но меня печалит кол-во благодарствующих комментов вначале и добавлений в избранное.
        Обижать вас не хочется, но пост УГ, полное дизы и неактуальной инфы.
        • –1
          Повезло Вам. Если бы только все компании придерживались такого мнения, было бы просто супер…
        • 0
          2 года моей жизни ушло на верстку под ИЕ6 и исправление ЧУЖОЙ верстки для Mozilla 1.5 & 2.0.4…
          Некрофилия — извращение, а seo оказывалось важнее. Последней каплей было требование сверстать сайт, который будет в домене.рф с ИДЕАЛЬНОЙ поддержкой ИЕ6. Вставила chrome-frame и подала заявление об увольнении… Но не всем же даны такие крайние меры…
    • +7
      update
      Еще нашел дизинформацию

      > CSS-хаки для браузера Google Chrome
      > body:nth-of-type(1) .class {

      автор, вы хоть понимаете смысл этого селектора? Дак вот, это не хак хрома, хром просто заюзал этот псевдокласс самый первый, но СЕЙЧАС ЭТО ПОНИМАЮТ ВСЕ БРАУЗЕРЫ.

      Вообщем, инфа двух-трех годовалой давности, оч не советую на это все упираться.
      И еще, половина хаков для ишаков работает, только если нет корректного доктайпа.
    • +8
      update

      > ZOOM:1:
      > Хак, предназначенный для определения hasLayout
      > * { zoom: 1; }

      Это ваще ппц. По сути вы придаете блочные свойства ВСЕМ ЭЛЕМЕНТАМ САЙТА, даже инлайновым, даже таблицам, ячейкам и пр. А нужно это только инлайн-блоковым элементам. Я даже боюсь предположить, что будет, если в готовую верстку бездумно добавить этот код.
      • –9
        попробуйте
        • +5
          Будут проблемы с инлайновыми элементами (типа a, i ,b): не будет переноса слов, если например в <a> 3 слова — они всегда будут слитными в рамках ширины блока родителя.
      • +5
        О да, вы правы. zoom:1 имеет смысл добавлять только тем элементам, которым это действительно необходимо.
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Корректный доктайп исправляет блочную модель даже в ИЕ6.

      Даже доктайп html (html 5)?
      • +2
        Любой синтаксически корректный доктайп, перед которым нет непробельных символов.
  • +4
    В половине хаков под ие нет смысла, если использовать такую технику
    • +4
      (черт, сорвалось)

      Такую технику: paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

      т.е. условными комментариями добавляем соответствующий класс к тегу html, благодаря чему в таблице стилей создаем развилку по версиям експлорера
      • +1
        вообще в хаках нет смысла если использовать эту технику
        тем более с Modernizr
        • +1
          абсолютно поддерживаю.
          еще год назад вдохновился html5boilerplate, где эти техники активно юзаются, и до сих пор не могу нарадоваться :)
      • 0
        Я предпочитаю cssuseragent.org/
        Он записывает все классы, что может вычислить из юзерагента, хотя реально использую только для 7 и 8 IE.
      • 0
        А у тега HTML нет атрибута class, только lang, dir и устаревший version. Пруфлинк.
        • 0
          тем не менее он отлично работает
          • 0
            Не отлично, он на корню губит валидность HTML-документа (если только это не HTML5, где у тега html целый ворох глобальных атрибутов, включая и class). Впрочем, почему не писать класс тегу body? Мы же не собираемся стилизовать title?
            • +2
              Во-первых, слепо валидировать html ради самой валидации не имеет особого смысла, тем более после имплементации на любую более-менее сложную cms ни о какой валидности речь идти не может.
              Во-вторых, уже давно можно пользоваться <!doctype html>, который отлично понимают все браузеры, включая ie6, и который не ругается на этот класс.
              В-третих, изначально в этой технике тег body и использовался, но через определенное время от него отказались в пользу , так как были обнаружены некоторые проблемы в ie разных версий (в некоторых случаях они падали в режим совместимости, на сколько я помню)
              • +1
                после имплементации на любую более-менее сложную cms ни о какой валидности речь идти не может


                Пусть это остаётся на совести этих CMS.

                Во-вторых, уже давно можно пользоваться <!doctype html&ht;


                Так я же написал про HTML5.
                • 0
                  Пусть это остаётся на совести этих CMS.

                  Так при чем тут CMS, это не их проблемы, что валидатор обновляется раз в полгода и тупо не успевает за развитием технологий.
                  Как пример — провалидируйте ya.ru — страничку, состоящую из маленькой формы. 9 ошибок по версии w3validator — и ничего, работает, да и яндекс не особо волнуется.

                  Так я же написал про HTML5.


                  Ну а я о чем :) Если вас смущает невалидность аттрибута у — просто смените доктайп, и никому от этого не станет хуже, а очень даже наоборот
                  • 0
                    Так при чем тут CMS, это не их проблемы, что валидатор обновляется раз в полгода и тупо не успевает за развитием технологий.


                    Валидатор, технологии… Вы рассуждаете так, как будто понятия «спецификация» и «стандарт» Вам вообще незнакомы.

                    Ну а я о чем :) Если вас смущает невалидность аттрибута у — просто смените доктайп


                    Когда я просто (для эксперимента) сменил доктайп у очередного проекта, сразу же обнаружилось, что в HTML5 свой синтаксис мета-тегов, а старый в нём не валиден. Зачем выдавать за HTML5 то, что таковым не является?
                    • 0
                      Если бы все браузеры одинаково воспринимали «спецификации» и «стандарты», то и в хаках не было бы смысла.
                      Валидность на данном этапе развития веб-технологий — в большинстве случаев просто условность, выше я писал почему.

                      Хорошо, забудем о doctype html. К примеру, атрибут класса не является валидным для xhtml 1.1. Тем не менее он полностью выполняет заложенную мной функциональность, не ломая layout сайта, никак не влияет на его быстродействие и выдачу в поисковых системах. Почему я должен отказываться от этого преимущества?
                      • 0
                        А зачем Вам вообще понадобился XHTML 1.1? Вы же его никакими силами не сможете скормить IE, он будет давиться application/xhtml+xml в заголовке.

                        Да, грамотность — это тоже условность. Что не повод писать неграмотно.
              • 0
                были обнаружены некоторые проблемы в ie разных версий (в некоторых случаях они падали в режим совместимости, на сколько я помню)


                Вот это серьёзно. Я полагал, CC — безопасная технология.
              • +1
                …И если уж мы пользуемся CMS, то можно вообще обойтись без условных комментариев, а переложить на неё сниффинг версии браузера и прописывание её в класс для body. Выйдет и универсальней и валидно, и никаких проблем ни в каком IE не вызовет.
                • 0
                  Да, тоже вариант, но это частный случай. СС — более универсальный метод, подходит как для статических сайтов, так и для динамических на цмс.
                  • 0
                    Я имел в виду, что предложенный мной метод универсальней в том смысле, что даёт информацию по всем браузерам, а не только IE. Бывает нужно.

                    А ещё можно и без CMS обойтись. На днях написал вот такой jQuery-скриптик:

                    $(function(){
                    	$.each($.browser, function(key, value){
                    		if(key!=='version' && key!=='safari' && value){
                    			$("body").addClass(key+"-"+$.browser.version.replace(".", "-"));
                    			return false;
                    		}
                    	});
                    });
        • 0
          я тоже не понял, зачем присваивать класс тегу html, когда есть body
  • –2
    А чем хак — *html a { margin:0 } «чище» грязного хака — a { _margin: 0 }?

    Хак — .class { background: #F00\0/; }, не только для ие8, так же работает под 9, а в 10 вообще хотят отменить сonditional comments.

    Присоединюсь к derSmoll, не хватает подхода Irish'а к определению стилей под ИЕ.

    Вот еще небольшая подборка хаков, может пригодиться, но я бы не советовал использовать — clip2net.com/s/16cig (проверял всё лично).
    • +3
      Еще бы не плохо добавить информацию о www.modernizr.com, раз уж собираешь всю информацию о латании браузеров.
  • +1
    Я хоть и противник ИЕ6 (и даже, относительно ИЕ7 особо не люблю напрягаться), но я понимаю, что есть категория корпоративных юзеров, которым не приходится выбирать, с каким браузером в Сеть ходить. И если Большой Админ сказал, чтоб у всех ИЕ6 было, то юзеру просто вынужден подчиниться.

    Но вот относительно старых версий Оперы и Фокса я как-то не очень понимаю — неужели встречаются ситуации, где на компе стоит ФФ 1.5 или, скажем, Опера 7, и у юзера нет никакой возможности их обновить?
    • 0
      И если Большой Админ сказал, чтоб у всех ИЕ6 было, то юзеру просто вынужден подчиниться.
      Рано или поздно наступит момент, когда недовольство юзеров перевалит критическую границу, начальство стукнет кулаком по столу и Большой Админ наконец-то получит то, на что так долго и упорно нарывался. ;)

      Кстати, причиной может быть и не обязательно недовольство юзеров. Представьте себе визит юзера к начальству со словами «Я бы рад посмотреть в интернете то-то и то-то (называется пару важных с точки зрения информации сайтов), но, к сожалению, сделать это на работе не могу — корпоративный браузер всё портит. Хотя дома у меня всё показывается нормально». А начальство очень не любит, когда упрямство админов мешает работе.
    • 0
      Да. В России сертифицирован для обработки секретной информации браузер КГОД, актуальная 2-я версия коего есть именно Firefox 1.5.
    • 0
      Но вот относительно старых версий Оперы и Фокса я как-то не очень понимаю — неужели встречаются ситуации, где на компе стоит ФФ 1.5 или, скажем, Опера 7, и у юзера нет никакой возможности их обновить?

      Со слезами на глазах (от смеха) спрашивала у заказчика то же самое… Сказал, что эти клиенты для них важны и не…
  • 0
    хаки для ие6 здесь зачем? браузер официально в отставке!
    • 0
      Ссылку на приказ об увольнении в студию
      • 0
        Такой приказ об увольнении подойдет? www.ie6countdown.com/
        • 0
          Выше уже говорили: средняя температура по больнице нифига не показатель здоровья всех ее пациентов.
          • +1
            Причем тут средняя температура? Вы просили подтверждение того что ие6 в отставке — я вам дала ссылку на сайт, который запустил сам майкрософт, с обратным отсчетом пользователей ие6. Какие вам еще нужны подтверждения того, что браузер официально признан устаревшим?
            • –1
              Простите, я просто не знал, что решение мелкомягких является основополагающим для всех в нашей стране. В таком случае признаю свою ошибку, вы правы.
              • +1
                Да ну что вы, не переживайте. Ни одна компания на свете, не сможет запретить вам использование и поддержку десятилетнего браузера. А то что он официально не поддерживается разработчиком, это так мелочи
                • 0
                  Попробуйте взглянуть на это с позиции пользователей сайта, а не разработчика. Они сидят в чем привыкли или в чем могут. Если доля посетителей сайта с ие6 выше 10% — нам что их, со счетов сбрасывать?
                  Вот это советую глянуть.
                  • 0
                    Блин, не вставил ссылку:
                    2010.404fest.ru/video/item-23/
                  • 0
                    Чем быстрее вы откажетесь от поддержки устаревших браузеров, тем быстрее пользователи (те что еще остались) перейдут на нормальную версию бразуера, в которой все будет работать как надо. Это самый лучший мотиватор.
                    • 0
                      Это позиция разработчика. Или человека, который в этом разбирается. А среднестатистический пользователь, если зайдет на сайт и увидит непонятно что — просто уйдет.
                      А заказчику пофиг — ему надо, чтобы клиенты оставались. Пусть даже они с осла 11-летней давности.

                      Послушайте вон доклад Сергея, 10% пользователей (те, что на ие6) приносят владельцам сайта столько же денег, сколько пользователи всех версий Опера (их 20%). Имхо, очень показательно.
                      • 0
                        Я разработчик, поэтому и говорю с точки зрения разработчика. Я отказалась от поддержки ие6 еще два года назад, клиентов меньше не стало, а головная боль пропала совсем.
                      • +1
                        Скажу как пользователь. В свое время перейти c IE6 (вернее, Maxthon) на Firefox меня сподвиг один из сайтов, на котором висело аккуратненькое предупреждение, что содержимое сайта может некорректно отображаться на моем IE6. Не будь его — так бы до сих пор и болтался на старом браузере, не ведая, что есть более мощные браузеры. Так что спасибо тому сайту.
                        Теперь уж и не узнаю, на самом ли деле там чего-то не так отображалось, или разработчик только готовился к переходу на новую версию сайта?
                  • +1
                    Если доля посетителей сайта с ие6 выше 10% — нам что их, со счетов сбрасывать?
                    Вроде бы лично для вас никто так вопрос не ставит.
                    Хотите — пишите. Это ваше право и никто вас не заставляет не делать этого.
  • +1
    хаки чистыми не бывают
  • +3
    Мы клиентов уже учим отказываться от ie7, так что не понимаю полезности от этих хаков.
  • 0
    Ваши «Хаки» не для IE давно протухли, про
    boilerplate не слышали?!
  • 0
    Поясните, будьте добры, что за «Box Model хак»
    В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.

    border и padding влияют на ширину или я не правильно понял?
    • +2
      • 0
        Спасибо, понял о чем речь. Еще не до конца проснулся.
    • +2
      Это уже сто лет как неактуально, т.к. с корректным доктайпом в ИЕ6 нормально работает блочная модель.

      А проблема была в том, что блок, у которого width:100px;padding-right:10px; ие отрисовывал реальной шириной в 100 пикселей, а номаные браузеры в 110. Доктайп решает вообщем.
      • 0
        Даже <!DOCTYPE html> решает проблему.
    • 0
      тсс, не мутите воду
      )

      Если проще, то все версии до IE 6 рассчитывали размеры блоков именно так, как вы написали. А все остальные, включая IE 6, в режиме соответствия стандартам считают размеры так, как это предписывает спецификация. Но… если перевести любую версию IE в Quirks-режим (для этого достаточно убрать доктайп), то размеры снова будут считаться неправильно.
      Более того, в CSS 3 добавили поддержку переключения способа расчета размеров блоков. Это делается с помощью с помощью атрибута box-sizing. Работает во всех последних версиях браузеров (в FF через префикс -moz, в сафари через префикс -webkit). И, что вас наверное больше всего удивит, эта штука весьма востребована.
      • 0
        Угу. Только в Firefox, несмотря на взятые им бурные темпы смены версий, до сих пор сохраняется замеченная лет пять назад несовместимость свойства box-sizing со свойством min-height. Мечтающие о безобёрточной вёрстке футера тоскуют.
  • 0
    Кажется и мои хаки сюда вошли.
  • +1
    Хм. Наверное лучше так. Верстка — 300$. Верстка под IE6 — 600$.
  • +2
    >PNG в IE6

    Рекомендовал бы DD_belated PNG. Преобразует элементы в VML-шейпы, которые, как ни странно поддерживают прозрачность PNG, а самое главное — повторение фона(background-repeat).
    • +1
      Тогда уж проще сразу мегакостыль PIE 1.0 beta 4 поставить, чтобы в дальнейшем не напрягаться по мелочам.
  • +8
    Уже более 270 человек добавили это в избранное.

    Даже страшно представить сколько будет нашаманенно нечитаемого кода воодушевившимися.

    Куда катится этот мир!
    Не добавляйте в избранное всякую гадость, послушайте «Сделайте мне красиво».
    • +1
      Я боюсь того, сколько новых верстальщиков начнут «этими» советами пользоваться. Люди просто верят начитанному и слепо плюсуют/добавляют в избранное. Хабр тупеет(
      • +2
        Классно вы кавычки поставили ;)
      • НЛО прилетело и опубликовало эту надпись здесь
  • +7
    Начинающий версталщик, увидев эту статью, ужаснется и забросит верстку. Автор стать мало того, что ничем не помогает своей статьей, так еще и вводит людей в заблуждение по многим вопросам.
  • 0
    Я IE7 уже не поддерживаю. А в остальных IE, как сказал dfuse, как-то все само работает.
    Вообще рекомендую CSS Browser Selector — rafael.adm.br/css_browser_selector/. Можно писать хаки под любой браузер и движок по такому типу:

    .ie7 { padding:0; }
  • +2
    не вижу смысла поддерживать старые оперы и мозиллы, так как они как правило пользователя принудительно заставляют обновляться.

    Да и под ie6-7 обычно, как уже верно выше подмечено, пригодится только zoom:1, чтобы hasLayot установить.

    Кстати, в проектах, где важно хорошее и качественное отображение в ie6 (к сожалению, и такие заказчики бывают) лучше заранее с дизайнером обсудить макет, а не лепить всяких .htc и .js файлов, чтобы прозрачность декоративных элементов пофиксить (и то, с багами)
    • 0
      не вижу смысла поддерживать старые оперы и мозиллы, так как они как правило пользователя принудительно заставляют обновляться.


      Я не вижу, чтобы Fx3 очень эффективно к этому принуждал.
      • 0
        www.overclockers.ru/softnews/41802/Mozilla_planiruet_prinuditelno_obnovit_brauzery_Firefox_3.5.html — вот новостюшка в пример. может, и не очень эффективно, но приемлемо. главное, что политика компании заставлять обновлять, а механизм, я думаю, отладится со временем)
        • 0
          Цитата оттуда:
          Позже Легнитто сообщил, что слово «заставит» было им использовано неблагоразумно, и отметил, что на Firefox 3.6 будут автоматически перемещены только те из пользователей, у которых включена опция автоматических обновлений.
          Мое мнение: Firefox'у следует очень осторожно подходить к вопросу принудительного обновления, потому что многие его addon'ы не совместимы с новыми версиями.
        • +1
          «В следующем месяце компания Mozilla планирует…», а новость майская. И что у них вышло? Сегодняшняя статистика с «Сайтов Рунета»: Fx5 — 12,0 %, Fx4 — 2,1 %, Fx3 — 8,8 %! Тем более, что «обновление до версии 3.6 тоже приемлемо». По-моему, это фейл с точки зрения обновления версий.
          • 0
            Кстати, я тоже завис на Firefox 3.6 и не желаю пока обновляться до 5-ой версии. Потому что использую удобнейший addon — Tab Kit, который несовместим с новыми версиями. В итоге для меня лично плюсы новой версии FF просто меркнут перед огромнейшим минусом отсутствия древовидной работы со вкладками. И я не одинок в таком выборе — можно в этом убедиться, посетив либо страничку addon'а, либо страничку пропавшего разработчика.
            • 0
              Полностью поддерживаю. Кроме того, очень занимательно обратить внимание на то, сколько памяти кушает 4 и 5 версии (6 пока не проверял) по сравнению с 3.
  • +2
    По стилю похоже на перевод. По сути в начале не хватает приписки «для самых маленьких» зачем нужны хаки, какие хаки из списка стоит использовать и в каких ситуациях. З.Ы. я иногда пользую эту ссылку: studioad.ru/blog/2009-09-30-92
  • +12
    Я бы посоветовал вам дописать примечание для группы «Хаки для всех версий Opera». Примерно такое:
    Эти хаки основаны на неполной или ошибочной поддержке Media Queries и могут сломаться с любым минорным обновлением браузера, которое исправит или дополнит поддержку. Не стреляйте себе в ногу, не используйте потенциально опасные хаки.

    Желательно красным.

    Советую это вам как человек, который ежедневно разгребает такие красоты, понаписанные самонадеянными, но не слишком далёкими авторами, которые думают только о том, чтобы сайт заработал прямо сейчас, а не о его дальнейшей судьбе.
  • 0
    Уж не помню, когда использовал хаки, кроме display: inline-block; хака для IE, conditional comments (а это несомненно хак) и css3pie.com-решения. Как-то удаётся верстать кроссброузерно без этих невероятных головоломок.
    • 0
      все так, даже html5 кросcбраузерный пишется с дополнительными js-либами типа csspie и inline-block-хаком в css — все остальное из приведенных хаков давно не использую
      • 0
        conditional comments для IE еще полезен
    • 0
      Не думаю, что CC это хак.
      msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspx
  • +4
    Я всегда пользовался вот этой таблицей:

    centricle.com/ref/css/filters/

    Она позволяет быстро найти хак с нужным эффектом.
  • +2
    А мне одному кажется что без этого можно обойтись?
  • –4
    Таблицы по прежнему остаются самым надежным хаком.
    • 0
      Ох, как вы ошибаетесь. Надо как-нибудь написать про таблицы :)
      • 0
        Было бы интересно прочитать.
    • 0
      На таблицах обычно учатся. Когда открывают занавесы блочной верстки и начинаешь в ней разбираться, про таблицы ненароком забываешь. :)
  • 0
    Использую только zoom:1;
  • –2
    До сих пор радуюсь, что отказался от верстки и не познаю этот зоопарк браузеров :)
  • 0
    Верстальщик с которым работаю любит хаки всевозможные) в итоге блин малейшие изменения иногда с большим трудом даются)
  • –1
    За то что привели хаки под ИЕ6 вам незачет!

    Как долго пытались его забыть, отказаться, ан нет — вы его опять вспоминаете, зачем-то делая вид, буд-то это еще актуально.

    Лучше-бы обратили больше внимания на ИЕ9, которым пользуются уже на 30% больше чем шестеркой.

    пруф
  • +1
    .class { 
      padding : 4em ; 
      border : 1em solid red ; 
      width : 30em; 
      width /**/ : /**/ 25em ; 
    }

    Разве не 20em? Ведь сумма получается 20+(4+1)*2 — отступы слева и справа.
    • 0
      и да, нормальная BoxModel в ие используется, если есть Доктайп.
  • 0
    Ну я не знаю, вы пользуетесь хаками?
    На мой взгляд хаки — зло. (не тянетесь сразу за минусом, почитайте дальше)
    Если уже хотите как-то бороться с изьянами, то первое не делайте так верстку, чтобы не использовать хаки.
    Второе, если уж пришлось, то на мой взгляд — лучший это js. Это стандартизовано хоть. А хак — это своего рода не стандарт.
    Ответ прост — неизвестно как поведет себя какой либо хак в… например 9 версии FF или 12 opera ;)
    Все таки соблюдение стандартов- первый способ не попасть в просак при выходе новых версий браузеров. К тому же замечено что, например, google любит валидные сайты. Он их ставит выше.
  • 0
    большое спасибо! всё полезное в одном посте!
  • 0
    Сегодня спасла, однозначно в закладки.
  • 0
    Цитирую:
    Грязные хаки для IE8:
    .class { background: #F00\0/; }
    /* выбирает элемент body только в IE7 */

    конец цитаты.
    body? IE7?
  • 0
    Ребята, что есть для Opera 12+?
  • 0
    *|html .class { } — это хак понимает не только IE, еще Google Crome )
    • 0
      Так в этом и смысл. Понимают все, кроме IE6-8.
      Отделение стилей от IE6 — IE8
  • 0
    Нашёл достаточно интересный хак для сафари (стили применяются только для сафари):

    /* Safari only override */
    ::i-block-chrome,.myClass {
    color:blue;
    }

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