Разработчики неправильно понимают значение термина. Какие методы нельзя назвать хаками

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

Для этой цели в 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% случаев вы найдете более элегантное решение.

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 подходит к концу, и на сегодняшний день практически все современные браузеры отображают валидный код вполне адекватно. Поэтому, в случае возникновения проблем с отображением страницы в каком либо браузере, прежде чем прибегать к хакам, просмотрите заново свой код, поэкспериментируйте, поищите информацию в интернете, и скорей всего ненужных хаков можно будет избежать, добившись таким образом абсолютной валидности вашего кода.

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

Разработчики неправильно понимают значение термина

Как многие из вас слышали, недавно на сайте SitePoint были опубликованы результаты большого опроса по CSS, а я обобщил их в отдельной статье. Одним из вопросов был: Под какие из следующих браузеров от Microsoft вы пишите CSS-хаки?

Когда я первый раз обработал результаты опроса, я пропустил маленькую неточность в ответах к этому вопросу, однако David Storey, инженер из Microsoft, который принимал участие в создании их нового браузера, обратил на это внимание. Проголосовало 1 418 человек, а результаты были следующие:

Результаты неутешительные: плохо, что более 60% разработчиков пишут CSS-хаки для IE9 и IE10. Но Edge получил 45%? Для Edge есть некоторые опубликованные хаки, но их еще нет на сайте Browserhacks . Крайне необычно, что столько людей используют хаки для этого браузера. Возникает более серьезный вопрос: С какими такими проблемами рендеринга CSS сталкиваются разработчики в Edge, что им приходится прибегать к хакам?

Сначала я подумал, что люди путают хаки с функцией обнаружения браузера. Но даже это не объясняет такие высокие цифры для Edge.

Потом я понял, люди, должно быть, не до конца поняли вопрос; люди думают, что «CSS хаки для браузера Х» то же самое, что «Поддержка браузера Х». Другого логического объяснения быть не может, особенно если учесть большие проценты у других браузеров, которым не нужны хаки.

Давайте всем тем, кто путается в понятиях, дадим точное определение, что такое хак.

Что такое CSS-хак?

Хак – это какой-то код в файле CSS, стили которого применяются только к указанным браузерам, а другими игнорируется. Разберем пример. Это CSS-хак:

* html .sidebar { margin-left: 5px; }

