CSS Hack — это средство, которое используется, когда стандартный CSS несовместим с эффектами отображения различных браузеров. Пока производители браузеров не достигнут соглашения о том, как анализировать CSS, мы можем использовать этот метод только для выполнения таких задач. Возможно, вы сможете найти в Интернете множество хаков CSS, но вы можете не понять все те, которые я выпустил сегодня, потому что это CSS-хаки, предназначенные только для одного браузера.
Чтобы показать вам, как эти CSS-хаки работают, я создал шесть новых тегов P и присвоил каждому тегу P уникальный идентификатор. Это покажет вам CSS Hack в действии.
| <p id="opera">Я из Opera 7.2–9.5</p> <p id="safari">Я волшебное Сафари</p> <p id="firefox">Я из Firefox</p> <p id="firefox12">Я FF старший Firefox 1–2 </p> <p id="ie7">Я 囧IE7</p> <p id="ie6">У меня сломанный IE 6</p> |
Затем я разрешил этим тегам P не отображаться по умолчанию.
| <style type="text/css"> тело p {дисплей: нет;} </стиль> |
Используйте условные комментарии IE CSS, чтобы различать браузеры IE.
Самый простой способ отличить браузеры IE — это, естественно, использовать их условные комментарии. Microsoft создала мощный синтаксис, который позволяет нам реализовать эту функциональность. Я не хочу вдаваться в подробности условных комментариев IE. Думаю, в поисковике можно искать десятки тысяч поисковых запросов, мне здесь нужны только эти два:
| <!--[если IE 7]> <style type="text/css"> </стиль> <![конец]--> <!--[если IE 6]> <style type="text/css"> </стиль> <![конец]--> |
Используйте хаки парсера CSS, чтобы отличить IE
Хотя условные комментарии IE очень просты и удобны в использовании, если вы хотите поместить весь CSS в один файл, вам придется использовать другие методы. Обратите внимание, что хак IE 7 здесь будет работать только на IE7, потому что IE6 вообще не знает селектора >. В то же время следует отметить, что селектор > также недействителен для других браузеров.
| /* IE 7 */ html > тело #ie7 {*отображение: блокировать;} /* ИЕ 6 */ тело #ie6 {_display: блокировать;} |
CSS Hack, чтобы отличить Firefox
Первый использует body:empty, чтобы различать Firefox 1 и 2. Второй хак использует фирменное расширение для всех браузеров Firefox — moz. -moz действителен только для Firefox. Вам не нужно беспокоиться о влиянии других браузеров при использовании этого хака.
| /* Firefox 1–2 */ тело: пусто #firefox12 {дисплей: блокировать;} /* Firefox */ URL-префикс @-moz-document() {#firefox {дисплей: блок }} |
CSS Hack отличает Safari
Хак CSS для Safari очень похож на хак для Firefox. Он использует собственное расширение браузера Safari — webkit и эффективен только для браузера Safari.
| /* Сафари */ @media screen и (-webkit-min-device-pixel-ratio:0) {#сафари {дисплей: блок }} |
CSS Hack отличает Opera
| /* Опера */ @media все и (-webkit-min-device-pixel-ratio:10000), не все и (-webkit-min-device-pixel-ratio:0) {head~body #opera {display: block }} |
Затем сложите все это вместе, и получится
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Хаки CSS для браузера</title> <style type="text/css"> тело п { дисплей: нет; } /* Опера */ html:первый ребенок #opera { дисплей: блок; } /* IE 7 */ html > тело #ie7 { *дисплей: блок; } /* ИЕ 6 */ тело #ie6 { _display: блок; } /* Firefox 1–2 */ тело: пусто #firefox12 { дисплей: блок; } /* Firefox */ URL-префикс @-moz-document() { #firefox { display: блокировать } } /* Сафари */ @media screen и (-webkit-min-device-pixel-ratio:0) { #сафари {дисплей: блок } } /* Опера */ @media все и (-webkit-min-device-pixel-ratio:10000), не все и (-webkit-min-device-pixel-ratio:0) { голова ~ тело #opera { display: блок }; } </стиль> </голова> <тело> <p id="opera">Я из Opera 7.2–9.5</p> <p id="safari">Я волшебное Сафари</p> <p id="firefox">Я из Firefox</p> <p id="firefox12">Я FF старший Firefox 1–2 </p> <p id="ie7">Я 囧IE7</p> <p id="ie6">У меня сломанный IE 6</p></body> </html> |
Хотя CSS Hack хорош и удобно совместим с различными браузерами, он не может пройти проверку W3C, поэтому вам придется взвесить, нужно ли его использовать.