HTML5 & Amis

Style CSS > Tableau de Bord HTML5

<canvas> 2D HTML5 performance Javascript <video> hardware acceleration SVG CSS3 WebGL Security Multi-platform Open Codecs API Fichier Scalable Vector Graphics API Géolocation JSON Natif WOFF GNU/Linux Border Image HTML5 parser -moz-element Cache Application HTTP Strict Transport Security image-rect classList Cadre Ombré Transition SVG en temps que fond d'un CSS IndexedDB Border Radius Fonds Multiples TraceMonkey QuerySelector Android Javascript Animation Scheduler Multi-touch @media Queries formData :visited Drag and Drop files from the Desktop Text Shadow X-Frame-Options postMessage Retained layers JavaScript typed arrays XHR Level 2 Content Editable Cross-Domain XHR Compositing acceleration Formulaires Web Workers Transform Structural pseudo-classes Windows Protocol handlers Cross-Origin Resource Sharing async & defer Asynchronous plug-in painting any() Gradients ECMAScript 5 Javascript engine localStorage Mac OS Device Orientation Audio Data API calc() Content Acceleration @font-face Native Drag and Drop SVG as an <img> foreignObject font-feature-settings Strict Mode History API Maemo mask, filter, clip-path <audio> Columns semantics

Standards

HTML5

<canvas> 2D

Canvas est un élément HTML5 qui peut être utilisé pour afficher des graphiques grâce à des scripts (JavaScript). Il peut être utilisé, par exemple, pour afficher des graphes, des compositions de photos ou des animations.

Mozilla W3C

<vidéo>

HTML5 définit une méthode standard pour intégrer la vidéo dans une page web, en utilisant un élément <video>. De la même façon que nous pouvons utiliser des images dans les pages web, nous pouvons maintenant utiliser des vidéos. Les vidéos peuvent être stylisé avec CSS et contrôlés via Javascript.

en savoir plus W3C

Codecs GPL

Mozilla appuit, et supporte le contenu de la vidéo libre et ouverte et les codecs audio: Webm/VP8 , OGG / Theora etVorbis .

en savoir plus

Contenu Modifiable

contenteditable est utilisé pour indiquer si oui ou non un contenu est modifiable. Un document entier peut être paramétré pour être modifiable, ou juste une de ses parties.

MODIFIEZ MOI !

Mozilla W3C

Parser HTML5

x = - b ± b 2 - 4 a c 2 a

Le parseur HTML est l'une des pièces les plus complexes et sensibles d'un navigateur. Il contrôle la façon dont votre code source HTML est activé dans les pages web. Le nouvel analyseur est plus rapide, conforme à la norme HTML5, et permet aussi un grand nombre de nouvelles fonctionnalités. Cet analyseur permet d'intégrer du contenu SVG et MathML directement dans le balisage HTML.

en savoir plus

Sémantique
Les Sections

<!DOCTYPE html>
<header> <nav>
<section> <article> <aside> <footer>

Éléments, attributs et valeurs d'attributs sont définis en HTML (par la spécification HTML) pour avoir certaines significations (sémantique). HTML5 apporte plus d'éléments pour améliorer la sémantique d'un document.

Mozilla W3C

<audio>

L'élément HTML <audio> 5 offre la possibilité d'intégrer facilement des fichiers audio dans des documents HTML. Une fois que vous avez intégré les médias dans votre document HTML en utilisant le nouvel élément, vous pouvez les contrôler par programmation à partir de votre code JavaScript.

Mozilla W3C

Formulaires

Cher Espace 2001,
Mon nom est . Je pense que cette démo est . Mais, Je voudrai que vous puissiez .

Merci

Envoyé! Merci.

Les éléments de formulaire et les attributs en HTML5 fournissent un plus grand degré de balisage sémantique que HTML4 et suppriment une grande partie des scripts complexes et des styles qui était nécessaires en HTML4.

Mozilla W3C

API de données Audio

La spécification HTML 5 introduit les éléments média <audio> et <video> , et avec eux la possibilité de changer radicalement la façon dont nous intégrons les médias sur le web. Une nouvelle extension de Mozilla existe pour cette API, qui permet aux développeurs web d'utiliser des données brutes audio en lecture et en écriture.

en savoir plus

WebGL

3D Canvas. WebGL apporte des graphismes 3D pour le Web, en introduisant une API qui est très conforme à OpenGL ES 2.0 et peut être utilisé dans les éléments canvas HTML5.

en savoir plus

CSS3

Transformer

La propriété-moz-transform propriété CSS vous permet de modifier coordonnées spaciales du modèle de formatage CSS.En l'utilisant, les éléments peuvent être transformés, mis en rotation, changer d'échelle, et biaisés tel ce texte.

en savoir plus

Transition

❖✪

Transitions CSS, qui fait partie du projet de spécification CSS3, fournit un moyen d'animer les changements de propriétés CSS, au lieu d'avoir les changements prennant effet immédiatement. Par exemple, si vous changez la couleur d'un élément du blanc au noir, normalement le changement est instantané.Avec des transitions CSS activées, le changement se produit sur un intervalle de temps, que vous pouvez spécifier, après une courbe d'accélération que vous pouvez personnaliser.

en savoir plus

Requêtes @media

Resize your window to see the layout of this page being adapted to fit the new size.

Une requête médias se compose d'un type de média et au moins une expression qui limite la portée des feuilles de style en utilisant les fonctions média, tels que la largeur, la hauteur et la couleur. Les requêtes de type média permettent la présentation de contenu sera adapté à une gamme spécifique de périphériques de sortie sans avoir à modifier le contenu lui-même.

en savoir plus

Pseudo-classes Structurelles

:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, …

Sélecteur introduit le concept de pseudo-classes structurées pour permettre la sélection basée sur l'information supplémentaire qui se trouve dans l'arborescence du document, mais ne peuvent pas être représentés par d'autres sélecteurs simples ou combinateurs.

en savoir plus

Angles Arrondis

La propriété CSS border-radius peut être utilisée pour donner des coins arrondis aux bords d'un élément. Le rayon s'applique également à l'arrière-plan même si l'élément n'a pas de bordure.

n savoir plus

Image de Bordure

La propriété border-image CSS permet de dessiner une image sur les bordures des éléments. Cela rend le dessin de widgets à l'air complexesbeaucoup plus simple qu'avant et supprime la nécessité des images découpées antérieurement.

en savoir plus

Dégradés

L'utilisation des fé&gradés CSS dans un fond vous permet d'afficher des transitions en douceur entre deux ou plusieurs couleurs spécifiées; cela vous permet d'éviter l'utilisation d'images pour cet effet, réduisant ainsi les temps de téléchargement et d'utilisation de bande passante. En outre, parce que le gradient est généré par le navigateur, les objets avec des dégradés se regardent mieux lors d'un zoom, et vous pouvez ajuster votre mise en page avec beaucoup plus de souplesse.

en savoir plus

Fonds Multiple

Vous pouvez appliquer plusieurs fonds aux éléments. Ils sont empilés l'un au dessus de l'autre avec le premier fond affiché sur le dessus et le dernier fond affiché en arrière plan.

en savoir plus

Colonnes

La disposition des colonnes . 
Les gens ont du mal à lire le texte si les lignes sont trop longues, car ils prennent trop de temps avec leur les yeux pour passer de la fin de la ligne de l'une au début de la suivante, ils perdent la trace des lignes où ils étaient. Par conséquent, pour utiliser au maximum un grand écran, les auteurs devraient avoir des largeurs des colonnes de texte limitées, tout comme les journaux le font.

en savoir plus

box-shadow

La propriété box-shadow permet d'afficher une ombre portée sur le contour de presque n'importe quel élément. Il peut définir des effets multipes d'ombre à la fois.

en savoir plus

Texte Ombré

CSS3 is GENIAL

La propriété text-shadow fait ce que le nom implique: Il vous permet de créer un léger flou, copie légèrement et déplace du texte, qui finit par regarder un peu comme une ombre dans le monde réel. La propriété text-shadow a été introduite en CSS2, mais comme il avait été mal défini à l'époque, son soutien a été abandonné à nouveau dans CSS2.1. La fonctionnalité a été réintroduite avec CSS3.

