Dvelopperpourtouslesnavigateurs

MS Tech Days 2013

Jrmie Patonnier@JeremiePat

http://jpat.fr/MSTD2013

LeproblmeL'imagequ'onena

LeproblmeEnfaitc'estpire

LesstandardsduWebIls 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.

LesstandardsduWebHTML

De HTML4 HTML5

Attention aux vieux navigateurs

LesstandardsduWebCSS

De CSS2.1 CSS3L'enfer des prfix

LesstandardsduWebJavaScript

Attention terrain min !

C'est un agrgat de technologies diffrement supportes : ECMAScript, DOM, et plein d'autres API

Degradationharmonieuse&Amliorationprogressive

Oublier le "pixel perfect"Trouver les plus petits dnominateurs communsConnaitre les technologies et leurs limites

ResponsiveWebDesignFaire en sorte qu'un site soit visible et utilisable

quelque soit le contexte de consultation.

LesrequtesdemdiaMchanisme CSS permettant de selectionner unefeuille de style en fonction des caractristiques du

mdia de diffusion du contenu.mediaqueri.es

Lesrequtesdemdia@media screen and (min-device-width: 1024px) { /* Vos styles pour les grands crans ici */ body { font-size: 120%; }}

Dtectiondefonctionalit

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 fonctionnalit2. Chargement de fichiers conditionnel3. Requtes de mdia multi-navigateur

modernizr.com

ModernizrDetectiondefonctionnalit

Sans modernizr

Avec modernizr

console.log(Modernizr.canvas);console.log(Modernizr.webgl);

ModernizrChargementdefichiersconditionnelModernizr.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']);

ModernizrRequtesdemdiamulti-navigateur

if(Modernizr.mq("screen and (min-device-width: 1024px)") { document.body.style.fontSize = "120%";}

ModernizrUneerreurnepascommettre

.rgba p { color: rgba(255,255,255,.5);}

.no-rgba p { color: #CCCCCC;}

p { color: #CCCCCC;}

.rgba p { color: rgba(255,255,255,.5);}

AugmentervotreproductivitLesdangersviter

lier CSS JavaScriptlier HTML JavascriptOublier les alternatives JavaScript

AugmentervotreproductivitCSS

Les prprocesseurs CSS : , , etc.Les mthodologies : , Les framework CSS : , , , etc.

LESS SASSOOCSS BEM960gs 1140 Bootstrap

AugmentervotreproductivitLespr-processeursCSS

Idal pour produire du code plus facilement maintenable,

ils apportent :VariablesFonctions (mixin)Lisibilit (nesting)Maintenabili (Inclusions, Boucles, conditions)

AugmentervotreproductivitLespr-processeursCSS

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 }}

AugmentervotreproductivitLespr-processeursCSS

Un exemple avec LESSa { color: #000; -webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}

a:hover { color: #900;}

AugmentervotreproductivitLesframeworksJS

Se simplifier la vie: , Rpondre des besoins prcis :

Industrialiser: , , etc.

jQuery UnderscorJS

Micro JSRaphaelJS

Backbone ExtJS

QuelquespointsretenirLes outils et les mthodes voluent trs viteLes vieux navigateurs mettent du temps mourrirLa plateforme Web se stabilise vite et bienLes moyen d'accs au web se diversifient comme jamais

MerciQuestions ?

/ Jrmie Patonnier @JeremiePat