Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки. Но есть инструменты, которые помогут сократить наведение порядка в стилях, и добиться того чтобы базовые стили были одинаковы в разных браузерах. Что это за инструменты, зачем и как их использовать — рассмотрим далее.
Браузеры и базовые стили
Дело в том что каждый браузер имеет по умолчанию некий набор базовых стилей которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег <h1></h1> большим размером и жирным начертанием, <h2></h2> чуть меньшим размером и так далее. Браузер выделит текст в теге <i> курсивом, <u> сделает подчеркнутым, а <b> — жирным.
Произойдет так потому что в браузере уже есть свои стили для элементов, которые по умолчанию применяются к открываемым в нем страницам. И дело в том что в разных браузерах эти правила немного отличаются, от браузера к браузеру. Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.
Чтобы убрать эти различия, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный .css файл: reset.css или normalize.css
reset.css — что он делает и как его использовать
Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.
Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.
Скачать reset.css
Скачать reset.css можно на сайте cssreset.com
Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:
Eric Meyer’s “Reset CSS” 2.0 (1634 downloads)
normalize.css — как он работает и в чем разница
После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.
Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться
Скачать normalize.css
Скачать normalize.css можно с сайта necolas.github.io/normalize.css
Или загрузить с моего блога:
Normalize.css (3271 downloads)
Что лучше reset или normalize?
Однозначного ответа нет.
Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.
normalize удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.
Каждый инструмент хорош, главное правильно его использовать