Хак с применением селектора * html. Хак с применением CSS expression

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

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

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

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

_:-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; }

Этот код работает в 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.

В данном примере 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

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

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

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

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

В данном примере зеленый цвет фона у блока будет установлен только для браузера 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

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