Osez HTML5 et CSS3 !
Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes.
La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2010 ?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs ?".
Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde.
Article par Raphael (Eleveur de kiwiz, Strasbourg)
Posons le décor
Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont je viens de finir l'intégration, et destiné à servir de passerelle entre mes différentes activités.
Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et 3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...).
Voyons en détails le cheminement et les écueils de cette intégration...
Les Grands Anciens
Rappel historique
Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Le premier d'entre-eux est que CSS3 est toujours en état de brouillon pour une grande partie.
Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres".
En réalité, si l'on tient à se limiter aux normes finalisées, on va devoir se passer de CSS3, mais aussi CSS 2.1 qui ne l'est toujours pas (Statut "CR") et devoir se baser sur une version de CSS 2.0 datant de... 1998.
A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.
Le cas Internet Explorer
Internet Explorer 8, débarqué en janvier 2009 annonce fièrement reconnaître toutes les propriétés CSS2, ce qui n'était pas le cas de son prédécesseur, mais il est encore à la traîne en ce qui concerne CSS3.
Là où le bât blesse, c'est que les anciens IE7 et IE6 - qui ne reconnaissent pas tout CSS2 - sont toujours vigoureux sur de vastes parcs informatiques. On parle encore début 2010 de statistiques comprises entre 10 et 15% d'usage d'Internet Explorer 6.
Vaut-il mieux utiliser des technologies obsolètes (tableaux, frames, float) pour concevoir des sites qui fonctionnent partout même sur IE6, et donc perdre du temps en production pour gérer tous les différents bugs d'affichages ? ...Ou proposer quelque chose de stable (CSS2, CSS3, voire HTML5) sur les navigateurs modernes et des "patchs" (correctifs) uniquement pour les mauvais élèves ?
En ce qui me concerne, j'ai pris la décision récemment de systématiquement privilégier la seconde alternative, que ce soit pour mon site personnel que nous allons décortiquer ici (Goetter.fr), mais aussi pour des sites professionnels. Je vous annonce à ce sujet qu'une nouvelle version du site Alsacreations.fr est en bonne voie.
La problématique est biaisée puisque les intégrateurs ont depuis plusieurs années l'habitude de procéder de la première manière et le passage à la seconde va forcément nécessiter un temps de veille technologique... un peu comme le passage des "tableaux" aux "tableless".
HTML5, la charpente du site
HTML5, bien qu'apportant son lot de nouveautés et d'éléments, se base sur son prédécesseur HTML 4.01 dont il ne change pas radicalement au niveau de la logique et de la structure.
L'article d'introduction à HTML5 de julixyde survole quelques nouveaux éléments que j'ai employés sur mon site personnel.
Doctype
Le Doctype HTML5 s'écrit de la sorte :
<!DOCTYPE html>Voilà, votre document est identifié comme étant en HTML5, il suffit à présent de nous servir des éléments inédits de cette nouvelle version.
Les nouveaux éléments
Parmi les nouveaux éléments apportés par HTML5, j'ai identifié la liste suivante pour la structure de mon site :
- <header> : en-tête de la page
- <nav> : liens de navigation
- <section> : section de contenu
- <figure> : pour regrouper des images et leur description
- <footer> pied de page
La plupart des navigateurs ne reconnaissent pas ces éléments (il seront identifiés comme étant de type "en-ligne" par défaut, ce que l'on peut comparer à un <span>), mais rien ne nous empêche de les utiliser en connaissance de cause en leur appliquant un display approprié (display:block ou autre).
Le hic : Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout.
Concrètement, il suffira d'appeler un script externe dès le début de la page de manière spécifique à IE :
<!--[if IE]><script src="scripts/html5-ie.js"></script><![endif]-->
Le code JavaScript du fichier html5-ie.js étant celui-ci :
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
Ces petites manipulations vous permettent de disposer sans grosse difficultés des principales balises de structures HTML5 dans des pages tout en étant correctement interprétées par l'ensemble des navigateurs courants, y compris anciens. Attention cependant car celles-ci n'auront toutefois aucune valeur sémantique avant que les navigateurs ne les supportent officiellement.
L'attribut "role"
L'attribut "role" a été introduit dans (feu) XHTML2 afin d'ajouter du contexte aux éléments (de la sémantique).
Il est ainsi possible pour les agents utilisateurs et pour les applications accessibles riches (ARIA) d'exploiter ces informations complémentaires.
HTML5 définit une liste de valeurs pour l'attribut "role". Les principales étant :
- main : définit le contenu principal d'un document
- secondary : représente une section unique et secondaire du document, tel que l'heure, la météo ou autre module de ce genre
- navigation : définit le menu de navigation du document. Typique de liens vers d'autres pages du site ou vers d'autres endroits de la page
- banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...
- contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...
- definition : représente la définition d'un élément
- note : correspond à une note entre parenthèse ou de bas de page
- seealso : indique que l'élément contient des données contextuelles au contenu principal de la page
- search : la section de recherche d'une page. Typiquement un formulaire de recherche
(Source W3C traduit par ma pomme)
Notez enfin que le Validateur HTML du W3C permet d'ores-et-déjà de valider du code HTML5 sans réglages particuliers à apporter.
La charpente HTML étant formée, passons à des choses plus excitantes et périlleuses encore : l'application de mises en forme modernes à notre document à l'aide des récentes innovations des feuilles de style CSS3.
Styles CSS2 et CSS3 pour la mise en forme
L'écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents. L'année 2010 verra certainement nos habitudes changées par les nouvelles possibilités offertes.
Vous pourrez constater l'état d'avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work.
Polices exotiques
Abandonnée en CSS2, la propriété @font-face réintégrée à CSS3 permet d'afficher une police exotique embarquée sur le serveur.
Avant toute utilisation de police non standard sur votre site web, prenez garde à deux points essentiels :
- Comme toute œuvre artistique, une fonte est soumise à des droits d'auteurs. Peu sont libres de droits;
- L'ensemble du fichier est téléchargé même si vous n'utilisez que quelques caractères. Certaines fontes pèsent plus de 1Mo et vont considérablement ralentir l'affichage de votre document.
Les navigateurs modernes tels qu'Opera 10, Firefox 3.5, Safari 3 et Chrome 4 reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu'un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE.
Fort heureusement, de plus en plus d'outils proposent de vous prémâcher le travail, c'est le cas de Font-Face Generator de Font Squirrel.
Dans le cas de Goetter.fr, la fonte utilisée est "Hit The Road", une police libre et gratuite de 9 Ko réalisée par Matthew Welch.
Une fois vos fichiers convertis à l'aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte :
Version pour tout le monde, incluant uniquement la version truetype .ttf :
@font-face {
font-family: 'NewRegular';
src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}
Version prévue dans la feuille de style dédiée à Internet Explorer à l'aide de commentaires conditionnels, incluant la version .eot :
@font-face {
font-family: 'NewRegular';
src: url('fonts/HITROAD.eot');
}
Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple :
h1 {
font-family: "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
}
Sachez qu'Internet Explorer télécharge les deux fichiers de police (.eot et .ttf) et non pas seulement celui qui le concerne ! Soyez donc doublement vigilants quant au poids de vos fontes.
Une des solutions pour éviter ce problème serait d'appeler la police classique .ttf à l'aide d'un commentaire conditionnel excluant Explorer, tel que <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->.
Ombrages sur le texte et les boîtes
La propriété CSS3 box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML et la propriété text-shadow crée une ombre autour des textes.
A l'heure actuelle, seuls les navigateurs basés sur les moteurs Gecko (Mozilla Firefox 3.1+) et sur Webkit (Safari, Chrome) reconnaissent la propriété box-shadow. En pratique, la propriété doit être préfixée par -moz- pour Gecko ou -webkit- pour Webkit pour fonctionner sur ces navigateurs. box-shadow devient donc -moz-box-shadow et -webkit-box-shadow.
Dans le cas de Goetter.fr, les ombrages ont été employés sur le texte du logo "Raphaël Goetter", sur les quatre figures ainsi que sur les vignettes des images issues de Flickr.
Voici les règles CSS appliquées pour créer un halo autour des figures :
#content figure {
-moz-box-shadow: 1px 1px 13px #999;
-webkit-box-shadow: 1px 1px 13px #999;
box-shadow: 1px 1px 13px #999;
}
Et voici ce qui a été mis en œuvre pour le texte du logo :
h1 {
text-shadow: 0px 0px 5px #fff;
}
Ces propriétés non reconnues par Internet Explorer pourraient être simulées à l'aide de filtres propriétaires. Cependant, le résultat n'est pas toujours très esthétique et c'est pourquoi j'ai fait le choix de ne pas offrir d'alternative sur ce navigateur.
Plus d'informations sur ces propriétés (et leur compatibilité) dans un article sur les ombrages (box-shadox et text-shadox) qui y est consacré.
Coins arrondis
La propriété CSS3 border-radius accomplit le rêve ancestral du webdesigner de pouvoir créer facilement des coins arrondis sans images dans ses pages web.
Comme pour les ombrages, cette propriété est reconnue par tous les navigateurs récents (y compris Opera 10.5)... sauf Internet Explorer (y compris IE8), et là aussi des préfixes sont de mise. Border-radius devient donc -moz-border-radius sur Firefox et -webkit-border-radius sur Webkit.
J'ai appliqué des coins arrondis à plusieurs éléments de la page, notamment les liens de navigation au survol, les quatre figures, les images Flickr et les liens de réseau sociaux du pied de page.
Pour tous ces éléments, la syntaxe fut la même, par exemple :
header nav a:hover, header nav a:focus {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
Afin de conserver cette fonctionnalité sur Internet Explorer, il a été nécessaire de recourir à un petit script JavaScript de 8ko : Roundies.js. J'en explique le mécanisme et la mise en oeuvre dans le tutoriel nommé "Créer des coins arrondis en CSS et sans images".
Ce petit stratagème léger, uniquement appliqué à IE permet d'obtenir des coins arrondis aux différents éléments de la page sans l'apport l'images.
Transparence
Jouer sur la transparence est possible sans avoir recours à des formats d'images tels que le PNG transparent, non reconnu par IE6 nativement. Il suffit pour cela d'adopter l'écriture RGBa telle que nous la décrivons en détail dans le tutoriel "La transparence de couleur avec RGBa en CSS3".
Sur Goetter.fr, les valeurs de transparence ont été appliquées sur les liens de navigation au survol ainsi que sur les bordures des quatre figures principales.
Pour ces éléments, la syntaxe employée fut, par exemple :
#content figure {
background: rgba(255,255,255,0.2);
border: 12px solid rgba(255,255,255,0.2);
}
Comme prévu, la plupart des navigateurs prennent en charge cette valeur de transparence... à l'exception d'Internet Explorer, IE8 compris. Pour ce navigateur, il est possible de se rabattre sur le filtre propriétaire "Gradient" afin d'émuler partiellement cette propriété (voir article sus-cité).
Le souci est que ce filtre n'est pas compatible avec les autres effets appliqués à l'élément : il faut donc faire un choix entre la transparence, les ombrages ou les coins arrondis. En ce qui me concerne, j'ai fait le choix de conserver les arrondis sur IE.
Positionnement "avancé"
A l'heure où le positionnement flottant est devenu la principale solution de positionnement hors-flux, le moment est venu d'explorer d'autres voies.
Tout simplement parce que la propriété float n'a pas été conçue originellement pour positionner des blocs tel que nous le concevons actuellement, mais aussi en raison des nombreux bugs d'interprétation de certains navigateurs.
Il y a plusieurs mois déjà, Benjamin De Cock nous a concocté un excellent article permettant de découvrir la "Mise en page avancée grâce à la propriété Display".
Quelques techniques évoquées dans cet article deviennent à présent utilisables en production, notamment la valeur inline-block de la propriété display. Cette valeur offrant les avantages des deux mondes : permettre aux éléments de s'afficher les uns à côté des autres (tels des "inline") tout en leur attribuant des dimensions (tels des "block").
Ce type de positionnement "avancé" a été choisi pour les éléments suivants :
- Le logo (titre <h1>) : afin de permettre au menu (lui aussi en ligne) de demeurer sur la même ligne
- Les titres de niveau 2 dans les pages de contenu ("à propos", "contact") : pour éviter qu'ils n'occupent automatiquement toute la largeur
#content section.presentation h2, #content section.contact h2 {
display: inline-block;
}
Puisque tout n'est pas rose, signalons quand-même que display: inline-block n'est pas reconnu par les versions inférieures à Firefox 3.0, ni sur Internet Explorer pour les éléments HTML nativement de type "block". Pour ce dernier, il faut ruser en appliquant des styles spécifiques
#content section.presentation h2, #content section.contact h2 {
display: inline; /* Passage de block à élément inline */
zoom:1; /* Attribution du layout à l'élément */
}
Pour les versions de Firefox inférieures à FF3.0, il est nécessaire de recourir à la syntaxe propriétaire -moz-inline-stack dont le principe et l'application sont détaillés dans un article de Florent Verschelde :"Inline-block dans tous les navigateurs modernes?".
Rotation
Les propriétés de Transformation CSS3 sont reconnues sur Firefox à partir de la version 3.5, sur Webkit (Chrome 1+, Safari 4+) et sur Opera à partir de la version 10.5
A condition de ne pas tomber dans l'excès, elles permettent d'offrir de petits agréments visuels sur les navigateurs récents. J'ai choisi de les employer dans les liens de mon pied de page : la liste des réseaux sociaux et les liens vers les deux sites d'Alsacréations : au survol, les images se tournent selon un angle de 8 degrés.
footer nav a:hover {
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
}
Conclusion
Ne nous leurrons pas : à l'heure actuelle, un certain nombre de dispositions doivent être prises avant d'intégrer les fonctionnalités nouvelles proposées sur cette page.
Si vous n'aviez à retenir que l'essentiel, ce serait :
- HTML5, même à l'état de brouillon, est déjà parfaitement utilisable en production (avec une astuce pour IE), sous réserve d'éviter les balises encore "conflictuelles" telles que
<canvas>,<audio>et<video>. inline-block, c'est bien, utile, et ça marche... là aussi sous certaines conditions.- Les effets CSS3 nécessitent tous (et pour un certain temps encore) de prendre en compte le "cas Internet Explorer". Des alternatives existent en JavaScript, mais à un moment il faut faire un choix car on ne pourra pas obtenir un équivalent "au pixel près".
Résultat sur différents navigateurs
Voici le résultat obtenu sur différents navigateurs courants actuellement :
Bonus : message d'avertissement pour IE6
Cette partie bonus ne fera pas plaisir à tout le monde, notamment certains modérateurs, mais s'il est un combat que je tiens à mener c'est celui de tout faire pour prévenir les internautes qu'Internet Explorer 6 est une antiquité obsolète et, surtout, peu sécurisée.
Pour ce faire, j'ai pour habitude d'afficher un bandeau contenant message d'avertissement en haut de mes sites web. A l'aide d'un commentaire conditionnel réservé à IE6, vous pouvez très facilement cibler ce navigateur et lui adresser un code HTML dédié :
<!--[if lte IE 6]>
<div class="alert-ie6">
Ici votre message d'avertissement pour IE6 le préhistorique
</div>
<![endif]-->
N'hésitez pas à consulter le code source HTML de Goetter.fr pour vous inspirer du message d'avertissement proposé.
Commentaires
# Le 2010-01-27 15:20:03, speedlab a dit
Merci Raphael pour cet article résumant l'utilisable et le reste :)
Y'a plus qu'à, comme dirait l'autre!
# Le 2010-01-27 15:41:07, MoOx a dit
Mes deux prochaines projets (qui vont voir le jour sous peu) utilisent HTML5/CSS3.
Comme le dit dew, "Osons !"
# Le 2010-01-27 17:20:26, yep a dit
Certains liens ne sont pas stylés lors du focus ce qui parasite la navigation (d'autant que l'information de droite est proposée, au clavier, avant celle de gauche). Sinon vraiment sympa le design (et la technique).
# Le 2010-01-27 17:45:30, Raphael a dit
@yep : En effet, je viens de corriger cet aspect que je considérais - à tort - comme secondaire. Merci
# Le 2010-01-28 11:12:13, Simon-K a dit
Bravo Raphaël ! Voilà un Homme qui ose des choses... Même à se laisser faire caricaturer et à accepter un design qui a un peu d'audace. On recommence quand ? ;)
# Le 2010-01-28 11:32:16, LittleMowgli a dit
Concernant les coins arrondis, il existe une solution que j'ai découvert récemment, cross-browser (IE7 et 8 compris), qui n'utilise pas javascript, et qui fonctionne à merveille : http://www.htmlremix.com/css/curved-corner-bo...
Je ne sais pas encore si cette solution est parfaitement accessible, mais en tout cas, elle évite javascript ;)
# Le 2010-01-28 11:35:35, Raphael a dit
@LittleMowgli : les liens internes de HTMLremix tombent sur des 404.
Et à ma connaissance, les .htc se basent sur JavaScript, non ? Faudrait que je me renseigne, en tout cas ce sont des grosses usines à gaz dans mes souvenirs.
# Le 2010-01-28 11:47:25, LittleMowgli a dit
Ooops, désolé pour le double commentaire... et re-oops parce que j'ai parlé trop vite, concernant le HTC.. qui est bien basé sur du Js :/ Cela dit, le script proposé par HTMLRemix fonctionne sans souci, et ne pose pas de problème de compatibilité ;)
# Le 2010-01-28 11:47:32, Aerandir a dit
Par contre, la rotation des images au survol pixelise l'image, ce qui rend l'effet assez désagréable (ubuntu 9.04, Firefox 3.5.7)
Sinon intéressant, même si je trouve que les résultats sont assez différents sur chaque navigateur ce qui rend l'utilisation HTML5/CSS3 un peu difficile sur des sites de prod avec un nombre important de visites.
Bravo tout de même !
PS : J'adore le bandeau IE6
# Le 2010-01-28 12:07:12, Jeepi a dit
Article vraiment très intéressant. Je vais réellement envisager de réaliser mon prochain site avec HTML5 / CSS3.
Par contre j'ai personnellement peur qu'il faille encore attendre des années lumières avant qu'IE ne se décide à passer à HTML5 / CSS3…
Connaissez-vous également des développeur autour de vous qui envisage de passer à ces 2 technologies ? ou à l'inverse, des personnes réfractaires ?
# Le 2010-01-28 12:38:54, Freddy03h a dit
Si vous faites un site internet moins "IE-conciliant", j'ai créer un plugin jQuery un peu plus incitatif et proposant plus d'alternatives : http://jquery-chromeframe.harris-freddy.com/
# Le 2010-01-28 13:47:21, Ladytron a dit
"Osons, osons !"
Il FAUT oser ^^ en particulier CSS3, et tant pis pour eux si les utilisateurs ne suivent pas les conseils qu'on leur donne à l'écran ;)
Je suis en train de maquette un site actuellement, et CSS3 sera pas mal utilisé. Joli sur FF3.6/Safari4/Chrome3-4 et Opera 10.5 (sans certaines limites), un peu moins sur IE8. IE 7 et précédents ne seront pas supportés.
Pour HTML5, par contre, heu... Il faut encore que j'expérimente pour me mettre à jour :s
Bravo à Raphaël, en tout cas ! ;) Ton "pari" d'un site HTML5/CSS3 était audacieux, et tu l'as relevé.
# Le 2010-01-28 14:07:19, octopus984 a dit
Beau travail !
Je m'interroge cependant sur l'utilisation (sur ton site au moins, mais de manière générale) de l'attribut role="navigation" de la balise <nav> : l'information est à mon avis redondante.
Mais je comprends que pour des soucis de compatibilité logicielle les deux informations puissent être nécessaires.
# Le 2010-01-28 14:55:17, Skoua a dit
Personnellement j'ai un peu "forcé" mon plus gros client à accepter que j'utilise du CSS3. C'était assez facile du fait que toute sa boite est sous mac et donc n'utilise que Safari et FF pour valider les travaux, n'empêche que quand on présente ça directement au client ça passe parfois.
J'ai aussi une template en production que je vais utiliser sur un grand nombre de sites différents utilisant CSS3, là je suis assez impliqué dans le projet pour décider tout seul.
Je conseille à tout le monde d'imposer légèrement la chose aux clients et ce système deviendra vite quelque chose d'utilisé globalement.
Merci à Raphael pour ce superbe article sur lequel je me baserai pour mes intégrations futures. Je n'avais pas encore fais le pas d'utiliser HTML5 mais je pense que c'est l'occasion de s'y mettre et d'oublier xHTML 1 qui est, d'après les puristes, "foireux" si on ne sert pas la chose en xml.
Un petit détail qui manque : il aurait été utile de parler des polices WOFF même si je crois que tous les navigateurs modernes n'intègrent pas encore cette fonctionnalité.
Le futur du web s'avère prometteur en tout cas. :)
# Le 2010-01-28 15:05:06, Sventovit a dit
Moi je m'interroge aussi sur pas mal de balises (figure, dialog et legend).
Dans un design pourrave j'ai fait un blog en HTML5 où je m'interroge aussi sur la manière de bien structurer sa page en HTML5 pour le référencement.
Si ça intéresse c'est par là : http://on-air.hiseo.fr/html5/html5-ameliorer-...
# Le 2010-01-28 15:45:50, ivanovic a dit
Il s'agit d'un attribut ARIA pour l'accessibilité : http://www.paciellogroup.com/blog/?p=106
# Le 2010-01-28 16:14:52, Sventovit a dit
@Raphaël [pour goetter.fr] :
Sous Opera il y a un problème avec les caractères accentués (que signale la passage au banc d'ailleurs).
Comme j'avais eu le problème, je l'ai réglé ainsi :
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
# Le 2010-01-28 17:08:24, Pec a dit
Bonjour,
Je suis un nouvel inscrit mais ça fait longtemps que je lis les articles sur ce site :)
en surfant je suis tombé sur ça ^^
http://www.footerama.com/2010/01/goetter-fr/
Le principal intéressé était-il au courant?
# Le 2010-01-29 00:35:51, dj DMSR a dit
Bravo Raphael!
Manque ARIA (les landmarks ce n'est qu'une infime partie, la navigation clavier est un gros morceau par ex!) et le tour des nouvelles technos serait complet.
On peut aussi injecter des microformats... Google vient d'annoncer le support de hevent (après hreview, hproduct, vcard) et va ouvrir son moteur social (rel="me", xfn)
Du côté du futur il y aussi le référencement des sites en AJAX, là aussi Google a fait des annonces...
Vivement que tout ça se généralise...
# Le 2010-01-29 09:58:24, BeliG a dit
Well done !
Mais comme octopus984, j'ai un peu de mal avec l'attribut "role" :
- <header> / banner
- <nav> / navigation
- <article> / main
- ...
Intérêt des doublons ?
# Le 2010-01-29 15:33:25, jpvincent a dit
je pense que les doublons de type <nav role="navigation" viennent du fait que ARIA n'est pas HTML5. ARIA est principalement destiné aux lecteurs d'écrans.
En lisant les specs, certains balises et roles se recoupent, mais il y en a moins d'une dizaine.
J'imagine que les lecteurs d'écran comme les moteurs de recherche et autres robots vont de toute façon implémenter l'un et l'autre standard pour s'aider à trouver les sections d'une page, donc que l'on choisisse l'une ou l'autre technique ou les 2 devrait de toute façon bénéficier à tout le monde.
Concernant les microformats, ils vont plus loins que HTML5 et ARIA réunis, ils ne devraient donc pas devenir inutile
# Le 2010-01-29 17:03:31, Sventovit a dit
@ Raphael
You are welcome.
Parmi mes interrogations (et il y en a plein) y'en a 2 qui me titillent sévèrement.
Elles concernent l'accessibilité pour les balises video et img.
Je viens de poster 2 billets bien énervés à ce propos :
Sur l'absence d'obligation de l'attribut alt :
http://on-air.hiseo.fr/html5/html5-attribut-a...
Et la balise video où c'est pas mieux :
http://on-air.hiseo.fr/html5/html5-attribut-a...
NB : je n'ai pas du tout l'intention de spammer mais la discussion ici s'enrichit et j'aimerai bien avoir vos feedbacks.
# Le 2010-01-29 17:04:21, Sventovit a dit
Oups ! 1 000 excuses pour lien sur la video : http://on-air.hiseo.fr/html5/html5-balise-vid...
# Le 2010-01-29 17:22:32, Pandore a dit
@Raphaël
"Le hic : Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout."
Si je comprends bien, si JavaScript est désactivé pour une raison ou pour une autre, le visiteur qui navigue sur un butineur Internet Explorer "a droit" à une jolie page blanche ? ça fait peur quand même.
Sinon très bon article sur le sujet. :D
@Skoua
"Personnellement j'ai un peu "forcé" mon plus gros client à accepter que j'utilise du CSS3. C'était assez facile du fait que toute sa boite est sous mac et donc n'utilise que Safari et FF pour valider les travaux, n'empêche que quand on présente ça directement au client ça passe parfois."
Juste pour savoir. Le client savait-il que l'affichage serait différent sur IE ? Le client savait-il qu'IE est encore à l'heure actuelle le navigateur dominant sur le marché ? Ou tu as passé "ces détails" à la trappe pour faire passer ton projet ?
# Le 2010-01-29 17:22:47, teddyalbina a dit
Concernant l'histoire du .eot, le problème n'est pas que IE ne supporte pas les .ttf etant donné que c'est comme ça que la base @font-face était prévue par MS dans IE5. Seulement Adobe et les autres concepteurs de font ne sont pas d'accord pour que les polices soient utilisées dans leur format "classique" sur le web, pour des raisons de licences.
Du coup MS c'est réuni avec les industrels de la "font", et ils ont créé le formet EOT. En fait, EOT permet d'éviter l'ensemble des problèmes juridiques se posant en utilisant des fonts propriétaires.
D'ailleurs le Embedded Open Type est en cours de normalisation au W3C mais Opéra bloque son adoption depuis longtemps, au prétexte que le formet est trop sécurisé...
En gros CSS3 c'est bien mais des problèmes de licences vont se poser et EOT permet de s'en affranchir en gros nous sommes dans la mer**
# Le 2010-01-29 17:37:28, Skoua a dit
@Pandore : Non bien sûr qu'il le savait. Je lui ai juste expliqué que les bords arrondis seraient carrés et les drop-shadow ne s'afficheraient pas, encore qu'avec les bords arrondis on peut gérer ça via js.
Bien sûr il faut des clients un peu compréhensibles mais c'est parfois gérables, d'autres n'auraient jamais accepté cette idée c'est sûr.
# Le 2010-01-30 16:43:26, Lenezir a dit
Merci pour tous ces conseils, le rendu est vraiment sympa !
J'aimerais beaucoup arriver à faire un arrière-plan comme le tien Raphaël, tu aurais des conseils et/ou des sites à donner à un débutant ? :D
Merci. :p
# Le 2010-01-30 21:07:02, Raphael a dit
@Lenezir : celui-ci est une production maison, made in alsacreations;fr il faut demander à notre graphiste Simon ;)
# Le 2010-02-01 16:25:19, Ericf a dit
Salut à tous,
Merci, c'est un article intéressant, comme vous avez l'habitude d'en publier.
Mais je relève 1 incohérence : tu qualifies float de "technologie obsolète" (à mon sens, à tort), et pourtant tu l'utilises.
Pourquoi ?
Sauf erreur de ma part, float n'est pas déprécié, et encore moins supprimé, de CSS3, et a encore de beaux jours à vivre.
# Le 2010-02-01 16:34:01, Raphael a dit
@Ericf : oui, "obsolète" est un peu fort comme terme. Mais je l'assume.
Float n'a pas été créé à l'origine pour positionner les blocs comme on le fait actuellement dans nos gabarits, mais pour flotter une image dans un contenu (je schématise volontairement).
Nous l'utilisons tous aujourd'hui comme nous utilisions précédemment les tableaux HTML : ça marche plus ou moins partout (plutôt moins que plus en ce qui concerne float), mais ce n'est pas vraiment fait pour ça (là aussi je schématise).
Des solutions adaptées (sans sortir du flux) existent depuis longtemps mais ne sont pas encore bien supportées... mais on y arrive petit à petit.
# Le 2010-02-01 23:36:20, trasher a dit
Super article, mille mercis Raphael de nous faire profiter de tout cela :-)
# Le 2010-02-02 11:00:48, gabychapy a dit
Merci pour cette article rédigé de manière très efficace et qui permet d'y voir plus clair. Je demande l'avis des professionnels : faut-il commencer à l'enseigner aux étudiants ? (étudiants niveaux DUT et Licence pro). J'ai le sentiment que HTML5 et CCS3 s'approprient le marché de manière nettement plus rapide que l'a fait XHTML.
# Le 2010-02-02 11:11:42, Raphael a dit
@gabychapy : HTML5 et CSS3 (pour une grande partie) sont encore à l'état de brouillon.
Donc pour un enseignement, je dirais qu'il vaut mieux éviter de se baser sur ces technologies... mais cela n'empêche pas de les évoquer, au contraire.
# Le 2010-02-02 11:31:39, gabychapy a dit
Merci pour cette confirmation. C'est pas évident d'avoir un enseignement totalement en prise avec la réalité professionnelle ! Je reste donc en mode : veille HTML5 / CSS3.
Pour info : tes mémentos XHTML et CSS font partie des "manuels" obligatoires en cours d'intégration web :-)
# Le 2010-02-02 12:25:16, SweedyMick a dit
Merci pour cette petite piqûre de rappel sur les principales nouvelles balises de HTML5 et des propriétés de CSS3.
Cependant, bien que je sois personnellement très à même par tout ce qui est "cutting edge" (à la pointe), je ne recommanderais pas l'utilisation de CSS3, malgré le fait que ça apporte une très grande souplesse (telles les ombres sur les boîtes, plutôt que d'utiliser de très peu pratiques images de fond). Il faut tout de même dire préciser qu'aucun des éléments de CSS3 n'est pas encore défini comme une recommendation par le W3, il s'agit au mieux de "Candidate Recommendation" et au pire de "Working Draft" (cf. http://www.w3.org/Style/CSS/current-work).
D'où les balises pas du tout standard du type "-moz-* -webkit-* et -o-* ). Même si globalement la recommendation finale sera très proche, utiliser de telles balises se rapproche du fait d'utiliser en production de version bêta.
J'utilise avec parcimonie ces balises malgré tout, ou tout au moins pour faire des maquettes que j'adapte ensuite en CSS2. Et comme vous l'avez fait, mieux vaut ajouter la balise standard (ex: box-shadow, en plus de -moz-box-shadow et consorts) pour le jour où tout ça deviendra officiel.
# Le 2010-02-02 19:48:57, JackNUMBER a dit
Avec un peu de retard, merci beaucoup pour cette présentation détaillée de ces 2 langages.
# Le 2010-02-03 11:14:38, Hart a dit
Je suis le seul a être étonné par ce doctype ?
Comment évoluera-t-il donc avec les prochaines versions ? et il n'y a plus de DTD ?
Selon toutes vraisemblances, ce doctype n'en est pas un.
# Le 2010-02-03 15:15:44, SuperFrigo a dit
Suis-je le seul a ne pas pouvoir sélectionner directement via css3 les nouvelle balises de mises en forme d'html 5? (header, nav, section, article, footer)
les sélecteurs css se basant dessus (exemple : nav a) ne posent pas problème du moment que la balise finale sélectionnée n'est pas un des éléments suscités.
Quelqu'un d'autre rencontre-t-il ce problème ? Ais-je loupé quelque chose ? Ce problème n'en est peut-être pas un ?
# Le 2010-02-03 15:16:59, SuperFrigo a dit
Suis-je le seul a ne pas pouvoir sélectionner directement via css3 les nouvelle balises de mises en forme d'html 5? (header, nav, section, article, footer)
les sélecteurs css se basant dessus (exemple : nav a) ne posent pas problème du moment que la balise finale sélectionnée n'est pas un des éléments suscités.
Quelqu'un d'autre rencontre-t-il ce problème ? Ais-je loupé quelque chose ? Ce problème n'en est peut-être pas un ?
# Le 2010-02-04 06:00:25, Entuaka a dit
SuperFrigo : Tu as pensé à ça :
" article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {
display: block;
} "
C'est peut-être ça ?
# Le 2010-02-04 11:42:20, SuperFrigo a dit
problème résolu, j'étais sous firefox 3.5.9.7
==> Flagellez moi
# Le 2010-02-04 17:41:48, sof1 a dit
Bonjour et merci pour cet article détaillé avec mise en pratique.
Il me semble qu'il y a un bug sur web-kit quand un même élément à une position:fixed et un -webkit-transform: rotate(xdeg);
Le fixed de l'élément n'est plus pris en compte. Des idées de solutions ?
# Le 2010-02-06 12:26:14, Mani a dit
Excellent j'aime bcp j'ai aussi tester un peut le css3 sur mon site, mais ton rendu est bcp mieux !
# Le 2010-02-08 15:54:43, Bluug a dit
Je ne sais pas si ça a été remarqué, mais le display: inline-block entraine une "marge" de quelques pixels entre chaque éléments.
Un peu perturbant si on veut coller les éléments, alors que le float marche parfaitement du coup :B
# Le 2010-02-08 15:58:17, Raphael a dit
@Bluug : oui et c'est normal. Les inline-blocks sont considérés comme des inline, donc se comportent comme des mots de texte : s'il y a un espace entre 2 mots, celui-ci sera visible.
La solution est de "coller" les éléments dans le HTML.
# Le 2010-02-08 17:47:57, Changaco a dit
L'incapacité de SGML (et par conséquent de XML/HTML) à distinguer contenu et indentation est un de ses grands défauts. Bizarrement il n'y a jamais personne pour en parler…
# Le 2010-02-08 18:15:35, jpvincent a dit
Bon ce post et un autre m'ont montré qu'il était non seulement possible mais assez facile de passer un site de production en HTML5.
ce que j'ai fait il y a une semaine :
http://jpv.typepad.com/blog/2010/02/migrer-un...
en gros j'ai utilisé les nouvelles balises HTML5 + ARIA pour la sémantique du layout. Je déploierais les rôles ARIA + compliqués plus tard (barre de progression par exemple)
j'ai fait l'impasse sur CSS3, et j'ai utilisé les nouvelles options HTML5 pour les formulaires.
pas sur que ça donne à ce site un gros boost sur le référencement du jour au lendemain, mais au moins la partie introduction HTML5 est bordée et ça ouvre le chemin pour la suite
# Le 2010-02-08 21:13:29, Ninik a dit
Merci de m'avoir donné le truc du message pour Internet Explorer 6! J'essayais de trouver une façon efficace et polie de dire aux utilisateurs de IE6 de trouver un navigateur plus récent. :) Merci encore! Cela m'est très utile maintenant!
# Le 2010-02-09 16:42:57, ste a dit
Je viens de lire cet article. J'avoue que je me suis régalé.
Par contre, j'ai essayé d'appliquer la technique du @font-face pour IE en transformant sous Linux une police donnée ... sous Windows, le navigateur IE informe qu'il ne reconnaît pas le format eot ...
Si c'est possible d'avoir plus d'infos, je suis preneur ;-)
# Le 2010-02-09 17:52:47, ste a dit
@ste : Beh, en fait, je viens d'y arriver, mais en faisant légèrement différement :
@font-face {
font-family: "Ma Police";
src: url('font/mp.eot');
src: local('Ma Police'), url('font/mp.TTF') format('truetype');
}
C'est-à-dire qu'en premier, je déclare la source pour la version eot, que reconnaît IE, et en second l'autre. À-priori, vu qu'elle commence par la définition 'local', IE ne reconnaît pas la seconde source, donc il ne restitue pas celle-ci.
# Le 2010-02-12 12:21:05, antiplastik a dit
Comme Pandore, ça me chagrine, cette dépendance à Javascript pour l'affichage dans IE8... Je préférerais un script côté serveur qui transforme les balises HTML5 en <div> bien reconnus : il suffirait d'identifier le navigateur (en PHP: $_SERVER['HTTP_USER_AGENT']) et de passer la page dans une moulinette XSLT.
# Le 2010-02-12 12:45:35, Changaco a dit
Personnellement je suis pour ne jamais se servir de USER_AGENT en tant que développeur, et ne jamais en envoyer en tant qu'utilisateur, d'ailleurs Alsacréations se vautre bien quand on n'en envoie pas:
http://imagebin.ca/view/oUf8fqXs.html
# Le 2010-02-15 11:15:23, Bluug a dit
Après avoir testé plusieurs nouveautés, j'ai eu quelques soucis.
Alors la compatibilité IE marche nickel pour les balises, les font-face aussi.
Par contre sous Safari ( Mac ) je n'ai pas mon contour arrondis, alors que sous Chrome si... assez bizarre :/
D'ailleurs vous ne dites pas si on doit encore utiliser des div, vu que les balsies <section> sont apparues ?
En tout cas l'article m'a permis de mieux comprendre les possibilités : )
# Le 2010-02-16 11:51:17, jpvincent a dit
@Bluug : SECTION a exactement la même valeur sémantique que DIV, c'est à dire qu'elle n'en a pas de particulière.
dans l'implémentation que j'ai faite en prod, j'ai décidé arbitrairement de garder les DIV pour le markup qui me sert à la présentation (système de grille CSS, coins arrondis) et de passer à SECTION pour remplacer les DIV qui entourent directement le contenu (et qui n'ont pas de balise + spécifique comme ARTICLE OU ASIDE). D'ailleurs en général ça correspond à un rôle ARIA (main, secondary ...)
si vous voyez d'autres manières de faire pour DIV vs SECTION ...
# Le 2010-02-16 17:48:40, Bluug a dit
jpvincent> d'accord .
Par contre un truc me gêne, disons que pour IE, on dépend un peu du Javascript.
Ce n'est pas un peu un problème ? Disons que logiquement la majorité des gens a javascript avec leur navigateur, mais on m'a toujours appris d'éviter de dépendre de Javascript dans la navigation.
Après je conçois que le html5, pour le faire comprendre à IE, on a besoin du Javascript....
Et j'ai eu beau cherché, je n'ai pas trouvé d'article sur tout ça :/
# Le 2010-02-22 11:55:42, Sventovit a dit
Suivez... suivez JPVincent : c'est le meilleur.
Pour le pire c'est chez moi.
Enfin plus tout à fait car mon ancien gabarit étant torcheculaire un nouveau est arrivé :
http://on-air.hiseo.fr/fatras/le-nouveau-gaba...
Et que si vous me dites que ça passe pas eh bien c'est que j'ai tout faux encore.
# Le 2010-02-25 09:27:32, Nico3333fr a dit
Je te poserai la même question qu'à d'autres : si quelqu'un sous IE désactive Javascript... adieu HTML 5 ?
# Le 2010-02-25 10:07:01, Raphael a dit
@Nico3333fr : J'ai presque envie de dire que oui. Sauf sur IE9 :)
# Le 2010-02-25 10:58:59, Nico3333fr a dit
IE 9, dééééééééééépêêêêêêêêêêêêêêêêêêêêêêche toi ! :)
En fait, il faudrait connaître la proportion d'IE sans Javascript... m'est d'avis qu'elle ne doit pas être énorme, mais pour être franc, je préfère être prudent avant de trop m'avancer...
Laisser un commentaire
Vous devez être inscrit et identifié pour utiliser cette fonction.
Vous identifier
Inscription
Être enregistré sur Alsacréations vous permet de participer à la communauté, de partager votre profil, de laisser des commentaires sur les actualités, mais aussi de proposer vous-même des actualités, des astuces et bien d'autres choses.
Simple et rapide, vous recevrez votre mot de passe par e-mail, c'est pourquoi indiquez un e-mail valide :
# Le 2010-01-27 14:56:26, dew a dit
Osons ! Osons ! Osons !