10 Astuces CSS pour vous sauver la vie ! #1
Avec un titre aussi accrocheur et tellement humble, vous allez sans aucun doute tous fondre sur cet intéressant article ! Je crois que c’est la mode en ce moment de donner ses 10 astuces CSS préférées, donc je vais en faire de même. Avec ces quelques « trucs » vous pourrez gagner des heures au bout du compte.
Et je n’exagère pas quand je dis des heures, quel développeur n’a jamais perdu du temps sur un problème d’affichage, un bug sous Internet Explorer ou autre ? Ces derniers jours, j’ai donc pu mettre en pratique plusieurs astuces trouvées sur le net ainsi que mes « astuces persos ». En voila la liste :
1. Remettre à zéro les paramètres des navigateurs et la taille de leurs polices
Voici les quelques lignes de code que tout le monde devrait avoir au début de sa (ses) feuilles CSS. Cela sert tout simplement à effacer les petites commodités des navigateurs et donc à partir sur des bases saines, un bout de code à avoir !
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
Ensuite, voila ce qu’il faut pour mettre la taille de police à 10 pixels :
html {font-size: 62.5%;}
C’est une bonne taille de police car on peut alors aisément travailler en unité em. Par exemple, pour un paragraphe à 12 pixels et un titre à 20 px, il suffit d’écrire :
p {font-size: 1.2em;}
h1 {font-size: 2em;}
2. Centrer horizontalement le design
Pour centrer le design d’un site il suffit tout simplement d’appliquer ceci au <body> ou à une div qui contient tout le site :
div#container {margin: 0 auto; width: 500px;}
3. Centrer horizontalement le fond du site
Il m’arrive souvent, comme d’ailleurs pour Design Spartan, d’avoir un large fond qui dépasse la largeur du site. Et il peut être utile de le centrer par rapport au site qui lui est déjà centré (en pratique cela paraît plus clair, je vous assure). Admettons que ce soit <body> qui ait une large image comme fond, il suffit de mettre ce CSS :
body {background : url(images/mon_fond.jpg) center top; }
C’est donc la propriété « center top » qui va tout faire !
4. Avoir un fond qui se répète sur toute la largeur de la fenêtre
C’est très répandu sur le net de voir des sites dont le fond, ou une partie du fond se répète horizontallement « à l’infini ». L’astuce est d’appliquer au background une répétition horizontale de lui-même. Il suffit donc d’avoir une image (png de préférence) de seulement 1px de large (ou plus!) et de la répéter ce qui donne l’impression d’un fond sans limites.
#madiv { background-image : url(images/mon_fond.png) repeat-x; }
5. Créer des règles qui peuvent être réutilisées
Il peut être extrêment pratique de créer des « règles » qui s’appliqueront automatiquement à tel ou tel élément quand on le veut. Par exemple si on veut qu’une catégorie de titre soit rouge, il suffit de lui appliquer une class ( exemple: class= »titre_important« ) puis dans le CSS tous les éléments de cette classe seront formatés en rouge :
.titre_important { color: red; }
C’est un exemple simpliste mais cela peut être appliqué à des éléments d’une façon bien plus fastidieuse.
6. Plusieurs règles pour un seul élément
L’inverse de l’astuce précédente est aussi valable, si on veut qu’un paragraphe (par exemple) se voit appliqué plusieurs styles pour gagner du temps, c’est tout à fait faisable, exemple :
.important {color: red;}
.title {font-weight: strong;}
On peut donc appliquer ces deux propriétés CSS à un seul élément :
<p class=”title important”>Ce texte va être rouge et gras à la fois !</p>
7. Se créer une barre de navigation rapidement
On est souvent amené à faire des menus horizontaux, donc pour gagner du temps, autant avoir une base tout prête !
Le XHTML :
<div id=”navbar”>
<ul>
<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
<li><a href=”http://www.google.com” »>Google</a></li>
<li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
</ul>
</div>
Le p’tit bout de CSS :
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}
8. Créer un formulaire de contact sans tableau
Les tableaux qui ont été surutilisé à mauvais escient sont de plus en plus remplacés par l’emploi des div. Il est donc temps d’en faire de même pour le formulaire de contact que vous créez !
Le XHTML :
<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=” » />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=” » />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=” » />
</div>
</fieldset>
</form>
Le CSS :
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
9. Positionner un élément au centre de l’écran
Il est possible que ce soit une chose que vous ayez un jour besoin de faire, pas de panique, voilà l’astuce :
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
C’est de la logique, selon la hauteur et la largeur de votre div, vous devez appliquer un margin à gauche et en haut équivalent à la moitié de ces valeurs comme dans l’exemple.
10. Créer des exceptions pour IE6 et IE7
Tout webdesigner ou développeur le sait bien : Internet Explorer c’est de la m**de, on ne peut être plus poli. Là où tout se passera bien sur tous les navigateurs, au moins une version de IE offrira de bon coeur un bug. Une chose fort utile que j’utilise (par contrainte) pour chaque design est un commentaire, à vrai dire même plusieurs.
Les commentaires font en fait appel à des feuilles de style supplémentaires que seul IE6, IE7 ou la version désirée de IE pourra lire. Vous commencez à comprendre ? Si vous avez un bug affreux seulement sur IE7 par exemple et que vous ne pouvez pas le régler autrement, dans ce cas là vous allez faire un commentaire et créer une petite feuille de style pour IE7 qui corrigera ces bugs en mettant d’autres propriétés SANS QUE CELA N’AFFECTE FIREFOX, OPERA, ou tout autre navigateur…
C’est donc indispensable… Pour appeler une feuille de style qui corrige les bugs de IE6 et des versions précédentes, il suffit de mettre ceci dans le header de votre page XHTML :
<!–[if lte IE 6]>
<link href= »style/fix_ie6.css » rel= »stylesheet » type= »text/css » />
<![endif]–>
Et pour la version d’IE7 seulement :
<!–[if IE 7]>
<link href= »style/fix_ie7.css » rel= »stylesheet » type= »text/css » />
<![endif]–>
J’espère sincèrement que cela vous aura aidé pour la création de vos sites, en tout cas c’est le but et certaines astuces sont à connaître par coeur ! (si ce ne sont toutes)…
Auteur: Gaétan Weltzer, comme toujours en fait.
Aline -
rien à dire..ah si! un grand MERCI
shyboy -
Sympa ton pense bête!
je vais le bookmarquer, ça peut toujours servir!
bass -
Très bien ça, cela me sera bientôt utile merci 😉
Design Spartan -
De rien ! ça peut toujours servir 🙂
takk -
ha bah voila ^^ qu’il est gentil mon ptit spartounet :p je mettrais ca en pratique dans un an promis !
LuciferX -
Vraiment très intéressant ce billet, surtout la n°6 et la n°10, je ne savais pas que l’on pouvait appliquer plusieurs class à un élément !
Tark` -
Merci effectivement pour toutes ces précieuses aides!
Et, j’ai vu le petit smiley dans le coin, là, à droite sous la blogoliste… huhu :^p
Guillaume Lecanu -
Bon article dans l’ensemble mais attention à l’exemple 5 et 6 !
Il ne faut jamais donner un nom de classe qui définisse un style particulier (.red .blue .bold .italic …. ).
Le code XHTML doit être indépendant du CSS.
Imaginez que vous souhaitez proposer à vos visiteurs plusieurs feuilles de styles au choix, ou tout simplement que vous faites de temps en temps des nouvelles feuilles de styles selon la période (Noël, Jour de l’an, Vacances …).
Vous pourriez avoir des incohérences, par exemple vouloir du vert dans une classe qui s’appelle « red », d’où le fait qu’il ne faut pas donner des noms de classes comme .red ou .bold
Optez plutôt pour son rôle (.title .subtitle …) ou son importance (.important .remarks .comment …)
Design Spartan -
Le choix du nom de la classe était pour être bien compris dans cet exemple mais cette remarque est très pertinente. Tu as tout à fait raison et je pense qu’il est plus judicieux de modifier l’exemple.
Merci pour cet avis, je modifie cela. 😉
Guillaume Lecanu -
Parfait, mais il reste toujours la classe « bold » dans ton exemple numéro 6.
Tu peux par exemple appeler tes classes : .title et .important 😉
ben -
Autres remarques ;¬) pour 5 & 6
un titre devrait être dans une balise h1, h2… h6 (ça m’arrive de faire du css sans être xhtml-lement parfait) ; que faire comme exemple…
Le plus pertinent serait de parler d’une classe utile comme .current dans un menu afin d’accentuer la page actuelle -> ul li a.current ? ou alors juste préciser qu’il s’agit d’un exemple purement css ;¬)
Ekilio -
Petit commentaire pour l’astuce 2 : L’exemple est incomplet, il ne suffit pas de mettre les marges en automatique pour pouvoir centrer un élément, il faut également obligatoirement lui donner une largeur (width).
Par exemple :
#contenant { margin-left: auto; margin-right: auto;} /* Ne sera pas centrée */
#contenant2 { margin-left: auto; margin-right: auto; width: 500px; } /* Sera centrée */