Ces 11 vidéos en libre-accès illustrent de manière pédagogique les recommandations du WAI :

• Utilisation des terminaux mobiles (iPhone, iPad, et plage braille mobile) — Christian, non-voyant, accède en toute liberté à l’information et à l’échange de données, sur un ordinateur portable, un smartphone, une tablette tactile grâce à une synthèse vocale ou une plage braille.
• La synthèse vocale — Jean nous présente l’utilisation d’un ordinateur au moyen d’un synthèse vocale.
• La plage Braille — Jean accède à son ordinateur au moyen d’une plage tactile braille.
• Les tableaux — Ce tutoriel explique comment rendre les tableaux plus accessibles.
• Des liens hypertextes compréhensibles — Isabelle utilise un logiciel de revue d’écran qui offre des possibilités de navigation grâce aux liens présents sur la page.
• Les alternatives textuelles aux images –Isabelle détaille ici les difficultés qu’elle rencontre lorsqu’il n’existe aucune alternative aux images.
• Déclarer la langue dans une page Web — Jean explique les désagréments causés lorsque les changements de langues ne sont pas indiqués.
• Des formulaires accessibles — Isabelle explique les difficultés rencontrés avec un formulaire non accessible.
• Des images liens accessibles — Jean fait une démonstration des problèmes liés aux images-liens pour une personne utilisant une aide technique pour naviguer.
• Le mobile web — Les standards du web ouvrent les portes d’un web accessible pour tous.
• L’accessibilité du flash et des composants externes — Quels sont les points qui peuvent poser problème lors de l’accès à une page qui proposent la rubrique actualités uniquement à travers une animation flash ?

Merci à la liste de diffusion Pompeurs !

Pompage et CSS débutant nous offrent une liste de discussion francophone pour créateurs de sites web.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web des CSS : Bootstrap, Responsive, Triangle, Etc.
• Nouvelle méthode de remplacement de texte par une image
• Quelques liens sur les Media Queries en CSS3
• Le Petit Journal du Web — 09/2011

Pour cette deuxième revue de web de la semaine, je vous propose : quelques plugins et astuces pour mieux utiliser WordPress ; ce qui a retenu mon attention en matière de développement web en général et quelques liens utiles ou simplement amusant glanés sur la vaste toile pour finir avec la banane ;)

WordPressing

• Générateur de shortcode — Si WordPress 2.5 fournit une API pour faciliter la création de raccourcis au sein d’un billet pour insérer un contenu récurrent comme une signature, une image, ou carrément afficher une boucle WordPress (the loop) personnalisée, K-ny, quant à lui, nous propose, en plus de son générateur de shortcodes, des tutoriels sur la création de shortcodes avancés. Voir aussi la série des trois tutoriels sur les Shortcodes de burningHat. Comme vous pouvez le voir sur le visuel, j’en ai profité pour créer un petit shortcode bien pratique pour clearer les float à l’aide d’un retour à la ligne br et d’une déclaration CSS disponible dans ce billet.[br]
• ImageManager — Ce plugin compatible avec WordPress 2.5 fournit une interface pour uploader des images sur votre serveur et naviger parmis elles. L’éditeur intégré autorise quelques manipulations de base sur les images comme la découpe, la rotation, l’inversion ou la mise à l’échelle. Parmis les petits détails bien vus, il est possible d’ajouter facilement une classe CSS ou un style en ligne sur les photos.[br]
• Keywords Autolink – Ce plugin pour WordPress 2.5 codé par k-ny de Webinventif vous permet de définir un mot-clé ou un groupe de mots clés ainsi que l’URL ou le groupe d’URL vers laquelle il doit pointer ! Et tout celà sans devoir éditer vos billets car la fonction détecte automatiquement les mots-clés dans vos articles et les transforme en liens !
• WordPress 2.6 et la révision des billets — A peine la 2.5 est-elle sortie qu’il faut déjà se tenir au courant des évolutions de la prochaine version de WordPress. Heureusement que burningHat veille pour nous ;)
• Thème Mimbo en détail — Très bon article paru sur Exutoire sur les paramétrages avancées du Thème Mimbo pour WordPress.
• Plugin Pagination – Envie de changer des billets précédents et billets suivants pour afficher en plus le nombre de pages restant à parcourir sur votre blog WordPress ? Ce plugin est fait pour vous. La documentation aussi ;) Ne semble pas fonctionner avec la page de recherche (search.php) ou d’archives : le nombre de pages affichées reste identique quelque soit le nombre de résultat.

Développement web

• 25 éditeurs WYSIWYG — Revue des principaux outils de création de sites web. Prenez aussi le temps de jeter un oeil sur les 30 éditeurs de code sources passés au crible ! Inspirez-vous des techniques proposées pour Améliorer la lisibilité des CSS avec ce bel article sur les différentes manière d’organiser nos feuilles de styles CSS… De toute façon, je suis sûr que vous ne ratez aucun des billets publiés sur Smashing Magazine ;)[br]
• Blog déco design — le blog d’Henri Labarre consacré au design a changé d’adresse et n’est plus un sous-domaine de 2803.com. Mettez à jour vos blogroll ![br]
• kotatsu — Générateur de tableaux HTML en ligne avec la possibilité d’ajouter des lignes et des colonnes ainsi que des classes CSS.[br]
• Performances Web — Benchmark sur le chargement des feuilles de style avec la balise link ou la règle @import
• Des variables en CSS — Dans un avenir plus ou moins lointain, les variables pourrait faire leur apparition dans une future version.
• jquery.pngFix.js — Plugin jQuery pour gérer la transparence des images au format PNG 24 bits. Voir aussi iepngfix ou le projet PNGHack de Pôle-Web.

Miscellannées

• Vatchvideo — Téléchargez les vidéos à partir de YouTube ! Il est même possible de spécifier le format de sortie comme via Xavier83.
• Re-mark — Lorsqu’on importe des bookmarks sur delicious, ils sont privés. Si comme moi vous êtes amené à rendre public plus de 2400 liens, vous serez content d’utiliser ce service. Merci Twitter, merci Gilles ! L’outil n’est pas des plus intuitif : pour rendre vos liens public, une fois que vous avez activé l’option idoine dans re-mark et copié le code, loguez-vous sur votre delicious et affichez 100 liens par page (pour allez plus vite), puis collez le code sur chaque page l’opération s’effectue en direct live.
• Albert Einstein vs Marylin Monroe — pour finir cette liste un peu ennuyeuse, voici une Illusion d’optique assez étonnante trouvée sur Koreus ;)

Articles sur le même sujet

• 9 ressources pour web designer
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011
• WordPress Basics, mode d'emploi
• WordPress de A à Z — A comme Allons-y ! (on s'organise)

Il m’est arrivé dernièrement d’être « obligé » d’utiliser des tableaux pour faire une grille de mise en page à l’intérieur d’une structure en div pour les raisons suivantes (la première raison étant suffisante) :

1. l’addition de valeurs exprimées en pourcentage ne permettait pas un alignement correcte avec les div, alors que les mêmes valeurs exprimées sur des cellules de tableaux donnaient le résultat attendu.
2. le code CSS pour arriver à un résultat approximatif avec les div était largement plus verbeux que celui utilisé avec les tableaux. Sans parler du code HTML lui-même !
3. cette structure devait pouvoir se décliner rapidement en différents templates. Autant dire que vu le temps passé à gérer les problèmes de float, d’overflow et de clear avec les div, l’utilisation des tableaux a été une bouffée d’air frais… Il suffit de s’en sortir avec les colspan et rowspan and the cat’s in the bag!

Je tiens à préciser que je n’ai pas utilisé de tableaux pour autre chose qu’organiser des données tabulaires depuis 2001 et que je n’hésiterais pas à dénoncer mes amis si je les prenait la main dans le sac ;)

Si je vous raconte tout ça, c’est que bien que l’utilisation d’un marquage sémantique adapté est à privilégier, il arrive parfois que certaines contraintes (de délai, d’organisation ou de compétences dans la chaine de production, etc.) font pencher la balance du côté obscur et je trouve normal de confesser les entorses aux bonnes pratiques que l’on peut faire dans le cadre professionnel.

Tiens, en guise d’auto-flagellation je me connecterai une fois par jour sur #openweb, ça m’apprendra ;)

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Exercice de style CSS et HTML : table vs div

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

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 ?

La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne ;) Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un œil sur la page d’accueil et de moderniser le gabarit HTML.

Note : L’intégration du gabarit live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne.

La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple la colonne de gauche est composée de <div class= »bloc » style= »width: 145px; »><div class= »titre_bloc »> Dernières images </div><div style= »max-width: 135px; » class= »cadrimage »>…On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro ;)

Dis papa, racontes-moi encore les tableaux !

Si vous avez l’habitude d’utiliser les CSS pour la conception de vos design web, vous n’aurez pas besoin d’approfondir le code d’origine et vous pourrez vous lancer bille en tête sur votre Dreamweaver Notepad préféré pour traduire en CSS cette mise en pages en tableau ;)

Mais comme ce qui va sans dire va mieux en le disant, je vous donne un bref aperçu de ce que l’on peut y trouver. La page contient huit tableaux, dont trois pour délimiter les zones principales :

1. l’en-tête, qui contient :
   • une bannière en image,
   • et le menu principal.
2. le contenu, qui englobe les deux colonnes; contient :
   • une colonne étroite pour le menu secondaire et autres informations,
   • et le contenu principal.
