« CSS Sans Stress & HTML S’en Mêle »

Bouts de code (snippets)

• Posteet — Une plâtrée de bouts de code dans pratiquement tous les langages du web.

• DZone Snippets — Des tonnes de bouts de code pour le développeur web.

• Bout 2 Code — Comme son nom l’indique. Un peu pauvre en langage du web pour le moment, ce site propose néanmoins des trucs pratiques pour Excel ou Office en général…

• Pastebin — vous aide à débugger vos bouts de code en obtenant une URL comme http://pastebin.com/1234 à partager autour de vous. Si quelqu’un modifie votre code, vous pourrez voir les différences avec le code d’origine. Pratique aussi pour faciliter les copiés-collés de code, par toujours évident avec des outils comme WordPress.

• codyx — Des bouts de code dans plus de 40 langages et près de 30 catégories différentes. De nombreux scripts sont disponibles dans plusieurs langages.

Envoyer des e-mails

• Email Standards Project — N’avez-vous jamais pesté contre le rendu de votre page web dans tel ou tel navigateur ? Si concevoir un site web qui « passe » partout n’est pas facile, envoyer une newsletter par email l’est encore moins. ESP vise à mettre en place une batterie de bonnes pratiques pour que les MUA implémentent les propriétés CSS indispensables à une mise en pages un peu funky des emails, grâce notamment à la mise en place de l’Email Standards Project Acid Test,

• Campaign Monitor — En complément du lien précédent, voici un tableau récapitulatif du support des CSS dans les principaux Mail User Agent (MUA).

• 33 templates HTML pour l’emailing — Toujours chez Campaign Monitor, suggéré par LeGizz, plus de 30 modèles HTML pour envoyer des e-mails qui passeront dans la plupart des lecteurs de mails.

Des tableaux quand il le faut

• CSS Table Gallery — Une galerie de styles CSS appliqués aux tableaux pour mieux styler les données tabulaires parce qu’elle le valent bien ! Une bonne initiative de Chris Heilmann qui nous a déjà gâté avec Online Tools qui héberge le célèbre DOMTab pour faire des menus à onglets. Cf. idTabs vs DOMtab pour plus d’informations.

  En quoi la mise en page par tableaux est-elle stupide ? — Tout les arguments contre l’utilisation des tableaux pour autre chose que la présentation de données tabulaires rassemblés sur une page aussi complète que ludique. Via la liste de discussion AccessTech, espace d’entraide autant que de veille technique sur le sujet de l’accessibilité numérique.

Des menus déroulants

• Menu déroulant à plusieurs niveaux — Première partie déjà très complète d’un tutoriel en trois parties sur les menus déroulant sur Fairytells :
  • Fonctionne sur les navigateurs modernes et sur Internet Explorer à partir de la version 5,
  • Navigation au clavier,
  • Positionné de manière relative pour éviter les problèmes de superposition,
  • Fonctionne avec et sans Javascript.

• Menu_UL –Un menu déroulant commis par Benoit Raux piloté via CSS : tous les états possibles ont reçu une classe CSS pour Noël :
  • .menu_son_basic,
  • .menu_son_over,
  • .menu_son_active,
  • .menu_son_active_over,
  • .menu_parent_active,
  • .menu_parent_basic,
  • .menu_parent_selected.

Des colonnes de même hauteur sans tableau

• PVII Equal Height CSS Columns — Trouvé dans le code source de l’exemple du menu déroulant de Fairytells, ce script permet d’ajuster dynamiquement la hauteur d’une colonne en fonction d’une autre. On pourrra ainsi avoir une barre latérale dont le fond parviendra jusqu’au pied de page en fonction de la hauteur du contenu principal. Hum, voyez plutôt les exemples ;)

• Equilibrez vos colonnes CSS avec Javascript — Un autre script astucieux pour avoir des colonnes de même hauteur. Très simple d’utilisation : il suffit d’indiquer les identifiants des éléments à équilibrer et hop ! Contient des morceaux de détection de redimensionnement de texte (Text-Resize Detection).

WordPress

• Guide de référence des templates tags — Voici une liste très complète des appels de fonction que l’on peut utiliser dans un thème WordPress. A bookmarker d’urgence !

Miscellanées

• Compresser et optimiser les fichiers CSS et Javascript — Tutoriel intéressant paru sur blackotine concernant l’utilisation de la classe PHP Combine.

• Les anti-sèches du développeur web : Une palanquée de memento, cheatcheet en image ou au format PDF sur vos outils préféré : HTML, CSS, PHP, UNIX, Apache, jQuery, etc.

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Créer des « Call to Action » ou des « boutons CSS » dans l'éditeur WYSIWYG TinyMCE
• CSS Sans Stress — Une formation intégrateur HTML & CSS

L’est pas frais ton DOCTYPE…

Le premier article écrit par Aaron Gustafson Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 cherche à promouvoir l’idée selon laquelle la reconnaissance des standards par le navigateur ne peut plus passer par le DOCTYPE et qu’il est nécessaire de mettre en place un mécanisme pour cibler les versions des navigateurs compatibles avec les sites web.

T’sais c’qui t’dit, mon DOCTYPE ?

Le second From Switches to Targets: A Standardista’s Journey est écrit par Eric Meyer qui s’insurge contre le retour en catimini de la détection des navigateurs qui ferait un come back sur le devant de la scène après avoir été éradiquée du web « moderne ».

Mon humble avis sur la question

A mon sens – et sans entrer dans le détail des arguments de l’un ou l’autre – le point de vue d’Aaron aurait le mérite d’être mieux compris par les intervenants de la chaine des métiers du web grâce au côté « officiel » et concret du mécanisme mis en place, qu’il s’agisse de la création d’une nouvelle balise meta, d’une approche basée sur la syntaxe des commentaires conditionnels, d’un genre de prologue XML ou même d’un profil HTML.

En revanche, l’approche défendue par Eric Meyer à le mérite de la transparence : les navigateurs s’adaptent aux recommandations autant que faire se peut, tandis que – dans la mesure du possible – les concepteurs de sites web sont libres d’explorer les dernières technologies pour peu que leurs sites web se dégradent harmonieusement dans les navigateurs plus anciens.

Bref…

Tout ça risque de faire l’objet de discussions enflammées dans la « devosphère », d’autant plus qu’il peut même y avoir matière à débat entre les notions d’améliorations progressives et de dégradations harmonieuses…

Mind the step!

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Votre blog sur un téléphone portable, really ready ?
• 2 vidéos sur le fonctionnement du navigateur (Gecko)
• -prefix-free : du beau, du bon, du mauvais ?
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Acid2 : la visite guidée

Acid2 est une page web créée par The Web Standards Project (WaSP) pour tester les navigateurs afin d’aider les éditeurs de logiciels de navigation à sortir des produits compatibles avec les fonctionnalités demandées par les designers web.

Ces fonctionnalités font partie des standards existants mais n’ont pas pour autant été correctement implantés dans les principaux navigateurs du marché. Acid2 tente de changer la donne en permettant aux navigateurs de se mesurer au test avant d’être diffusés.

Acid2 est une page web complexe pleine de fonctionnalités sous-utilisées car peu ou mal implémentées. Il a été conçu pour que tout le monde puissent vérifier facilement que son navigateur préféré « roxorise » ou pas. Dans le premier cas, un petit smiley apparait ; sinon le smiley sera déformé et/ou s’affichera partiellement en rouge.

Le but de ce document est d’expliquer le fonctionnement d’Acid2. Le balisage utilisé par la page de test est particulier dans la mesure où, sur une simple page, il doit tester de nombreuses fonctionnalités. Nous n’envisageons ni recommandons de concevoir une page web normale de cette manière, mais celà convient parfaitement pour ce test.

Si au premier coup d’oeil le code source est ardu, cette visite guidée vous en expliquera certains détails. La lecture de ce guide demande des connaissances techniques sur la façon dont le HTML, les CSS et le format PNG fonctionnent.

Note : Acid2 fait un usage intensif des datas URLs. Pour permettre aux clients web qui n’incluent pas encore cette fonctionnalité de passer le test, une version sans datas URLs est disponible.

Note : lors du test, assurez-vous d’utiliser les réglages par défaut de votre navigateur. La modification du niveau de zoom, de la taille minimum du texte, l’application d’un algorithme pour adapter la largeur du document à la taille de la zone de visualisation ou tout autre changement peut altérer le rendu de la page sous Acid2, sans pour autant être considéré comme un échec de compatibilité (ajouté le 21 juillet 2006).

Que sommes-nous donc en train de tester, au juste ?

Acid2 a été conçu si les fonctionnalités réclamées depuis longtemps par les designers web sont bien implémentées dans les navigateurs. Tout en restant dans le périmètre des standards du web, Acid2 n’inclut pas l’ensemble des spéfications et ne peut donc garantir aucune conformité vis-à-vis d’aucune d’entre elles.

Après ces précautions d’usage, nous avons sélectionné et testé les fonctionnalités que nous considérons comme les plus importantes pour le futur du web. Bien que ce test a été inspiré par l’annonce d’IE7 par Microsoft, il n’a pas été conçu pour un navigateur en particulier. Nous pensons qu’Acid2 mettra en lumière les problèmes dans tous les navigateurs courants.

Acid2 part du principe que les navigateurs sont compatibles avec HTML4, CSS1, PNG et Data URLs. les trois premiers éléments de la liste sont présents pour des raisons évidentes : ils forment la colonne vertébrale de tout contenu web. Les Datas URLs sont décrit dans HTML4 mais sont peu implantés. Nous pensons que les Datas URLs sont pratiques et utiles pour les webdesigners et faciles à implanter dans les navigateurs.

