На сегодняшний день существует большое количество разных браузеров и устройств, при помощи которых посетитель просматривает сайты. Проблема в том, что в них один и тот же сайт может отображаться по-разному.
Основные браузеры
Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.
Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации. Для того, чтобы узнать, какие свойства CSS можно использовать уже сегодня, воспользуйтесь сервисом caniuse.
Вендорные префиксы
Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:
- -o- — префикс для браузера Опера
- -moz- — префикс для браузера Mozilla
- -ms — префикс для Internet Explorer
- -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome
Пример с вендорными префиксами:
-webkit-transition-duration:0.6s;
-moz-transition-duration:0.6s;
-o-transition-duration:0.6s;
-ms-transition-duration:0.6s;
transition-duration:0.6s;
Вначале пишутся экспериментальные свойства, а затем – свойство без префикса.
Стандартные стили браузера
Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера. Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».
Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию. Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.
reset.css
Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.
Недостатком этого подхода является то, что разработчику приходится прописывать заново стили и отступы абсолютно для всех элементов, что может замедлить разработку.
normalize.css
Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.
Этот css-документ использует популярный фреймворк Bootstrap.
Оба файла – reset.css и normalize.css распространяются бесплатно.
Эти нехитрые приемы позволят Вам писать качественный и кроссбраузерный код, который будет одинаково хорошо отображаться в основных браузерах.
