Depuis, la séparation contenu/aspect a bouleversé les méthodes de travail des développeurs web. Cela étant, il reste encore beaucoup d’évangélisation à faire pour que :

• tous les créateurs de contenu adhèrent à cette séparation (et appliquent la sémantique du HTML)
• tous les éditeurs de navigateurs intègrent les spécifications (si vous voyez de qui je veux parler…)

Enfin, on peut espérer, au-delà de CSS3, que ce langage nous permette bientôt de débrider complètement notre imagination sur le média web.

9 conseils pour mieux coder son CSS

1. Ecrire les tailles de police en pixel ou en em, le débat continue.
2. Faire des déclarations sur une ligne : si il n’y a qu’une seule propriété, sinon sur plusieurs lignes. Des économies d’octets à la clef
3. Classer ses styles : d’abord les sélecteurs de balise, puis les classes, et enfin les déclarations par section
4. Savoir s’il faut coder pour IE4, pour Opera, Safari. Jonathan a abandonné, Roger aussi, sauf quand un client le demande. Sinon, se concentrer sur les navigateurs les plus récents.
5. Deux méthodes pour gérer le float, par un hack ou sans passer par des artifices dans la structure HTML
6. Comprendre le flux, ou le folttement (float en anglais) : la base du CSS
7. Saisir margin et width pour les blocs flottants, afin d’éviter le bug du modèle de boîte dans IE5.
8. Utiliser les raccourcis CSS, du genre : #content {font: bold 16px/20px Georgia, serif;}
9. Eliminer les sélecteurs superflus : on peut coder sans citer tous les parents !
10. Et enfin faire simple !

Ca reste une méthode personnelle de développement, orientée vers l’économie de bande passante, mais aussi de relecture. Des conseils à suivre.

Avec Equal Height Columns using CSS, Edward Eliot essaye plusieurs possibilités : « Faux Columns et l’astuce de l’image d’arrière-plan dans le parent ; du javascript (bonjour l’usine à gaz) ; et enfn du pur CSS, que je vous laisserai le soin de traduire (ah le bougre !)

Ou l’on nous encourage encore plus à virer vers le XHTML Strict ! Un article de Jack Packard publié sur Accessites.org : montrer des sites web accessibles, conformes, beaux et précis ! Sur soumission, l’équipe accepte ou refuse un site ; et l’une des règles est d’avoir une DTD en Strict. Pour 4 raisons :

• The Transitional DOCTYPE tells you to use a Strict DOCTYPE : c’est écrit dans la DTD, quand on prend la peine de la lire en entier
• A Strict DOCTYPE forces separation of presentation and content : ça, on le savait déjà. Et de citer les balises dépréciées (genre basefont)
• Separating your presentation from your content is a Good Thing : on en rajoute, des fois que… L’utilisateur peut reprendre la main avec sa propre feuille CSS ; La maintenance est facilitée ; la bande passante est économisée ; et c’est une recommandation du WCAG
• What about new windows? Les nouvelle fenêtres, ouvertes avec target="_blank" sont à bannir : l’utilisateur doit maitriser sa navigation. Pour les maniaques, le site propose le javascript de 456BereaStreet.

Bref on n’apprend rien de nouveau (mis à part le premier point), mais ça a le mérite de rebondir sur ce que disait Raphaël Goëtter sur son blog.

Ces codes couleurs, appliqués au web, sont assez réduits : 216 en tout. Soit le nombre de couleurs qui sont sensées s’afficher de la même manière sur toutes les plateformes. Ces couleurs sont dites websafe

• Première astuce : toutes les couleurs websafe sont basées sur des multiples de 3 : #003366, #99ccff, par exemple
• Deuxième astuce : toutes les couleurs websafe peuvent se raccourcir en CSS ; ainsi, pour les exemples précédents, on peut écrire : #036, #9cf.
• Dernière astuce : la question de l’harmonie des couelurs, des tons chauds, froids, des toniques et tout le reste est bien compliquée ; on pourra néanmoins s’aider du générateur de www.wellstyled.com pour faire une palette harmonieuse et websafe. Ce générateur dispose de plusieurs atouts : réduction websafe, aperçu des couleurs en fonction des handicaps visuels, sauvegarde de l’URL de la palette.

Heureusement pour nous, certains sites se proposent de lister les bugs des navigateurs, et en particulier IE (toute version confondue). Evidemment, ils proposent les solutions qui vont avec !

Citons parmi ces sites ressources :

• positioniseverything
• Chez delicious, on trouvera les combinaisons bug+css, bug+ie
• J’en ai recensé certains sur mes delicious

A noter, via un mail envoyé par Monique (merci Monique, mais… et les commentaires alors !?) le site webdevout, effectivement riche en ressources.

Dans le même genre que le Mémento CSS de Raphaël G&œlig;tter, mais en moins bien fait (et bien moins cher puisque gratos), voici une liste de documents imprimés :

• Chez Laurent Bernat, les balises HTML et leurs attributs.
• Chez iLoveJackDaniels.com, plusieurs cheatsheets (toutes au format PNG, existent aussi en PDF) :
  • les entités HTLM
  • les propriétés CSS
  • du Javascript
  • du PHP
  • du MySQL
  • du mod_rewrite pour faire l’url rewriting

A imprimer et coller au-dessus de son PC !

Il y est question du design hérité de la mise en forme via tableau : carré, rigide, mais avec des intérêts de structures évidents.

Molly nous encourage a usé des propriétés du CSS pour destructurer nos design web, et faire des choses plus éclatés.

Y a plus qu’a !

Le site www.alsacreations.com dispose de nombreux tutoriels très simples sur toutes les notions relatives à l’interaction entre xHTML et CSS : DTD, balises de bloc, encodage, hack CSS, etc..

N’hésitez pas aussi à consulter la FAQ, toute aussi riche et idéale pour débuter !

Une mine d’info que l’auteur nous encourage à user (sans en abuser : n’oubliez pas de le citer dans les crédits de votre site)

On trouvera en complément du site en lui-même un excellent forum, riche de nombreux intervenants tous plus calés et disponibles les uns que les autres. Donc n’hésitez pas à aller y faire un tour, et si vous avez une question, commencez par utiliser la fonction Rechercher !

Je profite de l’occasion pour citer les autres forums actifs du développement web : www.webmaster-hub.com et www.developpez.com, avec ses sections développement web ou PHP.

Dernière chose à propos d’Alsa : un espace emploi qui fédère toutes les offres et demandes dans le domaine !

_ « ..? »

Je désactive pour 24 heures les feuilles de style, afin de montrer au monde (qui vient me voir en tous cas) ce que c’est qu’un site avec un balisage sémantique.

L’initiative débute chez Dustin Diaz, avec l’Annual Naked Day (5-avril-2006), et est reprise chez nous par Effair.

Il nous reste donc la possibilité de bricoler (possibilités que j’avais listées précédemment)

Ou alors, on peut utiliser la solution de d’Alessandro Fulcitini: le javascript NiftyCube pour faire des boites rondes.