Кросбраузерна оптимізація

сторінок
 З історії
Кожен браузер має свою історію, свої версії,
які, у свою чергу, розрізняються підтримкою
Javascript, HTML і CSS. Хоча різні браузери в
основному дотримуються загальних правил і
стандартів. Проте в деяких випадках буває,
що алгоритми обробки HTML-кодів і
каскадних таблиць CSS можуть бути
різними.
Це призводить до різного відображення
одного і того самого елемента сайту в різних
браузерах.
 Кросбраузерність
Кросбраузерність — це правильна верстка сайта, за
допомогою якої веб-сторінки сайта однаково
відображаються в різних браузерах. Реалізація
відбувається за допомогою HTML і CSS, а також
різноманітних хаків, в окремих випадках — JavaScript.
 CSS-хаки
CSS-хаки — уривки коду, що розуміються тільки одним
певним браузером. Хаки — найбільш «брудний» спосіб
виправлення помилок, робить код не естетичним і не
дійсним, але робочим.
 Вендорні префікси
Вендорні префікси є ще одним рудиментом браузерних воєн,
особливо браузерів WebKit, більш «чистий» і чесний спосіб, ніж
використання хаків.
Вендорні префікси — приставки до стилів CSS, мають
змістовне навантаження лише для тих браузерів,
до яких належать. Вони дозволяють браузеру сприймати не-
стандартні властивості, а також стилі, призначені для інших
користувальницьких клієнтів.
Вендорні префікси:
• -webkit — для Google Chrome, Safari і iOs;
• -moz — для Mozilla;
• -o — для Опери;
• -ms — для Internet Explorer.
 Відображення сторінки за
замовчуванням

Як відомо, кожен браузер за замовчуванням має

певний набір базових стилів, які він застосовує до
сторінки. У різних браузерах ці правила трохи
відрізняються. Щоб їх усунути та зробити за
замовчуванням відображення сторінки у всіх
браузерах однаковим, використовують спеціальні
CSS-файли: reset.css або normalize.css.
Завантажити CSS-файли можна за посиланням:
https://cssdeck.com/blog/
Основні правила для правильного
відображення веб-сторінок

Для досягнення правильного відображення

сайта в різних браузерах слід:
➢ Використати вендорні префікси;
➢ Підключити СSS-файл reset.css або normalize.css;
➢ Намагатися використовувати елементи, що мають
однакове відображення в усіх браузерах.
 Домашнє завдання
• Опрацювати матеріал уроку.