De plus, Acid2 considère que le navigateur utilise une résolution de 96 ppp, conformément au dernier appel du document de travail pour les CSS 2.1. Concernant les agents utilisateurs qui autorisent l’agrandissement des polices de caractère, le taux de 100% est retenu. Voici un aperçu des fonctionnalités les plus importantes testées par Acid2 :

• Transparence des images au format PNG — les yeux sont des PNG transparents.
• Elément object — les yeux sont attachés à une balise object. Pouvoir utiliser object (qui peut avoir un contenu alternatif) est l’une des plus anciennes demandes des webdesigners,
• Positionnement absolu, relatif et fixe — indispensable pour les mises en page avancées,
• Modèle de boite — le test Acid d’origine était axé sur le modèle de boite CSS. Acid2 continue le combat en testant les valeurs height, width, max-width, min-width, max-height et min-height.
• Tableaux CSS — il n’y a rien de mauvais à utiliser display: table pour la mise en page. C’est un puissant système de maquettage qui prend tout son sens sur les écrans larges bien que l’utilisation de tables puisse entrainer des désagréments. Pouvoir spécifier une mise en page de cette manière est important. CSS tables — There is nothing wrong with table layouts. It is a powerful layout model which makes sense on bigger screens. However, the table markup is troublesome as it ties the content to these screens. Therefore, being able to specify table layouts in CSS is important.
• Marges —Les CSS définissent des algorithmes précis pour le calcul des marges autour des éléments.
• Contenu généré — La possibillité d’ajouter des éléments décoratifs ou des annotations à une page web sans modifier le marquage a été réclamé depuis longtemps par les auteurs.
• Analyse des CSS — Acid2 inclus quelques déclarations CSS illégales qui devraient être ignorées par les navigateurs conformes aux directives.
• Paint order — nous vérifions que l’imbrication se fait dans le bon ordre. Ce n’est pas une fonctionnalité en soi, mais un pré-requis qui permet à d’autres fonctions de se dérouler correctement.
• Interlignages (Line-heights) — le test Acid2 vérifie quelques éléments-clés du modèle de boite CSS des éléments en ligne dont toute page web conforme aux standards dépend.
• Effet de survol (:hover) — un des éléments du smiley change de couleur au passage du pointeur. Savez-vous lequel ?

Vous devez prendre en compte qu’Acid2 s’affiche en mode standard. La page de test comprend un DOCTYPE qui signale que le navigateur devrait traiter la page conformément aux standards. Les développeurs de client web réticents à effectuer des changements dans la manière de rendre des documents anciens peuvent continuer à le faire sous l’appellation Quirks mode.

Qu’est-ce qui devrait apparaitre ?

Lorsque les choses se passent pour le mieux, le test Acid2 affiche une ligne de texte (Hello World) et un smiley dans une grille de 14×14. Chaque carré mesure 12 pixels de haut et 12 pixels de large. Le smiley possède un fond jaune avec un contour noir. Dans cette section, nous vous expliquerons comment tout celà a été créé.

Voilà, c’est fini…

La suite du texte est composé du découpage du smiley avec, à côté, un tableau récapitulant les éléments utilisés pour produire chaque ligne, les déclarations CSS mise en oeuvre ainsi qu’une courte description que je vous invite à consulter pour mieux comprendre le fonctionnement du test et des CSS par la même occasion.

N’hésitez pas à apporter votre grain de sel si vous pensez qu’une erreur s’est glissée à l’insue de mon plein gré ou si vous avez trouvé une formulation plus élégante, nottamment pour l’élément de liste « Tableaux CSS » et la traduction de « Paint order ». Merci d’avance !

PS : Je vous souhaite à toutes et à tous un joyeux nowel ;)

Note du 28/12/2007 : voir aussi (ou encore) l’article de Florent Verschelde sur le blog d’Alsacréations concernant les progrès du support CSS d’Internet Explorer 8.

PS2 : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Check your <body> avec le W3C

Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications – parfois sibyllines – du monde joyeux des recommandations puissent être interprétées de diverses manières…

Prudence est mère de sûreté…

Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.

D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^__^ Une autre notion indispensable : avoir une idée des possibilités d’imbrication des balises.

Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.

La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont « priorisés » les différents styles qui peuvent s’appliquer à un élément.

Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné… Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet :

• margin et padding à zéro avec le sélecteur universel
• Reset CSS Reloaded, Eric Meyer
• INITIAL, Christian Montoya
• YUI Reset CSS, Yahoo! UI Library
• undohtml.css, Tantek Celik

Remise à zéro du margin et du padding avec le sélecteur universel *

Cette méthode a le mérite de la concision et de la simplicité :

* {
  margin: 0;
  padding: 0;
}

Et border: 0 ?

Oui, il est possible d’ajouter border: 0 pour s’assurer que les éléments n’auront pas de bordures indésirables. Comme cette dernière déclaration est de plus en plus utilisée, voici la liste des éléments qu’elle concerne afin que vous jugiez de sa pertinence :

• input
• textarea
• select
• button
• table
• fieldset
• abbr
• hr
• img et object (si lien)
• iframe

