HTML5 CSS3

Compatibilité des navigateurs avec HTML5 et CSS3

Propriétés CSS3

Sélecteurs CSS3

Contenu multimédia HTML5

Formulaire HTML5

HTML5 JSAPI

PLATFORME WIN MAC % Support
Navigateur FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA  
Version 3.6 4 5 6 7 8 9 10 10 11.1 4 5 11.1  
Local Storage O O O N N O O O O O O O O 94%
Session Storage O O O N N O O O O O O O O 95%
Post Message O O O N N O O O O O O O O 95%
Offline Applications O O O N N N N N O O O O O 82%
Workers O O O N N N N N O O O O O 80%
Query Selector O O O N N O O O O O O O O 90%
WebSQL Database N N O N N N N N O O N O O 41%
IndexDB Database N N N N N N N N N N N N N
Drag and Drop O O O O O O O O O N O O N 94%
Hash Change (Event) N O O N N O O O O O O N O 88%
History Management N O O N N N N N O N O N N 42%
WebSockets N N O N N N N N O N N N N 37%
GeoLocation O O O N N N O O O O O N O 84%
Touch N N N N N N N N N N N N N 2%
PLATFORME WIN MAC % Support
Navigateur FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA  
Version 3.6 4 5 6 7 8 9 10 10 11.1 4 5 11.1  
Form: Phone N O O N N N N N O O O O O 44%
Form: URL N O O N N N N N O O O N O 44%
Form: Email N O O N N N N N O O O N O 44%
Form: DateTime N N N N N N N N N O N N O 3%
Form: Date N N N N N N N N N O N N O 3%
Form: Month N N N N N N N N N O N N O 3%
Form: Week N N N N N N N N N O N N O 3%
Form: Time N N N N N N N N N O N N O 3%
Form: LocalTime N N N N N N N N N O N N O 3%
Form: Number N N N N N N N N O O N N O 19%
Form: Range N N O N N N N N O O N O O 38%
Form: Colour N N N N N N N N N O N N O
Form: Autocomplete N O N N N N N N N O O N O 8%
Form: Autofocus N O O N N N N N O O O O O 47%
Form: List N O O N N N N N N O O N O 16%
Form: Placeholder N O O N N N N N O O O O O 44%
Form: Min N N O N N N N N O O N N O 40%
Form: Max N N O N N N N N O O N N O 40%
Form: Multiple N O O N N N N N O O O O O 77%
Form: Pattern N O O N N N N N O O O N O 45%
Form: Required N O O N N N N N O O O N O 45%
Form: Step N N O N N N N N O O N N O 40%
PLATFORME WIN MAC % Support
Navigateur FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA  
Version 3.6 4 5 6 7 8 9 10 10 11.1 4 5 11.1  
RGBA O O O N N N O O O O O O O 87%
HSLA O O O N N N O O O O O O O 86%
Background Size N O O N N N O O O O O O O 83%
Multiple Backgrounds N O O N N N O O O O O O O 83%
Border Image O O O N N N N N O O O O O 83%
Border Radius O O O N N N O O O O O O O 87%
Box Shadow O O O N N N O O O O O O O 86%
Text Shadow O O O N N N N N O O O O O 53%
Opacity O O O N N N O O O O O O O 86%
CSS Animations N N O N N N N N O N N O N 39%
CSS Columns O O O N N N N O O O O O O 81%
CSS Gradients N O O N N N N O O O O O O 78%
CSS Reflections N N O N N N N N O N N O N 39%
CSS Transforms O O O N N N O O O O O O O 84%
CSS Transforms 3D N N N N N N N N N N N N N 12%
CSS Transitions N O O N N N N N O O O O O 47%
CSS FontFace O O O O O O O O O O O O O 97%
FlexBox O O O N N N N O O N O O N 51%
PLATFORME WIN MAC % Support
Navigateur FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA  
Version 3.6 4 5 6 7 8 9 10 10 11.1 4 5 11.1  
Begins with O O O N O O O O O O O O O 98%
Ends with O O O N O O O O O O O O O 98%
Matches O O O N O O O O O O O O O 98%
Root O O O N N N O O O O O O O 87%
nth-child O O O N N N O O O O O O O 86%
nth-last-child O O O N N N O O O O O O O 86%
nth-of-type O O O N N N O O O O O O O 86%
nth-last-of-type O O O N N N O O O O O O O 86%
last-child O O O N N N O O O O O O O 87%
first-of-type O O O N N N O O O O O O O 86%
last-of-type O O O N N N O O O O O O O 86%
only-child O O O N N N O O O O O O O 87%
only-of-type O O O N N N O O O O O O O 86%
empty O O O N N N O O O O O O O 87%
target O O O N N N O O O O O O O 85%
enabled O O O N N N O O O O O O O 87%
disabled O O O N N N O O O O O O O 87%
checked O O O N N N O O O O O O O 86%
not O O O N N N O O O O O O O 87%
General Sibling O O O N O O O O O O O O O 98%
PLATFORME WIN MAC % Support
Navigateur FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA  
Version 3.6 4 5 6 7 8 9 10 10 11.1 4 5 11.1  
Canvas O O O N N N O O O O O O O 87%
Canvas Text O O O N N N O O O O O O O 85%
SVG O O O N N N O O O O O O O 86%
SVG Clipping Paths O O O N N N O O O O O O O 86%
SVG Inline N O N N N N O O O N O N N 23%
SMIL N O O N N N O O O O O O O 49%
WebGL N O O N N N O O O O O O O 32%
Audio O O O N N N O O O O O O O 85%
Video O O O N N N O O O O O O O 85%
Audio: ogg/vorbis O O N N N N N N O O O N O 71%
Audio: mp3 N N O N N N O O O N N O N 38%
Audio: wav O O O N N N N N O O O O O 69%
Audio: AAC N N O N N N O O O N N O N 38%
Video: ogg/theora O O N N N N N N O O O N O 70%
Video: H.264 N N O N N N O O O N N O N 38%
Video: WebM N O N N N N N N O O O N O 31%
HTML5 Découverte !
Drag File
Local Storage
Video
Audio
Canvas
Contenu Editable
Geolocalisation
Formulaire Web
Glisser Déposer
CSS3 Découverte !
Sélecteurs
Couleurs & Dégradé
opacité
ombres
bordure & arrondis
colonnes
Arrière plan
Polices
Animations
translate
rotate
scale
rotateY
Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.

Arrières plans multiples
Arrière plan redimensionné
Background-clip : Permet de définir les limites de l'arrière-plan à l'intérieur de la boîte représentée par l'élément. Background-origin : Positionne la zone de l'arrière plan.(l'origine de l'image d'arrière plan).
Les pertes de l'HTML 4.0 !

Voici les balises HTML 4.0 qui disparraissent dans HTML5

frame noframe frameset
big small
center
font
strike u tt
acronym
applet
dir
Attributs
Nouvelles balises HTML5
header
footer
aside
section
article
nav
multimedia
Autres
Formulaires
Test de compatibilité
  • Champ avec texte en fond (placeholder) :
  • Champ obligatoire (required) :
  • Champ avec focus auto (autofocus) :
  • Champ avec validation personnalisée (pattern) :
  • Champ numeric avec valeur min et max :
  • Champ slider :
  • Champ date :
  • Champ mois :
  • Champ heure :
  • Champ Couleur :
  • Champ Email :
  • Champ Téléphone :
  • Champ URL :
  • Champ recherche :
  • Liste éditable :
Exemples : http://www.scriptol.fr/html5/formulaire.php
Séquence Signification Décrit en section Version CSS
* tout élément Sélecteur universel 2
E tout élément de type E Sélecteur de type d'élément 1
E[foo] tout élément E portant l'attribut "foo" Sélecteurs d'attribut 2
E[foo="bar"] tout élément E portant l'attribut" foo" et dont la valeur de cet attribut est exactement "bar" Sélecteurs d'attribut 2
E[foo~="bar"] tout élément E dont l'attribut "foo" contient une liste de valeurs séparées par des espaces, l'une de ces valeurs étant exactement égale à "bar" Sélecteurs d'attribut 2
E[foo^="bar"] tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar" Sélecteurs d'attribut 3
E[foo$="bar"] tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar" Sélecteurs d'attribut 3
E[foo*="bar"] tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar" Sélecteurs d'attribut 3
E[lang|="en"] tout élément E dont l'attribut 'lang" est une liste de valeurs séparées par des tirets et commençant (à gauche) par "en" Sélecteurs d'attribut 2
E:root un élément E, racine du document Pseudo-classes structurelles 3
E:nth-child(n) un élément E qui est le n-ième enfant de son parent Pseudo-classes structurelles 3
E:nth-last-child(n) un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant Pseudo-classes structurelles 3
E:nth-of-type(n) un élément E qui est le n-ième enfant de son parent et de ce type Pseudo-classes structurelles 3
E:nth-last-of-type(n) un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant Pseudo-classes structurelles 3
E:first-child un élément E, premier enfant de son parent Pseudo-classes structurelles 2
E:last-child un élément E, dernier enfant de son parent Pseudo-classes structurelles 3
E:first-of-type un élément E, premier enfant de son type Pseudo-classes structurelles 3
E:last-of-type un élément E, dernier enfant de son type Pseudo-classes structurelles 3
E:only-child un élément E, seul enfant de son parent Pseudo-classes structurelles 3
E:only-of-type un élément E, seul enfant de son type Pseudo-classes structurelles 3
E:empty un élément E qui n'a aucun enfant (y compris noeuds textuels purs) Pseudo-classes structurelles 3
E:link
E:visited
un élément E qui est la source d'un hyperlien dont la cible n'a pas encore été visitée (:link) ou a déjà été visitée (:visited) Les pseudo-classes de lien 1
E:active
E:hover
E:focus
un élément E pendant certaines actions de l'usager Les pseudo-classes d'action Usager 1 and 2
E:target un élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant. La pseudo-classe :target 3
E:lang(c) un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé) La pseudo-classe :lang()  2
E:enabled
E:disabled 
un élément d'interface utilisateur E qui est actif ou inactif. Les pseudo-classes d'état d'élément d'interface 3
E:checked
E:indeterminate 
un élément d'interface utilisateur E qui est coché ou dont l'état est indéterminé (par exemple un bouton-radio ou une case à cocher) Les pseudo-classes d'état d'élément d'interface 3
E:contains("foo") un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo" La pseudo-classe de contenu 3
E::first-line la première ligne formatée d'un élément E The :first-line pseudo-element 1
E::first-letter le premier caractère formaté d'un élément E Le pseudo-élément ::first-letter 1
E::selection la partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usager Les pseudo-éléments fragments d'éléments d'interface 3
E::before le contenu généré avant un élément E Le pseudo-élément ::before 2
E::after le contenu généré après un élément E Le pseudo-élément ::after 2
E.warning Uniquement en HTML. Identique à E[class~="warning"]. Sélecteurs de classe 1
E#myid un élément E dont l'ID est égal à "myid". Sélecteurs d'ID 1
E:not(s) un élément E qui n'est pas représenté par le sélecteur simple s La pseudo-classe de négation 3
E F un élément F qui est le descendant d'un élément E Combinateur de descendance 1
E > F un élément F qui est le fils d'un élément E Combinateur filial 2
E + F un élément F immédiatement précédé par un élément E Combinateur d'adjacence directe 2
E ~ F un élément F précédé par un élément E Combinateur d'adjacence indirecte 3

Plus d'informations : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html

Géolocalisation :

Latitude : Chargement...
Longitude : Chargement...
Drag and Drop

Glisser ici

Ceci est une div non editable
Ceci est une div editable
HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage