Хак с применением CSS expression. Хак с применением символа

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Для этой цели в CSS языке были придуманны так называемые хаки(читы), которые позволяют применять группу свойств только под один браузер или несколько, например, только Opera или только Chrome/Safari .

В данной статье представлены возможные рабочие варианты для последних версий браузеров, все хаки были проверены на последних версия на момент 10.05.2015. Если вам помогла эта статья или у вас остались вопросы, спрашивайте в комментариях и оценивайте ее, это может сподвигнуть нас расширить количество хаков для разных браузеров, а так же добавить примеры использования для каждого.

Если хак написан прямо в таблице, значит для его использования нужно скоппировать его в.CSS файл и адаптировать под ваш стиль, иначе на месте названия ссылка с детальным описанием того, как сделать хак.

Таблица совместимости хаков Названия и сами хаки Internet Explorer Google Chrome Opera Safari Mozilla Firefox

	+	-	-	-	-
	-	+	-	-	-
	-	-	+	-	-
_::-moz-svg-foreign-content, :root .class {}	-	-	-	+	-
html/**/body .class, x:-moz-any-link, x:default {color: #F00 ;}	-	-	-	-	+
	-	+	+	+	-
@supports (-webkit-appearance:none) { /* тут ваши стили в обычном виде */ }	-	+	+	-	-

Самый простой и хорошо действенный вариант, создать отдельный.css файл для всех версий IE , и подключать его на ряду с главным, но особым образом.

Условные комментарии работают только в IE под Windows , для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой(в файле.php или.html , куда подключаем файл стилей добавляем такие строчки):

где styles.css - файл, который будет отвечать за стили только для IE .

Единственный известный на данный момент способ написать стили только для Google Chrome , используя при этом JavaScript . При этом не нужно знать JS , достаточно взять пример отсюда и адаптировать его под свои нужды.

Суть состоит в том, что мы проверяем, каким браузером пользуется посетитель сайта и если это Google Chrome , то подключаем для него дополнительный файл стилей, в котором нужные свойства, которые могут перекрываться в основном файле стилей, выделяем !important .

раздел, добавляем такие строчки, внутри тега ):

var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) { var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //путь к файлу стилей только для Chrome link.media = "all"; head.appendChild(link); }

Единственный известный на данный момент способ написать стили только для Opera , используя при этом JavaScript . При этом не нужно знать JS , достаточно взять пример отсюда и адаптировать его под свои нужды.

Суть состоит в том, что мы проверяем, каким браузером пользуется посетитель сайта и если это Opera , то подключаем для него дополнительный файл стилей, в котором нужные свойства, которые могут перекрываться в основном файле стилей, выделяем !important .

Синтаксис такой(в файле.php или.html , куда подключаем файл стилей,т.е. в раздел, добавляем такие строчки, внутри тега ):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) { var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //путь к файлу стилей только для Opera link.media = "all"; head.appendChild(link); }

Единственное что вам тут нужно поменять это в 10 строчке путь до вашего файла стилей.

Спасибо всем за внимание, рады для вас стараться. Повторимся, что мы ждем ваших комментариев, предложений по улучшению и т.д.

При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

Наиболее популярным хаком на сегодня остается так называемый «star html hack» :

#element { position:relative; /* Основное правило для всеx браузеров */ } * HTML #element { position:static; /* Переопределение правила для IE младше седьмой версии */ }

В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY - потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

Как же укротить Internet Explorer, не используя хаки?

Альтернативный выход

В недрах Microsoft Developer Network есть решение получше - . Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии - if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл:

style.css:

#element { position:relative; /* Основное правило для всеx браузеров */ }

#element { position:static; /* Переопределение правила для IE всех версий */ }

Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

position: relative

The IE/Win Disappearing List-Background Bug
IE6 Border Chaos

Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

height: 1%

The IE6 Three Pixel Text-Jog
The IE Escaping Floats Bug
IE and italics (будьте осторожны с 5.0, используйте экранирование)
IE/Win Unscrollable Content Bug
IE/Win Guillotine Bug

Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

display: inline

Floats, Margins and IE
The IE Doubled Float-Margin Bug

display: inline-block

Quirky Percentages in IE6’s Visual Formatting Model

Аналог height: 1% для IE 7.

И еще пара советов:

Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (чаще это относится к height: 1% и zoom: 1).

Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) - попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Псоледовательный метод перебора очень часто используется в нашей професии.

Любой, кто занимался Web-дизайном , сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer , особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки .

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

Однако, прежде чем перейти к CSS хакам , хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript , в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.

Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE . Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега ). Работает он только для браузеров IE , но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE , то подключить таблицу стилей из файла css/ie.css ".

Если необходимо указать конкретную версию браузера, то вместе с "IE " необходимо поставить ещё и номер версии. Например так:

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6 . Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии . Если бы вместо "lt " поставили "lte ", то это бы означало ниже или эквивалентно 6-ой версии.

В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле , всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:

1) Internet Explorer . Данный CSS хак работает для версий IE7 и ниже . Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

P {
* margin-top: 30px; # Для браузеров IE7 и ниже.
}

Как видите перед вторым свойством "margin-top " стоит символ "* ". Это и есть CSS хак . То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже . Вывод: для всех браузеров "margin-top " будет в значении "20px ", а для браузеров IE7 и ниже в значении "30px ". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак :

P {
margin-top: 20px; # Для всех браузеров
_margin-top: 30px; # Для браузеров IE6 и ниже.
}

Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже .

2) Mozilla Firefox . Данный CSS хак работает только для браузеров Mozilla Firefox . Вот его пример:

P, x:-moz-any-link {
margin-top: 30px;
}

В данном примере сообщается, что стиль к селектору "p " будет применён только для браузеров Mozilla Firefox , а все остальные браузеры данный стиль проигнорируют.

3) Opera . Этот CSS хак используется для браузеров Opera . Пример его использования:

* |html p {
margin-top: 30px;
}

Здесь я думаю, что также всё понятно.

Вот и всё, что хотелось написать в этой статье. Однако, ещё раз напоминаю, что CSS хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с , тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.

В Internet Explorer 7 (IE7) по сравнению с предыдущей версией было исправлено большое количество ошибок. Однако появились новые ошибки, которые также требуют написание отдельного кода под эту версию браузера. Далее представлены хаки для седьмой версии браузера Internet Explorer.

Использование!ie

В седьмой версии была исправлена ошибка с !important , но появилась новая. Если после свойства через пробел добавить восклицательный знак и любой набор символов, то стилевое свойство будет корректно воспринято вместо игнорирования. Обычно применяют запись !ie и все браузеры кроме IE6 и IE7 пропускают такой стиль. Учтите, что хак приводит к невалидному коду CSS.

Хаки .hack { background: orange; /* Оранжевый цвет */ background: green !ie; /* Зеленый цвет */ padding: 10px; color: #fff; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt.

В данном примере IE6 и IE7 цвет фона блока покажет зеленым, остальные браузеры — оранжевым.

Использование!!important

Другая проблема связанная с !important в том, что IE7 разрешает в записи недопустимые символы. Конструкцию !!important все браузеры проигнорируют, но IE6 и IE7 воспринимает ее как корректную. Использование подобной записи приводит к невалидному CSS.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Хаки .hack { background: orange; /* Оранжевый цвет */ background: green !!important; /* Зеленый цвет */ color: #fff; padding: 10px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

В данном примере в браузере IE6 и IE7 цвет фона блока будет зеленым, в остальных браузерах — оранжевым.

Звездочка перед именем селектора

Добавление символа звездочки (*) перед именем стилевого свойства противоречит спецификации CSS, но понимается браузером Internet Explorer до версии 7.0 включительно. Соответственно, свойства со звездочкой впереди будут работать только в этом семействе браузеров.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Хаки .hack { background: orange; /* Оранжевый цвет (для всех браузеров) */ *background: green; /* Зеленый цвет (для браузера IE7 и ниже) */ color: #fff; padding: 10px; } Lorem ipsum dolor sit amet...

В данном примере зеленый цвет фона у блока будет установлен только для браузера Internet Explorer версии 7.0 и ниже. В остальных браузерах цвет фона будет оранжевым.

Конструкция *:first-child+html

Конструкция *:first-child+html добавляемая перед именем селектора работает только для браузера Internet Explorer 7. Плюс в том, что она соответствует спецификации CSS.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Хаки *:first-child+html .hack { background: green; /* Зеленый цвет */ } .hack { background: orange; /* Оранжевый цвет */ color: #fff; padding: 10px; } Lorem ipsum dolor sit amet...

В данном примере зеленый цвет фона у блока будет установлен только для IE7. В остальных браузерах цвет фона будет оранжевым.

CSS-хаки для браузера Opera *|html .style { background: #F00; } html:first-child .style { background: #F00; } CSS-хаки для браузера FireFox @-moz-document url-prefix() { .style {background: #F00;} } CSS-хаки для браузера Internet Explorer 6.0 и ниже .style { _background: #F00; } * html .style { background: #F00; } CSS-хаки для браузера Internet Explorer 7.0 *+html .style { background: #F00; } html>body .style { *background: #F00; } CSS-хаки для браузера Safari body:last-child:not(:root:root) .style { background: #F00; } html body:last-child .style { background: #F00; }

Для Internet Explorer существует альтернативное решение - conditional comments (условные комментарии). Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример использования условных комментариев:

Первой строкой идет обычное подключение CSS-файлов, однако вторую строку, увидят, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии - if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл.

И еще раз позволю себе повториться. Время IE6 подходит к концу, и на сегодняшний день практически все современные браузеры отображают валидный код вполне адекватно. Поэтому, в случае возникновения проблем с отображением страницы в каком либо браузере, прежде чем прибегать к хакам, просмотрите заново свой код, поэкспериментируйте, поищите информацию в интернете, и скорей всего ненужных хаков можно будет избежать, добившись таким образом абсолютной валидности вашего кода.