Redonner des couleurs à vos balises

Reste à redonner à ces balises un rendu plus agréable en regroupant, par exemple, les éléments qui partagent les mêmes valeurs tout au long du site web :

• Différents niveaux de titre h1 – h6,
• Conteneurs de texte comme p, blockquote, pre, code, address, hr, form,
• Listes avec dl, ul, ol,
• Eléments en ligne tels que strong, cite, em, var, samp,
• Etc.

Selon le document, il pourrait être tout aussi judicieux de regrouper les éléments suivants :

• Balises ul et ol dans la sidebar
• Balises identiques dans la zone de contenu principal
• etc.

Une autre méthode inspirée par le billet paru sur pixenjoy est de reprendre la feuille de style proposée par le W3C qui peut avantageusement servir de modèle pour avoir la liste des éléments HTML concernés par cette remise à zéro des marges et retraits.

Une technique obsolète ?

Malgré son apparente simplicité et efficacité, cette méthode n’est pas la panacée : un navigateur comme Firefox consomme de précieuses ressources à boucler sur toutes les balises. Par ailleurs, un travail important reste à faire pour restyler les balises (même si ce travail n’est pas à refaire complètement à chaque nouveau projet). Quoiqu’il en soit, je vous propose de mettre cette technique de côté pour tester d’autres méthodes.

Reset CSS Reloaded d’Eric Meyer

Vous aurez peut-être remarqué que si l’ajout de border: 0 peut apporter un plus dans la remise à zéro des éléments, d’autres propriétés pourraient elles aussi gagner à être réinitialisées. C’est sûrement ce que c’est dit Eric Meyer lorsqu’il s’est penché sur son Reset CSS. (

L’exemple suivant est la version 2.0 du 26/01/2011, cf. http://meyerweb.com/eric/tools/css/reset :

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Reset again

Dans un premier temps, pas de surprise, nous retrouvons la remise des margin, padding et border à zéro, suivie de près par un outline: 0 qui sert généralemement à afficher un cadre pointillé lorsqu’on maintient le bouton de la souris appuyé sur un lien (:active, quoi ;) ). Ne pas confondre avec le même cadre qui apparait quand le lien a le focus, via la touche TAB, même s’il s’agit de la même déclaration outline: 1px dotted invert. La pseudo-classe :focus est également remise à zéro pour l’ensemble des éléments via :focus { outline: 0 }.

Héritez, qu’y disait…

Viennent ensuite les propriétés relatives à font : on s’assure qu’elles seront bien héritées par les éléments parfois récalcitrants (certains éléments de formulaire). La taille 100% sert à la fois à obtenir une valeur « héritable » par les balises filles et avoir une taille par défaut pour l’ensemble de la page web. Si vous préférez partir avec un corps inférieur, rien ne vous empêche de spécifier 62.5% pour avoir une taille par défaut de 10px env. ou 75% pour obtenir 12px. Sachant que si vous pouvez vous débrouiller pour fournir une taille de texte généreuse à vos lecteurs, ils vous le rendront bien.

Je ne veux voir qu’une tête !

Nous terminons cette première partie avec vertical-align: baseline qui permet d’harmoniser l’alignement des éléments en ligne au sein d’une boite. Il s’agit de la valeur par défaut pour aligner la ligne de base du texte avec le bas d’une image placée à côté.

Avez-vous la quote ?

Les dernières règles s’appliquent aux éléments blockquote et q dont on supprime préventivement le contenu « éventuellement » généré avant ou après, puis dans un second temps, on supprime les guillemets ouvrants et fermants. Tout ce que vous avez toujours voulu savoir sur ces éléments se trouve sur la page web de yoyodesign consacrée au contenu généré, au numérotage automatique et aux listes.

Y a pas un problème avec la valeur de line-height ?

La curiosité de cette feuille de style, est la présence d’une valeur sans unité de mesure (line-height: 1) qui mérite quelques explications. Pour ceux qui ne sont pas à l’aise avec l’anglais, j’ai repris les exemples donnés sur la page citée précédemment qui parlent d’eux-mêmes :

En utilisant line-height: 1em

La règle CSS suivante…

ul {
  font-size: 15px;
  line-height: 1em;
}
li {
  font-size: 10px;
}
small {
  font-size: 80%;
}

ul {
  font-size: 15px;
  line-height: 1em;
}
li {
  font-size: 10px;
  line-height: 15px;
}
small {
  font-size: 80%;
  line-height: 15px;
}

<ul>
  <li>I'm a list item with <small>small text</small>.</li>
</ul>

En utilisant line-height: 1

Appliquée sur l’exemple html précédent, la règle CSS suivante…

ul {
  font-size: 15px;
  line-height: 1;
}
li {
  font-size: 10px;
}
small {
  font-size: 80%;
}

ul {
  font-size: 15px;
  line-height: 1;
}
li {
  font-size: 10px;
  line-height: 10px;
}
small {
  font-size: 80%;
  line-height: 8px;
}