3. et le pied de page.

La zone de contenu est elle-même délimitée par deux td : un pour la colonne de gauche et un pour le contenu à droite.

Le premier td est composé d’une première partie div#ex1 pour le menu, suivi de div.bloc contenant plusieurs balises table pour la météo, et d’un autre div.bloc pour l’affichage des images en bas de la colonne. Si je garde la météo sous forme de tableaux (pas la peine de jeter le bébé avec l’eau du bain), je supprimerai tous les styles en ligne pour les placer dans styles.css.

Le deuxième td est dédié au contenu principal où l’on trouve quatre blocs d’information :

1. Un message de bienvenue,
2. Les dernières nouvelles de la vie de la base nautique,
3. Les informations nécessaires pour se rendre sur les lieux,
4. Quelques liens utiles.

Maintenant que l’on y voit un peu plus clair dans ces tableaux, la structure de la mise en pages CSS s’impose d’elle-même :

1. Une div#container englobera l’ensemble de la page,
2. Une div#header pour la bannière et le menu,
3. Deux div#main et div#sidebar pour définir les deux colonnes de contenu,
4. Un div#footer pour terminer.

Comment j’ai organisé mes feuilles de style CSS

J’ai créé une feuille de style principale styles.css pour la présentation, une autre pour la structure globale layout.css et une dernière layout-right.css pour permuter rapidement la sidebar sur la droite en supprimant les commentaires sur la règle /@import « layout-right.css »;/ du fichier styles.css.

Les deux dernières sont importées dans l’ordre dans la première. Les plus perspicaces d’entre vous auront sans doute remarqué l’existence de layout-bg.css et de layout-bg-right.css dont je parlerai plus loin.

Comme d’habitude, une feuille de style accessible uniquement pour Internet Explorer via les commentaires conditionnels est mise en place. Pour le coup, elle ne sert pas à grand chose (une seule déclaration) et j’aurais certainement mieux fait de placer un petit hack de derrière les fagots…

Mais la paresse est mauvaise conseillère. Comme la ceinture de sécurité, il faut mettre les commentaires conditionnels y compris pour les trajets les plus courts ;) Je ne m’attarde pas sur styles.css, sinon pour préciser que cette feuille de style importe toutes les autres.

Le fichier layout.css définit la structure de la page

/* layout.css */


* { /* Plus d'information sur la remise à zéro des styles par défaut des balises HTML */
    margin: 0;
    padding: 0;
}
#container {
    position: relative;
    width: 817px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid #0E419A;
    background-color: #2677B9; }
#header {
    width: 817px;
    height: 154px;
    background: url(images/bandeau.jpg) no-repeat;
}
#main {
    text-align: justify;
    line-height: 1.75em;
    width: 620px;
    min-height: 1034px;     float: right;
    padding: 1em;
    background-color: #D1D9EC;
    background: url(images/fond_gros_bloc.jpg);
}
#footer {
    background-color: #0E419A;
    clear: both;
}
#sidebar {
    width: 151px;
    float: left;
}

Evidemment, celà fonctionne parce que la hauteur de la sidebar est connue et qu’elle ne change pas dans les pages intérieures du site en question.

Quelques mots à propos des colonnes

Le traditionnel colonage est assuré par le non moins traditionnel float: left pour la sidebar et float: right pour #main, accompagné respectivement par les valeurs width: 151px et width: 620px. Le fond de la zone principale est assuré par background: url(images/fond_gros_bloc.jpg), mais on peut se contenter de background-color: #D1D9EC qui reprend la couleur de body. Le footer voit quant à lui sa position stabilisée grâce à clear: both.

layout-right.css : ma sidebar fait fait, c’qui lui plait plait plait ;)

Concernant la structure globale, Il reste à gérer le déplacement de la sidebar sur la gauche ou sur la droite selon l’humeur du jour. Ce qui se réalise simplement avec la déclaration suivante :

 /* layout-right.css */
#main {
    float: left;
}

layout-bg.css si la hauteur de la sidebar varie…

Dans ce cas, la méthode utilisée plus haut ne donne plus les résultats escomptés. Pour que les couleurs de la sidebar et de #main se calent sur le footer indépendamment de leurs contenus, j’utilise une image de fond de quelques pixels de hauteur et d’une largeur égale au #container. Soit une image de 817px de large pour 4px de haut qui se répète en y. Cette image est composée d’une zone de 151px de large pour simuler la sidebar, et le reste rempli avec la couleur de #main, ici en vert clair pour les tests. Cette feuille de style ressemble beaucoup à layout.css à l’exception du background de #container et de la suppression de la propriété min-height: 1034px; qui ne sert plus à rien.

…layout-bg-right.css pour déplacer la sidebar comme on veut

