Développer pour tous les navigateurs
MS Tech Days 2013
Jérémie Patonnier@JeremiePat
http://jpat.fr/MSTD2013
Le problèmeL'image qu'on en a
Le problèmeEn fait c'est pire
Les standards du WebIls sont ouvert et libre,
tous les navigateurs essayent de les mettres en oeuvre.
il s'agit de HTML, CSS, JavaScriptMais aussi : HTTP, SVG, ARIA, etc.
Les standards du Web— HTML —
De HTML4 à HTML5
Attention aux vieux navigateurs
Les standards du Web— CSS —
De CSS2.1 à CSS3
L'enfer des préfix
Les standards du Web— JavaScript —
Attention terrain miné !
C'est un agrégat de technologies différement supportées : ECMAScript, DOM, et plein d'autres API
Degradation harmonieuse & Amélioration progressive
Oublier le "pixel perfect"Trouver les plus petits dénominateurs communsConnaitre les technologies et leurs limites
Responsive Web Design“Faire en sorte qu'un site soit visible et utilisable
quelque soit le contexte de consultation.”
Les requêtes de média“Méchanisme CSS permettant de selectionner unefeuille de style en fonction des caractéristiques du
média de diffusion du contenu.”mediaqueri.es
Les requêtes de média@media screen and (min-device-width: 1024px) { /* Vos styles pour les grands écrans ici */ body { font-size: 120%; }}
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 1024px)">
Détection de fonctionalité
Les navigateurs mentent sur qui ils sont, il vaut mieux leur demander ce qu'ils savent faire
A voir : Les User Agents, c'est le mal
Modernizr
1. Detection de fonctionnalité2. Chargement de fichiers conditionnel3. Requêtes de média multi-navigateur
modernizr.com
ModernizrDetection de fonctionnalité
<!DOCTYPE html><html class="no-js"><title>Sans modernizr</title>
<!DOCTYPE html><html class="js canvas no-webgl"><title>Avec modernizr</title>
<script src="js/modernizr.js"></script><script>
</script>
console.log(Modernizr.canvas);console.log(Modernizr.webgl);
ModernizrChargement de fichiers conditionnelModernizr.load([ { test : Modernizr.websockets && window.JSON, // yep : 'debug.js' nope : 'functional-polyfills.js', both : [ 'app.js', 'app.css' ], complete : function () { myApp.init(); } },
'post-analytics.js']);
ModernizrRequêtes de média multi-navigateur
if(Modernizr.mq("screen and (min-device-width: 1024px)") { document.body.style.fontSize = "120%";}
ModernizrUne erreur à ne pas commettre
.rgba p { color: rgba(255,255,255,.5);}
.no-rgba p { color: #CCCCCC;}
p { color: #CCCCCC;}
.rgba p { color: rgba(255,255,255,.5);}
Augmenter votre productivité— Les dangers à éviter —
lier CSS à JavaScriptlier HTML à JavascriptOublier les alternatives à JavaScript
Augmenter votre productivité— CSS —
Les préprocesseurs CSS : , , etc.Les méthodologies : , Les framework CSS : , , , etc.
LESS SASSOOCSS BEM960gs 1140 Bootstrap
Augmenter votre productivité— Les pré-processeurs CSS —
Idéal pour produire du code plus facilement maintenable, ils apportent :
VariablesFonctions (mixin)Lisibilité (nesting)Maintenabilié (Inclusions, Boucles, conditions)
Augmenter votre productivité— Les pré-processeurs CSS —
Un exemple avec LESS
@couleur: #000@couleurHover: #900
.transition(@property, @time: 500ms) { -webkit-transition: @property @time; -moz-transition: @property @time; -o-transition: @property @time; transition: @property @time;}
a { color: @couleur; .transition(color);
&:hover { color: @couleurHover }}
Augmenter votre productivité— Les pré-processeurs CSS —
Un exemple avec LESS
a { color: #000; -webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
a:hover { color: #900;}
Augmenter votre productivitéLes frameworks JS
Se simplifier la vie: , Répondre à des besoins précis :
Industrialiser: , , etc.
jQuery UnderscorJS
Micro JSRaphaelJS
Backbone ExtJS
Quelques points à retenirLes outils et les méthodes évoluent très viteLes vieux navigateurs mettent du temps à mourrirLa plateforme Web se stabilise vite et bienLes moyen d'accès au web se diversifient comme jamais
MerciQuestions ?
/ Jérémie Patonnier @JeremiePat
Recommended
