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

Я не сторонник условных комментариев в 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

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

Полезные комментарии (1)
Комментарии (114)
  1. 1
    Анна

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

  2. 3
    roomster

    Верстаю новый шаблон для своего блога. Столкнулся с проблеммой использования/отображения в 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?????

  3. 8
    tvidoz

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

  4. 10
    Василий

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

  5. 14

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

  6. 15

    Хром, версия 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

  7. 16
    Татьяна

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

  8. 17
    clerik

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

  9. 19

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

  10. 21
    Юлия

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

  11. 23
    Юлия

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

    
    /*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 */
    
    
  12. 26

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

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

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

  13. 30
    Delik

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

    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);
    }

  14. 31
    Katja

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

  15. 32
    Алла

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

  1. 1
    Юлия

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

    
    /*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 */