C’est une spécificité de la propriété line-height qui est la seule à accepter une valeur brute. Car, vous l’avez sans doute remarqué, mais spécifier 2em sur une taille de police a bien un effet multiplicateur par rapport à la valeur dont elle hérite au départ :

body {
  font-size: 12px;
}
h1 {
  font-size: 2em;
}

En finir avec le reset-reloaded ?

Le défaut essentiel de ce reset est aussi sa principale qualité : il déshabille carrément les balises de leurs attributs les plus usuels, jusqu’à ceux dont on n’avait pas vraiment conscience (:focus, :before, :after, quotes, etc.). Ceci permet de prendre conscience que le fonctionnement « naturel » de nos chères balises html ne l’est pas tant que ça…

Par ailleurs, à force de lire un peu partout qu’il ne faut pas mélanger la sémantique des balises html avec leur rendu visuel, je me dis que le full monty proposé par Eric Meyer va dans le bon sens en nous obligeant à en apprendre un peu plus sur le HTML et les CSS (trollinou inside) ^_^v.

Eric Meyer considère toute utilisation des styles par défaut comme une béquille qui nous rend dépendant du bon vouloir des navigateurs (ce qui n’est pas totalement faux). Toutefois, comme le précise, Laurent Denis, a-t’on vraiment besoin de vouloir garder la maitrise des éléments à ce point-là ou lieu de lâcher prise ? Pour finir de vous détendre, méditez cette phrase extraite de l’excellent article le tao du design web :

accepte le flot et le cours des choses, les entoure, mais ne les possède pas,

En attendant d’arriver à ce degré de sagesse dont il faudrait que nos bien-aimés clients et patrons soient aussi imprégnés, revenons vers le côté obscur de la force avec un autre reset à nous mettre sous le clavier ;)

INITIAL de Christian Montoya

Cette remise à zéro est proposée par Faruk Ates, amendée par Robert Nyman et Christian Montoya. Plus qu’un reset radical, il s’agit plutôt d’un feuille de style minimale située entre la remise des marges à zéro et le reset-reloaded. Mais jugez plutôt :

// =INITIAL   v2.1,
// by Faruk Ates - www.kurafire.net
// Addendum by Robert Nyman - www.robertnyman.com
// Addition by Christian Montoya - www.christianmontoya.net


// Neutralize styling:   Elements we want to clean out entirely:
html, body, form, fieldset {
   margin: 0;
   padding: 0;
   font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
 }

// Neutralize styling:   Elements with a vertical margin:
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
   margin: 1em 0;
   padding: 0;
 }

// Apply left margin:   Only to the few elements that need it:
li, dd, blockquote {
   margin-left: 1em;
 }

// Miscellaneous conveniences:
form label {
   cursor: pointer;
}
fieldset {
   border: none;
}
input, select, textarea {
   font-size: 100%;
   font-family: inherit;
}

Un autre avantage d’INITIAL sur le Reset-Reloaded, est que les éléments en ligne ne sont pas affectés, ce qui est une bonne chose, vu le peu de différences de rendu qu’ils présentent d’un navigateur à l’autre.

Personnellement, je trouve cette approche plus élégante que le reset reloaded : plus « lisible » donc plus maniable, notamment en ce qui concerne son « extensibilité » car on peut même lui ajouter certaines trouvailles d’Eric Meyer comme :

• spécifier une valeur brute pour line-height : 1.4 à la place de la valeur « INITIAL » de 120%,
• prendre en compte les éléments table, tr ,td ou caption,
• enlever les puces des listes,
• etc…

… afin de construire une feuille de style de base reprenant par exemple le reset de Faruk, puis en ajoutant certains éléments prélevés dans le Reset-Reloaded (Ex. 1) ou encore d’autres règles CSS récurrentes (Ex. 2). L’idée est d’obtenir une sorte de tableau de bord CSS où la modification de certaines valeurs-clés permet de gérer des maquettes différentes. Je précise qu’il s’agit juste d’un exemple pour insister sur le fait que c’est au reset de s’adapter à vos besoins, et non le contraire ;)

Ex. 1
ol, ul {
  list-style: none;
}


// tables still need 'cellspacing="0"' in the markup
// j'ai modifié les valeurs, car il est bon que les tableaux soient visibles !
table {
  border-collapse: collapse;
  border-spacing: 1px;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}

