Хак с применением правила CSS!important. Хак с применением дочернего селектора
При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с 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 подходит к концу, и на сегодняшний день практически все современные браузеры отображают валидный код вполне адекватно. Поэтому, в случае возникновения проблем с отображением страницы в каком либо браузере, прежде чем прибегать к хакам, просмотрите заново свой код, поэкспериментируйте, поищите информацию в интернете, и скорей всего ненужных хаков можно будет избежать, добившись таким образом абсолютной валидности вашего кода.
В этом посте я постарался собрать все известные мне хаки для 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 и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.
Вторая группа - пожалуй, самый безопасный вариант. Если только разработчики вдруг не надумают отказаться от своих же нововведений.
Третья группа - самый коварный и нежелательный пункт. Конструкции CSS Media Query - это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример - Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.
UPD. Хак для IE8: /*/ #nav a {position:relative;} /**/
Хорошо Плохо
Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.
Для этой цели в CSS языке были придуманны так называемые хаки(читы), которые позволяют применять группу свойств только под один браузер или несколько, например, только Opera или только Chrome/Safari .
В данной статье представлены возможные рабочие варианты для последних версий браузеров, все хаки были проверены на последних версия на момент 10.05.2015. Если вам помогла эта статья или у вас остались вопросы, спрашивайте в комментариях и оценивайте ее, это может сподвигнуть нас расширить количество хаков для разных браузеров, а так же добавить примеры использования для каждого.
Если хак написан прямо в таблице, значит для его использования нужно скоппировать его в.CSS файл и адаптировать под ваш стиль, иначе на месте названия ссылка с детальным описанием того, как сделать хак.
| + | - | - | - | - | |
| - | + | - | - | - | |
| - | - | + | - | - | |
|
_::-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. Псоледовательный метод перебора очень часто используется в нашей професии.
Загрузка...
