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

От автора: если вы уже во 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-хак:

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Louis Lazaris

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)