Vers la feuille de style css ultime

DOCUMENTATION GRATUITE

web call back

Rappel immédiat et gratuit !

Besoin d'un conseil ? Nous vous appelons !*

Inscrivez votre numéro de téléphone
et cliquez sur valider.

Téléphone :




* Sauf week-end et jours fériés

> Formation Web > Développeur Web > Vers la feuille de style css ultime

Première partie : le reset css

Cet article est le premier d’une série qui a pour but de vous aider à bien préparer toute la phase intervenant en amont de la création des fichiers html et css. En effet, il va s’agir de passer en revue les différents outils ou techniques à notre disposition afin de lancer un projet d’intégration web dans les meilleures conditions. Comme on le verra au cours de ces articles, aucun de ces outils ou techniques n’est une fin en soi, ils ont leurs avantages et inconvénients, leurs adeptes et leurs détracteurs. Il est bien évidemment toujours possible de faire le choix de s’en passer mais il est préférable de le faire en connaissance de cause.

La mise en forme css par défaut des navigateurs

Même lorsqu’aucun style css n’est appliqué sur une page html, celle-ci se trouve avoir certains attributs de mise en forme. En effet, sans CSS, le navigateur rend du texte encadré par une balise h1 d’une taille supérieure à celui qu’encadre une balise p. Le premier aura une graisse absente du second. Et ce qui vaut pour la taille ou la graisse vaut également pour toute une série de propriétés suivant les balises considérées. Si les navigateurs n’ont absolument pas la même manière de rendre les éléments html, c’est pour une raison toute simple ; ils utilisent par défaut leur propre feuille de style. Et l’on constate dès lors, en comparant leur rendu, qu’IE et Firefox n’attribuent pas les mêmes marges externes (margin) ou marges internes (padding) à certains éléments (h1, ul, par exemple). Pour cette raison, il a semblé utile de remettre à plat le css des balises html afin que les divers navigateurs donnent exactement le même résultat, au pixel près idéalement. Aujourd’hui nous nous attarderons uniquement sur la notion de remise à zéro (ou reset css) mais nous verrons plus tard que cette remise à plat peut également être l’occasion de pousser un peu plus loin le rôle de cette feuille css, et que, dès lors, différentes stratégies peuvent être mises en œuvre à savoir : reset css, css de base, css réutilisable, framework, etc…

Reset élémentaire :

La première question est de savoir sur quels éléments intervenir. La balise universelle permet par exemple de cibler tous les éléments et de remettre toutes les marges à zéro en quelques lignes :

* {
margin: 0;
padding: 0;
}

Dès lors, il n’y aura plus de différence d’espacement entre une balise h1 et une balise p suivant les navigateurs. La simplicité et la puissance de cette solution n’est pourtant pas sans inconvénient. En effet, on applique ici une mise en forme à toutes les balises html, ce qui va consommer de la ressource, surtout dans le cas de site web conséquent. Il serait donc plus judicieux de lister les éléments html pour lesquels on souhaite remettre les marges à zéro, par exemple :

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,body,html,p,blockquote,fieldset,input
{
margin:0;
padding:0;
}

Une fois qu’on a défini les balises à prendre en compte et ajouté nos deux lignes de css, on pourrait s’en satisfaire et reprendre pour chaque nouveau projet le code ci-dessus. Mais pourquoi s’arrêter en si bon chemin. Ne serait-ce pas l’occasion d’homogénéiser la présentation des différents éléments. C’est très exactement ce qui s’est produit dans les années 2000 où de manière parfois concomitantes différents reset CSS sont apparus.
Défaire le html, Tantek Celik

