De hedendaagse webbrowser heeft een lange weg afgelegd sinds de gekke dagen waarin elke vorm van consistentie tussen browsers een wensdroom was. De webbrowsers van tegenwoordig voldoen allemaal aan de normen. Ze spelen mooi samen en leveren een redelijk consistente paginaweergave over de verschillende browsers. Dit omvat de nieuwste versies van Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari en de verschillende browsers die te vinden zijn op de talloze mobiele apparaten die vandaag worden gebruikt om toegang te krijgen tot de website.
Hoewel er zeker vooruitgang is geboekt als het gaat om webbrowsers en hoe ze CSS weergeven, zijn er nog steeds inconsistenties tussen deze verschillende software-opties. Een van de algemene inconsistenties is hoe deze browsers standaard marges, opvulling en randen berekenen.
Vanwege deze aspecten van het boxmodel effect op alle HTML-elementen en omdat ze essentieel zijn bij het maken van paginalay-outs, betekent een inconsistent scherm dat een pagina er in één browser geweldig uitziet, maar er enigszins uit ziet in een andere browser. Om dit probleem te bestrijden, normaliseren veel webontwerpers deze aspecten van het doosmodel. Deze methode staat ook bekend als het "uithollen" van de waarden voor marges, opvulling en randen.
Een opmerking over standaardinstellingen van de browser
Webbrowsers hebben allemaal standaardinstellingen voor bepaalde weergave-aspecten van een pagina. Hyperlinks zijn bijvoorbeeld standaard blauw en onderstreept. Dit is consistent in verschillende browsers en hoewel het iets is dat de meeste ontwerpers aanpassen aan de ontwerpbehoeften van hun specifieke project, maakt het feit dat ze allemaal beginnen met dezelfde standaardinstellingen het gemakkelijker om deze wijzigingen aan te brengen. Helaas geniet de standaardwaarde voor marges, opvulling en randen niet hetzelfde niveau van consistentie tussen browsers.
Waarden voor marges en opvulling normaliseren
De beste manier om het probleem van het inconsistente boxmodel op te lossen, is door alle marges en padding-waarden van HTML-elementen op nul te zetten. Er zijn een paar manieren om dit CSS toe te voegen aan je stylesheet:
Deze CSS-regel gebruikt het * of jokerteken. Dat teken betekent 'alle elementen' en het zou in feite elk HTML-element selecteren en de marges en opvulling instellen op 0. Hoewel deze regel zeer onspecifiek is, omdat deze regel in uw externe stylesheet staat, heeft deze een hogere specificiteit dan de standaardbrowser waarden doen. Aangezien deze standaardwaarden zijn wat u overschrijft, zal deze ene stijl volbrengen wat u van plan bent te doen.
Een andere optie is om deze waarden toe te passen op de HTML- en body-elementen. Omdat alle andere elementen op uw pagina kinderen van deze twee elementen zijn, moet de CSS-cascade deze waarden toepassen op al die andere elementen.
Hiermee start u uw ontwerp op dezelfde plaats in alle browsers, maar één ding om te onthouden is dat wanneer u alle marges en opvulling uitzet, u ze selectief weer moet inschakelen voor specifieke delen van uw webpagina om het uiterlijk te bereiken en voel dat je ontwerp vraagt.
borders
U denkt misschien "maar geen enkele browser heeft standaard een rand rond het body-element". Dit is niet helemaal waar. Oudere versies van Internet Explorer hebben een transparante of onzichtbare rand rond elementen. Tenzij u de rand op 0 instelt, kan die rand uw paginalay-outs verknoeien. Als u hebt besloten dat u deze verouderde versies van IE blijft ondersteunen, moet u dit adres opnemen door het volgende toe te voegen aan uw hoofd- en HTML-stijlen:
HTML, body {marge: 0px;opvulling: 0px; rand: 0px;} Net als bij het uitschakelen van de marges en opvulling, worden met deze nieuwe stijl ook de standaardgrenzen uitgeschakeld. Je zou ook hetzelfde kunnen doen door de jokerteken selector te gebruiken die eerder in het artikel werd getoond. Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 27-09-16.
