HTML5 et CSS3 arrivent à grand pas, il est temps de s’y mettre sérieusement. En fait si vous avez un téléphone Android ou un iPhone dans la poche, vous avez déjà un appareil tout à fait capable d’utiliser ces nouvelles spécifications. Mais concernant les navigateurs un peu plus ancien, où en sommes-nous vraiment ?
Internet Explorer 6 est mort depuis des années
Si votre DSI vous impose encore l’usage de cette bouse de pseudo-navigateur, envoyez-lui un faire-part lui annonçant que son précieux est mort depuis 10 ans. IE6 est sorti en août 2001. IE8 date de mars 2009 et c’est le premier navigateur utilisé. IE9 est disponible en Release Candidate au moment où j’écris ces lignes.
Concernant les parts de marché des navigateurs webs, le leader en cette début d’année 2011 est Internet Explorer 8 avec 34.17%, puis Firefox 3.6 avec 18.55% et en 3ème position notre bon vieux Internet Explorer 6 avec seulement 11.43% de part de marché. Vous trouverez d’autres chiffres sur le site de Net MarketShare.
Regardons plutôt vers l’avenir et vers ce qu’il est possible d’utiliser dès maintenant sur beaucoup de navigateurs. Croyez-moi, il est temps de se mettre à niveau si vous n’avez jamais touché une balise HTML de votre vie.
Le mythe du Web Designer
Dans la communauté Java, les développeurs imaginent parfois qu’ils vont travailler avec des « Web Designers« . Un jour, quelqu’un leur a expliqué qu’il fallait qu’ils fassent la partie « serveur » et qu’un gars allait faire la partie Web.
Hé les gars… on s’est moqué de vous… c’était une blague… comme le papa Noël, il faut arrêter d’y croire.
C’est culturel et je vais expliquer pourquoi. Il y a quelques années, les développeurs d’application de gestion utilisaient des clients lourds. Or lorsque vous développez en C/C++ avec Qt ou en Java avec Swing, vous êtes habitué à utiliser des composants. La création d’une interface utilisateur n’est pas un souci. Cela fait 20 ans que nous sommes capables de construire des applications de gestion sans soucis.
Le problème s’est posé lorsque nous avons dû commencer à faire du Web. Plus exactement, du client riche (RIA si vous voulez vous la raconter). Or le Web est un milieu bien plus jeune et en constante évolution, là où du côté du client lourd nous étions dans un environnement stable.
Pour bien maîtriser le développement Web, il faut d’abord comprendre son architecture. Puis ensuite de nouveaux concepts comme les états sans session transactionnelle du côté serveur.
Au lieu de chercher à comprendre, nous avons voulu calquer ce que nous savions faire dans la bonne grosse application type client lourd.
Grave erreur.
Cela donne des applications qui ne sont pas des applications webs. A la limite, rendez-vous service : ne faîtes pas de Web. Vous étiez meilleurs avant.
J’appelle donc les développeurs Java qui pensent que l’on peut faire du Web avec un W majuscule : le web designer n’existe pas. C’est toi mon ami qui doit apprendre à construire l’interface en comprenant ce que fait un navigateur. Et ne pense pas te cacher derrière un framework (GWT/JSF/Flex) au lieu de prendre quelques heures pour découvrir ce que le navigateur peut faire.
Je te le promets, c’est fun et c’est simple. Plus que Scala, plus que Clojure et plus qu’Haskell. Et cela te sera certainement plus utile à mon avis.
On appelle cela HTML5 et CSS3…
Dessinons un cadre
Prenez un simple DIV pour commencer, avec un fond orange et une taille fixée. Une page en HTML5 se déclare aussi simplement que cela :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first HTML5 page</title>
<link rel="stylesheet" href="demo.css">
<style type="text/css">
#demo{
background-color: #f37350;
color: #fff;
width:200px;
height:80px;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
Ce qui donne :
Ajoutons de l’ombre avec la propriété box-shadow
Pour ajouter une ombre sur votre objet, CSS3 introduit la propriété box-shadow. Voyons comment ajouter une ombre simple sur notre boîte. Tout d’abord le résultat :
Le code est assez simple :
<style type="text/css">
#demo2{
background-color: #f37350;
color: #fff;
width:200px;
height:80px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
</style>
<div id="demo2">
</div>
Notez que si votre navigateur ne reconnait pas cette propriété, il se contentera d’afficher un cadre orange. Nous appelons cette notion le dégradage progressif. Cela ne fait pas planter le navigateur, il est toujours en mesure d’afficher la sémantique de la page. La mise en forme sera simplement moins riche.
Pour aller plus loin avec les ombres : http://www.css3.info/preview/box-shadow/
Arrondir les bords
La propriété border-radius permet d’arrondir simplement les bords de votre cadre. Opera 10.5+, Safari 5+, IE9 et Chrome 5+ reconnaissent cette propriété nativement. Firefox 3.6+ doit par contre utiliser la propriété -moz-border-radius, jusqu’à ce qu’une version plus récente de Firefox reconnaisse cette propriété nativement. Ce sera le cas de Firefox 4.
Le code source complet:
<style type="text/css">
#demo3{
background-color: #f37350;
color: #fff;
width:200px;
height:80px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
-moz-border-radius: 5px;
}
</style>
<div id="demo3">
</div>
Il est bien entendu possible de définir pour chaque coin des paramètres différents.
Plus de détails : http://www.css3.info/preview/rounded-border/
Dégradé de couleur
CSS3 permet aussi de créer des dégradés. Webkit, le moteur de Safari, Chrome ou Konqueror, est présent sur Android et sur IPhone. Par ailleurs si vous surfez avec Safari sur Mac ou Chrome sur PC, vous utilisez Webkit sans le savoir. Autant dire que ce que vous allez voir est déjà utilisable sur un bon nombre de plateforme.
Pour construire une barre de navigation dans un menu ou pour ajouter un dégradé à votre tableau, la propriété gradient est parfaite. Elle est arrivée fin 2008 sur Webkit. Le moteur Mozilla a ensuite ajouté sa version, plus proche de la spécification CSS3. C’est un sujet encore très récent car le dernier draft sur le site du W3C date du 12 février 2011…
Du côté Microsoft, IE7 et IE8 permettent de faire des gradients en utilisant des propriétés propriétaires. Je ne vous en parlerai donc même pas. Ce que vous allez voir ne marche que sur Mozilla et WebKit.
Voyons d’abord un simple petit dégradé sur notre cadre :
Si vous voyez un cadre rouge, votre navigateur ne reconnait pas la propriété CSS -webkit-gradient ou -moz-linear-gradient.
Pour afficher ce dégradé linéaire, j’ai simplement définit plusieurs fois la propriété background de mon div :
<style type="text/css">
#demo5{
color: #fff;
width:200px;
height:80px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f37350), to(#fcdfd7));
background-image: -moz-linear-gradient(top,#f37350,#fcdfd7);
background-color: #ff0000;
}
</style>
<div id="demo5">
</div>
– Le site CSS3 Gradient Generator permet de générer de beaux dégradés.
– Ultimate CSS Gradient Generator est très pratique car il donne des gradients préconfigurés pour débuter rapidement.
Transition
Jusqu’ici, nous avons simplement ajouté des styles sur notre élément. Il est maintenant temps de vous montrer une version animée de notre cadre. Il serait sympa d’animer la couleur de fond lorsque l’utilisateur survole un cadre par exemple.
Solution 1
Je vais d’abord faire en sorte que le dégradé de fond soit différent lorsque l’utilisateur passe la souris au dessus du DIV. Pour détecter ceci, j’utilise :hover sur le DIV :
Le code source :
<style type="text/css">
#demo6,#demo7 {
color: #ccc;
width:120px;
height:50px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f37350), to(#fcdfd7));
background-image: -moz-linear-gradient(top,#f37350,#fcdfd7);
background-color: #f37350;
}
div#demo6:hover,div#demo7:hover{
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cdd));
background-image: -moz-linear-gradient(top,#fff,#cdd);
background-color: #fff;
}
</style>
<div id="demo6">
Survolez-moi 1
</div>
<div id="demo7">
Survolez-moi
</div>
Solution 2
La solution 1 n’est pas optimale. Il faut calculer les dégradés à la main, clairement ce n’est pas très pratique. Et si nous pouvions jouer sur certaines propriétés comme l’opacité ? Le tout avec une belle transition ?
CSS3 permet d’ajouter des transitions très facilement. Sur l’eXpress-Board par exemple, si vous survolez le menu de navigation en haut, vous verrez qu’un petit effet de transition est ajouté lorsque vous passez la souris sur les options. Une transition est une opération qui s’applique sur une ou plusieurs propriétés CSS. Par exemple vous pouvez appliquer une transition sur la propriété background-color ou sur la propriété opacity. C’est exactement ce que nous allons faire ici.
Tout d’abord le résultat final, observez ce que fait le navigateur lorsque vous survolez le cadre :
Concernant Mozilla, les transitions ne sont supportées qu’à partir de la version 3.6.4 ou dans la bêta de Firefox 4. Par contre, du côté de Chrome ou de Safari, webkit supporte très bien celles-ci depuis bientôt 2 ans.
Voyez le code source nécessaire pour animer simplement la propriété opacity :
<style type="text/css">
#demo8,#demo9 {
color: #ccc;
width:120px;
height:50px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:10px;
background-color: #f37350;
opacity: 0.4;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-moz-transition-property: opacity;
-moz-transition-duration: 1s;
transition-property: opacity;
transition-duration: 1s;
}
div#demo8:hover,div#demo9:hover{
opacity:1;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-property: opacity;
-moz-transition-duration: 0.4s;
transition-property: opacity;
transition-duration: 0.4s;
}
</style>
<div id="demo8">
Survolez-moi 8
</div>
<div id="demo9">
Survolez-moi 9
</div>
Pour aller plus loin et découvrir d’autres effets très puissants avec les transitions, voici quelques sites :
– la norme W3C explique la syntaxe
– Using CSS3 Transitions, Transforms and Animation : ce site vous montre toutes les transitions possibles
– Gaetan Renaudeau explique les transitions CSS3 sur Zengularity. Je l’ai mis en oeuvre sur la page d’accueil de l’eXpress-Board.
– Un effet LightBox en CSS3
Conclusion
Vous avez découvert les propriétés CSS3 suivants :
– box-shadow pour dessiner une ombre portée
– border-radius pour arrondir les angles
– gradient pour faire un dégradé
– transition pour passer d’une valeur à une autre pour une propriété CSS.
Ce n’est que 2% de ce qu’il est possible de faire simplement de nos jours. Souvenez-vous de cet article lorsqu’il s’agira de rendre agréable l’interface de votre logiciel… Sortons un peu de la culture « ingénieur » du côté serveur et n’oublions pas que nous codons des logiciels qui doivent être agréable à utiliser. C’est bien de faire 3 séparations en couche. C’est mieux de penser qu’il y a un utilisateur qui va cliquer dans votre interface. C’est bien de rêver la nuit de Lombok. C’est encore mieux de penser que trouver 3 belles couleurs ne demande que 5 minutes d’efforts…
Rêvons un peu, sortons de l’ombre et allons vers la lumière.
Ressources
– Initializr.com : pour construire en 2mn un projet HTML5 propre, qui fonctionne aussi avec les navigateurs anciens.
– Ultimate CSS Gradient Editor : trouver des gradients propres
– Modernizr : librairie JS pour simplifier la gestion des tags HTML5
– HTML5shim permet d’ajouter des fonctions HTML5 à des versions antérieurs à IE9 si vous devez coder pour les navigateurs Microsoft.
– Liste de librairies JS et CSS pour ajouter tout un ensemble de fonctionnalités comme les formulaires, les styles ou le local-storage.
– WebForms2 est une implémentation cross-browser qui descend jusqu’à IE6 de la spécification WHATWG Web Forms 2.0. Cette spécification donne une vision de ce qui sera disponible au delà d’HTML5.
– Vendor prefixed CSS properties liste à jour de l’ensemble des propriétés CSS3 implémentés par moteur de rendu. Gecko pour Firefox, Webkit pour Chrome/Safari, Presto pour Opera et Trident pour Microsoft.
IE6 mort, c’est vrai pour le grand public, mais en entreprise ça reste malheureusement le navigateur majoritaire. Les statistiques tirées de notre appli de gestion montrent que nos clients utilisent à 60% IE6 (et 90% IE toutes versions confondues).
@jerome : ta responsabilité en tant que développeur est d’expliquer à ton client/ton chef qu’IE6 est mort. Livré initialement avec Windows XP, Microsoft a annoncé la fin du support
pour cette annéepour 2014. Il faut débrancher la machine à perfusion, et surtout aider à passer à IE8. C’est ton devoir et ta responsabilité. Si nous continuons à dire « ouais mais c’est utilisé en Entreprise… » et bien rien ne bougera. Allez zou, au boulot.Ça fait 4 ans que j’explique que l’on passe 2 fois plus de temps en dév à cause de cette bouse, les arguments techniques pour s’en débarrasser je les connais par cœur. Mais se passer de 60% de ses clients, ce n’est malheureusement pas réaliste : 50% du salaire de l’équipe représentent une goute d’eau face aux millions générés par des clients trop conservateurs.
La situation change doucement : maintenant, pour certaines applis RIA, IE6 est officiellement supporté mais ça rame grave et c’est un peu moins joli qu’avec un vrai navigateur. Vivement que Seven remplace XP.
Ah, et la fin de support de Windows XP/IE6, c’est le 8 avril 2014. Ce jour là, les dev web du monde entier vont tous pousser un énorme ouf de soulagement…
L’article est intéressant pour aider des débutants à se familiariser avec les nouveautés apportées par CSS3. Juste un bémol : on ne parle ni de tag (« le tag box-shadow », « les tags CSS3 » …), ni de balise CSS3 (« La balise border-radius » …), ni d’attributs (« l’attribut background-color » …) mais bel et bien de propriété. Le vocabulaire est important pour la compréhension, surtout pour des débutants. De même, on parle plutôt de « dégradation élégante » que de « dégradage progressif ». D’ailleurs il semble que vous illustrez dans votre article le concept opposé d' »amélioration progressive ».
Deuxième remarque: IE6 est loin d’être mort, son support est assuré jusqu’en 2014 (pour l’instant) et beaucoup d’intranets en dépendent fortement.
@G je corrige l’article original. Tu as raison, il faut être précis. Merci.
HTML5/CSS3 pour le commun des mortels: J’aime cet article!
Faire le grand écart entre les différentes couches de l’archi n’est pas une chose simple, cela implique d’être un vrai passionné doublé d’une bonne dose de « formation », comprenez veille/test en mode autodidacte ET formation (conf entre autre).
Dans les faits, moins de la moitié des dév correspondent à ce profil et il faut donc trouver d’autres solutions en attendant que tous deviennent des artisans.
Pour pallier à ce manque de compétences, on a recours à un palliatif, un web designer en immersion dans l’équipe, et à un traitement de fond, du pair programming avec les développeurs Web compliant. En parallèle, on ajoute le Web Design à la longue liste des compétences nécessaires pour que les moutons à 5 pattes puissent intégrer le projet. Le tout fonctionne très bien!
Dans notre cas, le web designer est un peu comme le Scrum Master, normalement au bout d’un moment l’équipe n’en a plus besoin… Tiens, on devrait peut être choisir un Scrum Web Master Designer et faire d’une pierre 2 coups !
Et vous autres, quelle technique pour affronter ce manque de compétences Web sur vos projets Web ?
@Jérome: On fêtera l’enterrement de ie6 et au passage on passera des heures à se plaindre des problèmes HTML/CSS/JS sur les navigateurs « mobiles » (iOS/Android/…)
Complètement d’accord avec toi sur le fait que trop de gens se cachent derrière de bons outils (JSF, GWT…) pour éviter le trio JS/CSS/HTML. A défaut de pouvoir/vouloir les forcer à s’y mettre, force est de constater qu’une partie du pouvoir revient vers le navigateur. Notons également le retour en force du Javascript ces dernières années. Apprenons au moins les bases dès maintenant!
Pour ceux qui sont fâché avec le « trio » parce qu’avant on devait rajouter des kilomètres d’HTML pour intégrer des images ici et là et ainsi avoir une application qui ressemble à quelquechose : REVENEZ! La toile regorge d’exemples et autres démos d’utilisations poussées du HTML5/CSS3. L’avenir se fera avec des applications « image-less » (à part pour les icônes peut-être).
Je nuancerais un peu ton avis sur le fait qu’on peut faire du Web avec un W sans web designer. Que ce soit pour des applications de gestion ou des sites web, je pense qu’une meilleure connaissance du trio JS/CSS/HTML (surtout les nouvelles versions) fera avancer les choses mais on n’aura toujours pas des interfaces aussi agréables à utiliser.
Pour IE6, je partage l’avis de Jérôme, c’est un combat de tous les jours qu’il ne faut pas abandonner. Ne fêtons pas ses 10 ans fin août, faisons le disparaître avant. Il ne faut pas abandonner.
Si votre boss vous force malgré tout à utiliser IE(6/7/8), vous aurez du mal à le convaincre de changer avec ce lien mais ça fera du bien en attendant…
css3pie.com
Jetez aussi un oeil à http://css3pie.com/ pour faire du CSS3 sous IE6-8 ! Mais attention ça peut être gourmand en perfs
Force est de constater que le nombre de developpeurs ne serait-ce qu’un minimum sensibles à l’ergonomie web est TRES réduit. Le pire étant ceux qui l’approchent « à la geek » en enfilant les dernières technos et widgets graphiques (genre le dernier effet css 3 a la mode et le dernier bout de jquery machin truc extjs dojo) pour aboutir a une horreur inutilisable.
C’est aussi pourquoi j’aime bien l’approche d’un framework comme Play!F qui dit clairement qu’un dev Java « actuel » doit connaitre CSS, JS et HTML …et n’essaie pas d’abstraire le JS et les CSS dans des concepts java plus ou moins fumeux.
Mais force est de constater que des framework comme GWT, qui vont a l’inverse de l’interet pour le web, font « kiffer » la pluspart des développeurs…
Qt a IE6, il n’est pas pret de disparaitre : banques et assurances, 2 des plus gros « fournisseurs » de taf de l’IT l’ont encore pour un moment et sont, au mieux, entrain de passer a IE8…alors qu’IE11 sera sorti qd ils auront fini leur déploiement
En quoi GWT va à l’encontre de l’intérêt du Web?
Depuis fin 2009, la préco de Google est de définir la couche graphique en HTML en y insérant des balises XML… ce qui permet de faire du JS/CSS/HTML classique (voir la page Declarative UI with UiBinder de la documentation GWT et le lien dans mon profil)
On utilise ce système depuis 1 an et maintenant ceux qui s’occupent du design sont heureux et ont le poil soyeux!
Ne mettez pas JSF et GWT dans le même panier 😉
Je pense qu’il y a erreur sur le terme de « web designer ». Un web designer, ce n’est pas celui qui code le HTML (il doit savoir le faire, ce n’est pas tout à fait pareil), c’est celui qui « design » la page, i.e. qui positionne les différents composants dans la page, en suivant les préconisations de l’ergonome. Et pour moi, un développeur n’est ni un ergonome, ni un « web designer »…même s’il en est (trop) souvent convaincu. Ca ne veut pas dire qu’il ne sait pas coder en HTML/CSS.
Maintenant, le plus dur c’est d’arriver à faire travailler tout ce petit monde developpeur+web designer+ergonome de concert, et ça, c’est pas gagné (chacun d’entre eux ayant tendance à penser que lui seul détient le vrai savoir).
@Christophe : c’est pas le développeur qui détient le seul vrai savoir ? (roooh)
Je suis entièrement d’accord sur le constat que les développeurs Java sont avant tout attiré par le « code serveur » et que la GUI est pour la grande majorité d’entre eux, un travail peu valorisant. Par contre, pour moi un « web designer » n’est pas un développeur web, ce sont des métiers différents mais complémentaires.
Pour faire du web (application ou site) de manière efficace, il faut effectivement prendre le temps d’apprendre les bases du web (http, html, css et javascript) ensuite il faut passer à l’industrialisation grâce à des frameworks. On trouve des frameworks web comme on trouve des frameworks java. Il y en a qui sont plus proche du navigateur (ex : GWT) et d’autres qui sont plus proche du serveur d’applications (ex : JSF).
Pour finir, une petite remarques sur GWT qui est particulier à mes yeux, car à la fois un Toolkit et un framework. Beaucoup de personnes font l’amalgame avec Java, alors qu’il s’agit avant tout un outil pour faire du web (le code d’une application GWT est du html/css/js).
+1 Christophe. Un web designer ne fait d’HTML/CSS/Js. Ca c’est plutôt le monteur. Et encore, il ne fait forcément tout le Js. Il ne faut tout mélanger. Il y a des métiers. Etant développeur Java, il y a longtemps que je ne crois plus pouvoir être un bon designer/monteur/dev Js. Pour la simple raison que je n’en fais pas à longueur de journée et que j’y ai été moins formé. Pourquoi en ferais-je alors que des collègues font bien mieux ?
Il faut bien sûr pouvoir corriger/MAJ du HTML/CSS/Js, mais je ne vois pas l’intérêt de savoir tout faire, c’est une utopie selon moi
Dans un temps ancien (4, 5 ans), IE6 m’a couté 20% des j/h de dev sur les applis n tiers de mon ex-direction-des-études-dou-on-ma-viré. Mais je rencontre encore des DSI qui me disent : « Microsoft c’est LE standard ». J’essaie encore de leur expliquer, le fuck**g trailing comma : » , } » y’a bon W3C mais pas bon MS Banania. Mais z’y comprennent rien, c’est des DS-AIE !
Poster depuis …. IE6.
Je termine au passage pour remercier de la qualité de leur travail, les équipes de dojo, extjs, jquery,…., qooxvoo (excellent cette derniere)……
Je pense que tu as oublié de prendre en considération l’industrie pour laquelle tu fais des applications.
Cela fait presque 10 ans que je navigue dans le monde des agences et pour ma part les Web Designer, les monteurs de page ceux qui découpe les PSD pour en faire des pages ne sont pas des développeurs. Les connaissances ne sont pas les mêmes.
De toutes les personnes que j’ai embauché, bien peu avait l’oeil parfait pour être un bon Web Designer même s’ils avaient les connaissances techniques.
Mais comme tu le dis, l’important est d’acquérir les connaissances suffisantes pour te rendre à l’aise avec le CSS, HTML, JQUERY.
-moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888;Pour moi, une partie du problème vient de là… On fait du java pour être multi-plateformes (entre-autres) et on devrait se fader les particularités de chaque navigateur?
Alors honnêtement, si j’avais à refaire des interfaces graphiques en interne, ça serait GWT ou swing (le web pour des applis de gestion en intranet, merci, j’ai donné).
En plus, le html 5 ne sera pas normalisé avant 2014, difficile avec ça de convaincre un décideur frileux de migrer son parc de milliers de PC.
@domak les propriétés CSS préfixées auquel tu fais référence sont un moyen technique pour utiliser des propriétés CSS qui ne sont pas encore complétement implémentés dans le moteur de rendu. Chaque moteur de rendu HTML (Gecko pour Firefox, Webkit pour Chrome et Safari, Presto pour Opera et Trident pour Microsoft) propose le support progressif de ces propriétés, au fur et à mesure qu’elles sont implémentées. Tu peux retrouver une liste complète ici : http://peter.sh/experiments/vendor-prefixed-css-property-overview/
Quant à l’argument sur la normalisation de HTML5, tu peux expliquer à ton décideur frileux qu’il sera nécessaire de migrer bien avant. C’est comme si tu avais attendu début février 2011 pour passer à la télé numérique (la TNT) et que tu te réveilles sans image. Si tu es un bon décideur, tu anticipes justement ceci en terme de migration et de mise à jour des navigateurs.
Merci pour ce bon article.
Je suis d’accord qu’il serait bien que les développeurs apprennent un peu plus la js, css, html.
Cependant quand tu écris :
« Dans la communauté Java, les développeurs imaginent parfois qu’ils vont travailler avec des « Web Designers« . Un jour, quelqu’un leur a expliqué qu’il fallait qu’ils fassent la partie « serveur » et qu’un gars allait faire la partie Web. »
Je me demande si mon cas est vraiment exceptionnel, mais dans notre équipe nous avons un très bon web designer, intégrateur web. Il s’occupe quasi à 100% des pages et des css et en très très grande partie du javascript. Ce qui n’empêche pas que l’ensemble de l’équipe s’y mette un peu quand même. Notre cas est il unique ?
Pour en revenir à IE6, cela nous coûte toujours beaucoup aujourd’hui. Malheureusement la migration des clients vers un autre navigateur est très lente.