CSS3 Grid Layout

Raphael — 2012-02-09T12:50:03+00:00

Le module de positionnement "Grid Layout" est une spécification du W3C à l'état de brouillon (Working Draft) dont les premiers jets datent de 2004.

Sa documentation officielle est actuelllement maintenue par quatre contributeurs, dont trois personnes de Microsoft, ainsi que Daniel Glazman, le co-chairman CSS du W3C.

La compatibilité de ce module est pour le moins ténue à l'heure actuelle : comme en témoigne l'excellente ressource Can I Use, seul... Internet Explorer 10 (actuellement en version beta) supporte aujourd'hui cette spécification. Mais les autres ténors (Mozilla, Webkit, Opera) sont également intéressés et ne devraient pas tarder à implémenter ce module, au regard des vastes possibilités offertes par ce schéma de positionnement. Il est notamment prévu sur Chrome 19.

Compatibilté navigateurs du module Grid Layout

Navigateurs	Versions
	Internet Explorer 10+

Le positionnement par grille

Le concept général de Grid Layout (ou "positionnement en grille") est de diviser virtuellement l'espace en zones majeures dans une page ou une application. Concrètement et schématiquement, il s'agira de découper en lignes et en colonnes comme nous le ferions pour un tableau de mise en page.

On y trouve d'ailleurs de nombreuses références d'affichage "tabulaire" avec lignes et colonnes, rowspan et colspan. En cela, ce schéma de positionnement est très similaire aux tableaux HTML ou aux rendus de type display: table, display: table-cell et autre display: table-row.

Mais la différence la plus flagrante est que la grille consiste en une construction de l'esprit et ne nécessite aucun élément HTML ni balisage pour être élaborée. Aucune charpente physique telle que

, , ,

n'est nécessaire, ce qui en facilite l'adaptation à différentes tailles d'écrans et de périphériques : inutile d'intervenir sur l'ordre, la nature ou la "sémantique" des éléments HTML, il suffit de modifier le canevas initial pour qu'ils s'y adaptent.

Les propriétés usuelles de Grid Layout

Propriété	Détails
`grid`, `inline-grid`	déclaration d'un contexte de grille
`grid-template`	déclaration d'un "canevas" de cellules nommées (optionnel)
`grid-rows`, `grid-columns`	déclaration des dimensions de lignes et colonnes
`grid-row`, `grid-column`	placement d'un élément dans une ligne ou une colonne
`grid-cell`	positionnement d'un élément au sein d'une cellule nommée
`grid-row-span`, `grid-column-span`	distribution sur plusieurs lignes ou colonnes
`grid-row-align`, `grid-column-align`	alignement horizontal ou vertical
`grid-layer`	niveau du plan pour éléments superposés

Mise en oeuvre

On crée un "contexte de grille" tout simplement en appliquant la déclaration display: grid à un élément conteneur qui constituera la trame générale. Cette trame sera définie par un schéma virtuel formé de lignes et colonnes définissant des "cellules".

Tous les enfants (directs) de ce conteneur général, sous réserve qu'ils soient originellement de type "block", seront automatiquement affectés par ce contexte particulier et pourront se placer au sein des "cellules" (grid-cell) de la trame.

Exemple 1 (affichage de deux blocs sur une ligne) :


   nav
    section

body {
    display: grid;
    grid-columns: 250px 300px;
}
nav {
    grid-column: 1; /* placement en colonne 1 */
}
section {
    grid-column: 2; /* placement en colonne 2 */
}

Démonstration

Note compatibilité : le module "Grid Layout", encore en brouillon (Working Draft), ne fonctionne actuellement que sur IE10 et nécessite des préfixes vendeurs -ms- pour être appliqué (par exemple : display: -ms-grid, ou -ms-grid-row: 2). Sur cette page, nous ne mentionnons que la syntaxe finalisée sans préfixe, mais vous devrez les ajouter pour vos tests.

Exemple 2 (grille de 4 emplacements) :


    nav
    section
    article
    aside

body {
    display: grid;
    grid-columns: 250px 400px;
    grid-rows: 100px 300px;
}
nav {
    grid-column: 1; grid-row: 1;
}
section {
    grid-column: 2; grid-row: 1;
}
article {
    grid-column: 1; grid-row: 2;
}
aside {
    grid-column: 2; grid-row: 2;
}

Démonstration

Variante : la syntaxe de templates

Grid Layout autorise la visualisation sous forme de canevas, en nommant explicitement les emplacement de la grille à l'aide de lettres de l'alphabet.

Cette variante n'est actuellement reconnue par aucun navigateur, c'est pourquoi les tests demeurent ardus à réaliser, mais en voici le concept général :

Exemple 3 (template) :

#inGrid {
    display: grid;
    grid-template: "hh"
                   "nc"
                   "ff";
}
#inGrid nav {
    grid-cell: "n"; /* placement de  dans l'emplacement "n" */
}

Les unités de largeur et hauteur

Le modèle d'affichage en grille ne se contente pas d'employer les unités de largeur et hauteur habituelles; il introduit des fonctions complexes permettant de s'adapter à des contextes de contenus différents :

Unité	Détails
`px`, `%`, `em`, `ex`, `rem`,…	pixels, pourcentages, em,… (unités courantes)
`fr`	fraction(s) de l'espace restant
`min-content`	se rapporte à la largeur (ou hauteur) de l'élément le plus petit
`max-content`	se rapporte à la largeur (ou hauteur) de l'élément le plus grand
`minmax(min, max)`	exemple `minmax(min-content, 20%)` correspond à largeur 20% (ou hauteur), mais au minimum largeur (ou hauteur) du contenu
`auto`	s'adapte à la largeur (ou hauteur) du contenu
`fit-content`	identique à `auto` et aussi à `minmax(min-content, max-content)`

Exemple 4 (illustration de l'unité "fr") :

html, body {height: 100%;}
body {
    display: grid;
    grid-columns: 250px 1fr; /* largeur 250px et "espace restant" */
    grid-rows: 100px 1fr;
}
nav {
    grid-column: 1; grid-row: 1;
}
section {
    grid-column: 2; grid-row: 1;
}
article {
    grid-column: 1; grid-row: 2;
}
aside {
    grid-column: 2; grid-row: 2;
}

Démonstration

Centrer les éléments

Grid Layout permet d'aligner les contenus verticalement ou horizontalement à l'aide des propriétés grid-row-align et grid-column-align dont les valeurs peuvent être les suivantes :

Valeur	Détails
`start`	aligne l'élément au début de la cellule (gauche ou droite selon le sens de la lecture)
`end`	aligne l'élément à la fin de la cellule (gauche ou droite selon le sens de la lecture)
`center`	place l'élément au centre de la cellule
`stretch`	étire l'élément (ses marges) pour occuper tout l'espace dans la cellule

Exemple 5 (multiples centrages) :

html, body {height: 100%;}
body {
    display: grid;
    grid-columns: 250px 250px;
    grid-rows: 250px 250px;
}
nav {
    grid-column: 1; grid-row: 1;
}
section {
    grid-column: 2; grid-row: 1;
    grid-row-align : center;
}
article {
    grid-column: 1; grid-row: 2;
    grid-column-align : center;
}
aside {
    grid-column: 2; grid-row: 2;
    grid-row-align : center;
    grid-column-align : center;
}

Démonstration

Occuper plusieurs emplacements

Tels les célèbres attributs rowspan et colspan dédiés aux tableaux HTML, le module Grid Layout introduit la possibilité à un élément de s'étaler sur plusieurs emplacements, à la fois horizontalement et verticalement.

Les propriétés CSS grid-row-span et grid-column-span sont chargées d'organiser cette distribution sur plusieurs lignes ou colonnes.

Exemple 6 (column span) :

header {
	grid-column: 1; grid-row: 1;
	grid-column-span: 2;
}
nav {
	grid-column: 1; grid-row: 2;
}
section {
	grid-column: 2; grid-row: 2;
}

Démonstration

Le pseudo-élément ::grid-cell

Le pseudo-élément ::grid-cell offre la faculté de nommer un emplacement de la grille de manière très intuitive afin d'y placer un élément.

Ce pseudo-élément n'est encore supporté par aucun navigateur.

Exemple 7 (cellules nommées) :

body {
    display: grid;
    grid-columns: 300px 300px;
    grid-rows: 200px 300px;
}
body::grid-cell("nav") { /* la position "nav" sera en 1ère colonne, 2ième ligne */
    grid-column: 1; grid-row: 2;
}
body nav {
    grid-cell: "nav"; /* on se positionne dans "nav" */
}

Les motifs de répétition

Une fonctionnalité particulièrement intéressante du positionnement sous forme de grilles est de pouvoir appliquer des motifs de répétition de colonnes ou de lignes (appelés "patterns").

Par exemple, si je souhaite répéter le motif de colonnes (50px 1em) dix fois dans la grille, j'écrirai grid-columns: (50px 1em)[10]

Exemple 9 (patterns) :

body {grid-columns: 10px (1fr 10px)[4];}
/* correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px */

Démonstration

Vous avez dit "responsive" ?

Pour finir cette présentation du modèle de positionnement Grid Layout en apothéose, j'ai gardé le meilleur pour la fin.

L'un des avantages les plus flagrants d'une grille virtuelle, indépendante des éléments HTML qui peuvent s'y placer, est qu'il est extrêmement aisé de modifier la grille selon le contexte. Par exemple, pour s'adapter immédiatement aux différentes tailles d'écran, il suffit de... changer la grille initiale.

Associé aux CSS3 Media Queries, le modèle de positionnement en grille donne toute sa puissance, plus particulièrement si vous avez opté pour une trame sous forme de variante "template". En effet, seul le patron de départ nécessite d'être modifié : inutile d'intervenir sur la structure HTML, ni même sur le positionnement de chaque élément de page.

Exemple 10 (adaptation aux petits écrans) :

body {
    display: grid;
    grid-template: "abcd";
}


@media (max-width: 640px) {
	body {
		display: grid;
		grid-template: "a"
					   "b"
					   "c"
					   "d";
	}
}

Démonstration

Conclusion et usage

Vu la compatibilité navigateurs quasi inexistante du module Grid Layout, il est bien entendu utopique d'employer ce type de positionnement en production à l'heure actuelle, même sur des périphériques avant-gardistes. Cependant, la simplicité et la robustesse de ce schéma lui promet un bel avenir : Microsoft a ouvert la voie (mais il faudra attendre de passer à Windows 8), et les autres navigateurs vont sans nul doute lui emboîter le pas rapidement.

Rendez-vous dans quelques années ? :)

Pour aller plus loin sur ce sujet, je vous invite à consulter un exposé (PDF) que j'ai présenté le 8 février 2012 lors du cycle de conférences MS TechDays, concernant le module Grid Layout ainsi que deux autres avancées CSS3.

Bonnes pratiques CSS: le Web ouvert a besoin de vous

fvsch — 2012-02-09T12:05:16+00:00

Daniel Glazman, coprésident du CSS Working Group (groupe de travail sur CSS du W3C), a écrit un appel à action important: THE OPEN WEB NEEDS YOU *NOW*. C’est une lecture fortement recommandée pour tous les développeurs et designers web. Voici ~~un résumé~~ une paraphrase en français du problème exposé, et quelques préconisations que vous trouverez peut-être utiles.

Ne pas refaire l’erreur d’IE6

Si vous avez un peu suivi l’histoire du Web, vous savez que les situations de monopole ne sont pas bénéfiques pour les standards: l’éditeur de navigateur qui a le monopole ou quasi-monopole peut être tenté de proposer des fonctionnalités sans les proposer comme standards, les créateurs de sites web utilisent du code non-standard qui ne fonctionne que sur le navigateur qui a le monopole, et les éditeurs minoritaires sont tentés d’imiter les comportements non standard du navigateur minoritaire. Un jeu très dangereux pour l’efficacité des standards, qui mène à renforcer les monopoles, diminuer la concurrence et donc l’innovation sur le Web. La stagnation du Web quand Microsoft a arrêté le développement d’Internet Explorer après IE6 et pendant plusieurs années en est une preuve suffisante.

Aujourd’hui, nous sommes devant un nouveau monopole: celui du moteur de rendu WebKit sur les plateformes mobiles (smartphones, tablettes) et au-delà (le nouveau navigateur embarqué de la PlayStation 3 utilise WebKit). Dans les faits, Opera Mini et Opera Mobile restent des concurrents non négligeables sur mobile, mais il est certain que WebKit détient un monopole d’attention chez les créateurs de sites web: nous avons tous commencé à nous intéresser au développement de sites mobiles avec l’arrivée de l’iPhone ou dans les années suivantes avec le succès de l’iPhone et en parallèle celui d’Android.

Pour beaucoup, le Web mobile c’est WebKit et puis c’est tout

C’est une vision à court terme particulièrement dangereuse. Certes, personne ne peut jurer que Windows Phone ne fera pas un flop, que Firefox et Opera arriveront à s’implanter fermement comme navigateurs alternatifs sur Android et d’autres plateformes, ou que de nouvelles plateformes pour mobiles ou tablettes viendront changer un peu la donne. Mais en 2002 beaucoup pensaient que la partie était finie, qu’Internet Explorer avait gagné la guerre et qu’on arrivait à une période de stabilité. En réalité on a eu droit à une période de stagnation (arrêt du développement d’Internet Explorer, entrainant un retard que Microsoft rattrappe à peine) et une redistribution des cartes quelques années plus tard notamment grâce à Firefox. De nombreuses entreprises se mordent encore les doigts d’avoir fait développer des logiciels de gestion dont les interfaces sont compatibles uniquement avec IE6.

En pratique, le problème c’est quoi?

Il y a deux erreurs qui sont commises régulièrement par les développeurs web, et pas uniquement les moins informés:

Utilisation du browser sniffing (détection du navigateur via la chaine User-Agent ou d’autres informations) pour réserver une fonctionnalité aux navigateurs WebKit ou à l’iPhone, voire carrément un blocage de l’accès au site mobile pour les navigateurs non-WebKit.
Utilisation de propriétés CSS expérimentales avec préfixe -webkit-*, sans doubler ces propriétés par les syntaxes équivalentes pour les autres navigateurs et sans se soucier de la compatibilité.

Ces problèmes sont déjà courants sur des sites destinés à tous les supports (sites développés avec les techniques désormais nommées Responsive Design). Ils sont extrêmement courants sur les sites dédiés aux périphériques mobiles.

Aujourd’hui, les éditeurs de navigateurs minoritaires veulent 1) se faire passer pour des navigateurs WebKit ou pour Safari Mobile en envoyant une chaine User-Agent frelatée (une technique vieille comme le monde, les premières versions d’Internet Explorer le faisaient déjà pour se faire passer pour Netscape!) et 2) lire certaines propriétés CSS -webkit-*. Le but est d’être compatible avec les sites mobiles qui, pour beaucoup, les mettent à la porte parce que vous comprenez ce soir c’est pas possible c’est une soirée privée WebKit.

Si Mozilla, Opera et Microsoft se prêtent à ce jeu, on risque une spirale infernale bien connue: des fonctionnalités non-standard (jamais proposées comme standards à l’instar de -webkit-text-size-adjust, ou expérimentales et amenées à changer comme feu -webkit-gradient() proposé en 2008 et remplacé par une nouvelle syntaxe avec déjà deux itérations…) commencent à être reconnues par plusieurs navigateurs, deviennent des standards de fait sans que la communauté des éditeurs de navigateurs et des utilisateurs (nous!) ait l’occasion de soulever des problèmes et de proposer des solutions. Quand on veut les améliorer c’est déjà trop tard, la solution plus ou moins bancale est en place et la très grande majorité des développeurs web l’utilise sans sourciller (éventuellement en pestant parce que c’est pas terrible ou limité, mais tant pis).

Alors oui, arriver à un bon standard ça prend du temps, malheureusement ça prend parfois quelques années, et il y a sans doute des choses qui peuvent être améliorées pour arriver à des résultats un peu plus rapides. Mais si en quelques mois une nouvelle proposition expérimentale dans WebKit devient un standard de fait (plutôt qu’un vrai standard communautaire), on risque d’utiliser dans cinq, dix et vingt ans des fonctionnalités mal finies et être condamnés à s’en contenter. Gros problème de qualité en perspective! Vous vous imaginez utiliser aujourd’hui, dans tous les navigateurs, les filtres DirectX d’IE5-6 à la place des effets CSS3 modernes? Moi si on en arrive à ça je pars élever des chèvres dans le Larzac ou alors je m’en fous et je fais du Flash.

Bon, qu’est-ce qu’on peut faire?

Pour éviter que les éditeurs de navigateurs ne cassent les standards du Web, c’est à nous de faire attention à éviter la monoculture WebKit (et à l’avenir tout problème similaire). Il y a deux choses à faire:

Faire passer le message! N’hésitez pas à faire tourner cet article. Vous pouvez même le copier-coller et mettre votre nom à la place du mien, rien à fiche, faites juste tourner. :)
Dans votre propre travail, pensez à la compatibilité avec tous les navigateurs (au moins les versions récentes, pour le support des anciennes versions c’est un autre débat). Je donne quelques conseils ci-dessous, mais vous aurez peut-être plus efficace ou pertinent à proposer en commentaire, alors partagez vos méthodologies et vos idées.

Un peu de méthode

Commencez par créer une base fonctionnelle solide avec des fonctionnalités HTML, CSS et JavaScript éprouvées par le temps. Faites simple.
Dans le même ordre d’idée, exploitez à fond les fonctionnalités déjà stables: HTML 4 et CSS 2.1 bien sûr, mais aussi les parties de HTML5 et CSS3 qui sont stables et implémentées sans préfixe dans au moins une partie des navigateurs.

Pour savoir si une fonctionnalité est stable ou non, le site When Can I Use… (caniuse.com) est une mine d’informations. Si une fonctionnalité n’est pas implémentée par la moitié des navigateurs, évitez-la. Si elle est largement implémentée mais que tous les navigateurs requièrent l’utilisation d’un préfixe, gardez à l’esprit que la fonctionnalité n’est sans doute pas stable et pourrait changer radicalement ou même être abandonnée! Enfin, si les navigateurs commencent à proposer la fonctionnalité sans préfixe, elle est probablement stabilisée.
Lorsque vous avez décidé d’utiliser une fonctionnalité expérimentale, utilisez au maximum les préfixes des différents moteurs de rendu, et terminez par une version sans préfixe. Ce n’est pas une solution miracle, en partie parce que c’est vraiment pénible et en partie parce qu’il est toujours possible que la syntaxe de la propriété CSS évolue (on a bien dit que c’était expérimental hein), mais tant pis, il faut se retrousser les manches et faire sa part du boulot.
Si vous pouvez l’éviter, ne faites pas reposer l’accès aux contenus ou aux fonctionnalités de base sur le support par le navigateur de certaines fonctionnalités expérimentales. Si votre mise en page est nickel dans IE10 avec CSS Grid Layout, mais complètement illisible dans tous les autres navigateurs, vous avez un problème. De même si la mise en page de votre application web mobile repose sur l’implémentation de CSS Flex Box dans WebKit, sachez que Flex Box a été réécrit depuis cette première implémentation, que la nouvelle syntaxe est plutôt différente, et qu’il est possible que votre interface web mobile soit cassée dans d’autres navigateurs… ou même dans de futures versions de WebKit! Par définition, une fonctionnalité expérimentale peut vous exploser à la figure, et les utiliser sur des sites dont vous n’assurez pas la maintenance au quotidien est sans doute une erreur.

