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