Данашњи веб прегледач долази дуг пут од лудих дана када је било каква конзистентност унакрсног претраживача била жељна размишљања. Данашњи веб прегледници су сви врло усклађени са стандардима. Они играју лепо заједно и пружају прилично конзистентан приказ страница преко различитих прегледача. Ово укључује најновије верзије Гоогле Цхроме-а, Мицрософт Едге-а, Мозилла Фирефок-а, Опера-а, Сафари-а и различитих претраживача пронађених на небројеним мобилним уређајима који се користе за приступ веб локацији данас.
Иако је напредак сигурно постигнут када су у питању веб прегледачи и како они приказују ЦСС, још увијек постоје недоследности између ових различитих софтверских опција. Једна од уобичајених недоследности је начин на који ови прегледачи подразумевано израчунавају маргине, паддинг и границе.
Због ових аспеката кутијског модела утичу на све ХТМЛ елементе и зато што су суштински у креирању изгледа странице, неконзистентни приказ значи да страница може изгледати сјајно у једном претраживачу, али у другом погледу мало изгледати. За сузбијање овог проблема, многи веб дизајнери нормализују ове аспекте модела кутије. Ова пракса је позната и као "нулта излазна" вриједности за маргине, паддинг и границе.
Напомена о подразумеваним подацима претраживача
Веб претраживачи имају подразумеване поставке за одређене аспекте приказа странице. На пример, хипервезе су плаве и подразумеване подразумеване. Ово је конзистентно у разним претраживачима, иако је то нешто што се већина дизајнера мења како би одговарала пројектним потребама њиховог специфичног пројекта, чињеница да сви почињу са истим подразумевањима олакшава израду ових промјена. Нажалост, подразумевана вредност за маргине, паддинг и границе не ужива исти ниво унакрсног претраживача.
Нормализујуће вредности за маргине и паддинг
Најбољи начин решавања проблема неусаглашеног модела кутије је постављање свих маргина и паддинг вредности ХТМЛ елемената на нулу. Постоји неколико начина на који можете да урадите ово да бисте додали ово ЦСС правило на свој стил стилова:
* {маргин: 0; паддинг: 0; }Ово ЦСС правило користи знак * или џокер. Тај знак означава "све елементе" и биће у основи изабрао сваки ХТМЛ елемент и поставио маргине и паддинг на 0. Иако је ово правило врло неспецифицно, јер се налази на вањском стилесхеету, он ће имати већу специфичност од подразумеваног претраживача вриједности. Пошто су та подразумевана вредност оно што преписујете, овај један стил ће постићи оно што постављате.
Друга опција је примјена ових вриједности на ХТМЛ и елементе тела. Пошто ће сви остали елементи на вашој страници бити дјеца ова два елемента, ЦСС каскада би требала примијенити ове вриједности за све те друге елементе.
хтмл, боди {маргин: 0; паддинг: 0; }Ово ће започети ваш дизајн на истом месту на свим претраживачима, али једна ствар коју треба запамтити је да када једном окренете све марже и паддинг, морате их селективно поново укључити за одређене дијелове ваше веб странице како бисте постигли изглед и осећате да ваш дизајн захтева.
Границе
Можда размишљате "али ниједан претраживач по дефаулту нема границу око елемента тијела". Ово није стриктно тачно. Старије верзије Интернет Екплорер-а имају транспарентну или невидљиву ивицу око елемената. Осим ако не подесите границу на 0, та граница може забринути изгледе странице. Ако сте одлучили да ћете наставити да подржавате ове застареле верзије ИЕ-а, мораћете да одговорите на ово додавањем следећих стилова тела и ХТМЛ-а:
ХТМЛ, боди {
маргин: 0пк;
паддинг: 0пк;
бордер: 0пк;
}
Слично као што сте искључили маргине и паддинг, овај нови стил ће такође искључити подразумеване границе. Такође можете урадити исту ствар користећи селектор селектора који је раније приказан у чланку.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 27.9.16.