Разный css для разных браузеров. Универсальные CSS-хаки для браузеров

Published: 07.06.2011

Опишу еще раз всем известные и 100500 раз описанные раньше хаки для разных браузеров.

Приведу определение хака с сайта Влада Мержевича htmlbook.ru : «Хаком называется набор приемов, направленных на то, чтобы для одного браузера задать стиль определенного элемента, который бы отличался от стиля для других браузеров.»

Прежде всего меня интересовали актуальные работающие решения, поэтому все примеры я проверял в самых последних, кроме IE, версиях браузеров (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Самый «непохожий» на другие браузер. Причём, каждая версия «непохожа» по-своему. Впрочем, примем действительность, как она есть. А действтиельность такова, что хаков для разных версий IE при вёрстке необходимо достаточное количество, чтобы поместить их в отдельный файл и загружать только для этого семейства браузеров. Для этого в секции HTML-документа напишем комментарий, который умеет распознавать Internet Explorer.

В качестве условия можно использовать следующие ключевые слова:

• IE - любая версия браузера Internet Explorer;
• IE 7 - Internet Explorer 7;
• IE 8 - Internet Explorer 8;
• IE 9 - Internet Explorer 9;
• lt - номер версии браузера меньше указанной;
• gt - номер версии больше указанной;
• lte - номер версии меньше или равен указанной;
• gte - номер версии браузера больше или равен указанной.

Пожалуй, отдельно отмечу ещё хак для IE 7: звёздочка перед именем селектора. Например:

#example {
color : green ;
* color : red ;
}

Chrome и Safari

Хак для браузеров на основе движка webkit — Chrome и Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#example {
color : red ;
}

}

Firefox

@-moz-document url-prefix() {
#example {
color : red ;
}

}

Opera

Для Оперы универсальных хаков нет! Да, конечно, в сети можно найти хаки для Оперы, но, увы, эта инфорация немного устарела. Был когда-то хак, да весь вышел:

@media all and (min-width:0px) {


}

Хм, если для всех браузеров хаки есть, а для Оперы — нет, напрашивается логический вывод: сначала надо верстать под Оперу, а затем шлифовать вёрстку для других браузеров. Как вы на это смотрите?

UPD 09.08.11: Последние сводки с фронтов: на Хабре нашёлся хак для Оперы. Вот такой:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and ( -webkit-min-device-pixel-ratio : 0 ) {
#example { color : red ; }
}

Однако же, крайне не рекомендую его использовать. Приведу в качестве аргумента комментарий Вадима Макеева (aka Pepelsbey): "Эти хаки основаны на неполной или ошибочной поддержке Media Queries и могут сломаться с любым минорным обновлением браузера, которое исправит или дополнит поддержку. Не стреляйте себе в ногу, не используйте потенциально опасные хаки" . Что, собственно, и произошло с первым хаком для Оперы, упомянутом в этой статье.

Исходя из этого, по-прежнему считаем, что самый лучший хак для браузера Opera - грамотная, валидная вёрстка.

6.5K

Кроссбраузерность — это способность сайта корректно отображаться в различных браузерах. Ресурс должен работать одинаково во всех версиях обозревателей.

Особенно это важно в эпоху адаптивного веб-дизайна, когда на первый план выходит способность front-end адаптироваться к широкому диапазону различных устройств и при этом обеспечивать оптимальное качество просмотра.

Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.

Современные браузеры полностью поддерживают HTML5 и CSS3 . Но один и тот же код HTML / CSS / JavaScript в старых браузерах интерпретируется по-разному, что приводит к «кроссбраузерной несовместимости » сайта. Особенно это касается старых версий Internet Explorer .

В данной статье мы рассмотрим текущую статистику по просмотрам веб-страниц, приведем перечень средств, которые помогают решать различные проблемы совместимости.

1. Текущая ситуация

Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.

Хотя Windows 7 (31,20% ) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.

Взглянув на статистику за 2015 год по используемым браузерам, мы видим, что первое место принадлежит Chrome (все версии — 44,87% ), второе место — Firefox (все версии — 10,37% ), третье Internet Explorer 11 (6,84% ).

Ускоренные темпы выпуска новых версий Google Chrome и Firefox позволяют более эффективно разрабатывать проекты для этих платформ. Немного другая картина складывается для «плохого парня » Internet Explorer , потому что в Сети до сих пор можно найти его старые версии. А это приводит к возникновению проблем с кроссбраузерностью сайта.

