Какие методы нельзя назвать хаками? Хак с применением универсального и соседнего селекторов
В 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 , используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.
CSS хаки для IE6Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.
Хак с применением правила CSS !important Хак с применением селектора * htmlЭтот CSS хак для IE6 связан с применением универсального селектора , который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков , где указать перед селектором html , то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег является потомком. Естественно этого не может быть, так как данный тег - это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.
Синтаксис:
* html селектор { стили CSS }
Валидация: да.
Пример HTML и CSS: хак для IE6 и универсальный селектор
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 строчке путь до вашего файла стилей.
Спасибо всем за внимание, рады для вас стараться. Повторимся, что мы ждем ваших комментариев, предложений по улучшению и т.д.
