До сих пор существует проблема совместимости между разными браузерами: в них один и тот же элемент может отображаться по-разному. Типичный пример несоответствий – шрифты: разные браузеры рисуют из по-разному, в некоторых они слишком жирные, в других наоборот, слишком тонкие, один и тот же знак может иметь разную высоту и ширину. Не все благополучно и с прорисовкой других CSS-элементов. Все это приводит к тому, что сайт приходится подгонять под разные браузеры. Одна и та же запись в CSS-файле может приводить в разных браузерах к разному виду на экране, и чтобы этого не происходило, разработчики браузеров придумали CSS-хаки – корректирующие дополнения в CSS, которые имеют силу только в своем браузере. Конечно, разработчики тем стараются не использовать элементы, неоднозначно отображаемые в разных браузерах, но все же в современном сайтостроительстве пока что полностью без них обойтись почти невозможно, и любая тема содержит небольшое количество CSS-хаков. Давайте познакомимся с наиболее часто употребляемыми из них.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.style {position: relative; top:5px;}
}
[info txt=”Наибольшей проблемой для разработчиков был Internet Explorer более древних версий. И хотя сейчас можно уже перейти на Internet Explorer 10, версии которого существуют для Windows 7 и Windows 8 (IE10 поддерживает все современные стандартны, а в некоторых экспериментальных функциях даже ушел вперед), все же есть целые корпоративные сети, использующие Internet Explorer 9, 8 и даже 7 и 6 версий. Поэтому пока что до сих пор актуальны CSS-хаки для этих древних версий.”] :root .style {
color: #FA69;
} @media screen {
.style {position:relative; top:5px;}
} html>body .style {
*color: #FA600;
} * html .style {
position:relative;
top:5px;
} @-moz-document url-prefix() {
.style {position:relative; top:5px;}
body:last-child:not(:root:root) .style {
position:relative;
top:5px;
} html[xmlns*=""] body:last-child .style {
position:relative;
top:5px;
} @media all and (min-width: 0) {
.style { position:relative; top:5px; }
} [info txt=”Разработчики браузера Opera объявили, что прекращают развитие своего собственного движка Presto, и переходят на движок Webkit, на котором работают все браузеры, в основе которых лежит код Chromium. Поэтому наверняка с выходом новой версии браузера CSS-хак для Opera станет недействительным. Но все же пока оставлю его в запасе, так как в рунете браузер Opera все еще довольно популярен.”] Так же обратите внимание на способ, позволяющий создавать оформление, вид которого зависит от того, в каком браузере просматривается сайт – он позволяет и вовсе обойтись без CSS-хаков. Суть его в том, что внедряется специальная функция, определяющая, каким браузером просматривается сайт, и в зависимости от этого добавляется класс оформления, соответствующий браузеру.