Ex. 2
// Couleurs à adapter selon votre charte
a {text-decoration: none;}
a:link {color: #000;}
a:visited {color: #000;}
a:hover {color: #000;}
a:active {color: #000;}
img, iframe, object {border: 0 none;}
input, textarea, select, button, {border: 1px solid #000;
}

YUI Reset CSS de Yahoo! UI Library

Parmi les Reset CSS existants, on trouve la contribution de Yahoo! qui propose dans son pack Yahoo! UI Library une technique pour réinitialiser les éléments html qui manquent de « consistance » d’un navigateur à l’autre.

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;
}

base.css

// base.css, part of YUI's CSS Foundation


h1 {font-size: 138.5%; /* 18px via YUI Fonts CSS foundation /}
h2 {font-size: 123.1%; / 16px via YUI Fonts CSS foundation /}
h3 {font-size: 108%; / 14px via YUI Fonts CSS foundation */}
h1, h2, h3 {margin: 1em 0;}
h1, h2, h3, h4, h5, h6, strong {font-weight: bold;}
abbr, acronym {
  border-bottom: 1px dotted #000;
  cursor: help;
}
em {font-style: italic;}
blockquote, ul, ol, dl {margin: 1em;}
ol, ul, dl {margin-left: 2em;}
ol li {list-style: decimal outside;}
ul li {list-style: disc outside;}
dl dd {margin-left: 1em;}
th, td {
  border: 1px solid #000;
  padding: 0.5em;
}
th {
  font-weight: bold;
  text-align: center;
}
caption {
  margin-bottom: 0.5em;
  text-align: center;
}
p, fieldset, table {margin-bottom: 1em;
}

undohtml.css de Tantek Celik

Peut-être le plus ancien Reset CSS. Pour des raisons de lisibilité, j’ai revu l’organisation visuelle des commentaires.

// undohtml.css (CC) 2004 Tantek Celik.
// Some Rights Reserved. http://creativecommons.org/licenses/by/2.0
// This style sheet is licensed under a Creative Commons License.
// Purpose: undo some of the default styling of common (X)HTML browsers *//


// link underlines tend to make hypertext less readable,
// because underlines obscure the shapes of the lower halves of words
:link, :visited {text-decoration: none;}

// no list-markers by default, since lists are used more often for semantics
ul, ol {list-style: none;}

// avoid browser default inconsistent heading font-sizes and pre/code too
h1, h2, h3, h4, h5, h6, pre, code {font-size: 1em;}

// remove the inconsistent (among browsers)
// default ul,ol padding or margin the default spacing on headings
// does not match nor align with normal interline spacing at all,
// so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote
// as well form elements are oddly inconsistent, and not quite CSS emulatable. nonetheless
// strip their margin and padding as well
ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

// whoever thought blue linked image borders were a good idea?
a img, :link img, :visited img {border: none }

// de-italicize address
address {font-style: normal;}

// more varnish stripping as necessary...

C’est reparti pour un tour ?

• margin et padding à zéro avec le sélecteur universel
• Reset CSS Reloaded, Eric Meyer
• INITIAL, Christian Montoya
• YUI Reset CSS, Yahoo! UI Library
• undohtml.css, Tantek Celik

Pour conclure

Ni liste exhaustive ni comparatif point par point, j’ai essayé de faire le tour des Reset CSS les plus utilisés en espérant avoir fourni quelques informations utiles sur les techniques existantes et leur fonctionnement. J’espère surtout que ce billet vous aura donné des éléments de réflexion pour vous en passer lorsque ce n’est pas nécessaire ;) Ce billet pose certainement plus de questions qu’il n’apporte de réponses car un Reset ne dispense pas de réfléchir à l’organisation de ses CSS, bien au contraire !

Stay tuned and mind the gap!

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Exercice de style CSS et HTML : table vs div

La différence majeure entre les deux versions est la disparition du menu Skins que j’avais encensé il y a peu. Les concepteurs ont convenu qu’une interface pour sélectionner un fichier CSS n’avait rien à voir avec une option de thème et devrait plutôt faire l’objet d’un plugin…

Toutes les ressources sont désormais concentrées sur l’excellence du marquage sémantique. Et comme le dit Scott tout ce que le menu Skins pouvait accomplir, peut facilement être réalisé en éditant simplement le fichier style.css ou en incluant le fichier désiré via une règle @import(‘…’); C’est vrai que vu comme ça… :)

Sandbox est donc truffé de classes contextuelles générées à la volée aux endroits-clés du code : body, billets et commentaires pour donner matière à des raffinements CSS grâce à l’exploitation judicieuse des marqueurs conditionnels de WordPress et à l’implémentation des microformats hAtom et hCard. Si j’ajoute à celà le fait que le marquage HTML utilisé est sémantiquement correcte, vous comprendrez mon désir de vous en dire un peu plus.

Mais qu’est-ce donc que le marquage sémantique ?

L’utilisation des microformats dans Sandbox, c’est déjà de la sémantique. Il s’agit en effet de nommer les classes utilisées dans le code HTML en fonction de spécifications qui ont pour but, justement, d’ajouter un peu de sens dans un monde de brute ;)

hAtom, un format micro mais costaud !

Mais encore ? Le microformat hAtom, basé sur le format de syndication Atom (comme le RSS en plus réçent), est conçu à l’origine pour les billets de blog. La participation de Tantek Celik de Technorati comme contributeur donne une idée des utilisations possibles de ce microformat en matière de formatage de billets ou d’extraction d’informations.