* html . sidebar { margin - left : 5px ;

Код CSS выше (также известен как хак «*-html ») применится только к браузеру IE6 и ниже. Большинство разработчиков, поддерживающих IE 6, не волнуют более ранние версии, так что можно считать, что этот хак только для IE6.

Тут хак это символ звездочки, стоящий перед «html». Это комбинация универсального селектора и селектора типа. Кто-то обнаружил, что эти два селектора вместе делают так, что заданные селекторы работают только в определенных версиях IE, а другими браузерами игнорируются. Т.е. левый внешний отступ у.sidebar в примере выше будет только в IE6 и ниже. CSS код написан правильно, и сообщений об ошибке или предупреждений вы не увидите (чуть ниже более подробно). Вот еще один пример с сайта Browserhacks, на этот раз для IE11:

_:-ms-fullscreen, :root .selector { margin-left: 5px; }

_ : - ms - fullscreen , : root . selector { margin - left : 5px ;

Не буду вдаваться в детали и объяснять, почему код выше это хак (отчасти потому что я сам полностью не уверен, что правильно это понимаю), однако код выше работает только в IE11. На самом деле на сайте Browserhacks говорится «IE11 и выше», так что можно предположить, что он работает и в Edge. Но я этого не проверял. Важно не, для каких браузеров написан хак, а правильно ли мы понимаем, что это такое.

Делают ли CSS-хаки код невалидным?

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

Бывают случаи, когда в CSS коде есть хаки, но ошибок и предупреждений нет. К примеру, если вы используете только *-html хак дляIE6, то ваш код спокойно пройдет валидациюю.

Также некоторые хаки (как хак для IE11, о котором я говорил выше) используют вендорные префиксы (например, :-ms-fullscreen). В таком случае, если не изменять настройки в самом валидаторе, файл пройдет проверку, и сервис покажет сообщение:

Но если прокрутить до самого экрана валидатора, там будет предупреждение:

В данном случае меня предупреждают, что:-ms-fullscreen – «неизвестный псевдокласс с вендорным префиксом». Если вы считаете предупреждения такого рода ошибками, то в валидаторе можно открыть вкладку «More Options» и сделать так, чтобы данные предупреждения распознавались как ошибки:

В разделе «Vendor Extensions» в выпадающем списке выберите «Errors», и тогда во время проверки ваш файл не пройдет валидацию, если в нем содержатся вендорные префиксы или любой другой код для определенных браузеров (необязательно хаки). С другой стороны, вы вполне спокойно можете написать так:

Example { margin-left: 5px\9; }

Example { margin - left : 5px \ 9 ;

Этот код работает в IE8 и ниже. Тут хак это обратный слеш и девятка (\9). В большинстве браузеров вообще вся строка будет проигнорирована из-за \9. Но по непонятным причинам в IE8 и ниже такая запись вполне себе нормально работает. В этом примере в независимости от настройки валидатора, выскочит ошибка, стили не пройдут валидацию:

Какие методы нельзя назвать хаками?

Методы и техники ниже необязательно могут быть CSS-хаками:

!important – не хак

CSS строка с!important на конце вообще не относится к этой теме. Это валидная CSS запись, которая не направлена на работу в каком-то конкретном браузере. Это не хак, но может расцениваться как плохой стиль в CSS.

Вендорные префиксы не всегда являются хаками

Вендорные префиксы нацелены на конкретные браузеры, но, обычно, их не называют хаками. В большей части случаев при использовании вендорных префиксов также пишется стандартизированный код. Это не хак. В отдельных случаях код с вендорными префиксами можно считать хаком. Примером может послужить код выше _:-ms-fullscreen. Еще пример это включение аппаратного ускорения в WebKit браузерах. Но все же по большей части вендорные префиксы это отдельный предмет. На сайте W3C есть документация к коду с вендорными префиксами, в которой поддерживается идея того, что такой код нельзя рассматривать как хак.

Селекторы высокой специфичности – не хаки

Если вы поднимаете специфичность селекторов, чтобы переписать какие-то стили, это нельзя назвать хаком (к примеру, body .content #sidebar p). Это плохой стиль CSS, но не хак.

Старый синтаксис также не является хаком

Хороший пример – сложный код Flexbox для поддержки старых браузеров. Помимо того, что на сегодняшний день такой код неактуален, я бы не стал называть это хаком. На тот момент, когда браузеры поддерживали старую запись селекторов, код был полностью валидным. Эффект от этого кода точно такой же, как от хака, но я не думаю, что это одно и то же.

А являются ли условные комментарии хаком?

Условные комментарии, с помощью которых можно писать CSS или даже HTML код под конкретные версии IE, занимают неопределенное положение. Написанный определенным образом HTML код полностью валидный, но все равно саму запись можно отнести к хакам.

В 2008 году Paul Irish популяризировал то, что мы называем условными классами, которые, я уверен, многие из нас использовли. Условные классы задавались в условных комментариях и становились доступными только в определенных версиях IE, т.е. можно было использовать валидный CSS код в определенных версиях IE.

Являются ли условные комментарии CSS-хаком? Я бы ответил да, даже просто потому, что они выполняют ту же задачу, что и обычные CSS-хаки.

Стоит ли пользоваться CSS-хаками?

Как и с другими вопросами в сфере веб-разработки, тут нельзя точно ответить. Правильнее будет сказать в зависимости от случая. Сторонники чистоты кода будут говорить, что хаки лучше не использовать. Но зачастую все не так просто. Я советую:

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

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

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

Всегда комментируйте хаки и рефакторьте код при первой возможности.

В итоге

Если из данной статьи вам ничего не запомнилось, тогда запомните всего одно предложение: CSS-хаки применяют код к одному или нескольким версиям браузера, другие браузеры игнорируются. Это простое определение CSS-хака. Если вы поддерживаете Microsoft Edge в 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. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных:), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

Я создал css файлик, который в теле документа будет отображать или скрывать div’ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.

Browser { position: absolute; top: px; right: px; z-index: 2; padding: 10px } .browser div { display: none } /* Все вменяемые браузеры */ *:lang(ru) #lightMOD { display: block } /* Хитрый селектор - все современные браузеры - не IE6 или IE7 */ html>/**/body #lightMOD { display: block } /* Вживленный комментарий - все современные браузеры - не IE6 или IE7 */ /* IE */ * html #lightIE6 { display: block } /* Лояльность разбора - будет работать в IE6 и в режиме quirks в IE7 */ *+html #lightIE7 { display: block } body div.stopper { width: 100%; max-width: 1100px; min-width: 900px; *width: expression(document.body.clientWidth > 1100? «1100px»: document.body.clientWidth < 900? «900px»: «100%»); /* оверрайд одного свойства - в данном случае это эмуляция min- и max-width */ } /* FireFox */ @-moz-document url-prefix() { /* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */ #lightFF, x:-moz-any-link { display: block } /* главное - ошибиться в регистре, работает только для ID */ #lightFF2 { display: block } /* Firefox 3 имеет новый селектор:default. Алярм, без обрамления IE поймет эту конструкцию */ #lightFF3, x:-moz-any-link, x:default { display: block } } /* Opera 9.5 */ /* not после @media не обрабатывается ничем, кроме Opera 9.5 - видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */ @media not all and (-webkit-min-device-pixel-ratio) { #lightO95 { display: block } } /* Opera 9.2 */ /* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает - тоже рекомендуется быть внимательным */ @media all and (scan: progressive) { #lightO92 { display: block } } /* Safari */ /* Первая конструкция - против Opera 9.5, которая понимает вторую, а вторая - против Opera 9.2, которая понимает первую. Верх извратства 🙂 Вобщем-то безопасная конструкция, т.к. 9.2 уже не будет эволюционировать и явно не сможет обработать:first-of-type, а -webkit- - проприетарное свойство и обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */ /* Safari понимает обе, поэтому хак работает */ @media all and (-webkit-min-device-pixel-ratio:0) { body:first-of-type #lightSF3 { display: block } /* вместо:first-of-type можно еще использовать:nth-of-type(1) - он для Safari 3.1 */ }

Код я более-менее подсветил…

Хаков для IE8 пока либо нет, либо он действительно будет хорош 😉 в чем, правда, лично я сомневаюсь… MS собираются вводить свойства -ms- (одно из них -ms-box-model я уже даже воочию видел). Вобщем-то путь верный - такие «грабли» самые безопасные.

Посмотреть в действии можно на http://test.dis.dj/css/ (справа висит блок с выводом, какие хаки подействовали).

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

Все хаки можно разделить на несколько категорий:

Хаки в чистом виде - использование лояльностей в обработке CSS правил парсерами браузеров (например - *width для IE)

Намереные дополнения CSS, которые другой браузер не поймет чисто в принципе (особенно здесь рулит Mozilla со свойствами -moz- и офигенной штукой @-moz-document, которая позволяет не боясь ничего писать правила только под Mozilla)

Особенности поддержки браузерами нововведений CSS3 и иже с ними. Что касается IE6 - он и часть CSS2 не понимает (дочерний селектор E>F например)

Первая группа хаков ведет к невалидному CSS и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.

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

Третья группа - самый коварный и нежелательный пункт. Конструкции CSS Media Query - это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример - Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.

UPD. Хак для IE8: /*/ #nav a {position:relative;} /**/

Хорошо Плохо