en savoir plus

any()

CSS any() vous permet de contruire rapidement des ensembles de sélecteurs similaires en établissant des groupes à partir desquels l'un des éléments inclus correspondra.C'est une alternative au lieu de répéter tous les sélecteurs pour l'élément qui varie.

en savoir plus

calc()

Les valeurs CSS calc () vous permettent de calculer une valeur de longueur à l'aide d'une expression arithmétique. Cela signifie que vous pouvez l'utiliser pour définir les tailles de divs, les valeurs des marges, les largeurs des bords, et ainsi de suite.

en savoir plus

image-rect

Utiliser des sprites en tant que ressources pour votre conception. Le nouveau-moz-image-rect vous permet d'utiliser une sous-rectangle d'une image dans le cadre d'un fond ou fond d'image.

en savoir plus

-moz-element

-Moz-element est une extension expérimentale de la propriété CSS background-image: la possibilité de dessiner des éléments arbitraires comme l'arrière-plan à l'aide de -moz-élément (# elementID).

en savoir plus

mask, filter, clip-path

Les effets SVG sont étendues aux éléments domatés CSS. En particulier, il rend les propriétés CSS «filtre», «masque» et «clip-path» applicables aux éléments formatés CSS (tels que les éléments HTML).

en savoir plus

@font-face

the QUICK brown

Firefox

J umps over

THE LAZY DOG

@font-face permet aux auteurs de spécifier des polices pour afficher du texte en ligne sur leurs pages web. En permettant aux auteurs de fournir leurs propres polices, @ font-face élimine le besoin de dépendre du nombre limité de polices que les utilisateurs ont installés sur leurs ordinateurs.

en savoir plus

font-feature-settings

Beau Grand & Fort
klmnABRACADABRANTESQUEopqr
EXTRAORDINAIRE
tprestigieuxu
FULGURANT
Phénoménal
«COLOSSAL!»
incroyable
& modeste avec ça

Jouez avec beaucoup plus des capacités de TrueType . Il est possible de profiter de toutes sortes de capacités de la police - crénage, ligatures, alternates, véritables petites capitales, et les jeux stylistiques, pour n'en nommer que quelques-uns.

en savoir plus

WOFF

Le Web Open Font Format (WOFF) a deux principaux avantages par rapport premières polices TrueType ou OpenType. Il est compressé, ce qui signifie que vous aurez des temps de téléchargement beaucoup plus courts par rapportaux premières polices TrueType ou OpenType. Il contient des informations qui vous permettent de voir d'où la police vient - sans DRM ou attribution pour un domaine spécifique - ce qui signifie qu'il a le soutien d'un grand nombre de créateurs de polices et les fonderies de polices.

en savoir plus

Javascript

ECMAScript 5

ECMAScript 5 est la nouvelle version du langage JavaScript, ce qui inclut de nouvelles fonctionnalités et API comme mode Strict et l' API JSON .

en savoir plus

JavaScript tableaux typés

Si vous faites du traitement avec JavaScript et que vous souhaitez traiter des données de bas niveau, Firefox supporte maintenant en natif les tableaux typés en JavaScript. Cela peut faire une différence énorme dans la façon dont les éléments sont traités rapidement, si vous utilisez WebGL ou des manipulations d'image.

en savoir plus

Mode Strict

Javascript mode strict est une façon d'opter pour une variante limitée de JavaScript. Le mode strict a une sémantique différente du code normal. Il élimine les quelques pièges JavaScript qui ne provoquent pas d' erreurs en les changeant pour produire des erreurs. Et il corrige les erreurs qui rendent difficiles l'optimisation pour les moteurs JavaScript.

en savoir plus

XHR Level 2

XMLHttpRequest permet d'envoyer des requêtes HTTP très facile. Il vous suffit de créer une instance de l'objet, ouvrir une URL, et envoyez la demande. L'état HTTP du résultat, ainsi que le contenu du résultat, sont disponibles dans l'objet de requête lorsque la transaction est terminée. Ce nouveau niveau apporte des caractéristiques intéressantes telles que des événements de progression et le support des requêtes entre sites.

en savoir plus

Glisser des fichiers du bureau

Gillsez une image de votre poste

Les utilisateurs peuvent faire glisser des fichiers directement dans votre page Web, sans passer par le sélecteur de fichiers.

en savoir plus

API Historique

L'objet window DOM permet d'accéder à l'historique du navigateur à travers l'objet window.history. Il fournit des méthodes et propriétés utiles qui vous permettent d'aller et venir à travers l'historique de l'utilisateur, ainsi que - à commencer par HTML5 - manipuler le contenu de la pile de l'historique.

en savoir plus

JSON Natif

JSON (JavaScript Object Notation) est un format d'échange de données, basé sur un sous-ensemble de la syntaxe JavaScript. Il est utile lorsque vous écrivez n'importe quel type de JavaScript basé sur l'application, y compris les extensions.

en savoir plus

QuerySelector

L'API Selectors fournit des méthodes qui font qu'il est rapide et facile de récupérer des nœuds Element du DOM par correspondance entre un ensemble de sélecteurs. C'est beaucoup plus rapide que les techniques passées, où il était nécessaire, par exemple, d'utiliser une boucle dans le code JavaScript pour localiser les éléments spécifiques que vous aviez besoin de trouver.

en savoir plus

classList

Le pont entre le document et son style est souvent basé sur la classe attribute. Etre capable de manipuler cet attribut d'une manière efficace est important. classList vous permet de basculer, ajouter et supprimer des classes à partir de n'importe quel élément facilement.

en savoir plus

Web Workers

Les Workers fournissent un moyen simple pour un contenu Web d'exécuter des scripts dans des taches de fond. Une fois créé, un "worker" peut envoyer des messages à la tâche de fond en postant des messages à un gestionnaire d'événement spécifié par le créateur. Le thread du worker peut effectuer des tâches sans interférer avec l'interface utilisateur. En outre, ils peuvent effectuer des E / S en utilisant XMLHttpRequest.

en savoir plus

async & defer

Ce sont des attributs de l'élément <script>. Parmétrez async pour dire au navigateur, si possible, d'exécuter le script de manière asynchrone. Réglez defer pour dire au navigateur d'exécuter le script après qu'il a analysé le document.

en savoir plus

formData

XMLHttpRequest niveau 2 (projet de l'éditeur) ajoute un support pour la nouvelle interface FormData. Les objets FormData fournissent un moyen facile de construire un ensemble de paires clé / valeur qui représentent les champs du formulaire et de leurs valeurs, qui peuvent ensuite être facilement envoyés en utilisant l'objet XMLHttpRequest méthode send () dans le format "multipart / form-data".

en savoir plus

Geolocation API

L'API de géolocalisation permet à l'utilisateur de fournir sa localisation aux applications Web s'il le désire. Pour des raisons de confidentialité, l'utilisateur est invité à confirmer l'autorisation de fournir ses informations de géolocalisation.

en savoir plus

WebSockets

WebSockets est un système de communication d'usage simple, avec des temps de réponse rapides et bidirectionnel ayant une API simple pour les développeurs web.

learn more

File API

L'API de fichier spécifie la capacité de lire de manière asynchrone un fichier sélectionné dans la mémoire, et effectuer des opérations sur les données du fichier dans l'application Web (par exemple, pour afficher une vignette de prévisualisation d'une image, avant qu'il ne soit transféré, ou pour chercher les balises ID3 au sein d'un fichier MP3, ou pour chercher dans les données EXIF ​​des fichiers JPEG, le tout du côté client).

en savoir plus

Multi-touch

Avec l'API Multitouch, des pages régulières sont capables d'utiliser l'entrée multitouch, permettant aux développeurs web de créer de nouvelles expériences interactives pour leurs sites Web.

en savoir plus

Orientation Périphérique

Bougez votre posrtable :)

L'événement MozOrientation fournit un moyen de traiter l'information d'orientation.Cet événement est envoyé lorsque l'accéléromètre détecte un changement de l'orientation de l'appareil. En recevant et traitant les données rapportées par des événements MozOrientation, il est possible de répondre aux changements de façon interactive à la rotation ou l'élévation provoquée par l'utilisateur en déplaçant l'appareil.

en savoir plus

Gestionnaires de Protocoles

Les navigateurs ont besoin d'un moyen de traiter avec des liens qui utilisent des protocoles autres que HTTP (par exemple, mailto:). Ils ont traditionnellement utilisé des programmes de bureau comme un bureau client e-mail, pour gérer ces protocoles. Les gestionnaires de protocole basé sur le Web permettent à des applications Web de participer également au processus.

en savoir plus

postMessage

C'est une méthode sûre pour permettre la communication avec le site d'origine.Normalement, les scripts sur les différentes pages ne sont autorisés à accéder à l'autre si et seulement si les pages qui les ont exécutés sont à des endroits avec les même protocole, numéro de port et hôte. postMessage fournit un mécanisme contrôlé permettant de contourner cette restriction d'une manière sécurisée si il est correctement utilisé.

en savoir plus

localStorage

localStorage est conçu pour offrir une alternative plus grande, plus sûre et plus facile à utiliser, au stockage des informations dans des cookies.

en savoir plus

IndexedDB

IndexedDB est un standard Web évolutif pour le stockage de quantités importantes de données structurées dans le navigateur et pour les recherches de haute performance sur ces données en utilisant des index.

en savoir plus

Application Cache

Déconnecté, vous ne pouvez pas toujours compter sur le cache du navigateur.Vous avez besoin de définir explicitement les fichiers qui doivent être entreposés de manière que tous les fichiers et les ressources nécessaires sont disponibles lorsque l'utilisateur se déconnecte: HTML, CSS, fichiers JavaScript, et d'autres ressources comme les images et la vidéo.

en savoir plus

Javascript Animation sheduler

window.mozRequestAnimationFrame indique au navigateur que vous souhaitez effectuer une animation. Ceci demande que le navigateur prévoit un réaffichage de la fenêtre pour l'image d'animation suivante. window.mozRequestAnimationFrame tells the browser that you wish to perform an animation.

en savoir plus

Drag and Drop Natif

Déplace moi. Même à l'extérieur du navigateur.

Autoriser la gestion du glisser-deposer permet à l'utilisateur de cliquer sur le bouton de souris pour déplacer une élément vers un autre emplacement. Une représentation traslucide de ce qui est déplacé suivra le pointeur de la souris pendant l'opréation du glisser. L'emplacement cible peut être une application différente.

en savoir plus

Cross-Domain XHR

des requêtes Inter-sites HTTP sont des requêtes HTTP pour les ressources d'un autre domaine que le domaine de la ressource qui fait la demande. Par exemple, une ressource chargée du domaine A, comme une page Web HTML, fait un objet XMLHttpRequest pour une ressource sur le domaine B. C'est par défaut, interdit par le navigateur. En tant que domaine B, vous pouvez autoriser une telle demande avec l'en-tête Access-Control-Allow-Origin:.

en savoir plus

SVG

SVG (Scalable Vector Graphics)

SVG est un langage XML qui peut être utilisé pour dessiner des graphiques. Il peut être utilisé pour créer une image soit en spécifiant l'ensemble des lignes et des formes nécessaires, ou en modifiant les images existantes, ou par une combinaison. L'image et ses composants peuvent également être transformés, formés, ou filtrée pour changer son apparence complètement.

en savoir plus

Objet Distant (foreignObject)

L'élément 'foreignObject' permet d'inclure un espace de noms étranger, qui a son contenu graphique élaboré par un agent utilisateur différent. Le contenu graphique étranger inclus est soumis à des transformations et recompositions SVG.

Clipping, Masking and Compositing

Les éléments graphiques, y compris les textes, chemins, formes de base et combinaisons de ceux-ci, peuvent être utilisés comme décrit pour définir à la fois des régions «interne» et «extérne» qui peuvent être peintes (avec des couleurs, des dégradés et des motifs) de manière indépendante. Des chemins de détourage complètement opaque et des masques semi-transparentes sont formés ensemble pour calculer la couleur et l'opacité de chaque pixel de l'image finale, en utilisant l'"alpha blending" simple.