Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome
Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.
По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome.
По мере обнаружения новых хаков, данный список будет дополняться.
CSS-хаки для браузера Opera
1 2 3 4 | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .style {background: #F00;} } |
1 2 3 | *|html[xmlns*=""] .style { background: #F00; } |
1 2 3 4 5 | html:first-child .style { background: #F00; } /* код валидный */ /* только для Opera < 9.5 */ |
CSS-хаки для браузера FireFox
1 2 3 | @-moz-document url-prefix() { .style {background: #F00;} } |
CSS-хаки для браузера Internet Explorer 6
1 2 3 4 | .style { _background: #F00; } /* код валидный */ |
Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.
1 2 3 4 | * html .style { background: #F00; } /* код валидный */ |
CSS-хаки для браузера Internet Explorer 7
1 2 3 4 | *+html .style { background: #F00; } /* код валидный */ |
1 2 3 4 | *:first-child+html .style { background: #F00; } /* код валидный */ |
1 2 3 | html>body .style { *background: #F00; } |
CSS-хаки для браузера Internet Explorer 8
1 2 3 | @media \0screen { .style {background: #F00;} } |
CSS-хаки для браузера Internet Explorer 9
1 2 3 | :root .style { background: #F00\9; } |
CSS-хаки для браузера Safari
1 2 3 4 | body:last-child:not(:root:root) .style { background: #F00; } /* для Safari < 4.0 */ |
1 2 3 4 | html[xmlns*=""] body:last-child .style { background: #F00; } /* для Safari < 4.0 */ |
CSS-хаки для браузера Google Chrome
Пока не найдены.
Списибо! :)
Не помешали бы хаки для нового ИЕ :)
Хак для google chrome
body:not([x|x]) #products {
width: 1000px;
margin:0px;
padding-left: 35px;
color: #fffcde;
}
Спс огромное!
Срабатывает также и в Safari, поэтому не подходит.
Пригодится в работе) Сохранил в закладки! ;-)
Хром, версия 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
У Хрома и Сафари один и тот же движок как бы :)
P.S. спасибо за статью! :)
Добрый день есть проблема в 6 ie. Контент прилип к левой стороне и инпуты и резет перекосило, как эту проблему можно решить?