Ainsi, en 2004 Tantek Celik rend public une feuille de style css mininale, « undohtml.xss » que l’on pourrait traduire par « defaire le html ». La lecture ligne à ligne du code et des commentaires de l’auteur  est particulièrement intéressante pour le sujet que l’on traite. Je vous en donne donc ici la traduction ligne à ligne :

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                            */
/*   http://creativecommons.org/licenses/by/2.0                      */
/* Cette feuille de style a une licence Creative Commons License.    */
/*                                                                   */
/* Objet: défaire quelques styles par défaut des navigateurs                */
/* (X)HTML courants                                                  */
/*                                                                   */
/* le soulignement des liens nuit à leur lisibilité, parce que la    */
/*   partie inférieurs des mots s’en trouve assombrie                */
:link,:visited { text-decoration:none }
/* pas de puce par défaut pour les listes, car les listes sont plus  */
/* souvent utilisées pour des raisons sémantiques                    */
ul,ol { list-style:none }
/* évite des tailles de police hétérogènes dans l’affichage par      */
/* défaut des navigateurs                                            */
/*                                                                   */
/* et pour pre/code également                                        */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* supprime les marges internes et externes par défaut qui sont      */
/* hétérogènes (entre navigateurs) pour ul, ol                       */
/* l’espace par défaut sur les titres ne correspond pas à un                */
/* interlignage normal, donc on s’en débarrasse.                     */
/* on met également à zero tout ce qui se trouve autour de pre,      */
/* form, body, html, p, blockquote                                   */
/* curieusement, les éléments de formulaires sont hétérogènes, et    */
/* il est difficile de les modifier en CSS.                          */
/* néanmoins on vire également leur margin et padding                */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,body,html,p,blockquote,fieldset,input {
margin:0;
padding:0
}
/* Qui peut  croire qu’ajouter une bordure à une image cliquable     */
/* est une bonne idée ?                                              */
a img,:link img,:visited img { border:none }
/* on enlève l’italique de la balise address                         */
address { font-style:normal }
/* nécessite également d’autres ajustements...                       */

L’une des personnes à être allée le plus loin dans cette démarche est Eric Meyer. Celui-ci va jusqu’à supprimer les guillemets des balises citations, pour les réaffecter 2 lignes plus bas afin d’être certain que les navigateurs vont utiliser les guillemets qu’il a choisi. On comprend bien dès lors que ces lignes réutilisables pour chaque projet tendent à désigner un horizon d’autant plus pertinent qu’il permettrait de gagner un temps précieux pour chaque nouveau projet. Le framework, promettant d’être le fichier css ultime, infaillible, universellement réutilisable, tiendra-t-il les promesses que sa naissance laissait entrevoir ? C’est très exactement ce que nous regarderons dans un prochain billet.

Norbert NAIGEON, Formateur EMWEB

Sources :

5 Reset CSS à la loupe :

Cet article récapitule les principaux enjeux du reset CSS et présente les solutions les plus usités. En particulier on y trouve discutée et analysée en détail la solution Yahoo mais aussi celle d’Eric Meyer.

http://css.4design.tl/5-reset-css-a-la-loupe-pour-une-remise-a-zero-des-valeurs-par-defaut-des-navigateurs

Eric Meyer

Les reset d’Eric Meyer et leurs explications (en anglais)

Le reset d’Eric Meyer – 2007

http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/

Reset CSS Reloaded d’Eric Meyer – version de 2011

http://meyerweb.com/eric/tools/css/reset/

Tantek Celik

Le site de Tantek Celik où celui-ci décrit sa démarche (en anglais)

http://tantek.com/log/2004/09.html#d06t2354


L'avis de nos élèves : Esecad

4.3/5 sur 56 avis
Le système de l'ESECAD fonctionne parfaitement, en tant que candidat nous savons où nous allons et à quel rythme nous avançons.
L'écol...
s
Avis très très favorable...
amélie
Très professionnel, bien guidé tout au long de l'inscription.Une conseillère disponible qui encourage.MERCI...
nathalie
L’enseignement à distance demande une grande autonomie mais le système me convient parfaitement. Les services de l’école sont toujours dis...
fatiha

Autres articles du Blog :