Revenons à hAtom. Ce microformat permet d’identifier l’information sémantique présente dans les billets (et pratiquement partout où Atom peut être utilisé) si les marqueurs de classe CSS spécifiques sont utilisés à bon escient.

Les billets sont identifiés comme un faisant partie d’un fil si la classe hfeed est présente dans div#wrapper ou div#container, par exemple. Utilisez hentry pour identifier un billet et entry-title pour un titre. Il est même possible de spécifier le nom de la Catégorie avec rel-tag, tandis qu’un lien permanent se verra associer le rel-bookmark.

Ainsi, juste en lisant le nom des classes, il est possible de savoir de quoi il s’agit, tout simplement parce que ces identifiants ont un sens pour les humains et pour les programmes informatiques !

hCard ? C’est Alexandre qui invite ^_^

En ce qui concerne hCard, je vous invite à utiliser la bande passante d’Alexandre qui a fait un billet sur la question des microformats et hCard en particulier.

Sandbox transmute les marqueurs conditionnels en classes CSS

L’idée de Scott et Andy est de générer des intitulés de classes en fonction du contexte dans lequel un billet peut apparaitre. Pour celà, le fichier functions.php présent à la racine du thème Sandbox est mis à contribution pour produire des classes :

1. Dans la balise body : sandbox_body_class()

   Les classes disponibles dans le body sont aussi nombreuses que variées. On trouve par exemple les classes générées à partir des marqueurs conditionnels comme .archive {…} d’après is_archive(), ou la classe .page {…} d’après is_page(). La spécificité des classes va jusqu’au numéro du billet .postid-69 {…} au cas où vous voudriez donner une style spécial à quelques billets particuliers en dehors de leur appartenance à une rubrique… D’autres classes dépendent du calendrier : il devient possible de styler tous les billets paraissant une année, un mois, un jour ou une heure précise. Echantillons de classes dynamiques pour le body De gauche à droite : la classe wordpress suivie des classes concernant l’année, le mois, le jour et l’heure d’affichage de la page. home indique que nous sommes sur la page d’accueil, et loggedin que je suis un utilisateur enregistré :

    <body class="wordpress y2007 m05 d31 h18 home loggedin">

   Voici maintenant la même balise body après que j’ai cliqué sur la catégorie Action citoyenne. A la place de home, on trouve la classe category suivi de l’intitulé de la catégorie en question.

    <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin">

   Pour finir, voici les archives par date. Remarquez la classe h19 qui vient d’apparaitre à 19h00 !

    <body class="wordpress y2007 m05 d31 h19 archive date loggedin">

   Je vous l’accorde, il faut beaucoup d’imagination pour trouver un style différent pour toutes ces classes disponibles. Quand je vous disais qu’il y en avait une palanquée… ;)

2. Dans la balise div qui contient le billet : sandbox_post_class()

   A côté des classes permettant de styler l’ensemble des billets comme .hentry {…} ou .post {…}, il existe des classes pour les billets protégés par un mot de passe ou ceux d’un auteur en particulier .author-br1o {…}. Il y a des classes plus inattendues comme .p[n] {…} qui permet d’atteindre un billet en fonction de son numéro d’ordre dans la page (remplacez [n] par le numéro du billet que vous visez). On y retrouve, comme pour le body, des classes en fonction du calendrier. Un exemple concernant les classes associées aux billets Outre hentry évoquée plus haut, la classe p1 nous signale qu’il s’agit du premier billet de la page. Elle est suivie par post (qui joue le même rôle que hentry) et de publish (pour l’état du billet). Les autres classes devraient vous être familières. Notez que la classe h09 concerne l’heure de publication du billet et non pas celle de son affichage.

    <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09">

3. Dans les commentaires : sandbox_comment_class()

   En ce qui concerne les zones de commentaires (incluant les Trackbacks et les Pingbacks), cette fonction ajoute des classes comme .alt {…} pour appliquer des CSS pour les commentaires impairs, ou .comment-author-john {…} pour les utilisateurs enregistrés. Sachant qu’il est possible de demander une inscription au visiteur pour qu’il puisse laisser un commentaire, il peut s’avérer utile de prévoir un style par utilisateur. Dernier échantillon avec les commentaires Les classes affectées aux commentaires sont appliquées à chaque éléments de liste, chaque fois qu’un commentaire est publié. A l’exception peut-être de byuser qui s’adresse à n’importe quel utilisateur enregistré et de bypostauthor lorsque l’auteur du commentaire est aussi l’auteur du billet, vous devriez pouvoir vous débrouiller tout seul ;)

    <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Cette floppée de classes permet des fantaisies qui ne seraient possibles autrement qu’à l’aide de contorsions douloureuses. Finalement, c’est à nous d’inventer les sites qui vont avec ! Mais avoir des classes à gogo est une chose. Ecrire un code HTML de qualité en est une autre.

Allez, soyez CHIC

