Персональные 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 @media \0screen {
.style {background: #F00;}
}
screen {
.style {background: #F00;}
}
CSS-хак для браузера Internet Explorer 9
:root .style {
background: #F00;
}
К сожалению, 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
Пока не найдены.
Комментарии (114)
Здравствуйте! У меня проблема, в IE не работает слайд-шоу на квери. Какой хак и куда добавить, чтобы браузер автоматически отображал слайд-шоу? Спасибо.
IE капризничает с JavaScript если в коде JavaScript есть ошибка (при условии, что во всех других браузерах работает). В окне IE слева внизу проверить индикатор, или воспользоваться Консоль ошибок в FF или Opera.
Верстаю новый шаблон для своего блога. Столкнулся с проблеммой использования/отображения в Google chorome CSS правила:
Верстаю разумеется в Firefox но основной акцент делаю на стабильном отображении в chrome. Я заметил, что у флектора на http://www.wordpressplugins.ru/ у меня в гугл хроме все стили типа
отображаются стабильно! Но если я в своём шаблоне применю это правило, то в хроме оно не работает :( Этот пост уже довольно старый или я не разбираюсь в хаках, в общем может кто знает, что нужно сделать чтобы и у меня тоже эти правила работали в google chrome?????
Стили, которые вы привели, работают только в FireFox, для Хрома используйте
border-radius, т.е.:уже разобрался! :) Просто вместо приставки -moz- нужно использовать -webkit-
Получается вот так:
Теперь эффект “закруглённых концов” отображается и в мозиле и в хроме :) Это не хак, а скорее просто разновидность правил…
Не забывайте указывать
без приставки, для оперы, например
Списибо! :)
Не помешали бы хаки для нового ИЕ :)
Для нового IE? А разве это говно уже и в 10-ой версии есть? Я бы за выпуск IE уголовную ответственность ввел.
Хак для google chrome
body:not([x|x]) #products {
width: 1000px;
margin:0px;
padding-left: 35px;
color: #fffcde;
}
Срабатывает также и в Safari, поэтому не подходит.
У Хрома и Сафари один и тот же движок как бы :)
P.S. спасибо за статью! :)
Спс огромное!
Пригодится в работе) Сохранил в закладки! ;-)
Хром, версия 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
Добрый день есть проблема в 6 ie. Контент прилип к левой стороне и инпуты и резет перекосило, как эту проблему можно решить?
Постепенно Opera превращается в IE (((((((((
Что за бред?
Ну вот, вы опять меня выручили )))
Спасибо большое!
Особенно за хак для ФФ (он ведь для всех версий подходит, я верно поняла (?))!
Супер!
Спасибо, я долгое время использовала эту статью как подсказку для себя и думаю, далее буду использовать. Сейчас собрала подборку хаков для браузеров, включая IE10, Safari, Chrome, с разрешения автора могу дополнить коллекцию парой строк в комментариях.
Конечно, я только “за”.
Тогда вот моя подборка:
Спасибо! Пригодится.
Юля, большое спасибо)
оперу поборол)
Этот хак тоже работает для Opera:
Добавьте его тоже к списку.
Не подходит, т.к. срабатывает и в других браузерах.
Да, согласен! Но теперь в Opera 12+ не срабатывают Хаки, которые представлены в статье. Есть что-то для Opera 12+?
Все, что знаю, указаны в статье. Может быть появились и другие, но их надо искать.
До кучи Гугл и Сафари
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);
}
Скажите, пожалуйста, новичку, куда в CSS или в html нужно вставить хаки для сафари <4 ? У меня не отображается градиент цвета контента у знакомых. Вместо него только лишь фон body.
Здравствуйте,у меня опера и мозилла и ie не видят файла css. Тоесть стилей нет вообще на страницах,хотя в хроме все нормально работает.Что это может быть?