Щоб сторінка однаково добре відображалася в різних браузерах, необхідно працювати над її кросбраузерністю. У цьому нам допомагає тестування сторінки і налагодження html / css розмітки. Але є інструменти, які допоможуть скоротити наведення порядку в стилях, і домогтися того щоб базові стилі були однакові в різних браузерах. Що це за інструменти, навіщо і як їх використовувати - розглянемо далі.
Браузери і базові стилі
Справа в тому що кожен браузер має за замовчуванням якийсь набір базових стилів які він застосовує до сторінки за замовчуванням. І якщо ми створимо сторінку на «голому» html без оформлення і стилів, браузер все одно відобразить тег великим розміром і жирним шрифтом,
трохи меншим розміром і так далі. Браузер виділить текст в тезі курсивом, зробить підкресленим, а - жирним.Відбудеться так тому що в браузері вже є свої стилі для елементів, які за замовчуванням застосовуються до відкриваються в ньому сторінок. І справа в тому що в різних браузерах ці правила трохи відрізняються, від браузера до браузеру. Років 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 по кнопці нижче, з мого блогу:
normalize.css - як він працює і в чому різниця
Після того як на сторінці підключений reset.css всі стилі доводиться прописувати заново. І кожен раз це заняття стомлює. Тому на зміну resetпрішел інший інструмент - normalize. Normailze - як зрозуміло з назви, чи не скидає всі стилі, а нормалізує, призводить їх до єдиного вигляду у всіх браузерах. Після його застосування базові стилі відображення заголовків, розмір шрифтів, відступи ... - уніфікуються і відображаються у всіх браузерах однаково. Використовуючи його - можна заощадити певну кількість часу, яке є наслiдком з reset було б витрачено на прописування скинутих стилів.
Якщо ви ще не використовували normalize.css то рекомендую спробувати його в своєму наступному, проктит, і хто знає, можливо ви вже не зможете від нього відмовитися 😉
завантажити normalize.css
Або завантажити з мого блогу:
Що краще reset або normalize?
Однозначної відповіді немає.
Перший - скидає всі стилі, другий - призводить до єдиного знаменника. Досвідчені верстальники, які використовують reset.css зазвичай мають свої набори стилів які відразу ж підключають після reset для оформлення контенту. І їм не доводиться кожен раз в новій верстці заново визначати стилі для базових елементів. Так поступаю і я. Мені зручно і я знаю які стилі я задаю за замовчуванням, і як вони працюють.
normalize зручний якщо ви вивчите його структуру, можете видозмінити його під себе - налаштувавши базовий зовнішній вигляд тегів. І робота з ним також буде зручною на потоці - коли верстати доводиться багато і часто.
Кожен інструмент хороший, головне правильно його використовувати 😉
Сподобався пост? Поділіться посиланням з друзями, вони оцінять:
Поділитися в Facebook