CSS хаки для всех браузеров: от IE до Opera. Подключение CSS для отдельных браузеров Css для всех браузеров

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

Чаще всего подобное можно наблюдать при тестировании сайта в IE. Поэтому именно его больше всего «любят» верстальщики и веб-программисты: просматривая свой сайт через этот браузер, можно наблюдать разные варианты в различных версиях. Причем, сейчас мало кто делает у себя поддержку для IE ниже 7 версии, да и от семерки постепенно отказываются благодаря уменьшению числа пользователей этого чуда.

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

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

Давайте рассмотрим хаки для различных браузеров:

CSS хак для Internet Explorer 8 @media \0screen { div {color: #333;} }

Вместо div {color: #333;} нужно вставлять свой собственный стиль, который призван решить проблему и устранить возникший косяк.

CSS хак для Internet Explorer 9 и 10 :root div { color: #333\9; }

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

CSS хак для Internet Explorer 10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { div {color: #333;} } CSS хаки для Opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {div {color: #333;}} *|html div {color: #333;} CSS хаки для Mozilla FireFox @-moz-document url-prefix() {div {color: #333;}} *>div {color: #333;} CSS хак для Safari html*div {color: #333;} html:root div {color: #333;} CSS хак для Google Chrome body:nth-of-type(1) div {color: #333;}

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

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

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

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

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

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

... ... ...

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

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

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

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 - грамотная, валидная вёрстка.

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

Для этой цели в CSS языке были придуманны так называемые хаки(читы), которые позволяют применять группу свойств только под один браузер или несколько, например, только Opera или только Chrome/Safari .

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

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

Таблица совместимости хаков Названия и сами хаки Internet Explorer Google Chrome Opera Safari Mozilla Firefox

	+	-	-	-	-
	-	+	-	-	-
	-	-	+	-	-
_::-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 строчке путь до вашего файла стилей.

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

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.png"); 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"; }

Заключение

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