Корпорация Microsoft остановила поддержку IE6 8 апреля 2014 года. И с 2016 года будет поддерживаться и получать обновления только самая последняя версия Internet Explorer . Это фактически означает, что в начале 2016 года была полностью прекращена поддержка IE7 и IE8 , независимо от операционной системы. IE9 будет поддерживаться только в Windows Vista , IE10 — только в Windows Server 2012 , IE11 — в Windows 7 и Windows 8.1 :

Как следствие, нужно прекратить разработку под IE6 и, а также под IE7 . Чтобы обосновать эту стратегию, можно привести несколько примеров решений известных компаний: Google прекратила поддержку IE8 в ноябре 2012 года, а IE9 — в октябре 2013 года.

Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .

Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .

Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.

2. Проанализируйте свою аудиторию

Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:

• Какова ваша целевая аудитория?
• На какой географический регион нужно настроить таргетинг?
• Какие браузеры и устройства используют ваши посетители?
• Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
• Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.

3. Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, , , , , ) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked , :nth-child(n) , :not(selector) , :last-child)) . И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em ).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

• Медиа-запросы CSS3
• Семантические элементы HTML5 : не поддерживается в IE6 , 7 и 8 ;
• Селекторы CSS3 : не поддерживается в IE6 . Только частично поддерживаются в IE7 и 8 ;
• Единицы REM : не поддерживается в IE6 , 7 и 8 . Только частично поддерживаются в IE9 и 10 ;
• Лимит количества правил CSS : IE9 и ниже поддерживают только 4095 CSS-селекторов . Правила после 4095-ого селектора не применяются.

Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.

Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение .

Прогрессивное улучшение — основано на принципе, предполагающем начало разработки с общего знаменателя, с минимальных технических требований и уровня опыта взаимодействия пользователя, предлагаемого сайтом. Посетители, заходящие на сайт через последние версии браузеров и устройств, будут обслуживаться прогрессивно расширяемой версией сайта со всеми новейшими функциями.

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

Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.

В противоположность этому, постепенное упрощение обеспечивает полнофункциональный уровень UX в современных браузерах. А затем постепенно уменьшает его сложность для старых браузеров за счет графики, но, не касаясь функционала. Идея заключается в том, чтобы начать разработку с новейших веб-стандартов, а затем попытаться минимизировать проблемы, связанные со старыми браузерами.

Какой подход выберете вы, зависит от личных предпочтений и условий проекта:

• Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
• Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
• Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
• Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.

Учитывая появление таких инструментов для определения функций, как Modernizr , лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.

4. Тестирование, тестирование, тестирование…

Чтобы как можно скорее обнаружить потенциальные проблемы кроссбраузерности JavaScript , нужно в процессе разработки тестировать сайт в различных браузерах и разрешениях. Существуют различные программные эмуляторы, которые могут нам помочь:

• Browserstack — это коммерческий сервис, который предоставляет доступ к тестовой среде, в которой можно проверить свой проект более чем на 700 стационарных браузерах и мобильных устройствах с помощью виртуальной машины в облаке;
• Microsoft Virtual Machines — если вы работаете в Linux, у вас не будет доступа к Internet Explorer . Решение может заключаться в том, чтобы загрузить образы виртуальных машин для IE6 в IE11 , которые затем могут использоваться в сочетании с Oracle VM Virtualbox или Vagrant для локального тестирования;
• Различные разрешения экрана для конкретного браузера можно быстро протестировать с помощью онлайн-сервиса Screenfly . С использованием плагинов для браузеров, таких как Window Resizer для Google Chrome , или непосредственно в разделе инструментов для разработчиков Chrome и Firefox .

5. Normalize.css и CSS Autoprefixer

Обычно я начинаю новые проекты со сброса CSS с помощью Normalize.css , который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов , используемых по умолчанию, вплоть до Internet Explorer 8 . Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.

Кроме этого многие устаревшие браузеры не могут интерпретировать неизвестные элементы HTML и свойства CSS . Когда браузер встречает фрагмент HTML или CSS , который он не понимает, то игнорирует его и продолжает процесс отображения. Многие приложения используют вендорные префиксы, чтобы добавить новые, экспериментальные или нестандартные функции CSS до их реализации в спецификации:

// Webkit-браузеры, такие как Chrome и Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt .

Обычные правила CSS будут обработаны с помощью плагина и к ним будут добавлены префиксы на основе базы данных «Can I Use «. Рекомендуется задать в конфигурации версии браузеров, которые нужно поддерживать, например:

options: { browsers: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] }

В качестве примера рассмотрим следующий класс CSS :

