Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.

1. Développer pour
tous les navigateurs
MS Tech Days 2013
Jérémie Patonnier
@JeremiePat
http://jpat.fr/MSTD2013

2. Le problème
L'image qu'on en a

3. Le problème
En fait c'est pire

4. Les standards du Web
Ils sont ouvert et libre,
tous les navigateurs essayent de les mettres en oeuvre.
il s'agit de HTML, CSS, JavaScript
Mais aussi : HTTP, SVG, ARIA, etc.

5. Les standards du Web
— HTML —
De HTML4 à HTML5
Attention aux vieux navigateurs

6. Les standards du Web
— CSS —
De CSS2.1 à CSS3
L'enfer des préfix

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

8. Degradation harmonieuse &
Amélioration progressive
Oublier le "pixel perfect"
Trouver les plus petits dénominateurs communs
Connaitre les technologies et leurs limites

9. Responsive Web Design
“Faire en sorte qu'un site soit visible et utilisable
quelque soit le contexte de consultation.”

10. Les requêtes de média
“Méchanisme CSS permettant de selectionner une
feuille de style en fonction des caractéristiques du
média de diffusion du contenu.”
mediaqueri.es

11. Les requêtes de média
@ei sre ad(i-eiewdh 12p){
mda cen n mndvc-it: 04x
/ Vssye pu lsgad érn ii*
* o tls or e rns cas c /
bd {
oy
fn-ie 10;
otsz: 2%
}
}
<ikrl"tlset he=syecs
ln e=syehe" rf"tl.s"
mda"cenad(i-eiewdh 12p)>
ei=sre n mndvc-it: 04x"

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

13. Modernizr
modernizr.com
1. Detection de fonctionnalité
2. Chargement de fichiers conditionnel
3. Requêtes de média multi-navigateur

14. Modernizr
Detection de fonctionnalité
<DCYEhm>
!OTP tl
<tlcas"oj"
hm ls=n-s>
<il>asmdrir/il>
tteSn oenz<tte
<DCYEhm>
!OTP tl
<tlcas"scna n-eg"
hm ls=j avs owbl>
<il>vcmdrir/il>
tteAe oenz<tte
<citsc"smdrirj"<srp>
srp r=j/oenz.s>/cit
<cit
srp>
cnoelgMdrircna)
osl.o(oenz.avs;
cnoelgMdrirwbl;
osl.o(oenz.eg)
<srp>
/cit

15. Modernizr
Chargement de fichiers conditionnel
Mdrirla(
oenz.od[
{
ts :Mdrirwbokt & wno.SN
et oenz.esces & idwJO,
/ yp :'eu.s
/ e dbgj'
np :'ucinlplflsj'
oe fntoa-oyil.s,
bt :['p.s,'p.s']
oh apj' apcs ,
cmlt :fnto ( {
opee ucin )
mApii(;
yp.nt)
}
},
'otaayisj'
ps-nltc.s
];
)

16. Modernizr
Requêtes de média multi-navigateur
i(oenz.q"cenad(i-eiewdh 12p)){
fMdrirm(sre n mndvc-it: 04x"
dcmn.oysyefnSz ="2%;
ouetbd.tl.otie 10"
}

17. Modernizr
Une erreur à ne pas commettre
.gap{
rb
clr rb(5,5,5,5;
oo: ga252525.)
}
.orb p{
n-ga
clr #CCC
oo: CCC;
}
p{
clr #CCC
oo: CCC;
}
.gap{
rb
clr rb(5,5,5,5;
oo: ga252525.)
}

18. Augmenter votre productivité
— Les dangers à éviter —
lier CSS à JavaScript
lier HTML à Javascript
Oublier les alternatives à JavaScript

19. Augmenter votre productivité
— CSS —
Les préprocesseurs CSS : LESS , SASS , etc.
Les méthodologies : OOCSS , BEM
Les framework CSS : 960gs , 1140, Bootstrap, etc.

20. Augmenter votre productivité
— Les pré-processeurs CSS —
Idéal pour produire du code plus facilement maintenable,
ils apportent :
Variables
Fonctions (mixin)
Lisibilité (nesting)
Maintenabilié (Inclusions, Boucles, conditions)

21. Augmenter votre productivité
— Les pré-processeurs CSS —
Un exemple avec LESS
@olu:#0
cuer 00
@oluHvr #0
cueroe: 90
.rniin@rpry @ie 50s {
tasto(poet, tm: 0m)
-ekttasto:@rpry@ie
wbi-rniin poet tm;
-o-rniin @rpry@ie
mztasto: poet tm;
--rniin @rpry@ie
otasto: poet tm;
tasto:@rpry@ie
rniin poet tm;
}
a{
clr @olu;
oo: cuer
.rniinclr;
tasto(oo)
&hvr{
:oe
clr @oluHvr
oo: cueroe
}
}

22. Augmenter votre productivité
— Les pré-processeurs CSS —
Un exemple avec LESS
a{
clr #0;
oo: 00
-ekttasto:clr50s
wbi-rniin oo 0m;
-o-rniin clr50s
mztasto: oo 0m;
--rniin clr50s
otasto: oo 0m;
tasto:clr50s
rniin oo 0m;
}
ahvr{
:oe
clr #0;
oo: 90
}

23. Augmenter votre productivité
Les frameworks JS
Se simplifier la vie: jQuery , UnderscorJS
Répondre à des besoins précis :
Micro JS
RaphaelJS
Industrialiser: Backbone , ExtJS , etc.

24. Quelques points à retenir
Les outils et les méthodes évoluent très vite
Les vieux navigateurs mettent du temps à mourrir
La plateforme Web se stabilise vite et bien
Les moyen d'accès au web se diversifient comme jamais

25. Merci
Questions ?
Jérémie Patonnier / @JeremiePat