CHIC est l’acronyme de Code HTML Intrinsèquement Classe, c’est très bien vu, mais j’ai une petite faiblesse pour Code HTML Intrinsèquement Chic proposé ici qui est récursif en plus de ne pas changer l’acronyme…

Etre CHIC, ça commence par des choses toutes simples, comme donner un Doctype à vos pages HTML, éviter l’usage des tables à des fins de présentation autre que celles relatives aux données tabulaires. Bon, en même temps si vous utilisez WordPress, Dotclear ou une autre plate-forme de blog moderne, vous ne devriez pas avoir ce genre de problèmes.

Quoique, j’ai vu il n’y a pas longtemps dans un billet, une succession de <BR> faisant office de liste complètement désordonnée en lieu et place des balises HTML décrivant le fond comme ol ou ul. A part ignorer l’existence de ces balises, qu’est-ce qui peut bien pousser un être humain normalement constitué à aligner des <BR> ?

Autant les bonnes réponses sont souvent disponibles dans les livres, autant… les mauvaises également. Je ne compte pas le nombre d’ouvrages consacrés aux langages de programmation (notamment PHP et Javascript) dans lesquels, pour aller vite, les auteurs se contentent de générer des balises insignifiantes pour illustrer leur joli code. Leurs lecteurs apprennent peut-être à bien programmer, mais ressortent à coup sûr avec du mauvais HTML. C’est un peu la même chose avec les nombreux sites web proposant des tutoriels écrit pour certains au début du siècle sans avoir connu de mise à jour…

Aller plus loin avec les microformats

L’utilisation des microformats pour nommer les classes des éléments HTML présente des avantages certains dans le cadre de l’édition d’un blog (mais les autres formes de publication ont-elles encore un avenir ^_^)

Celà permet (l’air de rien) de mettre en place une convention de nommage pour les classes utilisées par les CSS, tout en rajoutant une couche sémantique au code après l’utilisation des bonnes balises HTML. Et tout celà, sans avoir besoin de mettre en route une usine à gaz : quelques classes par-çi, un rel-tag par-là, and the cat’s in the bag!

Par ailleurs, à regarder de près l’institutionnalisation des services tels que Technorati, Feedburner ou Feedblitz, l’avenir des microformats pour le formatage et l’extraction de l’information est tout tracé. D’ici une paire d’année, produire des documents XHTML 2.0 bien formé ou approximativement bien écrit avec HTML 5.0 (cf. l’excellent billet sur Le sens du canard de Laurent Gloaguen) ne suffira plus.

Ces services dont nous commençons seulement à dépendre pour la gestion des flux RSS ou l’abonnement par mail peuvent facilement titrer profit des microformats embarqués dans les blogs. Cette possibilité d’extraire des informations autorise la génération de profils d’auteurs avec ses sujets de prédilection (via l’analyse sémantique du contenu), les heures de publication, le réseau de relation (via l’analyse des commentaires et autres trackbacks associé au microformat XFN), le tout mixé avec les informations présentes dans les hCard, hGeo et j’en passe.

Parce qu’il faut bien conclure

En me relisant, je m’aperçois que ces quelques notes ont largement dépassées l’explication de thème. Voilà ce que c’est que de suivre le fil de ses pensées ^_^ : du marquage sémantique au Foie Gras de canard en passant par les microformats et la profusion des classes disponibles dans Sandbox, le chemin est sinueux. J’espère que vous aurez retrouvé la sortie :)

Sandbox, un thème WordPress qui a de l’avenir

Conclusion. Adopter un thème comme celui-ci n’est pas sans conséquence en raison du temps qu’il faut pour bien comprendre les nombreux concepts sur lesquels il repose : le marquage sémantique, les microformats, la génération des classes via le fichier functions.php qui prend de l’importance. Vu la complexité relative du code selon les compétences PHP de chacun, je me suis posé la question de la pérennité du développement et du support utilisateur. A ces questions, le changement de version montre que le développement est actif et le support existe via Google Groups où l’auteur du thème répond rapidement aux questions. Si l’anglais est un obstacle insurmontable, vous pouvez toujours me faire parvenir vos questions que je reformulerais dans la mailing-list dans la mesure de mes moyens.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Recherche webdesigners talenteux(ses) de dimension nationale… pour faire des pâtés de sable ;)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org
• Quelques notes — Programme de formation HTML & CSS
• 100+ comptes Twitter pour webdesigner

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

1. La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
   • i-mode (cHTML)
   • wap 1.0 (WML)
2. Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
3. Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
4. Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
5. Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
6. La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
7. La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

1. J’évite de concevoir mes pages web avec des propriétés display ou float,
2. Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
3. Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
4. Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
5. J’utilise les accesskeys sur tous les liens,
6. Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

1. Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
2. Spécifier les dimensions des images,
3. Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
4. Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
5. Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
6. Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• La journée mondiale de l’accessibilité, c’est maintenant !
• Check your <body> avec le W3C
• 9 ressources pour web designer
• -prefix-free : du beau, du bon, du mauvais ?