Example { background-image: linear-gradient(top left, #4676dd, #00345b); display: flex; transition: 1s all; }

С помощью CSS Autoprefixer он преобразуется в:

Example { background-image: -webkit-linear-gradient(top left, #4676dd, #00345b); background-image: -moz-linear-gradient(top left, #4676dd, #00345b); background-image: linear-gradient(top left, #4676dd, #00345b); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-transition: 1s all; -moz-transition: 1s all; transition: 1s all; }

6. Условные комментарии

Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer , то можете использовать условные комментарии . Они поддерживаются в Internet Explorer 5-9 , они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false ) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:

КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ // если Internet Explorer // если НЕ Internet Explorer // если Internet Explorer 7 // если НЕ Internet Explorer 7 // если Internet Explorer 9 или НИЖЕ // если Internet Explorer 7 или ВЫШЕ // если Internet Explorer 6 ИЛИ 7 // если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9

Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate , который добавляет специфические классы CSS для устаревших версий Internet Explorer :

7. Полифиллы

Технические несоответствия устаревших браузеров для адаптивного веб-дизайна можно исправить с помощью полифилла. Он представляет собой фрагмент JavaScript кода, который «заполняет » специфический функциональный разрыв между устаревшим браузером и функцией. Существует целый ряд полифиллов, которые могут быть использованы для обеспечения поддержки браузером функций HTML5 .

Ниже приведено несколько полифиллов, предназначенных для устранения проблем кроссбраузерности сайта, указанных в пункте 3:

• respond.js — реализует медиа-запросы CSS3 для Internet Explorer 6 — 8 ;
• html5shiv разрешает использование семантических элементов HTML5 в Internet Explorer 6 — 8 ;
• selectivzr — эмулирует селекторы и псевдоклассы CSS3 в Internet Explorer 6 — 8 . Для полной поддержки требуется либо Mootools 1.3 , либо NWMatcher 1.2.3 . Частичная поддержка доступна с помощью JQuery 1.3/1.4 ;
• REM-unit-polyfill — определяет, поддерживает ли браузер единицы rem, и обеспечивает запасной вариант. Работает с IE8 и ниже.

Для использования указанных полифиллов, их нужно добавить из CDN или в виде файла в корректном формате внутри условных комментариев в разделе (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript ):

Для каждого проекта необходимо оценить, действительно ли необходимы эти дополнительные скрипты, поскольку они могут привести к проблемам с производительностью. Большинство полифиллов компактные, но каждый дополнительно загружаемый скрипт представляет собой дополнительный HTTP-запрос . Это может замедлить загрузку страницы.

8. Определение функций с помощью Modernizr

Библиотека Modernizr , написанная на JavaScript , поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3 . Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код .

Идея заключается в том, чтобы напрямую определять функциональные возможности браузера, а не пытаться установить его конкретную версию. И на основании этого выводить его функциональные возможности, что является менее эффективным и надежным способом.

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

Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла :

Modernizr Demo Modernizr Demo

This is a Modernizr exercise.

Класс .no-js используется, чтобы проверить, включен ли JavaScript в браузере пользователя. Если он включен, Modernizr заменит .no-js классом .js . Функция тестирования Modernizr анализирует, поддерживается ли в браузере конкретная функция и генерирует ряд классов, которые добавляются в HTML-элемент . Google Chrome 47.0.2526.111 , например, будет возвращать следующие классы объектов.

В настоящее время Modernizr доступен в качестве глобального объекта, который можно вызвать в сочетании с названием функции, чтобы проверить существует ли она. Он возвращает логическое значение (true или false ).

Рассмотрим два простых примера CSS и JavaScript .

Пример решения проблем CSS кроссбраузерности: проверка поддержки SVG и предоставление в качестве резервного варианта PNG

В настоящее время наблюдается тенденция к все более активному использованию SVG (Scalable Vector Graphics ), но эта графика не поддерживается в IE8 и ниже. Если SVG поддерживается в браузере, Modernizr генерирует CSS-класс.svg . Если SVG не доступен, инструмент добавляет в HTML класс.no-svg . С помощью приведенного ниже CSS браузеры с поддержкой SVG будут использовать обычный класс .logo , в то время как браузеры, не поддерживающие SVG — правила .no-svg :

Logo { background-image: url("logo.svg"); width: 164px; height: 49px; } .no-svg .logo { background-image: url("/logo.svg"); width: 164px; height: 49px; }

Пример JavaScript: определение border-radius и добавление соответствующих классов CSS

Округление углов рамки не поддерживается в IE8 и ниже. Мы можем создавать различные CSS-классы , которые применяются в зависимости от наличия функции border-radius :

// Класс для браузера с функцией border-radius .round-borders { border-radius: 5px; } // Класс для браузера без функции border-radius .black-borders { border: 3px solid #000000; }

Теперь можно использовать JavaScript , чтобы сохранить целевой идентификатор в качестве переменной, а затем через условие добавить классы CSS :

var element = document.getElementById("TestID"); if (Modernizr.borderradius) { element.className = "round-borders"; } else { element.className = "black-borders"; }

Заключение

Когда речь идет об адаптивном веб-дизайне в устаревших браузерах, не существует какого-то универсального решения. Важно проанализировать аудиторию ресурса, чтобы получить представление о реальной численности пользователей браузеров. Затем нужно тщательно протестировать сайт, чтобы выявить потенциальные проблемы кроссбраузерности.

Любой, кто занимался Web-дизайном , сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer , особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки .

CSS хак - это специальный синтаксис стиля , который понимает только один определённый браузер. Причём CSS хаки даже часто различаются для разных версий одного браузера.

Однако, прежде чем перейти к CSS хакам , хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript , в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.

Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE . Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега ). Работает он только для браузеров IE , но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE , то подключить таблицу стилей из файла css/ie.css ".

Если необходимо указать конкретную версию браузера, то вместе с "IE " необходимо поставить ещё и номер версии. Например так:

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6 . Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии . Если бы вместо "lt " поставили "lte ", то это бы означало ниже или эквивалентно 6-ой версии.

В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле , всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:

1) Internet Explorer . Данный CSS хак работает для версий IE7 и ниже . Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

P {
* margin-top: 30px; # Для браузеров IE7 и ниже.
}

Как видите перед вторым свойством "margin-top " стоит символ "* ". Это и есть CSS хак . То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже . Вывод: для всех браузеров "margin-top " будет в значении "20px ", а для браузеров IE7 и ниже в значении "30px ". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак :

P {
margin-top: 20px; # Для всех браузеров
_margin-top: 30px; # Для браузеров IE6 и ниже.
}

Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже .

2) Mozilla Firefox . Данный CSS хак работает только для браузеров Mozilla Firefox . Вот его пример:

