n-wp.ru — блог о WordPress

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

Набор CSS-хаков, корректирующих отображение HTML-объектов в разных браузерах. Присутствуют хаки как для современных версий браузеров, так и для устаревших.

До сих пор существует проблема совместимости между разными браузерами: в них один и тот же элемент может отображаться по-разному. Типичный пример несоответствий — шрифты: разные браузеры рисуют из по-разному, в некоторых они слишком жирные, в других наоборот, слишком тонкие, один и тот же знак может иметь разную высоту и ширину. Не все благополучно и с прорисовкой других CSS-элементов. Все это приводит к тому, что сайт приходится подгонять под разные браузеры. Одна и та же запись в CSS-файле может приводить в разных браузерах к разному виду на экране, и чтобы этого не происходило, разработчики браузеров придумали CSS-хаки — корректирующие дополнения в CSS, которые имеют силу только в своем браузере. Конечно, разработчики тем стараются не использовать элементы, неоднозначно отображаемые в разных браузерах, но все же в современном сайтостроительстве пока что полностью без них обойтись почти невозможно, и любая тема содержит небольшое количество CSS-хаков. Давайте познакомимся с наиболее часто употребляемыми из них.

Наибольшей проблемой для разработчиков был Internet Explorer более древних версий. И хотя сейчас можно уже перейти на Internet Explorer 10, версии которого существуют для Windows 7 и Windows 8 (IE10 поддерживает все современные стандартны, а в некоторых экспериментальных функциях даже ушел вперед), все же есть целые корпоративные сети, использующие Internet Explorer 9, 8 и даже 7 и 6 версий. Поэтому пока что до сих пор актуальны CSS-хаки для этих древних версий.

@-moz-document url-prefix() {
  .style {position:relative; top:5px;}

Так же обратите внимание на способ, позволяющий создавать оформление, вид которого зависит от того, в каком браузере просматривается сайт — он позволяет и вовсе обойтись без CSS-хаков. Суть его в том, что внедряется специальная функция, определяющая, каким браузером просматривается сайт, и в зависимости от этого добавляется класс оформления, соответствующий браузеру.

tiaurus

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

Комментировать