CSS Reset: webpagina's met een echt cross-browser stijl

In dit korte artikel zullen we zien wat CSS is de techniek van CSS te resetten en hoe u het beste gebruiken om echte cross-browser webpagina's te creëren.

CSS Reset: wat ze zijn en wat ze zijn

Maak volledig cross browser webpagina's is een probleem dat, voor meerdere jaren (dat wil zeggen wanneer Internet Explorer is niet langer een marktaandeel van 95%) heeft betrekking op alle webdesigners. Maar zelfs wanneer het resultaat is compatibel met alle browsers (je niet hoeft, dat wil zeggen, storingen of defecten vertonen die van invloed kunnen de bruikbaarheid van de dienst), zal de output van de webpagina bijna altijd anders, afhankelijk van de vraag of bekeken met IExplorer , Firefox, Safari, Chrome of Opera.

Ik heb het over kleine verschillen, soms nauwelijks waarneembaar, maar toch leiden tot een afwijking van de verwachtingen van het eindresultaat van webdesigners (bijvoorbeeld omdat de ruimte tussen twee elementen is iets groter dan een browser naar een andere).

Dit probleem is te wijten aan de standaard instellingen van de afzonderlijke navigatie-software die verschillen, meer of minder opvallend, als je dezelfde webpagina maken te betrekken.
Om dit probleem dat we toevlucht tot een techniek die wordt genoemd CSS Reset, dat bestaat in wezen een reeks instructies in het gebruik van CSS om "reset" de standaard instellingen in de individuele browsers op te lossen.

CSS Reset: een eenvoudige oplossing

Een oplossing, niet verfijnd, is naar het begin van een style sheet regel dat annuleert verklaren, voor elk pagina-element, meestal een aantal attributen gedefinieerd door browsers (zoals, bijvoorbeeld, marge, padding)

 



 * {



  



 margin: 0;



  



 padding: 0;







 }

 

of:

 



 * {



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 outline: 0;







 }

 

of, uitgebreider:

 



 * {

 

  



 vertical-align: baseline;



  



 font-weight: erven;



  



 font-family: erven;



  



 font-style: erven;



  



 font-size: 100%;



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 outline: 0;







 }

 

In feite kan ik niet raden het gebruik van deze makkelijke oplossingen zoals het gebruik van de universele selector (asterisk) kan leiden tot resultaten niet altijd optimaal.

• <<
• 1
• 2
• >>