Formation html5 CSS3 offerte par ippon 2014

Ippon Technologies © 2014
Licence
Cette formation vous est fournie sous licence Creative Commons AttributionNonCommercial-
NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
Vous êtes libres de :
● Copier, distribuer et communiquer le matériel par tous moyens et sous tous formats
Selon les conditions suivantes :
● Attribution : Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications
ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles
mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez
utilisé son Oeuvre.
● Pas d’Utilisation Commerciale: Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre,
tout ou partie du matériel la composant.
● Pas de modifications: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir
du matériel composant l'Oeuvre originale, vous n'êtes pas autorisé à distribuer ou mettre à disposition
l'Oeuvre modifiée.
http://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr

Ippon Formation en bref
Pourquoi Ippon Technologies
publie ses supports de
formation ?
Car Ippon participe à la communauté Java et
Web et soutien le modèle open-source
Le support théorique représente 40% du
temps de formation, l'intérêt est dans les
Travaux Pratiques et l'expert Ippon qui
assure le cours.
Nos TP sont dispensés lors des sessions
de formations que nous proposons.

Pour nous contacter
Pour nous contacter et participer à nos
formations :
- Technique : formation@ippon.fr
- Commercial : nzago@ippon.fr
Toutes les informations et les dates de
formations sont sur notre site internet et
notre blog :
- http://www.ippon.fr/formation
- http://blog.ippon.fr

Sommaire
● HTML5 depuis HTML en passant par XHTML
● HTML5 nouveaux éléments et attributs
● Les formulaires “Web form”
● HTML5 multimédia et dessin
● HTML5 avec CSS3
● CSS3 les sélecteurs
● CSS3 les transformations, transitions et animations
● CSS3 avec les préprocesseurs
● HTML5 Web API
● Librairie Modernizr

HTML5 depuis HTML en
passant par XHTML

Sommaire
1. Évolutions du langage
2. Syntaxe et DOCTYPE
3. Prise en charge par les navigateurs
4. Sensibilisation au cas du mobile
5. HTML5 pour faire quoi ?

Naissance de l’HTML
● HTML (Hyper Text Markup Language) invention de “Sir” Tim Berners-Lee en
1991, s’appuyant sur SGML (Standard Generalized Markup Language)
● HTML 1 n’a jamais existé
● HTML 2 : premières spécifications par IETF (Internet Engineering Task Force)
● Pour la normalisation IETF remplacée par W3C (World Wide Web Consortium)
● Plusieurs vagues de révisions puis spécifications HTML 4.01 en 1999 par W3C

Naissance de l’XHTML
● XHTML 1.0 (X signifiant “eXtensible”) par W3C, aucun nouvel élément par
rapport à HTML 4.01 mais beaucoup plus strict au niveau de la syntaxe s’
inspirant du XML (eXtensible Markup Language)
● XHTML 1.1, du pur XML qui ne pouvait pas être traité par un type MIME
text/html. Les navigateurs alors du moment ne peuvent plus l’interpréter !
● Spécifications XHTML 2 en cours, pour faire table rase, incompatible avec l’
existant du Web

Le clash XHTML / HTML
● Rébellion au sein du W3C (théorie Vs pragmatisme), création d’un nouveau
groupe de travail WHATWG (Web Hypertext Application Technology Working
Group)
● W3C travaille sur la norme XHTML 2, tandis que WHATWG travaille sur une
norme HTML5 ...

Le compromis HTML5
● La mayonnaise XHTML 2 ne prend pas, en 2006 W3C décide de travailler sur
une nouvelle norme HTML 5, qui va s’appuyer sur HTML5 du WHATWG (qui
eux même vont continuer leur travail) !
● Fin 2009, tous sous la bannière HTML5 mais avec un processus différent
WHATWG (“Commit-Then-Review”) et W3C (“Review-Then-Commit”)
● 17 décembre 2012 le W3C publie la “Release Candidate” HTML5

Laxiste le HTML5 ?
● Balises en majuscules ou en minuscules ?
● Balise auto-fermante ou non ?
● Guillemets simples ou doubles ?
● Tout est permis, c’est à vous de décider ; soyez juste cohérent avec vous même

Le “tampon” HTML5, ça n’existe pas
● Contrairement à XHTML 2, le mot d’ordre de HTML5 est de garder la
compatibilité avec l’existant (HTML 4.01 et XHTML 1.0)
● Paradoxe HTML5 : la spécification doit être puissante et en même temps elle
doit être compatible avec les existants (qui n’ont rien de carrés)
● Vous faîtes du HTML 4.01, du XHTML 1.0 et du HTML5 (sans le savoir)

Quelle grammaire utilisons nous au juste ?
● Doctype HTML 4.01
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
● Doctype XHTML 1.0
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
● Doctype HTML5
<!DOCTYPE html>

Les navigateurs ... comme toujours
● La vérité, on s’en fiche des DOCTYPE. Ce sont les navigateurs qui supportent
les fonctionnalités pas les DOCTYPE
● Si un élément ou un attribut de votre document HTML est devenu obsolète, ce n’
est pas (si) grave ; puisqu’il est censé être supporté par les navigateurs
“modernes”.
● Les nouveautés HTML5 sont elles supportées ? caniuse.com votre nouvel
meilleur ami
● Vous devez utiliser les possibilités du HTML5 sans jamais oublier votre
périmètre de compatibilité navigateurs

“Vieux” navigateurs Vs navigateurs “modernes”
● Définitions assez floues, mais en général on désigne de “vieux” tout navigateur
qui ne supporte pas HTML5, CSS3 ou ne dispose pas d’un moteur JavaScript
performant
● Mais comme on l’a vu le “tampon” HTML5 n’existe pas, donc difficile à dire, c’est
souvent une affaire de communication / marketing ; le cas IE9 est sujet à débat
par exemple
● Il est préférable d’avoir une approche “Amélioration progressive” plutôt qu’une
approche “Dégradation gracieuse” et on enrichira les fonctionnalités au cas par
cas en fonction des possibilités du navigateur ou avec la mise en place de
“polyfills”

4. Sensibilisation au cas du mobile
Et le Web mobile dans tout ça ?
● Explosion des terminaux mobiles (smartphones, tablettes)
● Fourchage des documents HTML Vs “Responsive Web Design”
● Explosion combinatoire des terminaux (et très hétérogènes) pouvant lire un
document HTML
● En fait sensibilisation au cas de l’avenir du Web en général, le mobile étant juste
la réalité du moment

5. HTML5 pour faire quoi ?
Le futur du Web
● Donner du sens à la structure et au contenu des documents, afin de mieux les
indexer / référencer avec les nouveaux éléments et attributs
● Offrir des nouvelles possibilités sur les formulaires avec les “Web forms”
● Favoriser les médias dessin, audio et vidéo sans recourir à des plugins /
solutions propriétaires
● Améliorer la présentation des documents avec CSS3
● Gérer le mode du Web “offline”
● Favoriser les futures extensions possibles avec les Web API

HTML5 nouveaux éléments
et attributs

Sommaire
1. Recomposition d’une structure de page HTML
2. Recomposition d’une hiérarchie de page HTML
3. Les nouveaux attributs data-*
4. Les éléments obsolètes ou réaménagés
5. Les autres nouveautés

Recomposition d’une structure de
page HTML
La sémantique de structuration
● Éléments permettant de structurer un document HTML tout en permettant à
celui-ci d’avoir un sens
● Nouveaux éléments : <section>, <article>, <nav>, <aside>, <header> et
<footer>
● Ils se calquent sur les propriétés de <div> avec un affichage par bloc (excepté
pour certains anciens navigateurs cf. caniuse)

page HTML
Les éléments de structuration
● <section> : Déclare un conteneur mais avec une valeur sémantique : un
regroupement thématique générique
● <article> : Déclare une section de contenu qui peut être indépendante du reste
de la page
● <nav> : Déclare une section de navigation majeure
● <aside> : Déclare une section annexe qui est potentiellement liée au reste du
contenu de la page
● <header> : Déclare une section d’entête / d’introduction
● <footer> : Déclare une section de pied de page

page HTML
Quel est l’intérêt ?
● Pour les développeurs : lisibilité du code
● Mais surtout pour le SEO : indexation des pages facilitées, meilleur
référencement
● /! Certaines sections ne sont pas uniques, par exemple on peut très bien insérer
un <header> dans un <article>

Recomposition d’une hiérarchie de
page HTML
Rappels sur les éléments h1 ... h6
● Déclare un titre selon des niveaux (de 1 à 6)
● Valeur sémantique de titre, pas juste pour la mise en forme
● Il faut éviter de sauter des niveaux

page HTML
Ce qui change
● On peut avoir des sous niveaux à l’intérieur des sections
● Élément <hgroup> déclare une entête de section au même titre que <header>,
mais ne devant regrouper que des titres. Il sert à masquer les titres de niveau
inférieur dans l’algorithme d’”outline”

page HTML
● Pour les développeurs : lisibilité du code
● Mais surtout pour le SEO : indexation des pages facilitées, meilleur
référencement

Les nouveaux attributs data-*
Comment étendre / enrichir HTML5
● Nouvelle nomenclature des attributs data-*
● Ajout d’une metadonnée sous la forme d’une chaîne de caractères
● Metadonnée non visible dans le navigateur

Les nouveaux attributs data-*
● Solution élégante car la méta donnée est associée à l’élément en question tout
en conservant un code valide
● Solution propre car on ne détourne pas l’utilisation d’un autre attribut
● Solution souple car son formalisme n’est pas rigide (comme une DTD XHTML) :
un caractère et pas de majuscules
● Solution puissante car on peut en déclarer plusieurs par éléments

Les éléments obsolètes ou
réaménagés
Les éléments de présentation
● Les éléments <font>, <big>, <center>, <strike> ne doivent plus être utilisés ;
les propriétés CSS doivent jouer leur rôle
● L’élément <small> représente désormais “small print” ; à utiliser pour les
mentions spécifiques ou légales
● L’élément <b> représente désormais une mise en valeur différente, mieux vaut
préférer <strong> si nécessité de donner une valeur sémantique d’importance
● L’élément <i> représente désormais un changement de ton

réaménagés
Les éléments de structure
● Les éléments <frame>, <frameset>, <noframes> ne doivent plus être utilisés

réaménagés
Les éléments sémantiques
● L'élément <acronym> perturbait les rédacteurs ; celui-ci se lit comme un mot
contrairement à une abréviation <abbr> désormais seul ce dernier doit être
utilisé

Les autres nouveautés
Sémantique toujours
● Ajout de l’attribut <mark> qui déclare un surlignage sur un texte pour attirer l’
attention
● Ajout de l’élément <time> qui déclare une heure ou une date. Possède les
attributs datetime (standardiser l’affichage), pubdate (permet de lier la date à l’
élément article qui le contient ou au document entier s’il n’y en a pas)

Cas pratiques
● Ajouts des attributs media, type et download dans l’élément <a>
● Ajout de l’élément <wbr> (word break) qui déclare la possibilité de couper un
mot si celui s’avère trop long (en cas de coupure, il n’y a pas de césure ou de
trait d’union)

Chargement asynchrone des scripts
● L’élément <script> possède un nouvel attribut async qui lui permet d’exécuter
de manière asynchrone les scripts (à utiliser uniquement si l’attribut src est
renseigné). Cela signifie que le navigateur exécute le script dès qu’il est
disponible, donc possiblement avant l’évènement load
● Les scripts peuvent être interprétés dans le désordre et non par rapport à l’ordre
dans lequel ils apparaissent dans le code de la page

Le reste
● Les “Web form”
● Les éléments multimédia
● Et tant d’autres, consulter http://www.w3.org/TR/html5-diff/

Les formulaires “Web form”

Sommaire
● Nouveaux types d’input
● Nouveaux attributs
● Nouveaux éléments de formulaire
● Un peu de CSS
● Upload multiple de fichiers, exemple du “drag and
drop”

Nouveaux types d’input
● Pour les expressions récurrentes
● Pour les dates
● Autres

Pour les expressions récurrentes
● L’attribut tel, pour saisir un numéro de téléphone
● L’attribut url, pour saisir une URL
● L’attribut email, pour saisir un email
● L’attribut number, pour saisir les valeurs numériques
<input type="url" name="website"/>

Pour les dates
● L’attribut date, pour saisir une date (calendrier grégorien)
● L’attribut time, pour saisir une heure précise
● L’attribut datetime, pour saisir une date et une heure sous un fuseau horaire
précisé
● L’attribut datetime-local, comme datetime sans préciser le fuseau horaire
(celui de l’utilisateur par défaut)
● L’attribut month, pour saisir un mois dans une année précise
● L’attribut week, pour saisir une semaine dans une année précise

Mais encore
● L’attribut search, pour saisir comme un champ de type text mais avec une
apparence différente, laissée libre aux navigateurs pour l’implémenter
● L’attribut range, pour saisir les valeurs numériques mais de manière imprécise,
généralement utilisé pour simplifier l’IHM aux utilisateurs (volume sonore d’une
vidéo par exemple)
● L’attribut color, pour saisir la sélection d’une couleur (hexadécimal
uniquement)

● L’attribut placeholder pour afficher un texte indicatif sur la saisie à effectuer
● L’attribut autofocus pour donner le focus directement sur un champ au
chargement du document HTML
● L’attribut autocomplete pour indiquer si le navigateur peut agir sur l'auto-
complétion du champ
● L’attribut required pour indiquer que la saisie est obligatoire
● L’attribut multiple pour indiquer que plusieurs saisies sont possibles dans un
même champ (sélection de plusieurs fichiers pour un upload, ou séparation par
des virgules pour un champ texte par exemple)
Nouveaux attributs

● L’élément output pour afficher un résultat suite à un calcul (utilisé pour la
sémantique et la mise en page)
● L’élément keygen pour générer une paire de clés cryptées
● L’élément progress pour représenter une barre de progression
● L’élément meter pour représenter un état d’avancement autre que par le biais
numérique (utilisé pour la sécurité d’un mot de passe par exemple)
Nouveaux éléments de formulaire

● L’utilisation des types de champ input peut permettre avec l’aide de CSS de
faciliter la compréhension d’un formulaire
● Il est possible d’effectuer des changements de style CSS en fonction de l’état d’
un champ input avec le sélecteur de pseudo classes “d’état d’élément d’
interface” :invalid
Un peu de CSS

● Ne fait pas partie du scope initial Web Forms 2.0, mais intéressant d’associer
ces fonctionnalités aux formulaires
● Les attributs draggable et dropzone combinés pour la fonctionnalité de “drag
and drop”
● L’attribut draggable déclare que votre élément peut se déplacer sur votre page
● L’attribut dropzone déclare que votre élément est un conteneur potentiel
Les attributs draggable et dropzone

● L’événement dragstart indique que l’élément draggable débute son
déplacement
● L’événement drag indique que l’élément draggable est en cours de
déplacement
● L’événement dragend indique que l’élément draggable finit son déplacement
Les événements associés (1)

● L’événement dragenter indique qu’un élément draggable entre dans le
périmètre d’un élément dropzone
● L’événement dragover indique qu’un élément draggable survole le périmètre
d’un élément dropzone
● L’événement dragleave indique qu’un élément draggable quitte le périmètre
d’un élément dropzone
● L’événement drop indique que l’élément dropzone reçoit un élément
draggable
Les événements associés (2)

● L’événement drag est déclenché continuellement lorsque l’élément draggable
est déplacé (même sans mouvement de curseur)
● L’événement dragover est lui aussi déclenché continuellement... ce
comportement pose problème car il empêche l’événement drop d’être perçu, il
faut donc le désactiver
● Le comportement des événements peut être variable selon les navigateurs
Les notions à connaître sur les
événements

● Pour porter des données de l’élement draggable vers l’élément dropzone
● Affectation des données au moment de l’événement dragstart avec la
métode setData()
● Récupération des données au de l’événement drop avec la méthode
getData()
● /! Impossible de récupérer les données du DataTransfer pour les dragenter,
dragover, etc ; il faut utiliser le local storage pour ces cas là
L’interface DataTransfer

HTML5 multimédia et
dessin

Sommaire
● Les éléments audio et vidéo
● Les types de formats et codecs
● Canvas
● SVG
● Canvas VS SVG

Les éléments audio et vidéo
Petit rappel
● Anciennement, des plugins propriétaires dans les navigateurs pour publier des
vidéos, de l’audio et des jeux
○ Flash
○ Silverlight
● Technologies puissantes mais non ouvertes et non standardisées par la
communauté, donc non pérennes
● HTML5 pour faire la même chose mais de façon native dans les navigateurs
○ Élément audio
○ Élément video
○ Canvas
○ SVG

Audio & vidéo : les éléments
● Le nouvel élément audio permet au navigateur de lire nativement un son audio,
c’est simple d’utilisation
<audio src=”audio.mp3”></audio>
● Le nouvel élément video permet au navigateur de lire nativement une vidéo, c’
est également simple d’utilisation
<video src=”video.ogv”></video>

Audio & vidéo : les attributs
● Les 2 éléments possèdent quelques attributs booléens
○ autoplay : pour lancer automatiquement la lecture
○ loop : pour avoir une lecture en boucle
○ controls : pour afficher des contrôles natifs au navigateurs
● Un attribut booléen ne prend pas de valeur
Exemple : autoplay / autoplay=”true”
● Les 2 éléments possèdent un attribut preload pour précharger le media, attribut
qui peut avoir plusieurs valeurs
○ auto : charge la totalité du media
○ meta : charge uniquement les méta-informations
○ none : pour ne pas précharger

Vidéo : attribut spécifique
● L’élément video possède un attribut spécifique poster afin d’afficher une image
de substitution avant la lecture d’une vidéo
<video src=”video.ogv” poster=”poster.jpg”></video>

Audio et vidéo, des Media Element
● Les éléments audio et video implémente l’interface HTML Media Element ce
qui vous permet d’accéder à des propriétés (modification ou lecture seule) ou de
gérer certains événements

Media Element : les propriétés
● Propriétés en modification
○ currentTime : position courante de lecture
○ paused : booléen pour indiquer si la lecture est en pause
○ volume : volume audio (0 à 1.0)
○ muted : booléen pour indiquer si mode silencieux
○ etc.
● Propriétés en lecture seule
○ duration : durée totale
○ ended : booléen pour indiquer si la lecture est terminée
○ networkState : valeurs pour indiquer l’accès au média
○ readyState : valeurs pour indiquer l’état du média
○ etc.
● Les valeurs des propriétés en temps sont en secondes

Media Element : les événements
● Les événements permettent d'interagir avec le lecteur
○ play() : lance la lecture
○ pause() : met en pause la lecture
○ load() : réinitialise l’élément et l’algorithme de sélection de ressource
○ canPlayType() : détecte les capacités de lecture du navigateur

Les types de formats et codecs
Une simplicité relative
● Les formats audio et vidéo sont nombreux et les navigateurs n’ont pas toutes les
mêmes capacités
● Pour palier les incertitudes de compatibilité il est possible de préciser plusieurs
fichiers source avec le nouvel élément source en précisant le type MIME
<audio>
<source src=”audio.mp3” type=”audio/mp3”>
<source src=”audio.aac” type=”audio/mp4”>
Pas de fichier audio disponible :(
</audio>

Cas plus complexes
● Il est également possible de préciser les codecs
<source src=”video.ogv”
type=”audio/ogv; codecs=theora, vorbis”>
● Il est également possible de différencier avec l’attribut media
<source src=”video.ogv”
type=”audio/3gpp” media=”handled”>
● Si le navigateur ne supporte rien il est toujours possible de le détecter via
canPlayType() et de faire appel aux anciennes technologies propriétaires

L’élément Canvas
● Le nouvel élément canvas introduit avec HTML5 permet de créer des dessins /
images de manière dynamique
● Il convient de spécifier ses dimensions en le déclarant
● Le contenu qui est déclaré dans l’élément ne sera visible que par les
navigateurs ne supportant pas l’élément
<canvas id =”cnvs” width=”400” height =”300”>
Votre navigateur ne supporte pas canvas :( </canvas>
● Il existe plusieurs polyfills pour paliers quelques manques pour certains
navigateurs

L’utilisation canvas
● Un élément canvas s’utilise via son API, on y accède en JavaScript en
récupérant un contexte
var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');

L’utilisation canvas
● Avec le contexte on peut alors accéder aux propriétés fondamentales
○ fillStyle : définit le style de remplissage
○ lineWidth : définit l’épaisseur du trait
○ etc.
● Et aux fonctions fondamentales
○ fillRect() : dessine un rectangle plein
○ lineTo() : dessine une ligne
○ drawImage() : dessine une image
○ etc.
ctx.fillStyle = 'blue';
ctx.lineWidth = 5;
ctx.fillRect(10, 10, 380, 200);

Les options du “crayon”
● Couleurs prédéfinies , spécifiques (hexadécimal ou RGBA)
○ ctx.fillStyle = 'yellow';
○ ctx.fillStyle = '#FFFF00' // aka yellow;
○ ctx.strokeStyle = 'rgba(0, 0, 200, 0.5)';
● 1 type de remplissage “fill” (plein)
○ ctx.fillRect(90, 210, 180, 120);
● 1 type de remplissage “stroke” (contours)
○ ctx.strokeRect(90, 210, 180, 120);
● Épaisseur du trait
○ ctx.lineWidth = 40;

● Créer un dégradé linéaire avec la fonction createLinearGradient(xA, yA,
xB, yB) avec A point de départ et B point d’arrivée
var gradient = ctx.createLinearGradient(100, 200, 400,
300);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(100, 200, 300, 100);
Le dégradé linéaire

● Créer un dégradé radial avec la fonction createRadialGradient(xA, yA, rA,
xB, yB, rB) avec r la longueur du rayon du point
var gradient= ctx.createRadialGradient
(200, 250, 50, 200, 250, 100);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(100, 200, 300, 100);
Le dégradé radial

● La forme du crayon au extrémités d’un tracé avec la propriété lineCap qui peut
prendre les valeurs butt (par défaut), round ou square
● La forme du crayon aux jointures d’un tracé avec la propriété lineJoin qui
peut prendre les valeurs miter (par défaut), round ou bevel
Les options avancées du “crayon”

● Un tracé correspond à un chemin, on explicite le début de l’enregistrement du
chemin avec la fonction beginPath()
● Un tracé peut être terminé avec la fonction closePath()
● Les méthodes moveTo() et lineTo() permettent de définir le tracé
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 300);
ctx.lineTo(100, 300);
// OPTIONNEL
ctx.closePath();
ctx.stroke();
Les tracés

Les tracés complexes
● Les fonctionnalités rectangulaires sans “Path”
○ fillRect(x, y, width, height) : remplit un rectangle
○ strokeRect(x, y, width, height) : entoure un rectangle
○ clearRect(x, y, width, height) : efface un rectangle
● Les fonctionnalités rectangulaires avec “Path”
ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke(); // marche avec fill() aussi
● Les fonctionnalités pour tracer des arcs
○ arc(...) et arcTo(...)
ctx.arc(300, 70, 35, 0, Math.PI*2, true);
● Les fonctionnalités “vectorielles”
○ bezierCurveTo(...)
○ quadraticCurveTo(...)

Les transformations
● Les transformations s’appliquent sur le contexte dans son ensemble mais n’
affecteront que les futures actions sur le canvas
● Réduction ou agrandissement
○ scale (x, y) : x et y coefficients appliqués horizontalement et
verticalement
● Rotation
○ rotate (angle)
● Translation
○ translate (x, y) : translation de x et y
● Transformation matricielle
○ transform(...) et setTransform(...)

La mémoire du contexte
● Il est assez fréquent de modifier le contexte pour diverses raisons, il est possible
d’enregistrer l’état d’un contexte
○ save() : pour mémoriser un état de contexte
○ restore() : pour récupérer un état de contexte
● Il est possible de mémoriser plusieurs états, la mémorisation fonctionnant
comme une pile
ctx.fillStyle = 'white'; ctx.save();
ctx.fillStyle = 'red'; ctx.save();
ctx.fillStyle = 'blue';
ctx.fillRect(...); // blue
ctx.restore();
ctx.restore();
ctx.fillRect(...); // white
// red not available ... :(

Les images
● Possibilité d’importer des images dans un canvas
○ drawImage(img, x, y) : importer une image avec ses dimensions
○ drawImage(img, x, y, width, height) : importer une image en la
redimensionnant
○ drawImage(img, imgx, imgy, imgwidth, imgheight, cnvsx,
cnvsy, cnvswidth, cnvsheight) : importer une zone de l’image en la
redimensionnant ; utilisée pour les sprites
● Il est obligatoire de charger dynamiquement le contenu à partir de l’objet Image
de JavaScript
var imageLoaded = new Image();
imageLoaded.onload = function() {
ctx.drawImage(imageLoaded, 100, 300, 200, 200);
}
imageLoaded.src = 'ippon_400x400.png';

Les patterns d’images
● Possibilité de créer un motif à partir d’une image avec la fonction
createPattern(img, option) avec les options repeat, repeat-x,
repeat-y, no-repeat
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;

● Possibilité de créer, lire, modifier et injecter des pixels d’une image
○ createImageData(width, height) : pour créer une image
○ getImageData(x, y, width, height) : récupérer une image d’une
certaine taille à partir d’un point
○ putImageData(imgData, x, y) : injecter une image
○ La propriété data permet d’accéder aux tableaux de valeur des pixels selon
le formalisme RVBA
Les images pixel par pixel

● Possibilité d’écrire du texte
○ fillText(txt, x, y, maxw) : écrit un texte avec maxw pour largeur
maximale (optionnel)
○ strokeText(txt, x, y, maxw) : entoure un texte avec maxw pour
largeur maximale (optionnel)
● Mesurer la taille d’un texte
○ measureText(txt) : détermine l’espace nécessaire pour un texte ; ctx.
measureText(txt).width;
● Propriétés du texte
○ font : police ; ctx.font = '20pt Georgia';
○ textAlign : alignement horizontal, options : start (défaut), end, left,
center, right
○ textBaseline : alignement vertical, options : alphabetic (défaut), top,
hanging, middle, ideographic, bottom
Le texte

Les effets
● Propriétés d’ombrage sur le contexte
○ shadowBlur : valeur du flou de l’ombrage
○ shadowColor : couleur de l’ombrage
● Propriété de transparence sur le contexte
○ globalAlpha : opacité du contexte
● Propriété de compositions sur le contexte
○ globalCompositionOperation : types de composition, options :
source-over (défaut), source-in, source-out, source-atop,
destination-over, destination-in, destination-out,
destination-atop, lighter, darker, copy, xor
● Fonction de masque sur le contexte
○ clip() : mémorise le chemin actuel pour se servir de masque
○ Possibilité de fusionner plusieurs masques

● Le canvas peut écouter les événements de la souris
○ Fonctions classiques onmousedown, onmousemove, onmouseup
cns.onmouseup = function(e) {
ctx.strokeStyle = 'black';
ctx.fillRect(e.offsetX, e.offsetY, 4, 4);
}
● Le body peut écouter les événements du clavier et on interagit ensuite avec le
canvas
○ Fonctions classiques onkeypress, onkeyup, onkeydown et propriété
keyCode de l’événement
document.body.onkeypress = function(e) {
ctx.strokeStyle = 'black';
if (String.fromCharCode(e.keyCode) === 'a')
ctx.fillRect(e.offsetX, e.offsetY, 4, 4);
}
Les événements souris et claviers

Animation du canvas
● Créer des animations complexes se définit via la boucle infinie draw > clear >
draw > clear > draw > ...
● Utilisation “basique” avec la fonction setInterval() pour itérer à intervalle de
temps régulier
● Utilisation “avancée” avec requestAnimationFrame() pour moins gaspiller
les temps morts entre les intervalles et ainsi y gagner en performance

Canvas from scratch ?
● Le canvas possède des propriétés et des fonctionnalités basiques, mais qui
combinées entre elles permettent de faire énormément de choses
● Cela demande de coder énormément de choses également
● Il existe beaucoup de librairies pour se simplifier la vie :
○ KineticJS : Éprouvée et polyvalente
○ Paper.js : Du vectoriel dans le canvas
○ Processing.js : Très simple d’accès car s’appuyant sur le langage
Processing (destiné aux non développeurs)
○ three.js : Pour faire de la 3D avec de la 2D (du moins sans WebGL si l’on
souhaite)
● Le canvas permet la connexion avec WebGL (qui se base sur le standard 3D
OpenGL), loin d’être amplement supporté étant donné la compatibilité tardive

L’élément SVG
● Format d’images vectorielles, contrairement aux images traditionnelles qui sont
réalisées avec des pixels
● L’élément svg permet au navigateur de déclarer une image vectorielle
<svg>
<circle cx="200" cy="100" r="100"></circle>
</svg>
● Une image vectorielle ça peut aller loin ...

Décrire un élément SVG
● Le contenu d’un élément SVG est décrit en XML, avec divers éléments
○ circle : pour créer un cercle
○ rect : pour créer un rectangle
○ line : pour créer une ligne
○ etc ; cf. https://developer.mozilla.org/fr/docs/SVG/Element
● La description d’une image vectorielle peut s’avérer vite “verbeuse”
● Un élément SVG est généralement contenu dans un fichier (zippé) plutôt que
dans les sources directement
● Une image vectorielle est généralement créée avec des logiciels adaptés
(Inkscape, Illustrator, Sketch, GIMP, etc.)

Pourquoi un élément SVG ?
● Le navigateur interprète “à chaud” les formes vectorielles, l’image s’affiche alors
dans les meilleures conditions (dimensions, résolutions)
● Il est également possible de lire ou modifier le contenu, et donc se le ré-
approprier facilement
○ Appliquer un style CSS
○ Apporter du dynamisme et des interactions via JavaScript
○ Apporter des filtres et des effets

SVG from scratch ?
● Idem pas la peine de repartir de zéro
● Il existe beaucoup de librairies pour se simplifier :
○ D3.js : Top pour la “data-visualization”
○ Raphaël : Librairie polyvalente, qui simplifie l’utilisation des images
vectorielles
○ Snap.svg : Le successeur de Raphaël

Canvas VS SVG : comment choisir ?
● En fonction des images souhaitées
● En fonction des compatibilités navigateurs
○ Attention SVG : > IE8 & > Android 2.3
● En fonction de la scalabilité des images
● En fonction des interactions / animations

HTML5 avec CSS3

Sommaire
● De CSS2 à CSS3
● Les implémentations selon les navigateurs
● Gestion media avec les media queries
● Propriétés de texte
● Les décorations
● Les modes de positionnement

De CSS2 à CSS3
● 1997 : Début du travail sur les spécifications du CSS2
● 1999 : Début du travail sur les spécifications du … CSS3
● CSS2 introduit de très nombreuses propriétés, notamment de positionnement
● CSS3 propose une approche “modulaire” dans la façon du travail : spécifications
divisées en modules, par ex le module “Animations”, le module “Bordures”, etc.

Les implémentations selon les
navigateurs
Les préfixes propriétaires
● CSS3 est toujours en cours de rédaction : implémentation progressive dans les
navigateurs
● Pour commencer à implémenter les nouvelles propriétés sans attendre la
spécification finale, les moteurs de rendu utilisent des préfixes propriétaires
● Un moteur de rendu pouvant être utilisé par plusieurs navigateurs
● En fait on devrait dire les implémentations selon les moteurs de rendu

● -webkit- pour Webkit (moteur de rendu), utilisé par Safari mais aussi Chrome,
Android, etc.
● -moz- pour Mozilla, moteur de rendu Gecko utilisé par Firefox, Thunderbird,
etc.
● -o- pour Opera, moteur de rendu Presto utilisé par Opera, Nintendo DS
Browser, etc.
(anciennement vrai les nouvelles versions utilisent -webkit-)
● -ms- pour Microsoft, moteur de rendu Trident, utilisé par Internet Explorer
Les préfixes à connaître

● Les préfixes c’est pas l’extase, mais ça sera quand même toujours plus propre
que les hacks CSS utilisés dans le passé
● Dans la pratique on utilise tous les préfixes propriétaires
● On ajoute toujours la propriété réelle en plus des propriétaires ; lorsque la
propriété passe en Release Candidate, les navigateurs remplacent leurs
propriétés respectives par la vraie propriété
section .trainings {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Les préfixes, une fausse bonne idée ?

CSS2 et les media
● Gestion “basique” de CSS2 pour les différents medias
● Un media c’est un écran, un support papier (pour l’impression), une plage
braille, une TV, etc.
● On peut déclarer une feuille de style par media souhaité, ou bien ajouter la règle
@media dans une feuille CSS pour ajouter un style propre à un media
Gestion media avec les media queries

● Le problème, il n’y a pas de gestion fine pour les différents supports au sein d’un
même media, les écrans par exemple
● Désormais, avec tous les terminaux possédant un écran (smartphone, tablette,
PC, TV, etc.), on a des écrans allant de 2.5” à 27” et plus…
● On ne peut plus proposer le même rendu, soit on fourche notre rendu, soit celui-
ci doit s’adapter (Responsive Web Design)
L’avènement des nouveaux terminaux

● Le Responsive Web Design est une approche qui permet à votre rendu de s’
adapter en fonction des capacités du media sur lequel vous voulez l’afficher
● Cela peut être sur les capacités de votre écran mais aussi sur celles de votre
réseau par exemple
● CSS3 peut s’approprier certaines capacités avec les media queries, mais pas
toutes (pas le réseau par exemple)
Responsive Web Design ?

● Distinction plus fine des capacités des medias
● Les distinctions : color, color-index, aspect-ratio, ratio, device-
aspect-ratio, device-height, device-width, grid, height,
monochrome, orientation, resolution, scan, width
● On peut ajouter les préfixes min- et max- lorsque les valeurs des capacités
sont numériques
● On peut combiner les opérateurs logiques and, only et not
Les media queries

● La propriété box-sizing délimite la taille d’une boîte
● La taille peut être définie par rapport au contenu via la propriété content-box
(valeur par défaut)
● La taille peut être définie par rapport à sa marge intérieure via la propriété
padding-box
● La taille peut être définie par rapport à sa marge intérieure et sa bordure via la
propriété border-box
● Cette propriété s’avère très utile lorsque l’on veut respecter une largeur en
positionnant plusieurs éléments côte à côte sans se soucier des marges
intérieures et des bordures
Propriété box-sizing

Propriétés de texte
Un peu d’originalité
● CSS introduit la possibilité de définir ses propres polices à partir d’un fichier de
polices
● Pour déclarer la police, il faut utiliser la règle @font-face
● Pour utiliser cette police, il suffit ensuite de la référencer via la propriété “font-
family”, tout comme les font-family “classiques”

Faites de l’ombre à votre texte
● On peut maintenant ajouter très simplement une ombre à un texte avec la
propriété text-shadow

Ne pas dépasser
● CSS3 introduit la possibilité de “casser” les mots pour qu’ils soient affichés sur
plusieurs lignes plutôt que de sortir de l’élément parent : word-wrap: break-word;
● On peut également gérer les “cassures” de manière plus globale avec la
propriété “word-break”, qui permet par exemple de couper n’importe quel mot au
milieu dès qu’il arrive en fin de div : word-break: break-all;
● Ou à l’inverse, pour être sûr qu’aucun ne soit coupé : word-break: keep-all;
● Une autre propriété permet de gérer les débordements pour les remplacer, par
exemple, par “...” : text-overflow: ellipsis;

Comme dans les journaux
● La propriété column-count permet désormais de diviser un élément en plusieurs
colonnes, à la façon d’un journal
● L’avantage est la répartition fluide des textes entre les différentes colonnes
● On peut aérer les colonnes avec la propriété column-gap
● On peut séparer les colonnes par des indicateurs visuels (ligne par exemple)
avec la propriété column-rule

Les décorations
Simplifiez-vous la vie !
● Plus besoin de composer avec de multiples images pour créer des ombres, des
dégradés, des coins arrondis ou des arrière-plans multiples
● En combinant plusieurs effets on peut obtenir des choses dignes de
“Photoshop”
● Le faire en CSS plutôt que de passer par des images améliore le chargement de
la page et assure une meilleure maintenabilité
● Faire attention aux compatibilités navigateurs...

Les décorations
Les ombres
● La propriété box-shadow permet de créer une ombre sur un bloc
box-shadow: h-pos v-pos (blur) (spread) (color) (inset);
○ Décalage horizontal et/ou vertical de l’ombre
○ Dureté de l’ombre
○ Taille de l’ombre
○ Couleur de l’ombre
○ Ombrage intérieur ou extérieur
section .note {
-moz-box-shadow: -2px 2px 4px #c0c0c0;
-webkit-box-shadow: -2px 2px 4px #c0c0c0;
box-shadow: -2px 2px 4px #c0c0c0;
}

Les décorations
Les arrondis
● La propriété border-radius permet de créer des bords arrondis sur un bloc
● A tel point que l’on peut transformer un carré en un rond !

Les décorations
Les dégradés (1)
● Les fonctions linear-gradient et radial-gradient créent des images qui
représentent des dégradés
● Ces images sont sans dimensions intrinsèques, cela signifie qu’elles s’adaptent
aux éléments auxquelles elles sont appliquées
● Les dégradés peuvent être utilisés partout où une image peut être déclarée:
background, background-image, border-image, list-style-image
● La fonction linear-gradient est utilisée pour réaliser un dégradé linéaire
● La fonction radial-gradient est utilisée pour réaliser un dégradé radial

Les décorations
Les dégradés (2)
● Dans un dégradé, possibilité d’ajouter X couleurs, avec chacune une “position”
et une opacité : très puissant mais très vite complexe à lire également
● Syntaxes hétérogènes selon les navigateurs
● Favoriser les outils de génération tous prêts, par exemple : http://www.colorzilla.
com/gradient-editor/

Les décorations
Les arrières plans multiples
● Possibilité d’appliquer plusieurs images d’arrière-plan à un même élément en
déclarant X images pour un background
● On peut déclarer les propriétés background-size, background-position,
background-repeat, background-origin de manière distincte pour chaque image
composant le background, ou de manière commune
● A utiliser à bon escient puisque les “shadow” et les “border” permettent de
mettre en valeur certains arrières plans
● Cela permet le “défilement parallaxe”, technique permettant de créer une illusion
de profondeur en faisant défiler les images de l’arrière plan plus lentement que
les images du premier plan

Les modes de positionnement
Ce que l’on a déjà vu
● Les media queries avec des points de rupture et leurs associations avec la
propriété float pour redéfinir le positionnement “à chaud” des éléments dans une
page
● Le positionnement des flux de textes comme dans les journaux avec la propriété
column-count

Les modes de positionnement
Flexbox, la nouveauté
● Jusque là, les principaux type de positionnement étaient block, inline, inline-
block et table
● Nouveau type de positionnement : flex pour un bloc “flexible”
● Les éléments contenus dans un bloc typé flex, peuvent avoir un comportement
adaptatif si la taille de celui-ci a été atteinte, plusieurs comportements peuvent
être déclarés avec la propriété flex-wrap
● La flexibilité du bloc peut être horizontale flex-direction: row ou verticale flex-
direction: column
● Pas encore totalement supporté partout !

CSS3 les sélecteurs

Sommaire
● Parcourir le DOM
● Sélecteurs d’attributs
● Sélecteurs de pseudo classes
● Combinateur d’adjacence indirecte

Parcourir le DOM
Encore plus de sélecteurs
● Pour appliquer un style à un élément il existe plusieurs manières de le
sélectionner : par élément, par attribut, par affiliation, par action, par état
● Le choix de la sélection s’effectue selon les attentes du style que l’on veut
appliquer, mais aussi par “la portée” de la sélection : générique ou spécifique
● Beaucoup de sélecteurs en CSS2 existaient avant CSS3, ils sont toujours d’
actualité
● CSS3 vient enrichir le panel de sélecteurs possibles, pour d’offrir de nouvelles
possibilités de style, mais aussi pour en faciliter la maintenabilité

Sélecteurs d’attributs
Affiner la recherche de l’attribut
● Possibilité en CSS2 de sélectionner un attribut ayant une valeur précise, par
exemple input[type=”button”]
● CSS3 permet d’affiner les possibilités de recherche sur la valeur de l’attribut
● Attribut commençant par : [attribute^=theValue]
● Attribut finissant par : [attribute$=theValue]
● Attribut contenant : [attribute*=theValue]

Sélecteurs de pseudo classes
Le panel des pseudo classes
● Possibilité en CSS2 de sélectionner un élément en fonction de sa pseudo-classe
“action Usager”, par exemple a:hover
● CSS3 permet d’affiner les possibilités de recherche avec les pseudo classes
“structurelles”, “d’état d’élément d’interface”, “de contenu”, “de négation” et “:
target”

Sélecteurs de pseudo classes “structurelles” (1)
● Ils permettent de sélectionner plus précisément des éléments enfants
● Sélectionner le n-ième enfant de son parent avec E:nth-child(n)
● Sélectionner le n-ième enfant de son parent en commençant par la fin avec E:
nth-last-child(n)
● Les indexes commencent à 0

● Sélectionner le premier enfant de son parent en avec E:first-child
● Sélectionner le dernier enfant de son parent en avec E:last-child
● Sélectionner le seul enfant de son parent en avec E:only-child
● Sélectionner un élément qui n’a aucun enfant avec E:empty

● Possibilité de sélectionner par type également sans se soucier de l’élément
parent
● En remplaçant “child” par “of-type”, on retrouve les mêmes correspondances
pour sélectionner par type : E:nth-of-type(n), E:nth-last-of-type(n), E:first-of-type,
E:last-of-type, E:only-of-type

● Sélectionner un élément qui n’a aucun enfant avec E:empty
● Sélectionner l’élément racine du document E:root

Sélecteurs de pseudo classes “d’état”
● Possibilité de sélectionner un élément en fonction de son état dans l’interface
● Les champs peuvent être activés E:enabled ou désactivés E:disabled
● Les case à cocher et les boutons radio peuvent être cochés E:checked ou
indéterminés E:indeterminate
● Il existe également les sélecteurs de pseudo éléments “fragments d’éléments d’
interface”. La partie d'un élément qui est actuellement sélectionnée/mise en
exergue par l'usager E::selection. Par exemple, la sélection d’un texte.

Sélecteurs de pseudo classes “de contenu”
● Possibilité de sélectionner un élément dont le contenu textuel concaténé
contient une sous-chaîne E:contains("theValue")

Sélecteurs de pseudo classes “de négation”
● Possibilité de sélectionner un élément qui n’est pas concerné par un sélecteur
E:not(“selector”)

Sélecteurs de pseudo classes “:target”
● Possibilité de sélectionner un élément qui est la cible de l'URL d'origine
contenant lui-même un fragment identifiant. Par exemple si l’URL courante est
http://foo.com/#thisSection, la pseudo-classe “:target” permettra de sélectionner
l’élément ayant pour id “thisSection”

Combinateur d’adjacence indirecte
Qui est présent ?
● Possibilité en CSS2 de sélectionner un élément F qui est immédiatement
précédé par un élément E : E + F
● Possibilité en CSS3 de sélectionner un élément F qui est précédé par un
élément E : E ~ F
● Cela signifie l’élément F est il précédé d’un élément E ? Si oui ont-ils bien le
même parent ? Si c’est le cas alors l’élément F est sélectionné.

CSS3 les transformations,
transitions et animations

Sommaire
1. Pourquoi privilégier les effets CSS3 plutôt que les effets
en JS
2. Les transformations graphiques
3. Les transitions
4. Les animations

Pourquoi privilégier les effets CSS3
plutôt que les effets en JS
Éviter de lier le rendu au Javascript
● Le rendu final ne sera effectué qu’une fois les scripts chargés
● Avec CSS3, tous les styles sont au même endroit : plus facile à maintenir
● Le rendu est indépendant du JS

Pourquoi privilégier les effets CSS3
plutôt que les effets en JS
Légèreté et rapidité
● Les scripts JavaScript sont allégés
● On évite une requête serveur pour récupérer le JavaScript qui gère le rendu
● Le rendu CSS3 sera plus rapide que le rendu JavaScript

Les transformations graphiques
Origine et flux
● Par défaut, l’origine de la transformation est le point central (50%, 50%) de l’
élément à transformer
● Pour le changer, utiliser la propriété transform-origin
● Attention ! Il n’y a plus de notion de flux lorsqu’on utilise les transformations

La rotation
● Possible d’effectuer une rotation sur les éléments dans toutes les directions,
aussi bien en 2D qu’en 3D
● Utilisation de la fonction transform : rotate() en 2D
● Utilisation des fonctions transform : rotateX(), transform : rotateY(),
transform : rotateZ() ou transform : rotate3d() en 3D
● Attention à l’axe de rotation. Par défaut l’élément pivote par rapport à son
centre. Pour changer cet axe, on utilise la propriété transform-origin

La translation
● Possible d’effectuer une translation pour les éléments dans toutes les directions,
aussi bien en 2D qu’en 3D
● Utilisation de la fonction transform : translate() en 2D
● Utilisation des fonctions transform : translateX(), transform : translateY(),
transform : translateZ() ou transform : translate3d() en 3D
● Attention ! La fonction translate() ne doit pas être utilisée comme méthode de
positionnement des éléments mais plutôt pour les transitions ou animations. Elle
ne remplace pas donc le positionnement CSS “classique”

Le zoom
● Possible d’effectuer un zoom pour les éléments dans toutes les directions, aussi
bien en 2D qu’en 3D
● Utilisation de la fonction transform : scale() en 2D
● Utilisation des fonctions transform : scaleX(), transform : scaleY(), transform
: scaleZ() ou transform : scale3d() en 3D
● Attention à la perte de qualité visuelle sur un agrandissement (élément texte en
particulier)

La distorsion
● Possibilité d’effectuer une distorsion (décalage de l’axe X et de l’axe Y) de
l'élément
● Utilisation de la fonction transform : skew()
● Utilisation des fonctions transform : skewX(), transform : skewY()

Un peu de mathématiques
● Possibilité d’appliquer des transformations mathématiques, avec l’aide de
matrices
● Utilisation de la fonction transform : matrix()
● Même propriété entre la 2D et la 3D mais avec plus de paramètres
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0, 0, -0.5, 0.866, 0.866, 0, ...);

Combinez le tout
● Les différentes fonctions peuvent être chaînées
transform: translate(20px, 20px) rotate(50deg) skew(20deg, 30deg);
● Attention à l'ordre de déclaration des fonctions. Un translate() puis un scale() n'a
pas le même effet qu'un scale() puis un translate() !
● A utiliser à bon escient

Les transitions
Une question d’états
● Transition : passage d’un état 1 à un état 2
● Il faut un événement qui va faire passer de l’état 1 à l’état 2
● Exemple : passage d’un bouton d’un état “normal” à l’état “hover” (au passage
de la souris)

Les transitions
Comment définir une transition ?
● Définir (ou pas) l’état normal de l’élément
● Ajouter la transition désirée en cas de changement d’état, sur l’état “normal”
● Définir les changements subis lors du deuxième état
● A noter : l’élément effectuera la transition inverse lorsqu’il perdra son état 2 (par
exemple notre div retrouvera sa forme initiale si la souris n’est plus sur lui)

Les animations
Une keyframe = une définition d’animation
● Pour définir une animation, il faut utiliser la règle @keyframes
● Il faut ensuite lui spécifier un nom
● A l’intérieur de cette règle il faut définir l’animation réelle : c’est-à-dire définir
quelles sont les transformations que va subir l’élément, état par état.
● On peut bien sûr combiner plusieurs propriétés au sein d’une même animation

Les animations
Et pour la voir ?
● On utilise la nouvelle propriété animation en lui spécifiant le nom et la durée
● On peut régler le délai avant le démarrage de l’animation avec la propriété
animation-delay
● On peut aussi régler le statut initial de l’animation : en pause, en cours
● On peut gérer le nombre de cycles que fera l’animation, 1, 5, infini…

CSS3 avec les
préprocesseurs

Sommaire
● À la découverte des préprocesseurs CSS
● Les principaux préprocesseurs CSS
● Liste des fonctionnalités

À la découverte des préprocesseurs
CSS
C’est quoi un préprocesseur CSS ?
● Pas un nouveau langage, mais plutôt un métalangage (du code pour produire du
code)
● Ça ne vient pas remplacer CSS, ça vient produire du CSS
● Pas un standard W3C
● Nouvelles syntaxes, dérivées fortement de celle de CSS
● C’est avant tout un outil

À la découverte des préprocesseurs
CSS
A quoi ça sert un préprocesseur CSS ?
● A rendre plus dynamique le langage CSS qui est très statique (pas de variables,
pas de boucles, pas d’héritage, pas de fonctions)
● Étendre les possibilités de l’intégration ; sans pour autant être du CSS et donc
passer par une nouvelle normalisation W3C
● A factoriser du code et donc le rendre plus lisible et maintenable
● Produire un CSS valide sans passer par une interprétation du navigateur, c’est
lors du “préprocessing” que la la validation s’effectue

Les principaux préprocesseurs CSS
SASS
● Préprocesseur développé en Ruby (nécessite une machine virtuelle Ruby)
● Fichiers .sass
● Axé développeur, car plutôt basé sur les lignes de commande et plus dur d’
installation
● Le site officiel : http://sass-lang.com
● Utilisé par “Zurb Foundation” mais également par “Twitter Bootstrap” désormais

LESS
● Préprocesseur développé en JavaScript
● Peut s’utiliser côté client (via less.js) ou côté serveur (module node.js)
● Fichiers .less
● Axé intégrateur, car simplicité d’installation (du moins côté client) et d’utilisation
● Le site officiel : http://lesscss.org
● Utilisé par “Twitter Bootstrap”

Les autres
● Stylus : préprocesseur libre et gratuit qui est un module node.js
● Compass : pas un préprocesseur mais un framework SASS
● Google Closure Stylesheets : préprocesseur codé par les équipes Google en
Java, le plus complexe, à utiliser pour la performance. Très peu utilisé dans les
communautés.

Liste des fonctionnalités
Facilite la lecture des sources
● Découpage facile en plusieurs fichiers ayant chacun un rôle bien précis
● Possibilité de créer des règles imbriquées
● Utilisation des commentaires dans le fichier source mais pas dans la réalisation

Liste des fonctionnalités
Assure la maintenabilité CSS
● Déclaration de variables
● Utilisation de fonctions
● Notion d’héritage
● Création de mixins

HTML5 Web API

Sommaire
● Présentation Web API
● Géolocalisation
● Web Storage

Présentation Web API
Introduction
● HTML5 définit un nombre assez important de nouvelles API
● Leur pertinence est variable en fonction du type de projet concerné (toutes ne
sont pas utiles dans tous les projets)
● La formation illustre 3 API assez fréquemment utilisées :
○ Géolocalisation
○ Canvas
○ Web Storage (stockage local des données)

Présentation Web API
Autres API, nombreuses et inégalement implémentées
● Video et Audio : capacités multimédia
● Offline Web app : applications déconnectées
● Drag & Drop
● Web SQL Database et IndexedDB : bases de données
● Selectors : méthodes de sélection DOM
● Web Workers : JavaScript en (multi)tâches
● ...

Géolocalisation
Présentation
● Permet de récupérer les coordonnées complètes du client : latitude, longitude,
altitude (et notion de temps)
● Sur les terminaux disposant d'un module GPS, la précision sera souvent
meilleure que pour les autres, où la localisation par l'IP ou par triangulation (wifi,
GSM) sera utilisée
● C'est l'objet navigator qui sera porteur de l'information
if (navigator.geolocation) {
// API est disponible
}

Géolocalisation
Récupération des coordonnées (théorie)
● L'exploitation de cette API ne peut se faire qu'après approbation de l'utilisateur
● Deux méthodes sont proposées :
○ getCurrentPosition() : récupère ponctuellement la position
○ watchPosition() : suit la position
● Les deux fonctions vont faire appel à des fonctions de callback que le
développeur spécifiera
● Les deux fonctions permettent aussi de définir une fonction de callback pour la
gestion des erreurs : TIMEOUT, POSITION_UNAVAILABLE,
PERMISSION_DENIED, UNKNOWN_ERROR
● Enfin, il est aussi possible de définir certaines options (troisième paramètre de la
fonction)

Géolocalisation
Récupération des coordonnées (pratique)
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback, {
maximumAge:600000, // utilisation du cache ou non
timeout:0, // timeout
enableHighAccuracy:true // précision accrue (GPS)
}
);

Géolocalisation
Avec Modernizr
● Penser à utiliser Modernizr pour tester le support et à défaut proposer une
implémentation alternative (polyfill)
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geolocation.js',
nope: 'geolocation-polyfill.js'
});
● Il existe une multitude de polyfills pour les API HTML5 : https://github.
com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#geo-location

Présentation
● Nouvelle technique pour stocker localement des données
● Remplace avantageusement les cookies ou les connexions aux bases de
données distantes (en Ajax par exemple)
● Capacité allant de 5 à 10 Mo en général (cela dépend des navigateurs)
● Les données sont stockées sous forme clef-valeur
● Le stockage est réalisé par domaine (isolation)
● L’interface Storage possède deux interfaces “filles” :
○ sessionStorage sera limitée à la durée de la session
○ localStorage permet un stockage sans limite de durée
● Les 2 interfaces “hérite” des mêmes méthodes d’accès
Web Storage

Les méthodes d’accès
● setItem(clef, valeur) : stocke une valeur
● getItem(clef) : récupère une valeur
● removeItem(clef) : supprime une valeur
● clear() : supprime tout (pour le domaine donné)
● key(index) : récupère la clef d'indice 'index'
● Et une propriété length qui indique le nombre de paires clef/valeur
Web Storage

Web Storage
Avec Modernizr
● Penser à utiliser Modernizr pour tester le support et à défaut proposer une
implémentation alternative (polyfill)
Modernizr.load({
test: Modernizr.localstorage, // ou sessionstorage
yep : 'localStorage.js',
nope: 'localStorage-polyfill.js'
});
● Il existe une multitude de polyfills : https://github.
com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#web-storage-
localstorage-and-sessionstorage

A retenir
● Très simple d’utilisation
● Le format chaînes de caractères nécessite de faire des transformations (JSON.
stringify(), image en base64, etc.)
● Ça reste très limité au niveau de l’espace disponible, si vous avez vraiment
besoin de place : IndexedDB
Web Storage

Librairie Modernizr

Sommaire
● Présentation Modernizr
● Modernizr pour CSS
● Modernizr pour JavaScript
● Le compagnon yepnope

Présentation Modernizr
Introduction
● L'univers des navigateurs web est très fragmenté
● Plusieurs acteurs, plusieurs versions, plusieurs OS
● Les possibilités sont donc variables (HTML5, CSS3, API JavaScript)
● Afin qu'une application puisse tirer pleinement profit de la plate-forme sur
laquelle elle s'exécute, elle doit connaître ses possibilités
● Des solutions permettent cette détection, Modernizr en est une
● Modernizr supporte la quasi totalité des navigateurs

Son fonctionnement
● Pour utiliser Modernizr, il suffit de l'ajouter aux ressources de type script de la
page
● Modernizr ne s'appuie pas sur la technique du « User Agent Sniffing » car trop
imprécise
● Il teste directement la capacité à faire du navigateur et va proposer 2 mises en
oeuvre
● Une mise en oeuvre CSS, qui s'appuiera sur des classes pour adapter le
comportement de la page aux capacités CSS
● Une mise en oeuvre JavaScript, avec un test conditionnel qui permettra
d'adapter le code JavaScript aux capacités offertes, notamment avec les polyfills

Les polyfills
● Un « polyfill » (ou polyfiller) est un morceau de code JavaScript qui va émuler
une fonctionnalité non supportée par un navigateur de telle sorte que le
développeur puisse l'utiliser
● Exemple classique : ajout du support de canvas dans Internet Explorer en
s'appuyant sur Silverlight ou à défaut sur du VML
● Il existe presque un polyfill (souvent plusieurs) pour chaque fonctionnalité
HTML5 : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-
Polyfills

Modernizr pour CSS
Modernizr pour CSS (théorie)
● Lors du premier chargement de la page, la librairie exécute sa série de détection
de fonctionnalités et utilise les résultats pour ajouter des attributs de classe à l’
élément <html>
<html class=”js opacity cssgradients no-csscolumns ...”
● Ajout d'une classe « no-js » à l'élément html permet de prévoir un comportement
spécifique si le JavaScript n'est pas disponible
● Le script Modernizr doit être défini dans l'élément head et après les définitions
de style

Modernizr pour CSS
Modernizr pour CSS (pratique)
<html class="js boxshadow cssgradients no-csscolumns ...">
<style type=”text/css”>
.csscolumns {
/* pour les navigateurs supportant multi-column */}
.no-csscolumns {
/* pour les navigateurs NE supportant PAS multi-column */}
</style>
<script src="modernizr.js"></script>

Modernizr pour JavaScript
Mise en oeuvre JavaScript (théorie)
● Modernizr propose de construire une dépendance JavaScript sur mesure en ne
sélectionnant QUE les fonctionnalités que l'on souhaite tester
● L'objet Modernizr expose les capacités détectées, facilitant l'écriture du code
JavaScript
● La documentation sur les capacités détectables www.modernizr.com/docs
● Des plug-ins sont disponibles pour étendre encore plus le champ des tests (dart,
vibration, notification, cors, ...)
● Il est également possible de faire appel au “media queries” via Modernizr
Modernizr.mq(‘only screen and (max-width: 480px)’);

Mise en application
Mise en oeuvre JavaScript (pratique)
if (Modernizr.localstorage) {
// script si local storage disponible
} else {
// script si local storage NON disponible
}

Le compagnon yepnope
Présentation
● Le code JavaScript présenté précédemment n'est pas optimal
● Quelle que soit l'aptitude du navigateur, le code pour les deux scénarios (apte
ou non) est chargé dans la page : pas optimal en volume, ni en lisibilité
● L'idéal serait de ne charger QUE le script correspondant
● yepnope.js est un chargeur de scripts utilisé en interne dans Modernizr et qui
permet un chargement spécifique

Mise en oeuvre (théorie)
● yepnope va permettre de ne charger que les scripts nécessaires adaptés aux
capacités du navigateur
● Le code n'embarquera plus explicitement les tests if
● Les valeurs pour 'yep' et 'nope' sont des tableaux : plusieurs ressources, aussi
bien CSS que JS, peuvent être chargées
● Modernizr.load admet aussi bien une chaîne, un objet ou un tableau d'objets
● Le test peut porter sur plusieurs aptitudes : l'expression sera évaluée pour
déterminer le booléen correspondant

Mise en oeuvre (pratique)
Modernizr.load({
// le test sur le support du navigateur
test: Modernizr.geolocation,
// chargements (yep/nope)
yep: "geolocation.js",
nope: "geolocation-polyfill.js",
// appelée à la toute fin
complete: function() {console.info("done");}
});

Ippon Technologies - 43, avenue de la grande Armée 75116 Paris
01 46 42 48 48 - contact@ippon.fr - www.ippon.fr - blog.ippon.fr
- www.ipponusa.com - www.ippon-hosting.com

Formation html5 CSS3 offerte par ippon 2014

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Formation html5 CSS3 offerte par ippon 2014

Similaire à Formation html5 CSS3 offerte par ippon 2014 (20)

Plus de Ippon

Plus de Ippon (16)

Formation html5 CSS3 offerte par ippon 2014