CSS-хаки для корректирования оформления, отображаемого в разных браузерах

До сих пор существует проблема совместимости между разными браузерами: в них один и тот же элемент может отображаться по-разному. Типичный пример несоответствий – шрифты: разные браузеры рисуют из по-разному, в некоторых они слишком жирные, в других наоборот, слишком тонкие, один и тот же знак может иметь разную высоту и ширину. Не все благополучно и с прорисовкой других 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-хаков. Суть его в том, что внедряется специальная функция, определяющая, каким браузером просматривается сайт, и в зависимости от этого добавляется класс оформления, соответствующий браузеру.

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*