Днешният браузър е изминал дълъг път от лудите дни, когато всякакъв вид последователност между браузърите е била желана. Днешните уеб браузъри са съвместими със стандартите. Те играят добре заедно и осигуряват сравнително постоянно показване на страницата в различните браузъри. Това включва най-новите версии на Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari и различните браузъри, открити на безбройните мобилни устройства , използвани за достъп до уебсайта днес.
Докато със сигурност е постигнат напредък по отношение на уеб браузърите и как те показват CSS, все още има несъответствия между тези различни софтуерни опции. Едно от често срещаните несъответствия е как тези браузъри изчисляват по подразбиране маржове, подложки и граници.
Поради тези аспекти на ефекта от кутията, всички HTML елементи и поради това, че те са от съществено значение за създаването на оформления на страници, непоследователен дисплей означава, че дадена страница може да изглежда страхотно в един браузър, но изглежда леко в друга. За да се справим с този проблем, много уеб дизайнери нормализират тези аспекти на модела на кутията. Тази практика е известна и като "нулиране" на стойностите за маржове, подложки и граници.
Бележка за настройките по подразбиране на браузъра
Всички уеб браузъри имат настройки по подразбиране за някои аспекти на показване на страница. Например, хипервръзките са сини и подчертани по подразбиране. Това е съвместимо в различните браузъри и макар че това е нещо, което повечето дизайнери променят, за да отговарят на дизайнерските нужди на техния конкретен проект, фактът, че те всички започват със същите по подразбиране, прави по-лесно тези промени. За съжаление, стойността по подразбиране за маржове, подложки и граници не се ползва със същото ниво на съгласуваност между браузърите.
Нормализиращи стойности за полета и подложка
Най-добрият начин за решаване на проблема с несъвместимия модел на кутията е да зададете всички полета и стойности за запълване на HTML елементите до нула. Има няколко начина, по които можете да направите това, да добавите това правило за CSS към стиловата ви таблица:
* {марж: 0; подложка: 0; }Това правило за CSS използва * или заместващия символ. Този знак означава "всички елементи" и основно ще избере всеки HTML елемент и ще настрои маркерите и подложките на 0. Въпреки че това правило е много неспецифично, защото е във външната ви стилова таблица, то ще има по-висока специфичност от браузъра по подразбиране стойностите. Тъй като тези по подразбиране са това, което презаписвате, този един стил ще постигне това, което искате да направите.
Друга възможност е да приложите тези стойности към елементите на HTML и тялото. Тъй като всички останали елементи на страницата ви ще бъдат деца на тези два елемента, CSS каскадата трябва да приложи тези стойности към всички тези други елементи.
html, body {margin: 0; подложка: 0; }Това ще стартира вашия дизайн на едно и също място във всички браузъри, но едно нещо, което трябва да запомните, е, че когато включите всички маржове и подложки, ще трябва да ги включите избирателно за конкретни части от уеб страницата си, за да постигнете външния вид и чувствате, че вашият дизайн изисква.
Граници
Може да мислите, "но браузърите нямат граница около елемента на тялото по подразбиране". Това не е строго вярно. По-старите версии на Internet Explorer имат прозрачни или невидими граници около елементите. Ако не зададете границата на 0, тази граница може да обърка оформлението на страницата ви. Ако сте решили, че ще продължите да поддържате тези остарели версии на IE, ще трябва да решите това, като добавите следното към тялото и HTML стиловете:
HTML, тяло {
марж: 0px;
подложка: 0px;
граница: 0px;
}
Подобно на начина, по който сте изключили маржовете и подложките, този нов стил също ще изключи стандартните граници. Също така можете да направите същото, като използвате селектора на заместващите символи, показан по-рано в статията.
Оригинална статия на Дженифър Кринин. Редактиран от Джереми Жирард на 27.9.16.