Inhoud
- Verbeter het uiterlijk van uw webpagina met nauwkeurige plaatsing van CSS-objecten
- Een opmerking over standaardinstellingen voor de browser
- Waarden voor marges en opvulling normaliseren
- Grenzen
Verbeter het uiterlijk van uw webpagina met nauwkeurige plaatsing van CSS-objecten
De webbrowser van vandaag heeft een lange weg afgelegd van de gekke dagen waarin elke vorm van cross-browser consistentie wishful thinking was. De huidige webbrowsers voldoen volledig aan de standaarden. Ze spelen mooi samen en leveren een redelijk consistente paginaweergave in 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 toegang hebben tot websites.
Hoewel er zeker vooruitgang is geboekt met de manier waarop browsers CSS weergeven, zijn er nog steeds inconsistenties tussen deze verschillende software-opties. Een van de meest voorkomende inconsistenties is hoe deze browsers standaard marges, opvulling en randen berekenen.
Omdat deze aspecten van het boxmodel van invloed zijn op alle HTML-elementen en omdat ze essentieel zijn bij het maken van paginalay-outs, betekent een inconsistente weergave dat een pagina er in de ene browser goed uitziet, maar er in een andere enigszins uit ziet. Om dit probleem te bestrijden, normaliseren veel webontwerpers deze aspecten van het boxmodel. Deze praktijk staat ook bekend als op nul zetten de waarden voor marges, opvulling en randen.
Een opmerking over standaardinstellingen voor de browser
Webbrowsers stellen elk standaardinstellingen in voor bepaalde weergaveaspecten van een pagina. Hyperlinks zijn bijvoorbeeld standaard blauw en onderstreept. Dit gedrag 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 genieten de standaardwaarden 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 een inconsistent boxmodel op te lossen, is door alle marges en opvulwaarden van HTML-elementen op nul te zetten. Er zijn een paar manieren waarop u dit kunt doen door deze CSS-regel toe te voegen aan uw stylesheet:
Hoewel deze regel niet specifiek is, omdat deze in uw externe stylesheet staat, heeft deze een hogere specificiteit dan de standaard browserwaarden. Aangezien deze standaardwaarden zijn wat u overschrijft, zal deze ene stijl bereiken wat u van plan bent te doen.
Zodra u alle marges en opvulling hebt uitgeschakeld, moet u ze selectief weer inschakelen voor specifieke delen van uw webpagina om de look en feel te krijgen waar uw ontwerp om vraagt.
Grenzen
Oudere versies van Internet Explorer hadden een transparante of onzichtbare rand rond elementen. Tenzij u de rand op 0 instelt, kan die rand uw paginalay-outs verpesten. Als je hebt besloten dat je deze verouderde versies van IE blijft ondersteunen, moet je dit aanpakken door het volgende toe te voegen aan je hoofdtekst en HTML-stijlen:
HTML, body {
marge: 0px;
opvulling: 0px;
border: 0px;
}
Net als hoe je de marges en opvulling hebt uitgeschakeld, zal deze nieuwe stijl ook de standaardgrenzen uitschakelen. U kunt hetzelfde doen door de jokertekenselectie te gebruiken die eerder in het artikel is weergegeven.
