Зачем нужен нормализатор CSS

Когда веб-разработчик созда­ёт новый сайт, он хочет, что­бы в каж­дом бра­у­зе­ре этот сайт выгля­дел оди­на­ко­во. Но у каж­до­го бра­у­зе­ра есть свои стан­дар­ты отсту­пов, оформ­ле­ния ссы­лок или фор­ма­ти­ро­ва­ния бло­ков. В резуль­та­те то, что в «Хро­ме» выгля­дит хоро­шо, в «Сафа­ри» может выгля­деть не очень, а в «Мозил­ле» вооб­ще разрывает. 

Для при­ме­ра возь­мём про­стой код, кото­рый нари­су­ет нам на стра­ни­це несколь­ко стан­дарт­ных элементов:

  • две гори­зон­таль­ных линии-разделителя,
  • поле вво­да с тек­стом внутри,
  • кноп­ку,
  • текст со ссылкой.

А после это­го посмот­рим, как выгля­дит этот код в раз­ных браузерах.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Делаем одинаково</title>
</head>
<body>
  <hr>
  <hr>
  <input type="text" placeholder="Напишите свой текст">
  <br>
  <br>
  <button>Кнопка</button>
  <br>
  <br>
  <a href="#">Привет, это журнал «Код»! </a>
</body>
</html>
Хром, вер­сия 87. 
Сафа­ри, вер­сия 14. Текст в стан­дарт­ных эле­мен­тах гораз­до мень­ше, чем в Хроме. 
Firefox, вер­сия 84. Выгля­дит почти так же, как и в Сафа­ри, но линии гораз­до жирнее. 

Почему так происходит

Несмот­ря на то что внут­ри мно­гих раз­ных бра­у­зе­ров сто­ят оди­на­ко­вые движ­ки, у каж­дой ком­па­нии свои пред­став­ле­ния о пре­крас­ном и о том, как отоб­ра­жать раз­ные HTML-элементы и CSS-стили. Напри­мер, в раз­ных бра­у­зе­рах могут отличаться:

  • тол­щи­на линий обводки,
  • ради­ус скругления,
  • раз­мер текста,
  • внеш­ние и внут­рен­ние отсту­пы у элементов,
  • пра­ви­ла оформ­ле­ния ссылок,
  • фор­мы и кнопки.

Всё это запи­са­но в стан­дарт­ных сти­лях бра­у­зе­ра. Каж­дый раз, когда бра­у­зер встре­ча­ет эле­мент, у кото­ро­го не задан один из пара­мет­ров, он берёт его из сво­ей встро­ен­ной таб­ли­цы сти­лей. Раз­ные бра­у­зе­ры — раз­ные стили.

При этом бра­у­зер спра­вит­ся со сво­ей основ­ной зада­чей — пока­зать HTML-страницу в понят­ном для поль­зо­ва­те­ля виде. Но если веб-разработчик хочет, что­бы сайт выгля­дел иден­тич­но в каж­дом бра­у­зе­ре, он дол­жен преду­смот­реть это зара­нее и про­пи­сать в стилях.

Что такое нормализатор стилей

Что­бы сайт выгля­дел в каж­дом бра­у­зе­ре почти оди­на­ко­во, раз­ра­бот­чи­ки исполь­зу­ют нор­ма­ли­за­тор сти­лей — normalize.css. По сути это про­сто боль­шой CSS-файл, кото­рый дела­ет следующее:

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

Для это­го нор­ма­ли­за­тор исполь­зу­ет спе­ци­аль­ные CSS-команды, что­бы каж­до­му бра­у­зе­ру объ­яс­нить на его язы­ке, что нуж­но сделать. 

Пример

Код ниже дела­ет две вещи:

  1. Уста­нав­ли­ва­ет оди­на­ко­вую высо­ту стро­ки во всех браузерах.
  2. Предот­вра­ща­ет изме­не­ния раз­ме­ра шриф­та в iOS при пово­ро­те экрана.

html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}

-webkit-text-size-adjust — это спе­ци­аль­ная коман­да, кото­рая состо­ит из двух частей: 

-webkit, кото­рый сооб­ща­ет, что эта коман­да отно­сит­ся к бра­у­зе­рам на движ­ке WebKit. Осталь­ные бра­у­зе­ры про­игно­ри­ру­ют эту коман­ду, а, напри­мер, Safari в iOS пой­мёт, что это коман­да для неё. 

text-size-adjust — коман­да, кото­рая гово­рит бра­у­зе­ру, какой раз­мер шриф­та нуж­но использовать.

Полу­ча­ет­ся, что все бра­у­зе­ры пой­мут первую коман­ду line-height, пото­му что она стан­дарт­ная для всех бра­у­зе­ров, а на вто­рую -webkit-text-size-adjust сре­а­ги­ру­ют толь­ко те бра­у­зе­ры, у кото­рых могут быть про­бле­мы с отоб­ра­же­ни­ем раз­ме­ра тек­ста (напри­мер, Safari).

Как использовать

Под­клю­чить нор­ма­ли­за­тор как обыч­ную CSS-таблицу сти­лей к сво­ей странице:

<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

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

Вот как будут выгля­деть наши стра­ни­цы после под­клю­че­ния нормализатора:

Хром 
Сафари 
Firefox 
Опера 

Но что-то же всё равно отличается даже на этих скриншотах!

Конеч­но, пото­му что этот нор­ма­ли­за­тор не может преду­смот­реть и настро­ить всё. Он остав­ля­ет фир­мен­ное оформ­ле­ние полей вво­да и кно­пок для каж­до­го бра­у­зе­ра, что­бы нор­ма­ли­зо­ван­ные эле­мен­ты не выгля­де­ли чуже­род­но в род­ном браузере. 

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

Это единственный нормализатор?

Нет, на самом деле их мно­го. Про­сто этот самый попу­ляр­ный и проверенный. 

Что дальше

Кро­ме нор­ма­ли­за­то­ров есть ещё ресе­ты — они сбра­сы­ва­ют вооб­ще все настрой­ки в ноль, что­бы мож­но было уста­но­вить всё вруч­ную. Когда-нибудь добе­рём­ся и до них.

Текст и скриншоты:

Миха­ил Полянин

Редак­тор:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев