Warning: Declaration of Walker_Comment2::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146
Creetik Blog » tuto

Featured Post

Meilleurs Voeux 2011

Je souhaite adresser mes meilleurs voeux à tous les corps de métiers liés au Web, webmasters, web-designer, CEO, web-marketing, animateurs web, intégrateurs, web développeurs et à tous différents acteurs que rassemble le web autour du meme outil. J’aimerai porter une attention particulière...

Read More

[Aide] – Le reset CSS

Posted by Webmaster | Posted in Conseils Creetik, css | Posted on 14-10-2010

2

Pour ce second post de conseils Creetik, nous allons rentrer dans le vif du sujet et aborder une technique de démarrage d’un nouveau projet.

Le reset CSS, permet de remettre à zéro l’interprétation des balises HTML afin de réduire l’impact des différences d’interprétation de chaque navigateur. Les nouvelles propriétés CSS attribuées à chaque balise pourront être communes à tous les navigateurs, ce qui nous offre la possibilité de partir sur une base saine. Cette technique permet d’effacer une bonne partie des problèmes de compatibilité et ainsi améliorer l’accessibilité sans faire trop d’effort.

Différentes techniques, les bonnes et les mauvaises !

Plusieurs techniques de reset CSS existent et de part le contexte de cette méthode, il est facile de faire un peu tout et n’importe quoi. Tout d’abord, suivant vos compétences CSS, vous pouvez soit faire votre propre reset CSS ou si vous ne vous sentez pas aborder le CSS de cette manière, vous pouvez en intégrer un déjà fait, validé par une large communauté de webmaster. (Ce que nous vous conseillons de faire)

Si vous vous sentez l’âme d’un ninja CSS, alors vous pouvez entamer un reset CSS à la main.
Commençons par ce qu’il ne faut absolument pas faire
– Attribuer des propriété CSS à tous les éléments sans distinction !
On pourrait se dire, c’est plus rapide! Ce n’est qu’une impression en vérité, car il y aura forcément un cas de figure que vous n’avez pas prévu et que vous devrez corriger par la suite.

* {
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
}

Si vous utilisez le sélecteur * pour attribuer des propriétés CSS, elles seront attribuées à tous les éléments de la page. Ce qui au final consommera énormément de ressources pour finalement un effet qui vous obligera, dans certains cas, à rectifier ces propriétés. Il est conseillé de travailler plutôt sur un nombre restreint de balises.

– Écraser la propriété « display » d’une balise HTML.
Les éléments de type block ou inline ne doivent pas être modifiés, cette propriété est l’une des rares qui n’est pas interprétée différemment d’un navigateur à l’autre.

Réaliser son reset CSS perso
Il vous faudra un peu de patience et des cas de figure concrets pour cibler la majorité des balises html.
Afin de cibler le plus de cas de figure possible, il est utile de créer une page html vierge contenant toutes les balises que vous souhaitez modifier. Vous aurez ainsi une vision d’ensemble de la portée des règles CSS que vous rédigez.

– Regrouper les balises équivalentes et de même nature.
Les balises de titres par exemple h1, h2,… doivent acquérir les même propriétés assimilés aux titres. Les éléments de type liste ul, li, ol,… doivent reprendre les règles CSS de type list-style-type ou encore list-style-position

– Regrouper les propriétés CSS qui s’appliquent à de nombreuses balises.
Les propriétés CSS padding et margin sont les propriétés de bases les plus utilisées et aussi celles qui contiennent le plus de différences entre les navigateurs.
En fixant ces propriétés à 0, nous pouvons rassembler sous cette regles toutes les balises de type input ou les titres h1, h2, ou encore textarea, fiedset etc..

Avec ces conseils, vous êtes en mesure de démarrer un projet web dans les meilleures conditions et surtout d’éviter de passer des heures à corriger les différences entre navigateurs.