À vous maintenant: Quelles méthodes utilisez-vous? Que pouvez-vous améliorer dans vos pratiques? Comment pouvez-vous faire passer le message?

Chrome débarque officiellement sur Android

dew — 2012-02-08T11:00:00+00:00

Une version officielle de Google Chrome pour Android a été publiée. La plate-forme mobile était déjà équipée du "Navigateur" Android par défaut avec un moteur WebKit, ainsi que des applications Opera Mobile, Opera Mini et Firefox. Désormais, Google compte mettre un coup d'accélérateur pour promouvoir son navigateur phare, au-delà du simple moteur de rendu WebKit, et donc indirectement ses applications et services. Après avoir lancé des campagnes de publicité à la télévision, on comprend que Google est motivé par la possibilité d'avoir à disposition un public équipé des dernières fonctionnalités (notamment HTML5) pour proposer des services de plus en plus complets (et addictifs).

Pour le moment, Chrome n'est disponible que pour la version 4.0 de l'OS (Ice Cream Sandwich), celle qui équipe les dernières tablettes et certains smartphones récents, notamment le Galaxy Nexus avec lequel les captures d'écran ci-dessous ont été prises.

Une vidéo de présentation a été conçue pour l'occasion.

L'interface de navigation diffère quelque peu de ce que l'on avait l'habitude de rencontrer avec Android, et fait la part belle à la synchronisation : un compte Google et le tour est joué, les favoris sont synchronisés. L'accent a été mis sur la performance ainsi que la simplicité.

Les onglets peuvent être repris en l'état depuis la version desktop (Windows/Linux/Mac OS X) du navigateur pour continuer une session de navigation, ou bien dans le sens inverse être envoyés vers le mobile avec l'extension Chrome to Mobile.

Pour les développeurs

Du côté des fonctionnalités prises en charges, on retrouve la navigation privée, le support de l'orientation et tout une panoplie d'API gravitant autour de HTML5 :

Canvas avec accélération matérielle (y compris requestAnimationFrame)
Défilement des éléments en overflow et prise en compte du positionnement fixe
La video HTML5
Indexed DB
Web Workers
Web Sockets
Media Capture
Les types date/datetime pour
Application Cache et AppCache API
localStorage/sessionStorage
Géolocalisation
WebSQL
File API (dont FileList, FileReader, Blob)

La fonctionnalité de débogage à distance Remote Debugging permet de prendre le contrôle du développement du mobile avec un ordinateur de bureau.

Initializr

dew — 2012-02-06T23:55:00+00:00

Vous permet de générer un template HTML5 basé sur HTML5 Boilerplate. Il peut comprendre également Modernizr, jQuery, et Bootstrap, et des instructions de configuration pour plusieurs serveurs web afin d'adapter au mieux les en-têtes HTTP véhiculées. L'ensemble correspond à une arborescence de fichiers classés (HTML, CSS, JavaScript, etc) et préparés pour exploiter au mieux toutes les astuces courantes : Chrome Frame, LESS, Analytics, classes pour Internet Explorer, icônes, robots.txt, et ainsi de suite.

L'élément <mark> pour attirer l'attention

dew — 2012-02-04T17:39:00+00:00

Sortez votre feutre jaune

Nouveau venu en HTML5, l'élément est un surligneur de texte. Il marque un passage spécifique, que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention.

Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent).

mark {
  background-color: yellow;
  color: black;
}

Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs.

Usages

Que peut-on imaginer comme usages pratiques à cette balise ? Voici quelques suggestions et une page de démonstration.

Démonstrations

Marquer les mots trouvés dans des résultats de recherche

Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. Dans ce cadre, la balise agit comme un marqueur relatif à l'activité de l'utilisateur : c'est lui qui provoque l'application de à certains passages de texte en fonction de ses actions (ce qu'il a recherché).

5 résultats pour le mot "HTML"

  ...HTML est le langage du web...Lire
  Avec CSS, HTML est surpuissant. Lire
  Les balises HTML sont délicieuses. Lire

Marquer une portion de texte

Il peut s'agir d'un texte modifié ou ajouté par l'éditeur d'un document, voire d'un passage que l'on souhaiterait souligner dans une citation alors qu'il ne l'était pas dans sa version originale.

Il y a quelques années, nous écrivions ceci :

  A long terme, XHTML 2 remplacera HTML, et qu'il sera nécessaire pour les navigateurs et les intégrateurs de s'adapter à ce nouveau langage de balisage.

En réalité, nous avons vu que HTML5 a remplacé XHTML 2.

Marquer une portion de code source

Un passage spécifique peut être surligné pour s'y référer ultérieurement.

var i = 3;
Le mot-clé var permet de déclarer une variable en JavaScript.

Marquer le jour actif d'un calendrier

Dans une application devant afficher un agenda ou un module de calendrier, marquer le jour courant avec peut être approprié, si l'on doit faire référence ultérieurement à cette date dans la page.

Pour les lecteurs d'écran, le texte balisé par est lu d'une façon constante, au contraite de et qui marquent un changement d'importance ou ajoutent une emphase.

Prise en charge

Navigateurs Versions

Internet Explorer 9+

Firefox 6+

Chrome 10+

Safari 5+
iOS Safari Mobile 5+

Opera 11+

Android Browser 3+

Propriétés de l'élément

Propriété Détails

Modèles de contenu autorisés Contenu de phrasé

Parents autorisés Tout élément pouvant contenir des éléments de phrasé

Omission de balise Les balises ouvrantes et fermantes sont obligatoires

Style par défaut mark { background-color:yellow; color:black; }

HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Simon-K — 2012-02-03T17:00:00+00:00

Les éléments de section HTML5, une nouvelle façon de penser

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça !

HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Des statistiques ont été élaborées sur les attributs id les plus fréquemment attribués aux grands découpages de pages HTML.

Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Cette information est alors placée dans un élément
dédié - qui permet d'affecter des propriétés de styles CSS - mais n'a aucune signification particulière pour un navigateur ou un moteur d'indexation. C'est le cas de tous les autres
. Le même principe peut être appliqué pour baliser les différents articles d'un site d'information : pourquoi ne pas prévoir un élément
plutôt que de segmenter tout le contenu avec des
? Ceci en facilitera autant l'extraction d'information, la syndication de contenu, et la structuration du code source.

Liste récapitulative des éléments de section HTML5

Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.

Nom Détails

Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web

Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension

Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)

Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.

Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).

Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Un cas particulier : Internet Explorer <9

Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. C'est-à-dire qu'ils ne sont non seulement pas stylés en bloc par défaut, mais également qu'on ne peut leur appliquer aucun style de quelque manière que ce soit.

Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :

Étant muni d'un commentaire conditionel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus).

Pour tous les autres moteurs de navigateurs récents, il ne sera pas nécessaire d'appliquer une telle astuce : même si ces éléments n'auront pas de signification particulière pour le moteur de rendu, il sera possible de leur appliquer des styles CSS s'ils ne sont pas affichés en bloc par défaut.

Si vous utilisez déjà une bibliothèque telle que Modernizr, il ne sera pas nécessaire d'appliquer un autre script (tel que html5shim) car celle-ci embarque déjà une déclaration équivalente.

Exemples de documents

Exemple minimal

Voici un schéma basique d'un découpage d'une page HTML5. Précisons bien qu'il ne s'agit pas d'une règle fixe à appliquer à tout document mais juste d'un exemple.

L'en-tête

Plutôt que de se cantonner à un simple
le nouvel élément
convient parfaitement à l'introduction d'un document. Tout comme l'élément
qui remplace avantageusement
.

Le contenu principal et annexe

L'élément aside revêt le rôle de barre latérale, et l'élément section est appelé pour regrouper le contenu principal.

Le

Sans suprise l'élément footer est destiné au pied-de-page. Il peut accueillir des mentions spécifiques, un rappel du titre et du logo, des liens de navigation, etc.

Remarque

Finalement, il suffit de considérer qu'il s'agit d'un remplacement pragmatique de certains éléments, ayant eu un identifiant proche (id="header", id="navigation", id="content"...). Mais ce n'est qu'une impression. Se limiter à ce constat serait incomplet. L'usage de ces nouveaux éléments doit se faire à bon escient.

Exemple détaillé

Le schéma suivant est plus précis et se concentre sur chaque
. Il démontre que éléments de section ne se limitent pas à un simple découpage et à une application de styles graphiques mais bien à une meilleure classification sémantique de l'information.

Démonstration

