Reset CSS: pages web avec un véritable style cross-browser

Dans ce court article, nous verrons ce CSS est la technique de réinitialisation CSS et la meilleure façon de l'utiliser pour créer des pages web véritable cross-browser.

CSS Reset: ce qu'ils sont et ce qu'ils sont

Créez des pages Web de la Croix-navigateur est un problème qui, depuis plusieurs années (c'est à dire lorsque Internet Explorer n'est plus une part de marché de 95%) touche tous les concepteurs de sites Web. Mais même quand le résultat est compatible avec tous les navigateurs (vous n'avez pas, c'est à dire, des dysfonctionnements ou des défauts d'affichage susceptible d'affecter la facilité d'utilisation du service), la sortie de la page Web sera presque toujours selon différents si considérée avec IExplorer , Firefox, Safari, Chrome ou Opera.

Je parle de petites différences, parfois à peine perceptible, mais néanmoins impliquer un départ par rapport aux attentes du résultat final des concepteurs de sites web (par exemple, parce que l'espace entre deux éléments est légèrement plus grande que d'un navigateur à l'autre).

Ce problème est dû aux réglages par défaut du logiciel de navigation individuelle qui impliquent des différences, plus ou moins perceptible, quand vous rendez la même page Web.
Afin de résoudre ce problème nous avons recours à une technique qui est appelé Reset CSS, qui consiste, essentiellement, un ensemble d'instructions dans l'utilisation de CSS afin de "réinitialiser" les paramètres par défaut dans les navigateurs individuels.

CSS Reset: une solution simple

Une solution, non raffiné, est de déclarer le début d'une règle feuille de style qui annule, pour chaque élément de la page, habituellement un certain nombre d'attributs définis par les navigateurs (comme, par exemple, margin, padding)

 



 * {



  



 margin: 0;



  



 padding: 0;







 }

 

ou:

 



 * {



  



 margin: 0;



  



 padding: 0;



  



 marge: 0 none;



  



 aperçu: 0;







 }

 

ou, plus élaborée:

 



 * {

 

  



 vertical-align: baseline;



  



 font-weight: inherit;



  



 font-family: inherit;



  



 font-style: inherit;



  



 font-size: 100%;



  



 margin: 0;



  



 padding: 0;



  



 marge: 0 none;



  



 aperçu: 0;







 }

 

En fait, je ne peux pas recommander l'utilisation de ces solutions faciles comme l'utilisation du sélecteur universel (astérisque) peut conduire à des résultats pas toujours optimale.

• <<
• 1
• 2
• >>