Même avec un background en image, on peut se débrouiller pour placer cette sidebar à droite. Il suffit d’indiquer une rotation de la zone de travail de 180° dans Photoshop et d’enregistrer cette nouvelle image sous bgContainer-right.png, puis créer une nouvelle feuille de style layout-bg-right.css pour conserver un maximum de modularité :

/* layout-bg-right.css */


#container {
    background: url(images/bgContainer-right.png) repeat-y;
}
#main {
    float: left;
}

Comment bien utiliser toutes ces CSS

Le fichier styles.css contient des règles d’import pour quatre feuilles de style dont trois sont placées entre commentaires :

1. @import « layout.css »;
2. /*@import « layout-right.css »;*/
3. /*@import « layout-bg.css »;*/
4. /*@import « layout-bg-right.css »;*/

En l’état nous avons un gabarit CSS avec la sidebar sur la gauche et un contenu possédant une hauteur minimum qui correspond à la hauteur de la barre latérale. Pour placer cette sidebar sur la droite, il suffit d’ôter les commentaires de la ligne 2.

Si vous préférez utiliser les gabarits CSS avec l’image qui se répète en background et la barre latérale à gauche, enlevez les commentaires de la ligne 3, et remettez-en sur les lignes 1 et 2. Pour obtenir la même chose avec la sidebar à droite, décommentez la ligne 4 (les lignes 1 et 2 étant toujours entre commentaires).

Ca fait beaucoup de feuilles de style à gérer. Rappelez-vous qu’elles ne sont là que pour les besoins du tutorial, et qu’en production, vous n’aurez pas besoin de toutes les utiliser : vous saurez si oui ou non vous employez des couleurs de fond avec une image en background ou pas en fonction de vos exigences en matière de hauteur de colonnes

Pour ne pas conclure trop vite

Tout n’est pas parfait, et j’aurais pu aller plus loin dans l’optimisation de la page. Surtout en ce qui concerne les images dont j’aurais pu diminuer le poids. Néanmoins le code HTML passe de 19 kb à 9 kb. Ce qui n’est pas négligeable si on extrapole l’utilisation du gabarit à l’ensemble du site, multiplié par le nombre de visiteur. On peut aussi considérer la clarté du code obtenu et donc envisager la maintenance du site avec plus de sérénité.

Par ailleurs, l’utilisation des CSS à permis de mieux gérer le positionnement des éléments pour obtenir un rendu plus harmonieux. La modularité apportée par la possibilité de changer d’avis pour placer la sidebar est un plus.

Il existe d’autres méthodes pour créer plusieurs colonnes en utilisant une position absolute ou relative par exemple. Outre la linkographie à la fin du billet, vous pouvez jeter un coup d’oeil sur le code source de cet exemple de positionnement d’un bloc en absolu (les vignettes) par rapport à un container en relative.

Rappel : voici mis côte-à-côte les liens vers la mise en pages en CSS et celle en tableaux.

P.S. : Cet exercice m’a également permis de prendre conscience de la foultitude de sites encore structurés avec des tableaux : il y a des cures d’enlightenment qui se perdent

Linkographie :

A propos des tableaux vs CSS

http://pompage.net/pompe/tablevscss/

Traduction par Pompage de l’excellent article et travail de Sergio Villarreal

http://css.alsacreations.com/…

Construire un site sans tableaux

http://css.alsacreations.com/…

Réalisation d’un design complet (XHTML / CSS) en 5 étapes

Gabarit CSS en plusieurs colonnes

http://css.alsacreations.com/…

16 gabarits xhtml/css à tester sans modération

http://www.fairytells.net/gabarit_accessible/…

Gabarit CSS accessible avec 3 colonnes dont la hauteur est indépendante du contenu grâce à javascript et projectseven.

http://webhost.bridgew.edu/etribou/layouts/

Nombreux gabarits en deux ou trois colonnes

Tutoriaux relatifs au positionnement

http://css.maxdesign.com.au/floatutorial/

the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

http://openweb.eu.org/articles/initiation_flux/

Initiation au positionnement en 3 parties : flux et position relative, position float et position absolue et fixe

Quelques CMS

http://www.spip.net/fr

SPIP : d’après Framasoft, il s’agit de l’une des plus grandes réussites logicielles issues de la sphère francophone libre

http://www.framasoft.net/rubrique168.html

Sur cette page, 39 systèmes de publication de contenu passé au crible. Lecture indispensable avant de choisir son CMS (ou pour savoir si vous avez fait le bon choix

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Articles sur le même sujet

• Trucs et astuces CSS
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Check your <body> avec le W3C

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

            <title>Un titre explicite contenant les mots-clés de la page</title>



            <!--[if lt IE 7]&gt;-->


            <!--[if IE]&gt;-->

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits