Послание № 6
Кроссбраузерность HTML страниц
Стандартные стили браузеров
Каждый браузер имеет по умолчанию некий набор базовых стилей, которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег <h1></h1> большим размером и жирным начертанием, <h2></h2> чуть меньшим размером и так далее. Браузер выделит текст в теге <i> курсивом, <u> сделает подчеркнутым, а <b> — жирным.
Произойдет так потому что в браузере уже есть свои стили для элементов, которые по умолчанию применяются к открываемым в нем страницам. И дело в том что в разных браузерах эти правила немного отличаются, от браузера к браузеру.
Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.
Кроссбраузерность
Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки.
Так же есть инструменты, которые помогут сократить наведение порядка в стилях, и добиться того чтобы базовые стили были одинаковы в разных браузерах.
Чтобы убрать различия браузеров, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный.css файл: reset.css или normalize.css
Reset.css
Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.
|
|
Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях, которые мы зададим в style.css
Недостатки Reset.css
Сбросы CSS отменяют стили браузеров и возвращают множество элементов к их «обесстиленному» состоянию, некоему ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части стандартных элементов.
Normalize.css
Normalize.css является альтернативой CSS Reset.
Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер и Джонатан Нил.
Цели normalize.css:
· сохранять полезные настройки браузера, а не стирать их;
· нормализовать стили для широкого круга HTML-элементов;
· корректировать ошибки и основные несоответствия браузера;
· совершенствовать юзабилити незаметными улучшениями.
Он поддерживает широкий диапазон браузеров (в том числе мобильных) и включает в себя CSS, который нормализует HTML5-элементы, типографику, списки, встраиваемый контент, формы и таблицы.
Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.
Нормализовать или сбрасывать?
Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.
|
|
Reset.css накладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов.
В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики. Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.
Подключение Rest.css или Normalize.css
Разобравшись с Reset и Normalize, и определившись какой из этих способов кроссбраузерности будем использовать, давайте научимся их подключать.
Первый способ:
Просто включите его в <head> до вашей собственной таблицы стилей.
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
Второй способ:
Использование правила @import в файле с собственными стилями позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. Это правило необходимо использовать в самом начале вашего css файла.
@import url(normalize.css); /* Находимся в начале нашего файла со стилями*/
Обратите внимание, что эта строчка кода прописывается в самом начале нашего CSS файла, а так же в url мы прописываем путь до нашего файла по общим правилам.