Сучасний веб-браузер пройшов довгий шлях із шалених днів, коли будь-яка послідовність між браузерами була бажаним задумом. Сучасні веб-браузери повністю відповідають стандартам. Вони чудово граються разом і достатньо послідовно відображають сторінки в різних браузерах. Сюди входять найновіші версії Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari та різні браузери, що знаходяться на безлічі мобільних пристроїв, які сьогодні мають доступ до веб-сайтів. Хоча, звичайно, було досягнуто успіху в тому, як браузери відображають CSS, все ще існують невідповідності між цими різними опціями програмного забезпечення. Однією з поширених невідповідностей є те, як ці браузери обчислюють поля, відступи та межі за замовчуванням. Оскільки ці аспекти віконної моделі впливають на всі елементи HTML, і оскільки вони мають важливе значення для створення макетів сторінок, непослідовне відображення означає, що сторінка може виглядати чудово в одному браузері, але трохи виглядати в іншому. Для боротьби з цією проблемою багато веб-дизайнери нормалізують ці аспекти коробкової моделі. Ця практика також відома як обнулення значення полів, відступів та меж.
Змістовий покажчик
Примітка про за замовчуванням браузера
Веб-браузери встановлюють налаштування за замовчуванням для певних аспектів відображення сторінки. Наприклад, гіперпосилання сині та підкреслені за замовчуванням. Така поведінка узгоджується з різними браузерами, і хоча це те, що більшість дизайнерів змінюють відповідно до потреб дизайну свого конкретного проекту, той факт, що всі вони починають з однаковими за замовчуванням, полегшує внесення цих змін. На жаль, значення за замовчуванням для полів, відступів та меж не користуються однаковим рівнем узгодженості між браузерами.
Нормалізація значень для полів та відступів
Найкращий спосіб вирішити проблему суперечливої моделі вікон – це встановити нуль для всіх полів та відступів елементів HTML. Є кілька способів зробити це, щоб додати це правило CSS до таблиці стилів:
Хоча це правило є неспецифічним, оскільки воно є у вашій зовнішній таблиці стилів, воно матиме вищу специфічність, ніж значення браузера за замовчуванням. Оскільки за замовчуванням ви переписуєтесь, цей єдиний стиль виконає те, що ви збираєтеся зробити. Після того, як ви вимкнете всі поля та відступи, вам доведеться вибірково знову їх увімкнути для певних частин вашої веб-сторінки, щоб досягти вигляду та відчуття, яких вимагає ваш дизайн.
Межі
У старих версіях Internet Explorer прозорі або невидимі межі навколо елементів. Якщо ви не встановите межу 0, ця межа може зіпсувати макети вашої сторінки. Якщо ви вирішили продовжувати підтримувати застарілі версії IE, вам доведеться вирішити цю проблему, додавши до свого стилю body та HTML таке: HTML, body {
поле: 0px;
відступ: 0px;
межа: 0px;
}
Подібно до того, як ви вимкнули поля та відступи, цей новий стиль також вимкне межі за замовчуванням. Ви також можете зробити те саме, використовуючи селектор підстановки, показаний раніше в статті.