Главная » Создание сайтов » Верстка » CSS-хаки для IE, Opera, FF, Safari, Google Chrome

CSS-хаки для IE, Opera, FF, Safari, Google Chrome

CSS-хаки для IE, Opera, FF, Safari, Google Chrome

Чтобы добиться кроссбраузерности, иногда приходится переворачивать код вверх дном.

В этой статье вы узнаете хаки, которые помогут вам. Они персональны для определенного браузера. Так что ломать голову над css не придется.

CSS Хаки для IE 6:
.class {
_background: #F00;
}

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

CSS Хаки для IE 7:
*+html .class {
background: #F00;
}
/* код валидный */

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

CSS Хаки для Opera:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.class {background: #F00;}
}

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

Последний пример только для Opera 9.5

CSS Хаки для FireFox:
@-moz-document url-prefix() {
.class {background: #F00;}
}

CSS Хаки для Safari и Google Chrome:
body:last-child:not(:root:root) .class {
background: #F00;
}

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

За подборку, можно сказать спасибо Dimox'у

С уважением, Vasilenko Ivan!

Комментарии — 12 комментариев

  1. #189 kattykatty в 13:53, 31 декабря 2008: (подписался)

    Ответить | Цитировать

    И все-таки, ни у вас, ни где-то еще в интернете, я не могу найти хака отдельно для сафари. Все, что находила хаки непременно затрагивают хотябы еще один браузер. Они существуют по сафари вообще?

  2. #190 WebMast в 14:48, 31 декабря 2008:

    Ответить | Цитировать

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

    Может правило хака (приведенном выше «Safari и Google Chrome»), действует одинаково для обоих этих браузеров. Тогда зачем выдумать еще один велосипед? Когда можно смело пользоваться этим...

    Может я не прав, то извиняйте. У меня нету возможности проверить справедливость этих хаков...

  3. #195 Egoholic в 22:11, 8 января 2009:

    Ответить | Цитировать

    наконец-то я дождался этого! ВебМаст, спасибо!

  4. #203 WebMast в 11:08, 9 января 2009:

    Ответить | Цитировать

    Egoholic, пожалуйста!

  5. #1359 40a в 19:47, 5 июня 2009:

    Ответить | Цитировать

    Подключение отделных стилей для Opera

    <link href="style.css" rel="stylesheet" type="opera/css">

    валидно.

  6. #1386 WebMast в 15:54, 6 июня 2009:

    Ответить | Цитировать

    40a, вариант хорош, но всегда ли хорошо подключать отдельные стили?

  7. #6453 Aleko в 14:31, 30 сентября 2009:

    Ответить | Цитировать

    Вот здесь я специально собрал проверенную отличную подборку css хаков. Надеюсь вам поможет: studioad.ru/blog/css_haki...rs/2009-09-30-92. В том числе я нашел (написал) хаки для хрома и ie8.

  8. #6462 WebMast в 17:09, 30 сентября 2009:

    Ответить | Цитировать

    Aleko, спасибо, думаю будет полезно...

  9. #9348 Ant в 13:33, 19 февраля 2010: (подписался)

    Ответить | Цитировать

    WebMast не подскажешь как изменить отступ в firefox 3.6? дело в том, что во всех броузерах отображается корректно. Но в новой версии firefox 3.6. меню с отступом от верха.

    в css у меня margin-top: 7px; в прошлой версии firefox 3.0.17 все ок, ie 7-8 тоже ок, opera 10 ок, но firefox 3.6 — отступ.

    Может какой-нибудь хак посоветуешь именно для firefox 3.6. ?

    Иначе уже устал стили переделывать, ради одного firefox 3.6. в остальных броузерах все летит.

    Всего доброго!

  10. #9349 WebMast в 19:25, 19 февраля 2010:

    Ответить | Цитировать

    Ant, скорее всего хаков для определенных версий firefox нет. Возможно я помогу вам с самой версткой? Напишите мне по icq.

  11. #10773 Гриша в 11:26, 14 декабря 2010:

    Ответить | Цитировать

    Нашел интересную статью по CSS хакам для различных браузерах. Возможно покажется интересной.

    CSS Хаки для Firefox, Opera, Safari и Internet Explorer

  12. #18860 СЛАВЕГ в 14:10, 4 марта 2013:

    Ответить | Цитировать

    Пожалст — хаки тока для Сафари

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя