CSS хаки для IE, Chrome, Safari, Mozila

Опубликовано admin - вс, 06/03/2018 - 16:34

Любой веб-программист должен знать, что такое CSS хаки. CSS хаки - разновидность методов определяющих браузер средствами css, основанных на поддержке или не поддержке определенных css свойств тем или иным браузером.

Оглавление статьи "CSS хаки для IE, Chrome, Safari"

Условные комментарии

Суть условных комментариев состоит в том, чтобы вместо слова condition подставить одно изо допустимых условий, приведу значения условий:

IE	Если это Internet Exlorer
lt IE version	Версия Internet Exlorer меньше значения version
lte IE version	Версия Internet Exlorer меньше или равная значению version
IE version	Версия Internet Exlorer равная значению version
gte IE version	Версия Internet Exlorer больше или равная значению version
gt IE version	Версия Internet Exlorer больше чем значение version, допустимые значения - 5, 5.5, 6 или 7

К примеру, Вы можете написать:

что будет означать - установить цвет фона всем элементам div как красный для браузеров Internet Explorer версий 7 и ниже. Или наоборот:

Дополнительный пример условных комментариев для Internet Eplorer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="css">   <![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="css">   <link href="not_ie.css" rel="stylesheet" type="css">  </head> <body> <p>Test</p> </body> </html>

Существуют так называемые отрицательные условные комментарии, синтаксис которых следующий:

<![IGNORE[]]> HTML

Селекторы как CSS хаки

С условными комментариями закончим, перейдём к селекторам, следующий селектор поддерживается только браузером IE 6

* html {}

Следующий селектор пригоден только для седьмой версии IE и ниже

*:first-child+html {} * html {} Следующий селектор пригоден только для седьмой версии IE*:first-child+html {}

Для браузера Opera 9 и белее старых версий данного браузера

html:first-child {}

Правила как CSS хаки

Правила CSS например !important так же могут служить CSS хаками в некоторых случаях, например, для того чтобы все браузеры отобразили цвет фона зелёным, кроме IE 6 версии (для этого браузера фон будет красным), нужно написать следующий стиль:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style type="css"> p { background: green !important; /* для всех мраузеров кроме IE версии 6 и ниже */ background: red; /* IE 6 и ниже */ } </style> </head> <body class="page-body"> <p>Test</p> </body> </html>

IE 7 версии и ниже так же игнорирует селектор @import, и последующее за ним целое css правило:

@import "stylesheet.css" all;

Хаки для Webkit и Safari

Правило содержащееся между фигурными скобками будет работать только в Chrome и Safari 4

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

Правило содержащееся между фигурными скобками будет работать только в Chrome и Safari 3.1

body:nth-of-type(1) p{ color: #333333; }

IE6, IE7, IE8 никогда не будут поддерживать данный код. Более новые версии браузеров - Safari, Chrome и Firefox данный код так же поддерживают.

Оценка

1890 просмотров

Взаимосвязанные материалы

# 1 . CSS хаки для IE, Chrome, Safari, Mozila ( воскресенье, июня 3, 2018 - 16:34 ),

Любой веб-программист должен знать, что такое CSS хаки. читать...

# 2 . CSS3 Media Queries - разным устройствам разный стиль! ( воскресенье, июня 3, 2018 - 16:23 ),

Всё более серьёзно находят поддержку среди браузеров новые стандарты HTML5 и CSS3, новые технологии и платформы для мобильных устройств. читать...

# 3 . 5 обязательных дополнений для работы в css от Firefox ( воскресенье, августа 1, 2010 - 16:46 ),

5 обязательных дополнений для работы в css от Firefox

Привет мои читатели! Надеюсь у Вас всё хорошо! читать...