L’autre jour je mettais en ligne un site qui fut mon premier à avoir nécessité des ajustements pour Internet Explorer 8. En effet Microsoft a mis le paquet sur le respect des standards, mais peut-être un peu trop. Je m’explique : la pseudo-classe « :last-child » (dernier enfant d’un élément parent) n’est pas reconnue par IE8, et bien qu’extrèmement pratique, elle n’est pas valide d’après les spécifications CSS 2.0 du W3C. Je l’utilisais souvent et peut-être à tort, vu que la plupart des navigateurs la supportent.

Mon objectif : insérer le caractère  » |  » (pipe) entre chaque item d’une liste, sauf le dernier. Tout cela en CSS.

Avant

li {
list-style-type: none;
display: inline;
float: left;
}
li:after {
content: ' | ';
}
li:last-child:after {
content: '';
}

Sous IE8, donne :
item | item | item |

Nous avons un  » |  » de trop à la fin, il faut trouver une autre manière d’écrire notre déclaration CSS :

Après

En utilisant le sélecteur d’enfant adjacent « li + li ».

li {
list-style-type: none;
display: inline;
float: left;
}
li+li:after {
content: ' | ';
}

Qui sous Internet Explorer 8, donne :
item | item | item

› Notre liste est désormais correctement stylée sous tous les navigateurs modernes. Merci IE8 de m’avoir remis sur le droit chemin du codage CSS, je n’utiliserai plus :last-child.

À LunaWeb, nous voyons passer quotidiennement de nombreux designs sur nos bureaux. E-mailings, refonte de site Internet, nouvelle charte web, mini-site événementiel… Ils passent entre nos mains et nous devons transformer ces maquettes images en pages web, mais il n’existe pas de règle dans le domaine. Chaque intégrateur aura sa manière de travailler faute de méthode technique universellement approuvée et éprouvée.

Lors de ces 10 dernières années j’ai pu établir une « routine » de conception des pages, qui s’est optimisée de manière plus ou moins empirique à force de recommencer ce process :

1. Travaillez avec une grille, ou imposez-le au webdesigner (960.gs fournit des modèles pour photoshop, fireworks…). Votre découpage sera ensuite plus rapide et vous limiterez ainsi la prolifération de div inutiles
2. Pensez déjà aux éléments qui devront être des sprites. Vous devez les extraire de votre design pour en composer les différents états (rollover des menu, boutons réactifs…). Sprites : Tutorials et conseils techniques.
3. Tracez toutes les découpes en veillant à prévoir les marges, bordures et padding pour les backgrounds. En partant de là, imaginez  une imbrication de div simple, puis passez à l’étape suivante. Si le design est compliqué, n’hésitez pas à coucher cette structure sur papier.
4. Commencez à intégrer votre code html en respectant la structure que vous venez d’imaginer. Conteneur principal, en-tête, menu, contenu, navigation latérale, footer. Tout doit y être. Soyez lisibles dans votre manière de coder, l’indentation n’est pas un luxe.
   
5. Nommez vos blocs de façon sémantique. « menu_left » ou « content_right » sont souvent utilisés à tort car trop spécifiques : préférez « sidebar » et « content ».
   Conseil pratique : pour mieux vous repérer dans votre structure, vous pouvez suffixer vos balises fermantes par un commentaire. Ex. : </div><!– #content –>
6. Retournez à votre image et optimisez le format de vos découpes comme suit : gif (ou png 8 bit) pour les pictogrammes et aplats, jpeg pour les images riches, png transparent 32 bit pour les images à opacité variable.
7. Exportez toutes vos découpes dans un sous-dossier.
8. Très important : incluez un reset css dans le header de votre page html.
9. Utilisez la grille et vos notes pour définir la taille de vos blocs dans une feuille de style séparée.
10. Remplacez les textes n’utilisant pas de polices standard avec la technique de l’image replacement.

Voilà, votre design tient debout dans sa forme la plus basique. Vous pouvez attaquer les détails du menu, la typographie, les formulaires…

Et vous, comment voyez-vous ces étapes ? Quels conseils donner à un débutant pour accélérer le process de découpage ?

À lire sur le même sujet :

Coder en CSS plus rapidement, plus intelligemment

Lors de la conception de sites assez conséquents, il est intéressant de jeter un coup d’œil à ce qu’il est possible de faire afin d’optimiser son rendement en intégration. Après avoir testé en profondeur plusieurs solutions (dont le très bon Blueprint CSS), j’ai retenu 2 solutions qui me font gagner un temps fou et me permettent de me concentrer sur l’aspect créatif des projets que j’intègre.

Gagner en productivité

Premièrement, si comme moi vous codez sous Textmate, je vous conseille le très bon bundle de chez Minimal Design : Textmate CSS Bundle.

