1. Основні браузери
2. Вендорний префікси
3. Стандартні стилі браузера
4. reset.css
5. normalize.css

На сьогоднішній день існує велика кількість різних браузерів і пристроїв, за допомогою яких відвідувач переглядає сайти. Проблема в тому, що в них один і той же сайт може відображатися по-різному.

Основні браузери

Існує п'ять основних браузерів: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. при розробці сайту , Обов'язково перевіряйте його у всіх цих браузерах.

Одне і те ж властивість CSS може підтримуватися одним браузером і не працювати в іншому, особливо це стосується новітньої специфікації. Для того, щоб дізнатися, які властивості CSS можна використовувати вже сьогодні, скористайтеся сервісом caniuse .

Вендорний префікси

Часто розробники топових браузерів впроваджують нові властивості css, які ще не стандартизовані. Ці властивості передує спеціальними приставками, які називаються «Вендорний префікси». Кожен браузер має свій префікс:

• -o- - префікс для браузера Опера
• -moz- - префікс для браузера Mozilla
• -ms - префікс для Internet Explorer
• -webkit- - префікс для браузерів, побудованих на движку Webkit, таких, як Safari і Chrome

Приклад з Вендорний префіксами:

-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-ms-transition-duration: 0.6s;
transition-duration: 0.6s;

Спочатку пишуться експериментальні властивості, а потім - властивість без префікса.

Стандартні стилі браузера

Різні браузери мають різні настройки стилів за замовчуванням для кожного елемента HTML. Тобто, розміри шрифтів і відступи між елементами можуть варіюватися в залежності від браузера. Якщо верстальник НЕ перевизначити таку властивість в своєму файлі стилів, браузер застосує свої настройки. І тоді верстка цілком може «поплисти».

Щоб цього не сталося і код Вашого сайту був максимально кросбраузерності, можна використовувати спеціальні технології щодо обнулення тих стилів, які містяться в браузері за замовчуванням. Для цього розроблені технології reset.css і normalize.css. Розглянемо їх детальніше.

reset.css

Американець Ерік Майер написав css-документ reset.css, в якому всі стилі обнуляються. Прибираються відступи і кордони всіх елементів веб-сторінки, видаляються маркери, а також всіх елементів задається одні розмір шрифту.

Недоліком цього підходу є те, що розробнику доводиться прописувати заново стилі і відступи абсолютно для всіх елементів, що може уповільнити розробку.

normalize.css

Трохи пізніше американські розробники Ніколас Галахер і Джонатан Ніл створили css-документ normalize.css, в якому замість повного обнулення всіх стилів відбувається їх нормалізація. Тобто, корисні настройки браузера зберігаються, розробнику не потрібно витрачати час на те, щоб заново прописати стилі для всіх елементів, так як вони уніфікуються для всіх браузерів. Більш того, normalize.css виправляє несумісності браузера Internet Explorer для версій IE9 і вище, а також помилки в популярних браузерах.

Цей css-документ використовує популярний фреймворк Bootstrap .

Обидва файли - reset.css і normalize.css поширюються безкоштовно.

Ці нехитрі прийоми дозволять Вам писати якісний і кросбраузерності код, який буде однаково добре відображатися в основних браузерах.