Кросбраузерність HTML сторінок: навіщо потрібні reset.css і normalize.css

0
88

Щоб сторінка однаково добре відображалася в різних браузерах, необхідно працювати над її кросбраузерністю. У цьому нам допомагає тестування сторінки і налагодження 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

 

normalize.css – як він працює і в чому різниця

Після того як на сторінці підключений reset.css всі стилі доводиться прописувати заново. І кожен раз це заняття стомлює. Тому на зміну resetпрішел інший інструмент – normalize. Normailze – як зрозуміло з назви, що не скидає всі стилі, а нормалізує, призводить їх до єдиного вигляду у всіх браузерах. Після його застосування базові стилі відображення заголовків, розмір шрифтів, відступи … – уніфікуються і відображаються у всіх браузерах однаково. Використовуючи його – можна заощадити певну кількість часу, який є наслiдком з reset було б витрачено на прописування скинутих стилів. Якщо ви ще не використовували normalize.css то рекомендую спробувати його в своєму наступному, проктит, і хто знає, можливо ви вже не зможете від нього відмовитися.

 

Завантажити normalize.css

Завантажити normalize.css можна з сайту cssreset.com

 

Що краще reset чи normalize?

Однозначної відповіді немає.

Перший – скидає всі стилі, другий – призводить до єдиного знаменника. Досвідчені верстальники, які використовують reset.css зазвичай мають свої набори стилів які відразу ж підключають після reset для оформлення контенту. І їм не доводиться кожен раз в новій верстці заново визначати стилі для базових елементів. Так поступаю і я. Мені зручно і я знаю які стилі я задаю за замовчуванням, і як вони працюють. normalize зручний якщо ви вивчите його структуру, можете видозмінити його під себе – налаштувавши базовий зовнішній вигляд тегів. І робота з ним також буде зручною на потоці – коли верстати доводиться багато і часто.

 

НАПИСАТИ ВІДПОВІДЬ

Please enter your comment!
Please enter your name here