Главная›CSS-верстка

Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome

114 комментариев

Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний «телодвижений». Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.

По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome.

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

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

*|html[xmlns*=""] .style {
	background: #F00;
}

html:first-child .style {
  background: #F00;
}
/* код валидный */
/* только для Opera < 9.5 */

opera:-o-prefocus .style {
  background: #F00;
}
/* для Opera 9.5 - 12.16 */
/* вместо "opera" можно подставить любое слово/символ */

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

@-moz-document url-prefix() {
  .style {background: #F00;}
}

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

.style {
  _background: #F00;
}
/* код валидный */

Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.

* html .style {
  background: #F00;
}
/* код валидный */

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

*+html .style {
  background: #F00;
}
/* код валидный */

*:first-child+html .style {
  background: #F00;
}
/* код валидный */

html>body .style {
  *background: #F00;
}

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

@media \0screen {
  .style {background: #F00;}
}

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

:root .style {
  background: #F00\9;
}

К сожалению, IE10 тоже понимает данный хак.

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .style {background: #F00;}
}

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

body:last-child:not(:root:root) .style {
  background: #F00;
}
/* для Safari < 4.0 */

html[xmlns*=""] body:last-child .style {
  background: #F00;
}
/* для Safari < 4.0 */

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

Пока не найдены.

Смотрите также

Меняем цвет фона выделенного текста с помощью CSS

36 комментариев

Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня — это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет ...

10 фиксов, решающих проблемы Internet Explorer 6

58 комментариев

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems«. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...

Internet Explorer 8 проходит тест Acid2

17 комментариев

Что-то много в последнее время мне глаза попадается информации, касаемой браузеров и поддержки ими стандартов. И мне это обстоятельство несомненно очень даже нравится. На хабре рассказали о том, что ожидаемая ...

CSS-хаки vs Условные комментарии

15 комментариев

В очередной раз хочется затронуть тему CSS-хаков. Только не подумайте, что я заядлый CSS-хакер :), дело в моем стремлении все упрощать. Так вот, для себя я выделил альтернативу условным комментариям, ...

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

  1. Перспективный блоггер
    24 октября 2010 г. в 15:02

    noindex:-o-prefocus, .class {
    color:#fff;
    }

    Для Оперы 10 работает! Шикарно! Думал, уже не найду. mdss, спасибо!!!

  2. AleXXX
    30 октября 2010 г. в 11:16

    Статья, конечно, хорошая и полезная, спасибо. Но — есть одно «но» :)
    Мне, как, начинающему (да и многим начинающим, наверняка) совсем не ясно — для чего эти хаки, какие баги они фиксят? Можно было бы добавить описания, или, хотя бы ссылки на другие источники с описаниями багов. А?

    1. Dimox
      30 октября 2010 г. в 11:31 / ответ на коммент AleXXX

      Поищите в Интернете статьи на тему «Что такое CSS-хаки» и все станет ясно.

  3. cranx
    14 декабря 2010 г. в 12:29

    Спасибо за статью! Я лично использую хаки только для ИЕ 7 и 6. Для нормальных браузеров использовать хаки вообще смысле не вижу, так как они за крайне редким исключением «послушные». Да и такие браузеры, как правило, часто обновляются и пользователи не используют старые версии.

  4. Анна
    25 января 2011 г. в 15:23

    Здравствуйте! У меня проблема, в IE не работает слайд-шоу на квери. Какой хак и куда добавить, чтобы браузер автоматически отображал слайд-шоу? Спасибо.

    1. hallboy3
      25 января 2011 г. в 15:42 / ответ на коммент Анна

      IE капризничает с JavaScript если в коде JavaScript есть ошибка (при условии, что во всех других браузерах работает). В окне IE слева внизу проверить индикатор, или воспользоваться Консоль ошибок в FF или Opera.

  5. roomster
    28 января 2011 г. в 15:16

    Верстаю новый шаблон для своего блога. Столкнулся с проблеммой использования/отображения в Google chorome CSS правила:

    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topright: 5px; / и так далее./

    Верстаю разумеется в Firefox но основной акцент делаю на стабильном отображении в chrome. Я заметил, что у флектора на http://www.wordpressplugins.ru/ у меня в гугл хроме все стили типа

    -moz-

    отображаются стабильно! Но если я в своём шаблоне применю это правило, то в хроме оно не работает :( Этот пост уже довольно старый или я не разбираюсь в хаках, в общем может кто знает, что нужно сделать чтобы и у меня тоже эти правила работали в google chrome?????

    1. Dimox
      28 января 2011 г. в 15:28 / ответ на коммент roomster

      Стили, которые вы привели, работают только в FireFox, для Хрома используйте border-radius, т.е.:

      border-radius: 0 0 5px 5px;
      1. roomster
        28 января 2011 г. в 16:22 / ответ на коммент Dimox

        уже разобрался! :) Просто вместо приставки -moz- нужно использовать -webkit-
        Получается вот так:

        -moz-border-radius: 0 5px 5px 5px;
                   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
                   -webkit-border-radius: 0 5px 5px 5px;
                   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

        Теперь эффект «закруглённых концов» отображается и в мозиле и в хроме :) Это не хак, а скорее просто разновидность правил…

        1. dbaik
          28 января 2011 г. в 17:27 / ответ на коммент roomster

          Не забывайте указывать

          border-radius: 0 0 5px 5px;

          без приставки, для оперы, например

          1. roomster
            28 января 2011 г. в 17:34 / ответ на коммент dbaik

            Списибо! :)

  6. tvidoz
    30 марта 2011 г. в 14:50

    Не помешали бы хаки для нового ИЕ :)

    1. Stromer
      1 июня 2012 г. в 15:50 / ответ на коммент tvidoz

      Для нового IE? А разве это говно уже и в 10-ой версии есть? Я бы за выпуск IE уголовную ответственность ввел.

  7. Василий
    23 мая 2011 г. в 14:02

    Хак для google chrome
    body:not([x|x]) #products {
    width: 1000px;
    margin:0px;
    padding-left: 35px;
    color: #fffcde;
    }

    1. Dimox
      30 июня 2011 г. в 13:35 / ответ на коммент Василий

      Срабатывает также и в Safari, поэтому не подходит.

      1. Dejmos
        25 октября 2011 г. в 12:02 / ответ на коммент Dimox

        У Хрома и Сафари один и тот же движок как бы :)
        P.S. спасибо за статью! :)

  8. vadikkl
    30 июня 2011 г. в 11:41

    Спс огромное!

  9. Александр Яценко
    29 августа 2011 г. в 19:51

    Пригодится в работе) Сохранил в закладки! ;-)

  10. Владимир
    14 октября 2011 г. в 14:33

    Хром, версия 6.0 и ниже. Хак может сработать на некоторых версиях Safari
    @media all and (-webkit-min-device-pixel-ratio:0)
    {
    .class_style
    {
    background-color: red;
    }
    }

    Некоторые хаки описываются ещё тут http://vova-beg.ru/tezam/detail.php?id=1

  11. Татьяна
    23 декабря 2011 г. в 18:43

    Добрый день есть проблема в 6 ie. Контент прилип к левой стороне и инпуты и резет перекосило, как эту проблему можно решить?

  12. clerik
    3 апреля 2012 г. в 04:51

    Постепенно Opera превращается в IE (((((((((

    1. Dimox
      3 апреля 2012 г. в 09:20 / ответ на коммент clerik

      Что за бред?

  13. Femil
    15 августа 2012 г. в 15:47

    Ну вот, вы опять меня выручили )))
    Спасибо большое!
    Особенно за хак для ФФ (он ведь для всех версий подходит, я верно поняла (?))!

  14. Ринат
    7 сентября 2012 г. в 01:54

    Супер!

  15. Юлия
    6 февраля 2013 г. в 21:39

    Спасибо, я долгое время использовала эту статью как подсказку для себя и думаю, далее буду использовать. Сейчас собрала подборку хаков для браузеров, включая IE10, Safari, Chrome, с разрешения автора могу дополнить коллекцию парой строк в комментариях.

    1. Dimox
      6 февраля 2013 г. в 22:59 / ответ на коммент Юлия

      Конечно, я только «за».

  16. Юлия
    7 февраля 2013 г. в 03:27

    Тогда вот моя подборка:

    
/*opera*/
noindex:-o-prefocus,
.item-name{
font-size:11px;

}
noindex:-o-prefocus,
#content-right-block .add-descr{
font-size:10px;
}
/*opera*/

/*chrome*/
@media all and (-webkit-min-device-pixel-ratio:0) {
.item-name{
font-size:11px;
}
#content-right-block .add-descr{
font-size:10px;
}
}

body:not([x|x]) .letter {
    background:transparent;
 }
/*chrome*/

/*IE10*/
.ie10 .langPan select {
border-width: 1px 1px 3px;
}

/*IE10*/

/* IE 9 */

div.uploader span.filename{
width:auto9;
border:none9;
}
/* IE 9 */
    1. Dimox
      7 февраля 2013 г. в 19:00 / ответ на коммент Юлия

      Спасибо! Пригодится.

    2. Владимир
      11 февраля 2013 г. в 20:19 / ответ на коммент Юлия

      Юля, большое спасибо)
      оперу поборол)

  17. Александр Яценко
    21 июня 2013 г. в 04:45

    Этот хак тоже работает для Opera:

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

    Добавьте его тоже к списку.

    1. Dimox
      21 июня 2013 г. в 09:54 / ответ на коммент Александр Яценко

      Не подходит, т.к. срабатывает и в других браузерах.

      1. Александр Яценко
        21 июня 2013 г. в 12:07 / ответ на коммент Dimox

        Да, согласен! Но теперь в Opera 12+ не срабатывают Хаки, которые представлены в статье. Есть что-то для Opera 12+?

        1. Dimox
          21 июня 2013 г. в 14:18 / ответ на коммент Александр Яценко

          Все, что знаю, указаны в статье. Может быть появились и другие, но их надо искать.

  18. Delik
    10 ноября 2013 г. в 17:14

    До кучи Гугл и Сафари

    To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass { background-color: #FF0000; }
    #myId {color: #0000FF;}
    p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    }

  19. Katja
    7 июля 2014 г. в 09:07

    Скажите, пожалуйста, новичку, куда в CSS или в html нужно вставить хаки для сафари <4 ? У меня не отображается градиент цвета контента у знакомых. Вместо него только лишь фон body.

  20. Алла
    25 ноября 2015 г. в 22:48

    Здравствуйте,у меня опера и мозилла и ie не видят файла css. Тоесть стилей нет вообще на страницах,хотя в хроме все нормально работает.Что это может быть?

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2025 Dimox.name. Все права защищены. Перепечатка запрещена.