P, x:-moz-any-link {
margin-top: 30px;
}

В данном примере сообщается, что стиль к селектору "p " будет применён только для браузеров Mozilla Firefox , а все остальные браузеры данный стиль проигнорируют.

3) Opera . Этот CSS хак используется для браузеров Opera . Пример его использования:

* |html p {
margin-top: 30px;
}

Здесь я думаю, что также всё понятно.

Вот и всё, что хотелось написать в этой статье. Однако, ещё раз напоминаю, что CSS хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с , тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.

В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.

Что такое префиксы?

Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

• -webkit- : браузеры Chrome, Safari, Opera;
• -moz- : браузер Mozilla Firefox;
• -ms- : браузер Internet Explorer.

Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.

Причины появления префиксов?

Причин для появления префиксов было достаточно много:

• Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
• Для решения проблем с кроссбраузерностью.
• Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.

Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.

Как использовать префиксы?

Рассмотрим в качестве примере следующий код:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing .

Как проверить поддержку определенного свойства в браузере?

Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.

Сайт "Can I Use..."

Например: проверим, как реализовано свойство transform в браузерах.

На сайте "CanIUse" браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

• Красный прямоугольник - браузер, в котором данное свойство не реализовано;
• Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
• Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
• Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

Как известно, не все браузеры одинаково воспринимают файлы стилей css. В основном, проблемы возникают со старыми версиями мелкософтовского творения Internet Explorer (7 версия и ниже). Кстати, если проблема возникает в современных браузерах (наподобие Opera, Mozilla Firefox, Chrome), то я настоятельно рекомендую пересмотреть вёрстку страницы.

Так вот. Проблема с браузерами есть. И я знаю как минимум три способа решения этой проблемы.

Способ 1й. Самый правильный

Стили для браузеров, которые некорректно понимают ваш css, пишутся в отдельном файле. Обычно этим браузером, как я уже говорил, является Internet Explorer , и файлики такие называются fix-ie.css

... ... ...

Меняем имяТемы на реальное название своей темы - и когда вы откроете Internet Explorer версии 7 и ниже - этот файл будет добавлен в общий набор файлов стилей, и даже закэшируется, если кэширование включено.

За версию браузера, к которой будет подключен файл стилей, отвечает вот эта строка: