HTML 5

© Proxym-IT
http://twitter.com/proxymit
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
Préparer et animer par Mahmoud N’bet

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Présentation
Les nouvelles balise
sémantiques
Nouvelles APIs HTML5
Les nouveaux sélecteurs
et pseudo-formats
Les nouvelles propriétés
Les animations
Les bonnes pratiques
Présentation
Les medias queries
Mise en page flexible
les images flexibles

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Introduction à HTML5
• HTML5 est la nouvelle version du standard
HTML. Il apporte non seulement l'utilisation
de média riches (vidéo, audio, SVG, etc.) mais
aussi des fonctionnalités permettant le
développement d'applications web bien plus
attractives et interactives.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT
Les nouveautés de HTML5
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Sémantique Éléments
Graphique
Multimédia
Offline / Storage
File / Hardware Access
Realtime / Communication
CSS3
18/11/2014

© Proxym-IT
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le Doctype (avant tous)
• Le doctype est le préambule d’une page HTML,
il spécifie le type de document.
XHTM5
<!DOCTYPE html>
Cela permet au navigateur ne supportant pas encore HTML5 de passer en mode
standard et ainsi d'ignorer les balises inconnues.

© Proxym-IT
XHTML
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Une structure simplifiée
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
</head>
<body>
…
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
HTM5
<!DOCTYPE html>
<html lang ="fr" >
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" >
</head>
<body>
…
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Déclarer l'encodage de caractères

© Proxym-IT
Les nouvelles balise sémantiques
• Plusieurs balises ont été introduites avec HTML5 pour délimiter
les différentes zones qui constituent la page web :
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• <main> : layout
• <header> : en-tête ;
• <footer> : pied de page ;
• <nav> : liens principaux de navigation ;
• <section> : section de page ;
• <aside> : informations complémentaires ;
• <article> : article indépendant.
Le code JavaScript HTML5shiv permet de faire en sorte que ces
balises soient reconnues pour les versions d'Internet Explorer
antérieures à IE9.

© Proxym-IT
• <hgroup> : Groupe des entêtes éléments.
• <details> : précise les détails supplémentaires
qui peuvent être masqués ou affichés sur
demande.
• <summary> : Définit une position visible d'un
élément <details>
• <figure> : définit des images, des diagrammes,
des photos, du code, etc…
• <figcaption> : légende pour la balise <figure>.
• <output> : représente le résultat d’un calcul
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• Pour la balise <form>
– autocomplete : auto complétion.
– novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.
• Pour la balise <input>
– autocomplete : auto complétion.
– placeholder : Un conseil pour aider les utilisateurs à remplir le champ de saisie.
– required : Indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire. step : Indique
l’intervalle entre les valeurs.
– autofocus : Définit le focus lors du chargement de la page.
– form : Spécifie à quel formulaire le champ appartient.
– formaction : Remplace l'attribut "action" du formulaire.
– formenctype : Remplace l'attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé
avant d’être envoyé au serveur.
– formmethod : Remplace l’attribut "method" du formulaire.
– formnovalidate : Remplace l'attribut "novalidate" du formulaire. S'il est présent le champ de saisie ne devrait pas être
validé lors de son envoi.
– formtarget : Remplace l'attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est
soumis.
– multiple : Si présent, l’utilisateur peut entrer plusieurs valeurs.
– pattern : Définit un motif.
• Nouveaux types Pour la balise <input>
– datetime; datetime-local; date; month; week; time; tel; number; range; email; url; search; color

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
L’attributs data-*
• HTML5 permet d'associer des données directement dans un
élément HTML à l'aide des attributs data-*
Syntaxe
<element data-attr="valeur" > </element>
<img src="mamoto.jpg" alt="Une moto rouge" data-auteur="Simon" data-lieu="Strasbourg" data-materiel="
EOS" data-gps="48.582967,7.74828">
Exemple
L'intérêt principal de cet attribut est de
simplifier le stockage des données dans le
document directement dans un
élément. Par exemple, dans une galerie
d'images on peut stocker : le nom de
l'auteur, le lieu... dans l'image elle-même,
puis afficher ces informations suivant
notre besoin.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
CHROME FF SAFARI IE OPERA IOS ANDROID
<Header> élément YES YES YES 9+ YES 6.0+ 4.4+
<main> élément YES YES YES NO YES 7.0+ 4.4+
<nav> élément YES YES YES 9+ YES 6.0+ 4.4+
Field types : date YES NO NO NO YES YES YES
Field types : color YES NO NO NO YES NO YES
datalist YES YES NO 10+ YES NO NO
<progress> élément YES YES YES 10+ YES 7.0+ 4.4+
<meter> élément YES YES YES NO YES NO 4.4+
Form validation YES YES YES 10+ YES YES YES

© Proxym-IT
Syntaxe minimale pour les lecteur des fichiers vidéo et audio:
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Multimédia : vidéo / audio
• Une des grandes nouveauté de HTML5 est la prise en
charge sans plugin, de la lecture des flux audio et vidéo.
<video src="media/movie.mp4" controls> </video>
<audio src="media/file-audio.ogg" controls> </audio>
<video width="320" height="240" controls autoplay loop >
<source src="media/movie.mp4" type="video/mp4">
<source src="media/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Exemple de code plus
complet

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Multimédia : vidéo / audio
<video width="320" height="240" controls autoplay loop >
<source src="media/movie.mp4" type="video/mp4">
<source src="media/movie.ogg" type="video/ogg">
<track label="English subtitles" kind="subtitles"
srclang="en" src="video-subtitles-en.vtt" default />
Your browser does not support the video tag.
</video>
Exemple de code plus
complet

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Fullscreen
Permet de passer le
navigateur en mode plein
écran. Cela peut avoir une
utilité notamment dans le
cadre de jeux HTML5, des
photos ou des vidéos.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
video YES YES YES 9+ YES YES YES
audio YES YES YES 9+ YES YES YES
FullScreen YES YES Prefixed 11+ Prefixed NO 4.4+

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Native Drag & Drop
• c’est le fait de pouvoir glisser-déposer un
élément vers – ou à la place – d’un autre.
• C’est ce que nous propose l’API Drag and Drop
d’HTML5, vous pouvez intégrer ce mécanisme en
utilisant des simples instructions javaScript pur.
– ondragstart : sélectionner un élément déplaçable
– ondrag : faire glisser l'élément vers une zone de réception
– ondrop : relâcher l'élément dans la zone de réception
<img src="image.png" ondragstart="DragHandler(this, event)" alt="my image" />
<div ondrop="DropHandler(this, event)" ondragenter="return false"
ondragover="return false"> ... </div>

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
La géolocalisationavec HTML 5
• Une des nouvelles fonctionnalités intéressantes de HTML5. elle
permet d’avoir des renseignements sur la position de l’utilisateur
peu importe la plateforme sur laquelle l’application s’exécute.
Nous avons uniquement besoin d’exécuter du code Javascript.
function getLocation() {
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
else
x.innerHTML="Geolocation is not supported by this browser.";
}
function showPosition(position) {
x.innerHTML= "Latitude:"+ position.coords.latitude +", Longitude:"+ position.coords.longitude;
}
getCurrentPosition(successCallback, errorCallback) : récupère les coordonnées.
Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace.
watchPosition(successCallback, errorCallback) : récupère les coordonnées en suivant le déplacement
de l’utilisateur

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
Drag & Drop YES YES YES 10+ YES NO NO
Géo-location YES YES YES 9+ YES YES YES

© Proxym-IT
Aperçu du résultat
Exemple de création d’un simple rectangle rouge 30
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Graphique : Le canvas
• HTML5 offre aujourd’hui la possibilité de dessiner, de
traiter des images en allant jusqu’à la possibilité de
créer un jeu complet grâce au nouvel élément <canvas>
La syntaxe HTML pour la création d’un canvas 2D
<canvas id=”dessin" width="600" heiht="400">
Votre navigateur ne support pas canvas !
</canvas>
<script>
var dessin = document.getElementById(‘dessin’);
var forme = dessin.getContext(‘2d’);
forme.fillStyle = " red " ;
forme.fillRect(20, 30, 100, 50);
</script>
20
50
100

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
Canvas 2D YES YES YES 9+ YES YES YES
SVG YES YES YES 9+ YES 4.2+ YES

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Web Storage
• Local Storage et Session Storage sont de
nouvelles technologies HTML5 qui permettent de
stocker localement des données, contrairement
aux sessions "normales" qui sauvegardent les
données dans le serveur.
<script type="text/javascript">
if(typeof(Storage) !== "undefined"){
// edit Store
localStorage.setItem("name", saisie);
// load Store
localStorage.getItem("name");
}
</script>
sessionStorage.setItem("name", saisie);
.setItem();
.getItem();
.removeItem();
.clear();
De même pour les session Storage

© Proxym-IT
L’application web offline HTML5 «Lemanifest»
• Les applications offline utilisent “l’application cache” du navigateur, qui permet :
– D’utiliser une application web ou de naviguer sur un site entier sans connexion internet.
– D’améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local.
– De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui auront changé depuis le
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
dernier passage de l’utilisateur
<!DOCTYPE html>
<html manifest="site.manifest" >
<head> … </head>
<body>
<div id="main">
<h1>Ceci est mon application offline</h1>
<img src="earth-folder.png" />
</div>
</body>
</html>
- L’application cache repose principalement sur
l’utilisation d’un fichier “manifest” à ajouter aux
pages HTML de votre site.
- Ce fichier se déclare dans la balise html comme
ceci.
CACHE MANIFEST
# Version 0.1
CACHE:
index.html
earth-folder.png
FALLBACK:
/ /offline.html
NETWORK:
*
ce fichier commence obligatoirement par la
ligne “CACHE MANIFEST”, nous allons déclarer
les fichiers qui doivent être mis en cache.
Il est possible d’ajouter différentes sections à notre fichier
manifest :
CACHE, il s’agit de la section par défaut qui liste les fichiers à
mettre en cache.
NETWORK, qui liste les fichiers qui nécessitent obligatoirement une
connexion internet.
FALLBACK, qui liste les fichiers qui, au cas où ils ne soient pas
accessibles en ligne, doivent renvoyer vers d’autres fichiers.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Link Prefetching
• Permet de pré-charger la page indiqué par le
lien. Ainsi, quand l’internaute clique sur le
lien, la page est immédiatement affichée car
elle a déjà été chargée en tâche de fond.
A utiliser malgré tout avec parcimonie.
<link rel="prefetch" href="http://www.mondomaine.com/page.html">

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le WebSQL
• L'API Web SQL permet de créer une base de donnée, ajouter une
table, etc. enfin bref d'avoir une base de données utilisable via le
navigateur. Le navigateur fournissant la gestion de base de données,
elle peut être accessible en mode "offline" (en mode déconnecté).
Ouvrir une connexion
var db;
if(window.openDatabase){
db = openDatabase('ma_base', '1.0', 'database', 2000000, function(db){
db.changeVersion('','1.0',function(t){t.executeSql('CREATE TABLE tab1 (id, name)');
}, error); });
}
Exemple de requête SQL
db.readTransaction(function (t) {
t.executeSql'('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
for(var i = 0; i < data.rows.length; i++){
document.getElementById('log').innerHTML = data.rows.item(i).title + ' ' +
data.rows.item(i).author;
}
}); });

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
IndexedDB
• Méthode de stockage des donnéescôté client
dans le navigateur del'utilisateur. Permet
d'effectuerdes requêtes sur une base de
donnéesindexée.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
Local Storage YES YES YES 8+ YES YES YES
Session Storage YES YES YES 8+ YES YES YES
Application Cache YES YES YES 10+ YES YES YES
Web SQL YES NO YES NO YES YES 4.4+
IndexedDB YES YES NO 10+ YES NO 4.4+

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Web Workers et Web Messaging
• Nos sites internet sont de plus en plus lourds, nos applications web
de plus en plus complexes. Comme tout traitement important, il est
indispensable de paralléliser les traitements afin d'accélérer nos
applications.
• Le web-workers est un des nouvelles fonctionnalités ajoutées au
JavaScript qui permet la possibilité d'exécuter du code en parallèle en
JavaScript.
• Il permet de faire du mutli-threading et d’exécuter des scripts en
arrière plan « en vue de gérer des tâches de calcul complexes, sans
bloquer l'interface utilisateur ». Ils vont pouvoir communiquer avec
le programme principal via
les Web Messaging..

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Web-workers: Exemple
• Notre mission est d’exécuter un script qui peut prendre
beaucoup de temps.
• de manière "so HTML4", le script se fait arrêter par
le navigateur au bout de quelques secondes…
• Voyons maintenant comment s’exécuter dans un
Worker.
self.onmessage = function(e) {
var sum=0;
for (var i= 1; i < 1000; i++){
for (var j=1; j<1000; j++){
for (var k=1;k<1000;k++){
sum += k+j+i;
}
}
}
self.postMessage(sum);
};
<script type="text/javascript">
function calc(){
var worker = new Worker('task.js');
worker.addEventListener(
'message',
function(event){alert(event.data);},
false);
worker.postMessage("");
}
</script>

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Web Sockets
• Permet une connexion bi-directionnelle entre
le client et le serveur. Cela permet de déclarer
une connexion qui peut rester ouverte, et où
les informations circulent sans entêtes (gain
de Ko). Les Websockets vont être amenés à
terme à remplacer Ajax en permettant de
vraies application temps réel.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Server-sent events
• Server-sent events est une technologie grâce
à laquelle un navigateur reçoit des mises à
jour automatiques à partir d'un serveur via
une connexion HTTP. L'API EventSource
server-sent events est normalisée dans le
cadre de HTML5 par le W3C.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Notifications bureau
• Permet d’afficher des notifications de bureau
à l’utilisateur (une fois qu’il a accepté d’en
recevoir pour un site donné).

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compatibilité
Web Workers YES YES YES 10+ YES 4.2+ 4.4+
Web Sockets YES YES YES 10+ YES 6.0+ 4.4+
Server-Sent Events YES YES YES NO YES YES 4.4+
Web Notifications YES YES YES NO NO NO NO

© Proxym-IT
Préfixe des propriétés CSS des différents
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
navigateurs
• Les nouvelles propriétés CSS3 mettent du temps à être normalisées.
• Grâce aux « préfixes », les navigateurs peuvent supporter des
fonctionnalités CSS particulières sans attendre la publication définitive
d'une nouvelle version du standard.
• Elles se distinguent par un préfixe propre à chaque navigateur :
– -webkit- Chrome, Safari, Android…
– -khtml- Konqueror
– -moz- Mozilla
– -ms- Internet Explorer
– -o- Opera

© Proxym-IT
Les nouveaux sélecteurs de CSS3
• A ~ B : Ce sélecteur sélectionne TOUS les éléments qui suivent directement ou
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
indirectement un élément, au sein du même parent.
• A[attribut*="leu"] : une balise avec un attribut et une valeur qui contient au moins
une occurrence de « leu » (l'attribut doit cette fois contenir dans sa valeur le mot «
leu », [ peu importe sa position ]).
• A[attribut^="va"] : une balise avec un attribut et une valeur qui commence par
« va ».
• A[attribut$="eur"] : une balise avec un attribut et une valeur qui se termine par
« eur ».
• A[attribut~="val"] : une balise, un attribut avec des valeurs séparés par des
espace, l’une d’elle doit être « val ».
• A[attribut|="val"] : une balise avec un attribut et une valeur exacte « val » ou
commence par « val » suivi de « - » (Principalement pour les sous-code de
langues. type « Fr-FR »).

© Proxym-IT
Les nouveaux pseudo-formats de CSS3
• :root: Représente l’élément HTML
• :lang: Représenter un sélecteur pour un élément selon sa langue si elle est spécifié. (html:lang(fr-
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
FR) div{…}).
• :nth-child(N): L’argument N peut être un nombre ou une expression de nombre sous la forme an+b
• :first-child, last-child: Sélectionner respectivement le premier et le dernier enfant de l’élément
parent.
• :target: Sélectionner l’élément dont l’identifient est le fragment présenter dans l’URL (L’URL se
termine par #...).
• :not(): permet de retirer un élément, ou l’état d’un élément, du sélecteur.
• :empty(): cibler un élément sans enfant.
• :enabled, disabled: Représente un élément de l’interface usager (ex: input) qui est dans l’état
enabled ou disabled.
• :valid, invalid: cibler les éléments de formulaire respectant la valeur attendue et l’inverse.
• :checked: élément « radio » ou « checkbox » choisi.
• ::first-line, ::first-letter : cibler respectivement la première ligne formaté et lettre d’un élément.
• ::before et ::after : peuvent être utilisés pour inséré du contenu généré avant ou après le contenu
d’un élément.
• ::selection : Changer la couleur de background et le texte des parties sélectionnés.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 SelectorTests
A ~ B YES YES YES 9+ YES
A[att^="val"] YES YES YES 9+ YES
A[att$="val"] YES YES YES 9+ YES
A[att*="val"] YES YES YES 9+ YES
A:last-child YES YES YES 9+ YES
A:target YES YES YES 9+ YES
A:checked YES YES YES 9+ YES
A:not() YES YES YES 9+ YES
A::selection YES Prefixed YES 9+ YES

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le multiple background
• Images de background séparés par un virgule « , »
• Les navigateur qui ne supportent pas vont ignoré la règle,
donc mettre une déclaration simple avant.
• La première image dans la liste est la plus près de l’utilisateur.
Syntaxe
Section{
background-image: url("image1"), url("image2");
background-position: x y, x y;
background-repeat: no-repeat, repeat-y;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Background clip
• Spécifie la zone de peinture de fond de background
– Border-box : à l’intérieur du bordure (propriété par défaut)
– Padding-box: à l’intérieur du padding
– Content-box: à l’intérieur du contenu
Syntaxe
Section{
background-clip: border-box | padding-box | content-box;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Background size
• Spécifie la taille de l’image de background
– Deux paramètres : définissent respectivement les deux tailles du
largeur et du hauteur.
– cover : Échelle de l'image d'arrière-plan pour être aussi grand que
possible de sorte que la zone de fond est complètement recouverte
par l'image de fond.
– contain : Échelle de l'image de la plus grande taille tels que les deux sa
largeur et sa hauteur peut s'adapter à l'intérieur de la zone de
contenu
– round : répéter une tuile horizontalement et verticalement de l’image
sans écrêtage, mais l'image peut être redimensionnée
– space : répéter une tuile horizontalement et verticalement de l’image
sans écrêtage ou redimensionnée de l’image
Syntaxe
Section{
background-size: 80px 60px | 20% auto | cover | contain | initial | auto | round | space ;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Background dégradé
• De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes
dégradées. Il s'agit de « linear-gradient » pour les dégradés linéaires et « radial-gradient
» pour les dégradés radiaux.
Syntaxe linear-gradient
Section{
background : linear-gradient(x y [angle], couleur1 [x1], couleur2 [x2], … , couleurN [xN])
}
x et/ou y définissent la direction du dégradé. Exp: to right, to left bottom, top center
Syntaxe radial-gradient
Section{
background : radial-gradient(forme at x y, couleur1, couleur2, ..., couleurN)
}
form : « circle » ou « ellipse »

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Border-radius
• Cette propriété nous permet facilement de créer des
bordures avec des coins arrondis. Cette propriété
s’utilise de la façon suivante :
Syntaxe
Section{
border-radius: 20px;
border-radius: 5px 10px;
border-radius: 5px 10px 20px;
border-radius: 5px 10px 5px 20px;
}
Il existe plusieurs façons d’utiliser cette règle, à la manière des marges internes et externes (padding
et margin) : une, deux, trois ou quatre valeurs
Comme on peut définir les propriétés de la façon suicvante :
border-top-left-radius : Définit le coin supérieur gauche d’une boîte.
border-top-right-radius : Définit le coin supérieur droit d’une boîte.
border-bottom-right-radius : Définit le coin inférieur droit d’une boîte.
border-bottom-left-radius : Définit le coin inférieur gauche d’une boîte.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Allez plus loin avec Border-radius
• Jusqu’à présent, nous avons travaillé uniquement avec des coins arrondis
définis par des cercles. Les propriétés border-radius peuvent aussi créer des
coins définis par des ellipses.
Afin de définir le style du coin supérieur gauche à
l’aide d’un ellipses, on ajoute la propreté suivante
border-top-left-radius: 50px 25px;
Pour toutes les propriétés border-radius individuelles, la première valeur correspond au rayon
horizontal de l’ellipse qui définit le coin et la seconde valeur correspond au rayon vertical.
Vous pouvez également utiliser la propriété border-radius
comme une propriété raccourcie, pour définir
tous les coins arrondis elliptiques en une seule fois.
Cette propriété s’utilise de la façon suivante :
border-top-left-radius: ulx urx lrx llx / uly ury lry lly;

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le border-images
• Cette propriété permet de définir une image de
background comme bordure à la place d’un style.
• Les côtés et les coins sont pris de l’image spécifié, dont
les parties seront découpé, redimensionné et tendu au
besoin.
selector{
border-width: 18px;
border-image: url("images/border.png") 30 30 30 30 [mode d’affichage];
}
L’image fournit sera découpé en 9 partie
selon une grille 3x3.
De même la bordure d’une boite, afin de
placer chaque tranche dans les zones qui
correspond.
A
D
C
B
A B C
D

© Proxym-IT
http://« stretch »: Étiré pour couvrir la zone. twitter.com/proxymit
selector{
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
border-width: 18px;
border-image: url("images/border.png") 30 30 30 30 stretch ;
}
« repeat »: Tuilé et répété pour couvrir la zone.
selector{
border-width: 18px;
border-image: url("images/border.png") 30 30 30 30 repeat;
}
« round »: Tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre
complet des tuiles, les images sont redimensionnés afin qu’il la couvre
selector{
border-width: 18px;
border-image: url("images/border.png") 30 round;
}
« space »: Tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre
complet des tuiles, les images se distribuent l’espace afin qu’il la couvere.
Plusieurs autres formes, on peut
les construire avec un seule
image en jouant sur les valeur
de cette propriété.

© Proxym-IT
Ombres sur les boites : Box-shadow
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
selector{
box-shadow: hoff voff bd sd color [inset];
}
Plusieurs options vous sont proposées
pour les adapter.
Ici, hoff indique le décalage horizontal, voff fait état du décalage vertical, bd marque la
distance de l’effet de flou, sd indique la diffusion, color précise la couleur de l’ombre et
inset qui est utilisé, indique que l’ombre est une ombre intérieure plutôt qu’une ombre
extérieure.
On peut ajouter un effet de 3D, en ajoutant un deuxième ombre.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Text-shadow
La propriété text-shadow permet de définir les
ombres des textes.
selector{
text-shadow: 1px 1px 2px #666;
}
Décalage verticale
Décalage horizontale
Rayon de dégradé
Couleur de l’ombre
Avec possibilité de mettre plusieurs ombre…

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 multiple colomnlayout
• Mise en page avec colonnes (pas de float).
• Système de colonnes en définissant :
– Nombre de colonnes
– Largeur des colonnes
• Le contenu peut continuer d’une colonnes à une autre.
selector{
column-count : 3 ;
column-width : 100px ;
column-rule : 1px solid green;
column-gap : 40px;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 propriétés Tests
multiple bauground YES YES YES 9+ YES
Background clip YES YES YES 9+ YES
Background size YES YES YES 9+ YES
Background dégradé YES YES YES 10+ YES
Border-radius YES YES YES 9+ YES
Border image YES YES YES 11+ YES
Box-shadow YES YES YES 9+ YES
Text-shadow YES YES YES 10+ YES
colomn layout YES YES YES 10+ YES

© Proxym-IT
Il est également possible d'effectuer des transformations combinées en
espaçant les fonctions d'un simple caractère blanc.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 : transformations 2D
• La propriété CSS transform permet de manipuler un élément HTML sur les
axes X et Y grâce à des fonctions diverses de transformation graphique. Il est
donc possible de modifier l'apparence d'un élément grâce à un ensemble
fonctions 2D :
– Translation (translate)
– Mise à l'échelle (scale)
– Rotation (rotate)
– Inclinaison (skew)
– Matrice de transformation (matrix)
La syntaxe est simple d'emploi.
transform: function(value);
transform : function1(value1) function2(value2) function3(value3);

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
La propriété transform-origin
• Pour pouvoir appliquer des transformations, nous avons besoin
de savoir quel est le point d'origine (d'ancrage) de la
transformation. La propriété transform-origin définit ce point
d'origine.
• Il est possible de changer cette valeur en utilisant un mot-clef
de position (top, right, bottom, left) suivi d'une valeur chiffrée
dont l'unité peut varier (px, %, etc.)
Syntaxe.
transform-origin: 50% 50%;
transform-origin: top 0 left 0;

© Proxym-IT
Les fonctions de la propriété transform
La fonction translate :
Elle permet d'effectuer une translation (un déplacement) de l'élément sur les axes X et Y.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
transform: translate(x,y);
Ces fonctions permettent de réaliser une translation sur l'axe X ou Y.
transform: translateX(value) translateY(value);
La fonction scale:
Cette fonction permet d'agir sur l'échelle (les dimensions) de l'élément. La
valeur initiale est 1, tandis que les valeurs supérieures à 1 créent un effet
d'agrandissement, et les valeurs inférieures créent un effet de réduction.
transform: scale(x,y);
transform: scaleX(value) scaleY(value);
La fonction rotate:
Il s'agit d'une des plus simples fonctions à comprendre. Comme son nom
l'indique, elle permet d'effectuer une rotation de l'élément ciblé
transform: rotate(5deg);

© Proxym-IT
Les fonctions de la propriété transform
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
La fonction skew:
Cette fonction permet d'obliquer la forme d'un élément.
transform: skew(10deg, 15deg);
transform: skewX(10deg) skewY(15deg);
La fonction matrix:
Cette fonction permet de réunir en une seule déclaration toutes les fonctions précédentes que nous avons vu
ensemble sous la forme d'une matrice
div {
transform-origin: 0 0;
transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);
}
Équivaut à la matrice suivante
div {
transform-origin: 0 0;
transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 : les transitions
• Le principe de base d'une transition CSS3 est de permettre une transition entre
l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement
est déclenché.
• La propriété se décompose en plusieurs autres propriétés, décrite ici :
– transition-property : la(les) propriété(s) CSS à modifier.
– transition-duration : le temps total de la transition ( en secondes, millisecondes).
– transition-timing-function : la méthode d’accélération entre l’état initial et final
d’une transition.
– transition-delay : le temps avant que la transition se démarre.
transition-property:width, background;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
div{
width : 100px;
background : red;
transition : width linear 2s, background ease 3s;
}
div:hover{
width: 150px;
background :green;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
transition-timing-function
• De base, les navigateurs fournissent quelques fonctions de transitions par
défaut. Celles-ci sont:
– ease : Rapide sur le début et ralenti sur la fin.
– linear : La vitesse est constante sur toute la durée de l'animation.
– ease-in : Lent sur le début et accélère de plus en plus vers la fin.
– ease-out : Rapide sur le début et décélère sur la fin.
– ease-in-out : Le départ et la fin sont lents.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
La fonction cubic-bezier()
• La fonction cubic-bezier() permet un contrôle
poussé de la courbe d’accélération.
Quatre points p1, p2, p3, p4 sont nécessaires
pour définir une courbe de Bézier.
#elem {
transition: 1s cubic-bezier(0.5, 1, 0.5, 0.8);
}
#elem {
transition: 1s cubic-bezier(0.5, 2, 0.5, 0.8);
}
Vous trouvez plusieurs application en ligne qui permet de
générer facilement les paramétres de la fonction cubic-bezier().
http://cubic-bezier.com

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
La fonction steps()
• La fonction steps() permet de jouer une animation en
"escalier" (image par image).
#elem {
transition: 1s steps(3, start);
}
#elem {
transition: 1s steps(3, end);
}
De base, les navigateurs fournissent deux fonctions prédéfinis:
• step-start: L'élément prendra la valeur finale de sa transition dès le déclenchement de
la transition. Autrement dit, il n'y aura pas de transition visible. steps(1, start).
• step-end: L'élément prendra la valeur finale de sa transition à la fin de la durée prévue
par celle-ci. Autrement dit, on aura l'impression qu'un délai a eu lieu. steps(1, end).

© Proxym-IT
Il faut pour cela utiliser @keyframes, lui donner
un nom, puis gérer les "étapes" en pourcentage
à l’intérieur de cette déclaration. Les mots-clés
from et to correspondent respectivement à 0 et
100%
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 : les animations
• Les Animations permettent de modifier les
valeurs de propriétés CSS plusieurs fois dans le
temps.
div{
animation: nomAnim 5s linear 2s;
}
@keyframes nomAnim{
from { color:blue; … … }
35% { color:green; … … }
to { color:red; … … }
}
animation-name : le nom de l’animation à utiliser.
animation-duration : le temps total de l’animation.
animation-timing-function : la méthode
d’interpolation (accélération, décélération). Voici
quelques valeurs possibles : linear, ease, ease-in …
animation-iteration-count : le nombre de répétition
de l’animation.
animation-direction : permet de jouer une animation
en sens inverse
animation-play-state : mettre en pause l’animation.
En cours d’étude de suppression par le W3C.
animation-delay : le temps avant que l’animation ne
démarre.
animation-fill-mode : conserver l’état de l’animation
avant le début où après la fin de celle-ci.
Il existe aussi la propriété raccourcie animation

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS3 propriétés Tests
CSS Transforms 2D YES YES YES 9+ YES 2.1+
CSS Transforms 3D YES YES YES 10+ YES
CSS Transitions YES YES YES 10+ YES
CSS3 Animations Prefixed YES Prefixed 10+ YES

© Proxym-IT
Les filtres SVG
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
@font-face web fonts
La transparence de couleur avec
RGBa
Text stroke
Textwrapping

© Proxym-IT
Styler les différents états
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• Personnaliser l’aspect de boutons radio et
checkbox en CSS.
<form … >
<div>
<input type="checkbox" id="test1">
<label for="test1">Rouge</label>
</div>
<div>
<input type="checkbox" id="test2" checked="checked">
<label for="test2">Jaune</label>
</div>
<div>
<input type="checkbox" id="test3" disabled="disabled">
<label for="test3">Vert</label>
</div>
</form>
[type="checkbox"] { display: none; }
[type="checkbox"] + label { }
[type="checkbox"]:checked + label { }
[type="checkbox"]:checked + label:before { }
[type="checkbox"]:disabled + label { }
[type="checkbox"]:disabled:checked + label { }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• Automatiser la présentation classique des champs
requis précédés ou suivis d’une petite étoile.
<div>
<label for="email" class="required">Email</label>
<input type=« text" id="email" required >
</div>
input[required]::after {
content: "*";
position: absolute;
top:0; right:0;
width: 15px; height: 15px;
background: #DDD;
}
Label.required::after {
content: " *";
color: #CA1111;
vertical-align : top;
}

© Proxym-IT
Animation du conteneur
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• Créer un slideshow automatique et
contrôlable en CSS3.
<div id= "slider" >
<ul>
<li> SLIDE 1 </li>
<li> SLIDE 2 </li>
<li> SLIDE 3 </li>
<li> SLIDE 4 </li>
</ul>
<a href="#slid_1"></a>
</div>
#slider {
animation: slider 32s infinite;
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
Contrôle du contenu à l’aide des flèches « suivant » et
« précédent » ou bien d’une « pagination »
#slid_1:target ~ #slider { left: 0px; }
#slid_1:target ~ #slider { left: -100px; }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• Effet de feuilles superposées.
<blockquote>
<p>C'est en forgeant qu'on devient forgeron</p>
</blockquote>
blockquote { … }
blockquote,
blockquote:after,
blockquote:before {
background: #fff;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
blockquote:after {
transform: rotate(-0.6deg);
}
blockquote:before {
transform: rotate(-1.2deg);
right: 5px;
left: -5px;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le responsive design
• Plus qu’une simple tendance, le responsive
design est un ensemble d’outils et de
technologies visant à réorganiser les éléments
d’une page web en fonction des paramètres de
l’appareil.
• Le RWD repose sur 3 composants
fondamentaux : les media queries (CSS3),
les grilles fluides et les images flexibles.

© Proxym-IT
Il y a deux façons de les utiliser :
1. en écrivant la règle directement dans le fichier .css
2. en chargeant une feuille de style .css différente en fonction de la règle.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les medias queries
• Les « medias queries » permettent de remplacer
certains comportement CSS par d’autres en fonction des
conditions d’affichage d’une page html selon le contexte
(min/max , width, height, color, orientation, ect…)

<style>
@media screen and (max-width: 600px) { … }
</style>

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les règles disponibles
L’idée des « media queries » est d’ajouter aux css
standards des redéfinitions (ou d’autres règles) au cas ou
certains cas de figure sont rencontrés.
On peut détecter :
• device-width , device-height : la taille de l’écran exprimée en pixel
• color : le nombre de couleurs (monochrome, milliers de couleurs)
• orientation : L’orientation et le ratio (portrait ou paysage, ou encore 4/3 ou 16/9)
• device-width , device-height : largeur et hauteur du périphérique.
• media : type d'écran de sortie. Quelques-unes des valeurs possibles :
– screen : écran « classique » ;
– handheld : périphérique mobile ;
– print : impression ;
– tv : télévision ;
– projection : projecteur ;
– all : tous les types d'écran.
Les règles peuvent être combinées à l'aide des mots
suivants :
- only : « uniquement » ;
- and : « et » ;
- not : « non ».

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Définissions les frontières
/* Landscape phones to portrait tablet */
@media screen and (max-width:767px){
/* Styles */
}
/* Portrait tablet to landscape and desktop */
@media screen and (min-width:768px) and (max-width:979px){
/* Styles */
}
/* Large desktop */
@media screen and (min-width:1200px){
/* Styles */
}
Les résolution les plus
populaire peuvent être
en 6 points de rupture
majeurs

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Une mise en page flexible
• Utiliser une mise en page fluide est
la meilleure façon d’être paré à
toute les taille d’écran.
• Oubliez les problèmes de calcules de dimension
ingérables avec « box-sizing ».
– J’ai un div de 67% avec un padding de 15px et une bordure de 3px…
Avant :
– Width final = 67% + 2*15px + 2*3px
– Width total de la page > 100%
Après :
*{
– Width final = 67%
box-sizing: border-box;
}

© Proxym-IT
img{ width:100%; max-width:100%; }
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
les images flexibles
• Il s'agit de proposer des images dont la taille et la
disposition s'ajustent automatiquement en fonction de
la taille de l'écran. Attention, il faut prendre en compte la
taille en pixels de l'image ainsi que le poids.
• Un seul style est requis pour rendre vos images fluides.
– Ajuster simplement le width :
– N'oubliez pas MIN & MAX
• l’attribut src d’une images ne peut pas être manipulé par
un media query.
– Background-image
– Afficher /cacher le parent
Pourquoi ne pas afficher/cacher l’image elle-même?
 La majorité des navigateurs mobiles ne
chargeront pas les images qui sont dans un
parent en display:none;

© Proxym-IT
Utiliser @viewportpour le responsive
• De nombreux navigateurs mobiles simulent une
vue desktop, affichant les pages en pleine
résolution dans un tout petit écran.
• Une puissante fonctionnalité, Le méta tag «
viewport » dicte au navigateur quel
comportement il doit adopter pour afficher une
page.
width: device-width; zoom: 1;
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
// en CSS
@viewport {
}
<!– en HTML -->
<meta name="viewport" conetent="width=device-width" >

© Proxym-IT
Utiliser @viewportpour le responsive
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Sans viewport Avec viewport

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemples
CHROME FF SAFARI IE OPERA
Mobile – Tablette – Desktop
Compatibilité des Media Queries avec
les navigateurs.
Responsive Design YES YES YES 9+ YES

HTML 5

Recommandé

Recommandé

Contenu connexe

Similaire à HTML 5

Similaire à HTML 5 (20)

HTML 5

Notes de l'éditeur