От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как Chrome. Есть и менее используемые (Safari, Internet Explorer), но если вы делаете сайт для людей, то должны знать про кроссбраузерность – как сделать ее и что это вообще такое. Давайте посмотрим, как добиться одинакового отображения сайта во всех основных браузерах.
Главная цель кроссбраузерности – не допустить значительных изменений дизайна сайта в разных веб-обозревателях. Если разница есть только в мелочах и на общее восприятие сайта это не влияет, то можно сказать, что с проблемой кроссбраузерности вы справились. Но все-таки, какие реальные советы можно дать по этому поводу?
Как добиться кроссбраузерности
На сегодняшний момент есть 5 основных самых популярных браузеров, под которые и нужно оптимизировать сайт. И если с самыми новыми версиями веб-обозревателей обычно подружиться несложно, то чем старее версия, тем больше может быть проблем.
Например, IE6 является одним из самых проблемных браузеров в плане поддержки новых тегов html и свойств css. И все же некоторые сегодня до сих пор требуют нормальное отображение сайта в этом браузере. Как по мне, это уже чересчур. Поддержки IE8 достаточно.
Впрочем, это небольшое отступление. Теперь давайте рассмотрим реальные шаги, которые помогут сделать кроссбраузерность сайта.
Используйте по максимуму готовые решения. Если вы хотите реализовать новые свойства и научить старые браузеры их понимать, понадобятся javascript-библиотеки. Без них в данном случае просто никуда. Вы должны установить jQuery.
Есть такая замечательная javascript-библиотека под названием Modernizr. Ее возможности позволяют реализовать альтернативу для тех свойств, которые не поддерживаются. Именно ее я рекомендую использовать и вам.
Итак, сначала нужно проследовать на официальный сайт. //modernizr.com/download. Здесь нужно отметить галочками те технологии, которые вы планируете использовать на своем сайте. Нужно сказать, что список достаточно длинный и без среднего знания современных веб-стандартов и английского языка вы едва ли сможете разобраться. В любом случае, есть и интуитивно понятные свойства. Даже если вы отметите галочками все, то полученный код не будет слишком громоздким.
Рис. 1. Выбор технологий, которые будет проверять библиотека.
Проверка работы библиотеки
После скачивания пользовательской версии библиотеки нужно проверить ее работу. Ее необходимо будет подключить с помощью тега script, указав путь до файла. Если все правильно, то у тега html должно появиться много новых стилевых классов. Эти классы названы по тем технологиям, которые вы отметили галочками.
>p?Соответственно, если в теге html будет указан такой класс, значит, технология в этом браузере работает. Если же что-то не поддерживается, то будет прописан класс “no-название технологии”. Сразу же приведу пример:
К примеру, вам надо проверить свойство box-shadow. Для справки, оно задает тень элементу. Если браузер поддерживает его, то в теге html появится этот стилевой класс. Если веб-обозревателей не распознает свойство, то появится класс “no-boxshadow”.
Рис. 2. В теге html вы увидите множество классов. В этом случае видим, что браузер поддерживает практически все технологии.
Теперь управление кроссбраузерностью полностью в ваших руках. Достаточно классу no-boxshadow задать какие-то альтернативные свойства и во всех браузерах, которые не поддерживают свойство box-shadow, вместо этого будут применены эти правила. Это очень удобно.
На хабрахабре я нашел еще один пример, который хотел бы вам здесь привести. Там был приведен пример того, как можно использовать библиотеку для реализации альтернатив в старых браузерах.
|
1 2 3 |
.multiplebgs selector { background-image: url('изображение.png') center 40px no-repeat, url('изображение2.png'); } .no-multiplebgs selector { background-image: url('изображение.png') center 40px no-repeat lightgray; } |
Объяснение примера. Нас интересует технология множественных фонов, которые давно поддерживаются в СSS3. Для этого достаточно перечислять адреса картинок и их параметры через запятую. Естественно, старые браузеры не поддерживают этого, поэтому для них прописываем свои стили, используя класс .no-multiplebgs. Он указывает на то, что стили применяться в том случае, если браузер не поддерживает множественные фоны.
Таким образом, может задать для этого селектора другие стили и так получить красивое отображение сайта в любых веб-обозревателях. Конечно, чтобы полностью ощутить возможности Modernizr нужно самому неплохо разбираться в веб-программировании и верстке сайтов. Опытный человек сможет определить, какими свойствами можно заменить те, которые поддерживаются очень плохо.
Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример:
|
1 2 3 |
Modernizr.load({ Test: Modernizr.textshadow, nope: 'jQuery.textshadow.js'}) |
Итак, при загрузке библиотека определит, поддерживает ли браузер свойство text-shadow. Если да – ничего не нужно делать. Если нет, то подключается файл скрипта, который добавляет поддержку этого свойства в старые браузеры. Как видите, таким же образом можно реализовать поддержку подавляющего большинства технологий.
Единственный минус всего этого – для реализации хорошей кроссбраузерности может понадобиться поключение кучи скриптов и сторонних библиотек, а все это явно не прибавляет скорости к загрузке страницы. Впрочем, скорость в данном случае не выступает главным критерием. Серьезная ошибка в отображении сайта намного хуже, чем несколько сотых долей секунды, потерянных на загрузке дополнительных скриптов.
В общем, ничего лучше библиотеки ModerNizr для решения проблем с кроссбраузерностью я пока не видел. Ее используют крупнейшие международные компании.
Теперь вы знаете, что такое кроссбраузерность сайта, как ее сделать и какие инструменты для этого нужно использовать. Подписывайтесь на наш блог и узнавайте о сайтостроении больше.
Комментарии (2)