Développer pour
tous les navigateurs

MS Tech Days 2013

Jérémie Patonnier
@JeremiePat

 

http://jpat.fr/MSTD2013

Le problème

L'image qu'on en a

Le problème

En fait c'est pire

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.

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 communs
  • Connaitre 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 une feuille 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

 

modernizr.com

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

Modernizr

Detection 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>
console.log(Modernizr.canvas);
console.log(Modernizr.webgl);
</script>

Modernizr

Chargement de fichiers conditionnel

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

Modernizr

Requêtes de média multi-navigateur

 

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

Modernizr

Une 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 à JavaScript
  • lier HTML à Javascript
  • Oublier les alternatives à JavaScript

Augmenter votre productivité

— CSS —

 

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)

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

 

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

Merci

Questions ?

Jérémie Patonnier / @JeremiePat