Restablir CSS: pàgines web amb un estil realment cross-browser

En aquest breu article anem a veure el que CSS és la tècnica de restablir CSS i la millor manera d'utilitzar per crear realment cross-browser pàgines web.

CSS Reset: el que són i el que estan

Crear les pàgines del navegador web totalment transversal és un problema que, des de fa anys (és a dir, quan Internet Explorer ja no és una quota de mercat del 95%) afecta tots els dissenyadors web. Però fins i tot quan el resultat és compatible amb tots els navegadors (no té, és a dir, mal funcionament o defectes de pantalla amb capacitat d'afectar a la capacitat d'ús del servei), la sortida de la pàgina web gairebé sempre en funció de si diferents vistes amb IExplorer , Firefox, Safari, Chrome o Opera.

Estic parlant de petites diferències, de vegades gairebé imperceptible, però no obstant això, impliquen un allunyament de les expectatives del resultat final dels dissenyadors de pàgines web (per exemple, perquè l'espai entre dos elements és lleugerament més gran que un navegador a un altre).

Aquest problema es deu a la configuració per defecte del programari de navegació que impliquen diferències individuals, més o menys notable, quan es fan la mateixa pàgina web.
Per resoldre aquest problema es recorre a una tècnica que es diu Restaurar CSS, que consisteix, essencialment, un conjunt d'instruccions en l'ús de CSS amb la finalitat de "restablir" els valors per defecte en els navegadors individual.

CSS Reset: una solució simple

Una solució, no refinats, és declarar l'inici d'una regla del full d'estil que es cancel, per a cada element de la pàgina, en general una sèrie d'atributs definits pels navegadors (com, per exemple, el marge, el farciment)

 



 * {



  



 margin: 0;



  



 padding: 0;







 }

 

o:

 



 * {



  



 margin: 0;



  



 padding: 0;



  



 frontera: 0 cap;



  



 esquema: 0;







 }

 

o, més elaborada:

 



 * {

 

  



 vertical-align: línia de base;



  



 font-weight: heretar;



  



 font-family: inherit;



  



 font-style: heretar;



  



 font-size: 100%;



  



 margin: 0;



  



 padding: 0;



  



 frontera: 0 cap;



  



 esquema: 0;







 }

 

De fet, no puc recomanar l'ús d'aquestes solucions fàcils com l'ús del selector universal (asterisc) pot portar a resultats no sempre són òptimes.

• <<
• 1
• 2
• >>