On retrouve ici header, aside, footer alors qu'ils sont déjà utilisés dans d'autres parties du document. C'est un critère important : l'utilisation de ces éléments n'est pas limitée à une occurence par page. Ils peuvent très bien s'appliquer à des contenus locaux, par exemple dans
qui représente déjà une portion de contenu. Il peut donc possèder (entre autres) : un en-tête header (avec des titres, des informations sur la date de publication et l'auteur), un pied d'article footer, des infos complémentaires dans un ou plusieurs aside etc.

Les balises en détail

C'est la plus générique : elle est utilisée lorsqu'aucun autre élément de section n'a pu lui être préféré. Il ne faut cependant pas la confondre avec l'élément div qui n'a aucune valeur sémantique. Les deux ne sont pas interchangeables. La section regroupe un ensemble de contenu d'une même thématique, ou bien un ensemble d'éléments offrant une fonctionnalité spécifique dans une application web.

Pour résumer, on utilise l'élément
généralement quand :

Ce n'est pas une balise employée uniquement pour styler un élément voire plusieurs éléments

D'autres éléments de section ne sont pas appropriées (article, aside ou nav)

Il contient naturellement un titre d'introduction

Articles ...

Documentation sur l'élément

L'élément
est une spécialisation de section autosuffisante, possédant une plus forte valeure sémantique. Il vise à baliser des blocs de contenu utiles que l'on pourrait extraire du document tout en conservant leur sens et leurs informations. Pour déterminer si son usage est approprié, il faut se demander si son contenu pourrait être réutilisable tel quel pour de la syndication (par exemple en le reprenant dans un flux RSS ou en le copiant-collant dans un e-mail). Il est fréquent qu'il soit présent au côté d'autres frères dans un même document.

Des éléments
dans un parent
sont censés représenter des blocs de commentaires relatifs à cet élément parent.

Dans le cadre d'un site axé sur le cinéma, on pourra se servir d'
pour les fiches d'identité de chaque film, pour les biographies des acteurs, pour les produits à acheter, pour chaque actualité ou encore pour chaque contribution d'un utilisateur.

Titre de l'article Contenu de l'article

Documentation sur l'élément

L'élément aside est destiné au contenu indirectement lié à l'article lui-même : il représente ce qui l'entoure, de façon annexe. Par exemple, on pourra s'en servir pour proposer la définition d'un terme, une biographie de l'auteur de l'article, un glossaire, préciser des sources, une liste d'articles en relation... aside n'est donc pas forcément dédié au seul usage d'une barre de contenu latérale.

Sources de l'article Lien 1 Lien 2 Lien 3

Documentation sur l'élément

L'élément
représente l'en-tête d'une section (section, article...) ou d'une page entière. Il peut contenir un logo, un ou plusieurs titres, d'autres informations d'introduction, une navigation, un formulaire de recherche général.

Titre de l'article Auteur : bidule Contenu de l'article

Documentation sur l'élément

L'élément footer représente le pied de page, ou bien la conclusion d'une section. On y place des informations concernant l'auteur, des mentions légales, une navigation ou une pagination (en combinaison avec
), un logo de rappel, des coordonnées, des dates de publication.

... Posté par Simon, le 2 février 2012

Documentation sur l'élément

L'élément
est une section de liens de navigation. On peut l'utiliser pour la navigation principale, mais également pour d'autres parties du document devant lister des liens de navigation interne.

Page d'accueil Contact

Documentation sur l'élément

Conclusion

HTML5 dispose d'éléments bien pensés pour un meilleur balisage sémantique de l'information. Le plus difficile n'est pas d'écrire ces nouvelles balises, mais bien de comprendre leur usage. Les confusions qui peuvent survenir (section dans article ou vice-versa par exemple) risquent de créer de longs débats quant à leur emploi : il faudra être vigilant.

Modernizr

dew — 2012-02-03T16:00:00+00:00

Modernizr est une bibliothèque JavaScript conçue pour détecter des fonctionnalités spécifiques de HTML et CSS dans les navigateurs. Puisqu'il est inutile d'embarquer un fichier complet de détection dans tous les sites web, un script sur mesure peut être construit en piochant parmi les fonctionnalités détectables. Il sera par exemple possible de savoir si le navigateur supporte les transformations CSS 3D, la vidéo HTML5, Canvas ou SVG, et de prévoir une alternative le cas échéant.

Son usage est très simple, il suffit de copier-coller les quelques lignes générées dans le code source de la page, ou bien dans un fichier externe, puis d'exploiter l'objet Modernizr et ses propriétés (par exemple Modernizr.canvas, Modernizr.fontface, Modernizr.geolocation etc), initialisées aux valeurs booléennes true ou false. La méthode Modernizr.load vise aussi à faciliter le chargement de scripts tiers. Enfin, la bibliothèque embarque une déclaration des éléments HTML5 pour les anciennes versions d'Internet Explorer afin de permettre l'emploi de styles sur ces derniers.

Attention : il ne s'agit pas de moderniser les navigateurs mais uniquement de procéder à une détection, pour éventuellement utiliser d'autres scripts en complément, apportant des fonctionnalités non supportées.

HTML5 : Éléments <figure> et <figcaption>

Okko — 2012-02-02T12:00:00+00:00

Illustration légendée

Inaugurés avec HTML5, les éléments
et
fonctionnent de concert pour associer une légende à une illustration ou un autre élément média.

Légende associée

Élément

est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément
(facultatif).

Élément

Enfant direct de
, son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de
.

Quelques applications dans le monde du livre

Ce fonctionnement se retrouve dans de nombreux ouvrages, y compris les premières encyclopédies pour lesquelles on imprimait des planches de figures à part.

Une gravure avec sa légende

Un diagramme circulaire

Compatibilité navigateur des éléments
et

Navigateurs Versions

Internet Explorer 9.0+

Firefox 3.0+

Chrome 4.0+

Safari 3.1+
iOS Safari 3.2+

Opera 9.0+
Opera Mini 5.0 + et Mobile 10.0

Android Browser 4.0+

Un navigateur n'implémentant pas ces éléments affichera le contenu au format brut, sans présentation particulière. Par défaut, le style appliqué est display:block sur les deux éléments, ainsi que des marges sur
. Sous IE<9 il faudra appliquer un shim pour pouvoir leur appliquer un style bloc.

Applications sur le web

Utilisation sans légende

Il est tout à fait envisageable d'insérer
avant l'image voire de ne pas le mettre du tout car il est facultatif.

Démonstration

Les différents éléments peuvent être stylés en CSS. Dans cet exemple ont été ajoutées à
une bordure et une couleur de fond blanche.

Une image avec sa légende

Dans son usage le plus courant, l'élément
contient une image puis sa légende
.

Proposition pour le thème : Un goût de fraise du jeu PhotoGame

Démonstration

Utilisation avancée

Il est prévu de pouvoir regrouper une liste d'images et ainsi les lier à l'aide d'un unique élément
.

Une liste d'images

Photo d'un voyage à Porto. Ville emplie de graffitis, balcons loufoques et chats profitant des quelques ruines derrière la ville.

Démonstration

Un bloc de code

Les illustrations ne sont pas les seuls éléments HTML à pouvoir profiter de
et
. On peut également les appliquer à un bloc de code source.

Description du code source présenté

Démonstration

Une vidéo

Le même principe est appliqué à la balise . Voir aussi l'article : Introduction à la balise .

Description de la vidéo

Les diagrammes et autres graphes dynamiques

Du côté de Canvas et SVG, le document peut également en profiter. HTML5 ne compte pas que
et
dans ses nouveaux éléments mais également , qui vous permettra de créer, en association avec JavaScript, des diagrammes, des graphiques, et tout ce qu'une surface de dessin permet de faire. À ce sujet, consultez l'article de David Rousset : Introduction aux APIs graphiques d’HTML5: SVG & Canvas

Choisir
ou
?

Ces deux éléments sont des unités de contenu mais n'ont pas le même rôle sémantique. Tandis qu'
n'est pas essentiel pour la compréhension de la page (il ne doit être qu'un apport tangentiel),
est lié à celle-ci : il transmet un contenu pertinent, lié au contenu principal, comme le serait une image classique.

Nous pouvons donc résumer la chose comme suit :

: son contenu est périphérique à la page, et son absence ne doit pas gêner la compréhension de celle-ci.

: son contenu contribue à donner du sens et de la compréhension à la page, et son placement n'est pas déterminant.

Propriétés des éléments

Propriété Détails

Modèles de contenu autorisés Un élément
optionnel, suivi par du contenu de flux

Parents autorisés Tout élément pouvant contenir des éléments du flux

Omission de balise Les balises ouvrantes et fermantes sont obligatoires

Style par défaut figcaption { display:block; margin:1em 40px; }

Propriété Détails

Modèles de contenu autorisés Contenu de flux

Parents autorisés

Omission de balise Les balises ouvrantes et fermantes sont obligatoires

Style par défaut figcaption { display:block; }

-prefix-free

Okko — 2012-02-01T15:24:22+00:00

Ce script ajoute des préfixes avant les propriétés CSS de façon automatique, pour les navigateurs n'implémentant pas encore celles-ci officiellement. Vous aimez le goût du risque ? Utilisez -prefix-free et facilitez-vous la vie.

Firefox 10 disponible au téléchargement

dew — 2012-01-31T11:30:00+00:00

La version 10 de Mozilla Firefox a été dévoilée. Quelques allègements ont été opérés sur l'interface, mais aussi (et surtout) des nouveautés ont été apportées quant aux fonctionnalités supportées :

CSS : Support de 3D-Transforms

HTML : Support de l'élément

HTML5 : Meilleure implémentation de IndexedDB

Nouvel inspecteur de document et de styles CSS

Anti-aliasing pour WebGL

Activation du mode plein écran (Fullscren API)

Mises à jour automatiques en tâche de fond

Meilleure prise en charge des extensions

Prise en charge de l'API Touch Events pour la version mobile et meilleure accélération matérielle avec OpenGL ES

Il s'agit également de la première version qui soit estampillée ESR (Extended Support Release), pour rassurer et déployer une version maintenue à long terme surtout dans le monde de l'entreprise. Téléchargement : Windows, Mac OS X, Linux.

Pour les développeurs web, on notera une grande refonte de l'inspecteur HTML/CSS intégré au navigateur, qui se rapproche des outils les plus agréables à utiliser à ce jour.

Une vidéo de démonstration en fait la promotion :

Et pour les prochaines versions, que nous prépare Mozilla ? Parmi ce qui est prévu : migration des paramètres depuis Chrome, amélioration de la lisibilité du texte, support de Flash sur Android, vue 3D dans l'inspecteur de code, éventuellement support du protocole SPDY. À plus long terme, la volonté est de pouvoir créer des web apps mieux intégrées au système d'exploitation, d'améliorer l'interface générale (onglets, téléchargements, accueil) et de rendre les mises à jour encore plus transparentes pour l'utilisateur.

HTML5 : structure globale du document

Simon-K — 2012-01-30T10:30:00+00:00

La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners.

Un document HTML5 minimal

Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige. On y retrouve donc un doctype suivi des éléments les plus courants : , , </code>, <code class="html"><meta></code>, <code class="html"><link></code>, <code class="html"><script></code> et <code class="html"><body></code>.</p> <pre class="code"> <code class="html"><!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page ... ...
Le doctype

