<canvas> 2DHTML5performanceJavascript<video>hardware accelerationSVGCSS3WebGLSecurityMulti-platformOpen CodecsAPI FichierScalable Vector GraphicsAPI GéolocationJSON NatifWOFFGNU/LinuxBorder ImageHTML5 parser-moz-elementCache ApplicationHTTP Strict Transport Securityimage-rectclassListCadre OmbréTransitionSVG en temps que fond d'un CSSIndexedDBBorder RadiusFonds MultiplesTraceMonkeyQuerySelectorAndroidJavascript Animation SchedulerMulti-touch@media QueriesformData:visitedDrag and Drop files from the DesktopText ShadowX-Frame-OptionspostMessageRetained layersJavaScript typed arraysXHR Level 2Content EditableCross-Domain XHRCompositing accelerationFormulairesWeb WorkersTransformStructural pseudo-classesWindowsProtocol handlersCross-Origin Resource Sharingasync & deferAsynchronous plug-in paintingany()GradientsECMAScript 5Javascript enginelocalStorageMac OSDevice OrientationAudio Data APIcalc()Content Acceleration@font-faceNative Drag and DropSVG as an <img>foreignObjectfont-feature-settingsStrict ModeHistory APIMaemomask, filter, clip-path<audio>Columnssemantics
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.
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.
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.
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.
É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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
-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).
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).
@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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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).
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.
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.
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.
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é.
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.
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.
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.
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.
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:.
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.
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.