Sur le principe des « snippets », accédez aux propriétés CSS les plus communes en tappant ses initiales.

Exemple : lstn + ⇥
Donnera : list-style-type: none;

Le gain de temps lors de la construction de vos éléments est incroyable. Personnellement je ne pourrai plus me passer de cet outil.

Vers un CSS « intelligent »

Ensuite, nous avons tous eu l’expérience suivante : les desiderata du client qui varient en cours de production (la femme du dg « préfère le jaune » et il ne veut rien entendre après des heures d’explication laborieuse). Pour faciliter la propagation de changements « site-wide », nous avons plusieurs solutions :

1. La bonne vieille technique du « Rechercher / Remplacer » (parfois trop « bourrin », ou pas assez)
2. Coder le style en dur dans la source html, il l’aura voulu son jaune (quick’n'dirty)
3. Se baser sur un framework CSS dynamique, permettant d’attribuer des variables (de la couleur dominante à l’épaisseur de la bordure des champs de formulaire)

Je trouve que le grand point faible du CSS est que ce langage ne permet pas la réutilisation de classes ou de constantes. Même en optimisant son code on produira toujours de l’excédent, du redondant. Certains intégrateurs s’acharnent avec minutie à factoriser les propriétés, à optimiser les sélecteurs… Je pense que c’est une perte de temps. La machine doit être là pour épauler le créatif, pas l’inverse.

Avec CSS Cacheer, un préprocesseur php qui traite vos feuilles de style, vous accédez à de nombreuses fonctionnalités qui révolutionneront votre manière de coder :

Les constantes

Voici une partie des constantes que je déclare en début de css :

@constants
{
 ma_couleur: #3D7017;
 links_color: #FF752D;
 grid: 950; /* largeur de la grille */
 sidebar: 7; /* nombre de colonnes  pour la barre latérale */
 content: 18; /* nombre de colonnes  pour le contenu */
 gutter: 10; /* marge entre les colonnes */
 body_color: #121;
 headers_text: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
 body_text: Georgia, Times, "Times new roman", serif;
}

Appelables ainsi :

h1 {
 font-family: const(headers_text);
 color: const(ma_couleur);
}

Réutilisez vos classes !

Je veux que mon élément ( ».lien ») reprenne toutes les propriétés d’un autre élément ( ».bouton »), sans avoir à les saisir à nouveau ni toucher à mon code html:

.lien {
 class: bouton; /* je reprends les propriétés des éléments .bouton */
 border-width: 3px; /* mais avec une bordure de 3 pixels */
}

Alignez vos éléments facilement

Le système de grille génère à la volée un background reprenant des valeurs comme « nombre de colonnes », « largeur d’une colonne », « goutière » (comprenez « espace entre les colonnes ») et « hauteur de ligne » (baseline). L’intégralité de son fonctionnement est expliqué en vidéo sur le blog d’Anthony Short.

Les sélecteurs imbriqués

Cette fonction vous coupera probablement le souffle. Un petit bout de code vaudra mieux qu’une longue explication :

ul#exemple {
 list-style-type: none;
 line-height: 1.25em;
 > li {
 margin-top: 14px;
 h3 {
 font-size: 1.3em;
 font-weight: bold;
 margin-bottom: 0;
 }
 p {
 color: #7F9280;
 margin-bottom: 0;
 }
 }
}

Oui vous avez bien lu ! L’élément « h3″ qui appartient à l’élément « li » qui lui-même appartient à l’élément « ul#exemple » sont imbriqués !

CSS Scaffold reconnaît les relations d’appartenances et nous servira le css qui suit :

ul#exemple {
 list-style-type: none;
 line-height: 1.25em;
}
ul#exemple > li {
 margin-top: 14px;
}
ul#exemple > li h3 {
 font-size: 1.3em;
 font-weight: bold;
 margin-bottom: 0;
}
ul#exemple > li p {
 color: #7F9280;
 margin-bottom: 0;
}

Factorisation automatique

Si plusieurs éléments ont les mêmes propriétés, ils seront regroupés pour optimiser le poids total de votre fichier.

Minification, mise en cache & compression gzip

Une fois passé à la moulinette, votre code tient en une seule ligne, mis en cache et gzippé. Ainsi votre css est optimisée et vos pages sont plus rapides à charger.

Et bien plus encore…

Faire une liste de toutes les fonctionnalités du framework aurait gâché votre plaisir de les découvrir par vous même. Malgré tout, j’ai apporté quelques modifications et améliorations aux plugins de CSS Cacheer, et je tenais à les partager :

Plugins CSS Cacheer
(à extraire dans le dossier css-cacheer/plugins/ de votre installation)