La première ligne d'en-tête a été considérablement simplifiée. On peut maintenant retenir un doctype par coeur, sans avoir à le copier-coller.

Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. On peut remarquer qu'il n'y a pas d'allusion à un quelconque numéro de version. Son rôle est toujours de préciser quel est le type de document qui va suivre, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML il devra interpréter.

L'élément racine

C'est lui qui va recueillir les deux principaux éléments de la hiérarchie : et .

L'attribut lang (sur )

On a tendance à l'oublier : l'attribut lang précise la langue utilisée pour le contenu de la page, lorsqu'il est placé sur la racine .

Une langue bien indiquée sera utile ainsi aux synthèses vocales (pour adopter le bon accent).

Les fameux et

À ce niveau, le code HTML peut être divisé en deux parties : l'en-tête située entre les balises et , qui regroupe toutes les méta-informations, c'est-à-dire les données qui ne sont pas représentées directement à l'écran dans le rendu du document, mais qui lui sont tout de même liées : le titre dans </code> (extrêmement recommandé), les autres méta-informations variées (facultatives : mots-clés, description générale de la page) dans zéro ou plusieurs <code class="html"><meta></code>, et éventuellement <code class="html"><link></code>, <code class="html"><script></code> ou <code class="html"><style></code>.</p> <p style="line-height: 18px; "> La deuxième partie comprend le corps à proprement parler, c'est-à-dire <code class="html"><body></code>. On y retrouvera tout le reste du contenu HTML, structuré par des balises variées - selon ce que l'on aura à y placer - et dont l'apparence sera affectée par les styles CSS chargés dans <code class="html"><link></code> et/ou <code class="html"><style></code>.</p> <h4> L'attribut <code class="html">charset</code> (sur <code><meta></code>)</h4> <p> Préciser l'<a href="/astuce/lire/69-declarer-encodage-des-caracteres.html">encodage des caractères</a> est primordial pour exploiter la bonne page de code et ne pas se retrouver avec les caractères spéciaux ou accentués. Le choix de l'<a href="http://fr.wikipedia.org/wiki/UTF-8">UTF-8</a> est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur internet (dont HTML).</p> <pre class="code" style="font-size: 12px; background-color: rgb(255, 255, 255); "> <code class="html" style="font-size: 14px; "><meta charset="utf-8"></code></pre> <p> On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours veiller à ce que l'éditeur permettant de coder en HTML (que ce soit un IDE tout-en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage, et non en Latin-1 (alias ISO-5589-1) ou ANSI si la balise <code class="html"><meta></code> indique UTF-8.</p> <p> Veillez à toujours placer cette déclaration d'encodage avant toutes les autres balises contenues dans la section <code class="html"><head></code>. En effet, celles-ci sont immédiatement concernées, par exemple <code class="html"><title></code> qui peut déjà faire appel à des caractères en UTF-8 ; ceci également dans un but de sécuriser l'interprétation des caractères spéciaux et prévenir les injections de contenu indésirables.</p> <h4> L'élément <code class="html"><link></code></h4> <p> Dans la majorité des cas, une balise <code class="html"><link></code> placée dans l'en-tête permet de mettre en relation la page avec d'autres documents externes. La plupart du temps cela concerne les feuilles de style CSS externes avec une relation du type <code>stylesheet</code>, mais il est aussi possible de définir d'<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes">autres types de relations</a> (par exemple avec <code>author</code>, <code>icon</code>, <code>prefetch</code>, <code>next</code>, <code>prev</code>, etc).</p> <pre class="code" style="font-size: 12px; background-color: rgb(255, 255, 255); "> <code class="html" style="font-size: 14px; "><link rel="stylesheet" href="style.css"></code></pre> <p> En HTML5, il n'est plus strictement obligatoire de spécifier l'attribut <code class="html" style="font-size: 14px; ">type</code>.</p> <p> Pour inclure directement des instructions CSS dans le document HTML sans passer par un fichier externe, <code class="html"><style></code> est à votre service. Cependant, il vaut mieux faire confiance à un fichier indépendant : il n'y aura qu'un seul code à maintenir pour de multiples pages (voire pour tout le site), et la mise en cache par le navigateur n'en sera que plus efficace.</p> <h4> L'élément <code class="html"><script></code></h4> <p> Cet élément permet d'ajouter des scripts (JavaScript) qui vont s'éxécuter côté client dans le navigateur dès leur chargement.</p> <pre class="code" style="font-size: 12px; background-color: rgb(255, 255, 255); "> <code class="html" style="font-size: 14px; "><script src="script.js"></script> </code></pre> <p> En HTML5, il n'est plus obligatoire de spécifier l'attribut <code class="html">type</code>. Celui-ci est de toute manière interprété par défaut en <code>text/javascript</code> par tous les navigateurs.</p> <h3> Les autres éléments HTML5</h3> <p> Une fois la structure de base préparée, il est temps de commencer à y placer d'autres éléments HTML pour le contenu à proprement parler : paragraphes, listes, liens, images, vidéos, tableaux de données, formulaires, etc. La majorité des éléments HTML sont toujours au rendez-vous dans HTML5, qui se voit complété par quelques nouveautés pour le balisage. Par exemple :</p> <ul> <li> Éléments de section <code><section></code>, <code><article></code>, <code><header></code>, <code><footer></code>, <code><nav></code> et <code><aside></code></li> <li> <a href="/article/lire/1334-html5-element-datalist.html">Élément <code><datalist></code></a></li> <li> <a href="/article/lire/1335-html5-details-summary.html">Éléments <code><details></code> & <code><summary></code></a></li> <li> Éléments <code><figure></code> & <code><figcaption></code></li> <li> Éléments média <code class="html"></code> et <code class="html"></code> complétés par <code class="html"></code></li> <li> Élément <code class="html"><canvas></code></li> <li> Éléments <code class="html" style="font-size: 14px; "><meter></code>, <code class="html"><output></code> et <code class="html" style="font-size: 14px; "><progress></code></li> <li> Élément <code class="html" style="font-size: 14px; "><time></code> et <code class="html" style="font-size: 14px; "><mark></code></li> <li> Et tous les autres, que l'on peut retrouver dans une liste complète maintenue par le W3C : HTML : <a href="http://dev.w3.org/html5/markup/">The Markup Language</a></li> </ul> <p> Pour rappel, tous les nouveaux éléments HTML5 ne sont pas nécessairement reconnus de façon native et cohérente par tous les navigateurs (même les plus récents). Pour certains, il sera possible de trouver des alternatives avec des compléments en JavaScript. Pour d'autres, il faudra patienter jusqu'à une implémentation totale, et évaluer le risque selon le besoin : un nouvel élément sera-t-il tout de même consultable, masqué, ou géré de façon erronée ?</p> <p> Pour juger de l'état de la prise en charge par les navigateurs, fiez-vous à <a href="/web/lire/1264-can-i-use.html">Caniuse.com</a> qui dresse des tableaux de support complets, ou bien encore à <a href="/web/lire/1377-html5please.html">HTML5Please</a>, qui indique de façon rationnelle par rapport aux parts de marché ce qu'il est possible d'utiliser en production pour un maximum de visiteurs.</p> <h3> Templates et boilerplates</h3> <p> Des modèles réfléchis et structurés existent pour faciliter le démarrage d'un nouveau projet web autour de HTML5, et de ses futures évolutions. Ils reprennent la structure globale d'un document, en y ajoutant quelques bonnes pratiques, avec parfois des fichiers de configuration pour le serveur et des feuilles de styles de base, voire même des librairies JavaScript.</p> <h4> HTML5 Boilerplate</h4> <p class="center"> <a href="http://html5boilerplate.com/"></a></p> <p class="center"> <em>HTML5 Boilerplate</em></p> <h4> Initializr</h4> <p class="center"> <a href="http://www.initializr.com/"></a></p> <p class="center"> <em>Initializr</em> 2 par Jonathan Verrecchia</p> <h4 class="center" style="text-align: left;"> HTML KickStart</h4> <p class="center"> <a href="http://www.99lime.com/"></a></p> <p class="center"> <em>HTML KickStart</em> par 99lime</p> <h3> Jetez-vous à l'eau !</h3> <p> Comme on peut le constater, démarrer un document HTML5 est facilement abordable, et reste rétro-compatible, pour peu que les nouveaux éléments soient intégrés de façon intelligente. Étant donné que cette nouvelle version du langage embarque la grande majorité des éléments déjà connus par les précédentes moutures, il n'y aura pas de risque de s'y aventurer progressivement.</p> <p> HTML5 propose de nouveaux éléments qui ont pour objectif de faciliter l'intégration de médias, d'utiliser des composants plus dynamiques sans avoir besoin de faire appel - à plus long terme - à des extensions propriétaires (Flash, Java, Silverlight). Le balisage propose également d'obtenir une meilleur sémantique, avec tous les aspects bénéfiques qui en découlent (accessibilité, référencement, syndication, interprétation par les moteurs de rendu, etc.)</p> <p style="line-height: 18px; "> HTML5 siginifie-t-il obligatoirement l'utilisation de CSS 3 ? Dois-je tout réapprendre ? Pour répondre à ces questions, un article est prévu à cet effet : <a href="http://www.alsacreations.com/actu/lire/1324-mythes-et-verites-html5.html">Les 5 mythes et vérités de HTML5</a></p> </article> <article> <h1>HTML5Please</h1> <p>dew — 2012-01-26T17:30:11+00:00</p> <p> Cette page claire et bien organisée liste les différentes fonctionnalités tournant autour de HTML5 et leur niveau de support dans les navigateurs : peut-on les utiliser dès à présent, faut-il penser à utiliser une alternative, faut-il les éviter ? Tout ceci en fonction des parts de marché actuelles des navigateurs et de leurs capacités.</p> </article> <article> <h1>Appel à orateurs pour la Kiwi Party 2012</h1> <p>Raphael — 2012-01-24T21:20:15+00:00</p> <p class="center"> </p> <div style="text-align: justify;"> La <a href="http://kiwiparty.fr/"><strong>Kiwi Party</strong></a> est un événement réunissant conférences et ateliers, autour des thèmes de la conception web et de ses bonnes pratiques : accessibilité, ergonomie, nouveautés technologiques, conformité aux standards. Pour sa 3è édition, la Kiwi Party aura lieu le <strong>vendredi 4 mai 2012</strong> durant toute la journée, à l'Epitech de Strasbourg.</div> <h3> Appel à orateurs...</h3> <p style="text-align: center; "> </p> <p class="remarque"> Si vous désirez participer à cet événement en tant qu'<strong>orateur</strong>, faites-nous part de votre candidature et de vos idées en remplissant le <a href="http://t.co/XhDQ7mYQ"><strong>formulair</strong><strong>e d'Appel à Orateurs</strong></a>.</p> <p class="center" style="text-align: left; "> Nous organiserons a priori deux sessions de conférences en parallèle : une présentation de 45min en grande salle ainsi que des mini-conf / ateliers de 20 minutes.</p> <p> Le choix sur le contenu se fera durant le mois de mars et sera détaillé sur le site de la <a href="http://kiwiparty.fr/">Kiwi Party</a>, nous vous tiendrons bien évidemment informés dès que possible.</p> <p> Information importante : il s'agit d'un événement dont tous les frais sont intégralement couverts par des sponsors et par Alsacréations. Nous tenons à dédommager autant que faire se peut les orateurs pour leurs déplacements ou hébergements, mais nous ne pourrons certainement pas couvrir tous les frais engagés. À titre d'exemple, la moyenne des défraiements s'élevait autour de 100 euros par orateur l'an passé.</p> <h3 style="clear:left;"> ... et aux sponsors</h3> <p> Les sponsors ont un rôle prépondérant pour cet événement puisque c'est grâce à eux qu'il peut avoir lieu et accueillir autant de participants. L'an passé, grâce à <a href="http://www.epitech.eu/ecole-informatique-strasbourg-alsace/">Epitech</a>, <a href="http://www.kiubi.com/">Kiubi</a>, <a href="http://www.eyrolles.com/">Eyrolles</a>, <a href="http://www.dunod.com/">Dunod</a> et <a href="http://www.devclic.fr/">Devclic</a>, nous avons pu être accueillis dans de magnifiques locaux au centre de Strasbourg, pu rembourser une partie des frais des orateurs, et disposer de lots pour les gagnants du Quiz.</p> <p> Nous souhaiterions bien évidemment réitérer ces petites attentions cette année et accueillerons avec plaisir tout partenaire qui nous permettrait d'offrir des lots lors des jeux organisés durant la journée ou de participer aux frais.</p> <p class="remarque"> Sponsors, <a href="http://www.alsacreations.com/contact/general/">contactez-nous</a> !</p> </article> <article> <h1>HTML5 : Les éléments <details> et <summary></h1> <p>Okko — 2012-01-19T11:00:00+00:00</p> <h3> Un résumé et des détails</h3> <h4> Élément <code class="html"><details></code></h4> <p> Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Ceux-ci ne doivent cependant pas être obligatoires pour poursuivre la bonne marche de l'application web ou la compréhension du document HTML.</p> <p> Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur (voir exemples visuels ci-après). Une icône pourra indiquer l'état de l'élément : déployé (visible) ou compacté : seul le résumé reste visible. Ce résumé, assimilable à un titre ou une légende, est apporté par <code class="html"><summary></code>.</p> <h5> Attribut <code class="html">open</code> de l'élément <code class="html"><details></code></h5> <p> Si cet attribut est présent, les détails sont exposés à l'utilisateur dès le chargement.</p> <table class="pagetable"> <tbody> <tr> <th> Attribut</th> <th> Valeurs</th> <th> Rôle</th> </tr> <tr> <td> <code class="html">open</code></td> <td> <code class="html">open </code>ou <code class="html">""</code> ou (vide)</td> <td> Spécifie la visibilité initiale de l'élément (visible ou non à l'utilisateur)</td> </tr> </tbody> </table> <h4> Élément <code class="html"><summary></code></h4> <p> Cet élément sert d'intitulé à <code class="html"><details></code>, en cela il doit être pertinent. Sa fonction s'apparente à une légende ou un résumé donnant du sens au contenu de son parent. Seul <code class="html"><details></code> peut-être le parent de <code><summary></code>. Si <code><summary></code>n'est pas présent, il incombe au navigateur de déterminer le libellé de <code class="html"><details></code>.</p> <h4> Exemples pratiques retrouvés sur systèmes d'exploitation</h4> <p> L'intérêt de ces deux éléments fonctionnant de concert est de mimer ce que l'on retrouve déjà couramment avec les interfaces graphiques des systèmes d'exploitation. Un intitulé est présenté à l'utilisateur, résumant parfois un état, et permettant d'accéder - généralement après un clic - à d'autres informations détaillées.</p> <p class="center"> </p> <hr /> <p class="center"> </p> <hr /> <p class="center"> </p> <h4> Compatibilté navigateur des éléments <code><details></code> et <code><summary></code></h4> <table class="pagetable"> <tbody> <tr> <th style="width:10%"> Navigateurs</th> <th> Versions</th> </tr> <tr> <td style="text-align:center;"> </td> <td> <strong>Chrome 12.0+</strong></td> </tr> <tr> <td style="text-align:center;"> </td> <td> <strong>Android Browser 4.0+</strong></td> </tr> </tbody> </table> <p class="remarque"> Un navigateur ne supportant pas ces éléments affichera leur contenu sans comportement particulier.</p> <h4> Utilisation classique</h4> <p> L'élément <code class="html"><details></code> contient l'élément <code class="html"><summary></code> lui servant d'intutilé ou de légende, à la suite de celui-ci nous retrouvons le contenu à afficher ou masquer. L'attribut <code class="html">open</code> affichant par défaut le contenu. Pour une utilisation classique l'icône par défaut est une flèche : <span>►</span></p> <pre class="code"> <code class="html"><strong><details open></strong> <strong><summary></strong>Caractéristiques techniques<strong></summary></strong> <table> <tr> <th>Nom</th> <th>Détails</th> </tr> <tr> <td>Matière</td> <td>Inox alimentaire</td> </tr> <tr> <td>Dimensions</td> <td>140x120 mm, hauteur 30 mm</td> </tr> </table> <strong></details></strong> </code></pre> <p> L'élément <code><details></code> peut aussi contenir des éléments de formulaire.</p> <pre class="code"> <code class="html"><form> <label for="quantite">Quantité : </label> <input type="number" name="nombre" id="quantite"> <strong><details></strong> <strong><summary></strong>Options possibles<strong></summary></strong> <fieldset> <legend>Choix de la couleur :</legend> <p> <input type="radio" id="d1" name="couleurs"><label for="d1">Gris</label> <input type="radio" id="d2" name="couleurs"><label for="d2">Rouge</label> <input type="radio" id="d3" name="couleurs"><label for="d3">Vert</label> <input type="radio" id="d4" name="couleurs"><label for="d4">Bleu</label> </p> <fieldset> <strong></details></strong> <input type="submit" value="Ajouter au panier"> </form></code></pre> <p> <a class="demo" href="/xmedia/tuto/html5/details-summary/demo1.html">Démonstration</a></p> <p class="center"> </p> <p class="center"> <em>Aperçu sous Chrome 16.0</em></p> <h3> Accessibilité</h3> <p> Dans cet exemple, le groupe de boutons radio est entouré d'un élément <code class="html"><fieldset></code> (et donc précédé d'un élément <legend> pertinent), comme le demande la Technique <abbr lang="en" title="Web Content Accessibility Guidelines 2.0">WCAG 2.0</abbr> <a href="http://www.w3.org/TR/WCAG-TECHS/H71.html" hreflang="en" lang="en">H71: Providing a description for groups of form controls using fieldset and legend elements</a> (voir les critères <a href="http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#crit-11-5">11.5 à 11.7 du référentiel Accessiweb 2.1</a> pour les critères de succès <abbr lang="en">WCAG 2.0</abbr> et tests <abbr title="Référentiel Général d’Accessibilité des Administrations">RGAA</abbr> correspondants).</p> <p> C'est cet élément fieldset qui est entouré d'un élément <details> (et précédé d'un élément <summary>). Une variante de l'exemple où figurerait seulement les 5 boutons radio et leurs étiquettes ainsi que les éléments summary et details aurait été plus courte mais sans fieldset ni legend, la fonction des boutons radio n'est plus explicitée, en particulier dans les lecteurs d'écran actuels.</p> <p> Concernant l'accessibilité générale des éléments <code class="html"><details></code> et <code class="html"><summary></code> ceux-ci ne sont pas accessibles au clavier car il n'est pas possible d'atteindre le marqueur (icône) via la tabulation dans le navigateur l'implémentant début 2012. HTML5 Doctor aborde le sujet, se référer à son <a href="http://html5doctor.com/the-details-and-summary-elements/#accessibility">article </a>sur ces éléments.</p> <h3> Aller plus loin</h3> <h4> Combinaison multiple</h4> <p> Plusieurs blocs <code class="html"><details></code> peuvent être imbriqués les uns dans les autres, cette pratique reste tout à fait valide.</p> <h4> Modifier le style de l'icône</h4> <p> Il n'y a pas de convention actuellement définie et reconnue par tous les navigateurs pour accéder aux propriétés CSS. Néanmoins avec le moteur WebKit et la pseudo-classe<code class="css"> ::-webkit-details-marker </code>vous pouvez modifier l'icône (en forme de flèche par défaut). Le sélecteur <code class="css">details[open]</code>, permet de styler l'icône lorsque <code class="html"><details></code> est déployé.</p> <pre class="code"> <code class="html">summary<strong>::-webkit-details-marker</strong> { color:#ADCA48; background:#ADCA48; } <strong>details[open]</strong> summary::-webkit-details-marker { color:#eaeaea; background:#eaeaea; outline: 2px solid #ADCA48; }</code></pre> <p> <a class="demo" href="/xmedia/tuto/html5/details-summary/demo2.html">Démonstration</a></p> <p class="center"> </p> <p class="center"> <em>Aperçu sous Chrome 16.0</em></p> <p> Il est également possible de changer l'icône par défaut à l'aide de la pseudo-classe <code class="css">:after</code></p> <pre class="code"> <code class="html">summary::-webkit-details-marker { display: none } summary<strong>:after</strong> { content: "+"; color: #ADCA48; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 5px 0 0; padding: 0; text-align: center; width: 20px; } details[open] summary<strong>:after</strong> { content: "-"; }</code></pre> <p> <a class="demo" href="http://www.alsacreations.com/xmedia/tuto/html5/details-summary/demo3.html">Démonstration</a></p> <p class="center"> </p> <p class="center"> <em>Aperçu sous Chrome 16.0</em></p> <h3> Alternative en JavaScript</h3> <p> Voici une alternative basée sur jQuery pour les navigateurs n'implémentant pas encore les éléments <code class="html"><details></code> et <code class="html"><summary></code>. Il est important de savoir que ces éléments peuvent être utilisés quelle que soit la prise en charge. Si l'effet est déjà fonctionnel avec des éléments neutres <code class="html"><div></code> et un complément en JavaScript, il sera profitable de s'orienter vers <code class="html"><details></code> et <code class="html"><summary></code> pour les navigateurs qui les supportent nativement, et de continuer à exploiter la version en JavaScript pour les autres.</p> <p> Tout d'abord faites appel à votre script dans lequel vous intégrerez la fonction permettant d'afficher/masquer les éléments et la <a href="/astuce/lire/916-librairie-javascript-jquery-script.html">dernière version de jQuery</a> en les insérant juste avant la balise de fermeture <code class="html"></body></code></p> <pre class="code"> <code class="html"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="details-summary.js"></script> </body></code></pre> <p> Dans votre fichier <a href="/xmedia/tuto/html5/details-summary/details-summary.js">details-summary.js</a>, il vous faudra vous assurer que la page est chargée, une fois celle-ci prête il est important de vérifier que le navigateur n'implémente pas les éléments <code class="html"><details></code> ou <code class="html"><summary></code> afin de ne pas lancer le script si tel est le cas :</p> <pre class="code"> <code class="html">$(document).ready(function() { if (!('open' in document.createElement('details'))) {</code></pre> <p> Une fois la condition validée, pour chaque élément <code class="css"><details></code> on affiche "son" <code class="css"><summary></code> à l'aide de la méthode <code>show()</code>. Pour procéder à la détection, l'utilisation de <a href="http://www.modernizr.com/">Modernizr</a> peut être plus avantageuse.</p> <p> Et lorsque l'on clique sur l'élément <code class="html"><summary></code> une fonction permet d'afficher ou masquer les frères de celui-ci, c'est-à-dire le contenu. Puis on ajoute ou enlève la classe open à l'élément<code class="html"> <details> </code>ainsi que la classe <code class="css">html5_details</code>.</p> <pre class="code"> <code class="js"> $("details").each(function() { $(this).find("summary").show().click(function() { $(this).siblings().toggle(); $(this).parent('details').toggleClass('open'); });</code></pre> <p> Avant de fermer la fonction, il reste encore à masquer le contenu si l'attribut <code class="html">open </code>n'est pas présent au sein de la balise<code class="html"> <details></code>. On stocke dans une variable l'attribut <code class="html">open</code>. On vérifie s'il est absent, si tel est le cas, on masque les enfants de <code class="html"><details></code> excepté <code class="html"><summary></code> que l'on affiche. </p> <pre class="code"> <code class="js"> var opened = $(this).attr("open"); if(opened==undefined) { $(this).children().hide(); $(this).children("summary").show(); } }); // Fermeture de la condition et de $(document).ready } });</code></pre> <p> Le script établit le comportement dynamique, mais cela n'est pas suffisant pour la présentation : il faut encore ajouter l'icône et cela se passe du côté de la feuille de styles CSS. Rien de plus simple, grâçe à la pseudo-classe <code class="css">:</code><code class="html">:before</code> et à la classe <code class="html">.open</code> :</p> <pre class="code"> <code class="css">.html5_details > summary::before { content:"►"; margin-right:"5px"; } .html5_details.open > summary::before { content:"▼" }</code></pre> <p> <a class="demo" href="http://www.alsacreations.com/xmedia/tuto/html5/details-summary/demo4.html">Démonstration</a></p> <p> Vous obtenez ainsi le même affichage que par défaut.</p> <p> Il existe d'autres alternatives :</p> <ul> <li> <a href="http://mathiasbynens.be/notes/html5-details-jquery"><details> fallback via jQuery</a> par Mathias Bynens</li> <li> <a href="https://github.com/manuelbieh/Details-Polyfill">Un autre polyfill <details></a>, aussi basé sur jQuery par Manuel Bieh</li> <li> <a href="http://akral.bitbucket.org/details-tag/">jquery-details</a> par Denis Sokolov</li> </ul> <h3> Propriétés des éléments</h3> <h4> <code><details></code></h4> <table class="pagetable"> <tbody> <tr> <th> Propriété</th> <th> Détails</th> </tr> <tr> <td> Modèles de contenu autorisés</td> <td> Un élément <code><summary></code> optionnel, suivi par du contenu de flux</td> </tr> <tr> <td> Parents autorisés</td> <td> Tout élément pouvant contenir des éléments de flux, à l'exception de <code><a></code> et <code><button></code></td> </tr> <tr> <td> Omission de balise</td> <td> Les balises ouvrantes et fermantes sont obligatoires</td> </tr> <tr> <td> Style par défaut</td> <td> <code class="css">details { display:block; }</code></td> </tr> </tbody> </table> <h4> <code><summary></code></h4> <table class="pagetable"> <tbody> <tr> <th> Propriété</th> <th> Détails</th> </tr> <tr> <td> Modèles de contenu autorisés</td> <td> Contenu de phrasé.</td> </tr> <tr> <td> Parents autorisés</td> <td> <code><details></code></td> </tr> <tr> <td> Omission de balise</td> <td> Les balises ouvrantes et fermantes sont obligatoires</td> </tr> <tr> <td> Style par défaut</td> <td> <code class="css">summary { display:block; }</code></td> </tr> </tbody> </table> <h3> Ressources en ligne</h3> <ul> <li class="ico-arrow"> Les <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element">éléments <code class="html"><details></code> et <code class="html"><summary></code></a> vus par le WhatWG</li> <li class="ico-arrow"> Pages des éléments <a href="http://dev.w3.org/html5/markup/details.html#details"><code class="html"><details></code></a> et <a href="http://dev.w3.org/html5/markup/summary.html#summary"><code class="html"><summary></code> </a>par le W3C</li> </ul> </article> <article> <h1>HTML5 : L'élément <datalist></h1> <p>Okko — 2012-01-17T12:40:30+00:00</p> <h3> Des suggestions de choix</h3> <p> Inauguré avec la vague HTML5, <code class="html"><datalist></code> est un élément de formulaire permettant de lier une liste de choix à un élément <code>input</code>. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche, voire à d'autres éléments d'entrée, tels que les nouveaux types <code><input type="range"></code>.</p> <p class="center"> </p> <p> Par défaut, <code><datalist></code> demeure invisible. Lors de la frappe, ou en appuyant sur la touche <kbd>↓</kbd> (flèche bas) , la liste de choix apparaît et autocompléte le champ de formulaire rattaché.</p> <h4> Compatibilté navigateur de l'élément <code><datalist></code></h4> <table class="pagetable"> <tbody> <tr> <th style="width:10%"> Navigateurs</th> <th> Versions</th> </tr> <tr> <td style="text-align:center;"> </td> <td> <strong>Firefox 4.0+</strong></td> </tr> <tr> <td style="text-align:center;height:40px;vertical-align:middle;"> </td> <td> <strong>Opera 9.0+<br /> Opera Mobile 10.0+</strong></td> </tr> <tr> <td style="text-align:center;height:40px;"> </td> <td> <strong>Internet Explorer 10+</strong></td> </tr> </tbody> </table> <p class="remarque"> Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Le champ <code><input></code> lié restera cependant totalement fonctionnel, l'entrée sera libre. L'exemple présenté dans cet article ne fonctionne que sur les navigateurs compatibles. Pour les alternatives, se rapporter au dernier point.</p> <h4> <strong>Utilisation classique</strong></h4> <p> Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <code><input type="text"></code> à une liste de suggestions.</p> <pre class="code"> <code class="html"><label for="choix_bieres">Indiquez votre bière préférée :</label> <input <strong>list="bieres"</strong> type="text" id="choix_bieres"> <datalist <strong>id="bieres"</strong>> <option value="Meteor"> <option value="Pils"> <option value="Kronenbourg"> <option value="Grimbergen"> </datalist></code></pre> <p> <a class="demo" href="/xmedia/tuto/html5/datalist/demo1.html">Démonstration</a></p> <p class="center"> </p> <p class="center"> <em>Aperçu sous Internet Explorer 10</em></p> <p> Le champ de formulaire (<code>input</code>) et la liste de suggestions (<code>datalist</code> + <code>option</code>) sont reliés grace à la valeur commune des attributs <code>list</code> rattaché à l'<code>input</code>, et <code>id</code> de la <code>datalist</code>.</p> <h4> Utilisation multiple</h4> <p> Il est possible d'utiliser la même liste de suggestions pour plusieurs champs de formulaire. Cela peut être pratique pour les champs dupliqués, il n'y a ainsi qu'une seule liste à maintenir.</p> <pre class="code"> <code class="html"><p> <label for="choix_bieres">Indiquez votre bière préférée :</label> <input <strong>list="bieres"</strong> type="text" id="choix_bieres"> </p> <p> <label for="choix_bieres_ami">Indiquez le choix de votre ami :</label> <input <strong>list="bieres"</strong> type="text" id="choix_bieres_ami"> <datalist <strong>id="bieres"</strong>> <option value="Meteor"> <option value="Pils"> <option value="Kronenbourg"> <option value="Grimbergen"> </datalist> </p></code></pre> <p> <a class="demo" href="/xmedia/tuto/html5/datalist/demo2.html">Démonstration</a></p> <h4> Alternative vers <code><select></code></h4> <p> Pour les navigateurs ne supportant pas <code><datalist></code>, une alternative simple peut être trouvée en complétant le formulaire par un <code><select></code>. Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.</p> <pre class="code"> <code class="html"><label for="www">Adresse web</label> <input id="www" type="url" list="urldata" name="adresseweb"> <datalist id="urldata"> <label for="adresse">ou sélectionner dans la liste</label> <strong><select name="adresse" id="adresse"></strong> <option value="http://www.alsacreations.com/">http://www.alsacreations.com/</option> <option value="http://www.bing.com/">http://www.bing.com/</option> <option value="http://www.google.fr/">http://www.google.fr/</option> <option value="http://www.yahoo.fr/">http://www.yahoo.fr/</option> <strong></select></strong> </datalist> </code></pre> <p> <a class="demo" href="/xmedia/tuto/html5/datalist/demo3.html">Démonstration</a></p> <p class="center"> </p> <p> Il appartient ensuite au script traitant les données côté client (navigateur) ou côté serveur de déterminer de quel champ proviennent les données : a priori il faudra prendre en compte la liste de choix uniquement si le champ est laissé libre.</p> <p> Dans le même ordre d'esprit, un contenu texte stocké dans <code style="font-size: 14px; "><datalist></code>, en-dehors des options, sera affiché par les navigateurs qui ne reconnaissent pas cet élément.</p> <pre class="code"> <code class="html"><datalist> <strong> Votre navigateur ne supporte pas datalist en HTML5 </strong> <option value="option1">Choix1</option> <option value="option2">Choix2</option> <option value="option3">Choix3</option> </datali></code></pre> <h4> Valeurs possibles pour les options</h4> <p> L'étiquette affichée est définie par l'attribut <code>label</code>. Cependant, il est important de garder à l'esprit que la <strong>valeur</strong> utilisée au final est celle donnée aux attributs <code>value</code> des éléments <code><option></code> et non à leur contenu (situé entre la balise ouvrante et la balise fermante) ou à la présence de l'attribut <code>label</code>.</p> <pre class="code"> <code class="html"><datalist id="elements"> <select> <option value="sans label ni contenu"></option> <option value="sans label avec contenu texte">le texte</option> <option value="avec label" label="le label"></option> <option value="avec label et texte" label="le label">le texte</option> </select> </datalist> </code></pre> <p> Si des valeurs différentes sont spécifiées pour deux ou trois de ces possibilités (<code>value</code>, <code>label</code> ou contenu texte), par exemple <code><option value="kro" label="Kronenbourg, la bière">Kronenbourg</option></code> le comportement des navigateurs sera disparate :</p> <ul> <li> Internet Explorer 10+ se comportera de façon correcte,</li> <li> Opera 9+ affichera un maximum d'informations en combinant <code>value</code> et <code>label</code> mais pas le texte contenu,</li> <li> Mozilla Firefox 9+ affichera de préférence le <code>label</code>, puis le contenu texte, puis la valeur figurant dans l'attribut <code>value</code></li> </ul> <p class="center"> </p> <p> <a class="demo" href="/xmedia/tuto/html5/datalist/demo4.html">Démonstration</a></p> <p> Pour les navigateurs ne supportant pas <code><datalist></code>, l'élément <code><select></code> est toujours affiché en dernier recours, mais ses options sont aussi affectées par les précédentes informations, mais avec une meilleure cohérence dans l'interprétation : toutes les options sont affichées de la même façon. Notons aussi que les options ne peuvent être groupées avec <code><optgroup></code> comme dans une liste de choix <code><select></code>.</p> <h4> Autres éléments concernés</h4> <p> La liste de données peut être potentiellement appliquée à d'autres éléments d'entrée, et n'est pas limitée à un <code><input type="text"></code>. Si le navigateur le supporte, elle a pour vocation d'épauler d'autres types, par exemple <code><input type="range"></code>, <span style="color: rgb(118, 151, 18); font-family: monospace; font-size: 14px; "><input type="email" multiple></span> ou <span style="color: rgb(118, 151, 18); font-family: monospace; font-size: 14px; "><input type="url"></span>.</p> <pre class="code"> <code class="html"><label for="lumi">Luminosité</label> <input id="lumi" <strong>type="range"</strong> list="lumidata" min="0" max="100" value="50" step="1"> <datalist id="lumidata"> <option label="Minimum" value="0"> <option label="Maximum" value="100"> </datalist></code></pre> <pre class="code"> <code class="html"><label for="www">Adresse web</label> <input id="www" type="url" list="urldata"> <datalist id="urldata"> <option value="http://www.alsacreations.com/"> <option value="http://www.bing.com/"> <option value="http://www.google.fr/"> <option value="http://www.yahoo.fr/"> </datalist> </code></pre> <div> <a class="demo" href="/xmedia/tuto/html5/datalist/demo5.html">Démonstration</a></div> <p class="center"> </p> <p class="center"> <em>Aperçu sous Opera 11.6</em></p> <h4> Caractère dynamique</h4> <p> Le contenu de l'élément <code><datalist></code> peut être manipulé dynamiquement dans le document, par JavaScript et l'API DOM notamment. Ceci permet d'ajouter ou de supprimer des options à la demande, par exemple en fonction d'un critère local (une case à cocher, une autre condition) ou en fonction du retour d'un appel AJAX avec XMLHttpRequest, voire avec un framework JavaScript tel que jQuery.</p> <h4> Propriétés de l'élément <code><datalist></code></h4> <table class="pagetable"> <tbody> </tbody> <tbody> <tr> <th> Propriété</th> <th> Détails</th> </tr> <tr> <td> Modèles de contenu autorisés</td> <td> Zéro ou plusieurs <code><option></code></td> </tr> <tr> <td> Parents autorisés</td> <td> Tout élément pouvant contenir des éléments de phrasé, à l'exception de <code><a></code> et <code><button></code></td> </tr> <tr> <td> Omission de balise</td> <td> Les balises ouvrantes et fermantes sont obligatoires</td> </tr> </tbody> </table> <h3> Alternatives pour les anciens navigateurs</h3> <p> Cet élément étant présent en dur dans le document HTML, des frameworks JavaScript appropriés (jQuery, Dojo...) ou des scripts spécifiques peuvent aller y piocher les informations pour construire une auto-complétion dynamique.</p> <ul> <li> <a href="http://miketaylr.com/code/datalist.html">jQuery HTML5 datalist plugin</a> par miketaylr.</li> <li> <a href="http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/">Relevant Dropdowns</a> par Chris Coyier.</li> <li> <a href="http://adactio.com/journal/4272/">datalist fallback</a> par adactio.</li> <li> <a href="http://afarkas.github.com/webshim/demos/">Webshims Lib</a> supporte <code>datalist</code> (inclus input[list], input[selectedOption], datalist[options]) par Alexander Farkas.</li> </ul> </article> </main></body></html>

Alsacreations.com - Actualités

CSS3 Grid Layout

Compatibilté navigateurs du module Grid Layout

Le positionnement par grille

Les propriétés usuelles de Grid Layout

Mise en oeuvre

Exemple 1 (affichage de deux blocs sur une ligne) :

Exemple 2 (grille de 4 emplacements) :

Variante : la syntaxe de templates

Exemple 3 (template) :

Les unités de largeur et hauteur

Exemple 4 (illustration de l'unité "fr") :

Centrer les éléments

Exemple 5 (multiples centrages) :

Occuper plusieurs emplacements

Exemple 6 (column span) :

Le pseudo-élément ::grid-cell

Exemple 7 (cellules nommées) :

Les motifs de répétition

Exemple 9 (patterns) :

Vous avez dit "responsive" ?

Exemple 10 (adaptation aux petits écrans) :

Conclusion et usage

Bonnes pratiques CSS: le Web ouvert a besoin de vous

Ne pas refaire l’erreur d’IE6

Pour beaucoup, le Web mobile c’est WebKit et puis c’est tout

En pratique, le problème c’est quoi?

Bon, qu’est-ce qu’on peut faire?

Un peu de méthode

Chrome débarque officiellement sur Android

Pour les développeurs

Initializr

L'élément <mark> pour attirer l'attention

Sortez votre feutre jaune

Usages

Marquer les mots trouvés dans des résultats de recherche

Marquer une portion de texte

Marquer une portion de code source

Marquer le jour actif d'un calendrier

Prise en charge

Propriétés de l'élément

HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Les éléments de section HTML5, une nouvelle façon de penser

Liste récapitulative des éléments de section HTML5

Un cas particulier : Internet Explorer <9

Exemples de documents

Exemple minimal

L'en-tête

Titre de l'article

Modernizr

HTML5 : Éléments <figure> et <figcaption>

Illustration légendée

Élément

Élément

Quelques applications dans le monde du livre

Compatibilité navigateur des éléments et

Applications sur le web

Utilisation sans légende

Une image avec sa légende

Utilisation avancée

Une liste d'images

Un bloc de code

Une vidéo

Les diagrammes et autres graphes dynamiques

Choisir ou ?

-prefix-free

Firefox 10 disponible au téléchargement

HTML5 : structure globale du document

Un document HTML5 minimal

Le doctype

L'élément racine

L'attribut lang (sur )

Les fameux et

Compatibilité navigateur des éléments
et

Choisir
ou
?

L'attribut `lang` (sur )