El navegador web d'avui ha recorregut un llarg camí des dels boges dies on qualsevol tipus de coherència entre navegadors era un desig de pensar. Els navegadors web d'avui són molt compatibles amb els estàndards. Ells juguen molt bé i ofereixen una pantalla de pàgina força coherent entre els diferents navegadors. Això inclou les darreres versions de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari i els diversos navegadors que es troben en la gran quantitat de dispositius mòbils que s'utilitzen per accedir al lloc web d'avui.
Tot i que, sens dubte, s'ha avançat en els navegadors web i en com mostren CSS, encara hi ha inconsistències entre aquestes diverses opcions de programari. Una de les inconsistències comunes és com aquests navegadors calculen els marges, el farciment i les fronteres per defecte.
A causa d'aquests aspectes de l'efecte del model de caixa, tots els elements HTML, i perquè són imprescindibles per crear dissenys de pàgines, una visualització incoherent fa que una pàgina sembli molt bé en un navegador, però vegeu una mica en un altre. Per combatre aquest problema, molts dissenyadors web normalitzen aquests aspectes del model de caixa. Aquesta pràctica també es coneix com "zeroing out" els valors de marges, farcit i vora.
Una nota sobre els valors predeterminats del navegador
Tots els navegadors web tenen la configuració predeterminada per a alguns aspectes de visualització d'una pàgina. Per exemple, els hipervincles són blaus i subratllats per defecte. Això és consistent en diversos navegadors, i tot i que la majoria dels dissenyadors canvien per adaptar-se a les necessitats de disseny del seu projecte específic, el fet que tots comencin amb els mateixos valors per defecte facilita la realització d'aquests canvis. Malauradament, el valor predeterminat dels marges, el farcit i les vores no tenen el mateix nivell de coherència entre navegadors.
Normalització de valors per a marges i farcit
La millor manera de solucionar el problema del model de caixa inconsistent és establir tots els marges i els valors de farcit dels elements HTML a zero. Hi ha algunes maneres de fer-ho és afegir aquesta regla CSS al vostre full d'estils:
* {margin: 0; farcit: 0; }Aquesta regla CSS utilitza el caràcter * o comodí. Aquest caràcter significa "tots els elements" i bàsicament seleccionaria cada element HTML i establirà els marges i el farcit a 0. Encara que aquesta regla és molt poc específica, ja que es troba en el vostre full d'estils extern, tindrà una especificitat més alta que el navegador predeterminat els valors fan. Atès que aquests valors predeterminats són el que estàs sobreescrivint, aquest estil aconseguirà el que estàs pensant fer.
Una altra opció és aplicar aquests valors als elements HTML i del cos. Com que tots els altres elements de la vostra pàgina seran fills d'aquests dos elements, la cascada CSS hauria d'aplicar aquests valors a tots aquests altres elements.
html, body {margin: 0; farcit: 0; }Això iniciarà el vostre disseny al mateix lloc en tots els navegadors, però una cosa a recordar és que una vegada que activeu tots els marges i farcit, haureu de tornar-los a activar selectivament per a parts específiques de la vostra pàgina web per aconseguir l'aspecte i sent que el disseny demana.
Fronteres
Pot estar pensant ", però cap navegador té un límit al voltant de l'element del cos per defecte". Això no és estrictament cert. Les versions anteriors d'Internet Explorer tenen un límit transparent o invisible al voltant dels elements. A no ser que configureu la vora a 0, aquest límit pot fer malbé els dissenys de pàgina. Si heu decidit que continuareu donant suport a aquestes versions antigues d'IE, haureu d'abordar això afegint el següent al vostre cos i a estils HTML:
HTML, cos {
marge: 0px;
farcit: 0px;
frontera: 0 px;
}
De la mateixa manera que desactiva els marges i el farcit, aquest nou estil també desactivarà les vores predeterminades. També podeu fer el mateix fent servir el selector comodí que es mostra anteriorment a l'article.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 27/09/16.