3 pièce(s) jointe(s)
La version bêta de Chrome 69 est disponible et s'accompagne du support expérimental du codec vidéo AV1
La version bêta de Chrome 69 est disponible et s'accompagne du support expérimental du codec vidéo AV1,
et de la prise en charge des encoches d'affichage
Hier, Google a fait la promotion de la bêta du navigateur Web Chrome 69 pour les plateformes prises en charge et qui comportent GNU / Linux, macOS et Windows, donnant un premier aperçu des nouvelles fonctionnalités et améliorations du navigateur aux développeurs.
Support (expérimental) de AV1
L'une des nouveautés qui sera disponible sur la version Google Chrome 69 est le support du codec vidéo AV1 de nouvelle génération développé par l'Alliance for Open Media, même si Google l’a marqué comme étant encore à un stade expérimental. Récemment, Mozilla a lancé une campagne pour l’adoption de ce codec.
La fondation a rappelé « Qu’il a fallu des années aux entreprises pour mettre en place un ensemble complexe d'accords juridiques et commerciaux, de sorte que la vidéo H.264 fonctionne partout. Maintenant que l'industrie passe à l'utilisation de codecs vidéo plus efficaces, ces entreprises choisissent les technologies de prochaine génération qu'elles vont prendre en charge. La fragmentation sur le marché soulève des inquiétudes quant à savoir si notre site web préféré, où nous regardons des vidéos, continuera d'être accessible et abordable pour tous ».
Elle a souligné deux raisons qui font qu’elle aime ce codec :
- AV1 est libre de droits : donc tout le monde peut l'utiliser librement. Les éditeurs de logiciels peuvent l'utiliser pour créer du streaming vidéo dans leurs applications. Les développeurs Web peuvent créer leurs propres lecteurs vidéo pour leurs sites. Cela peut ouvrir des opportunités d'affaires et éliminer les barrières à l'entrée pour les entrepreneurs, les artistes et les gens ordinaires. Plus important encore, un codec sans redevance peut aider à garder la vidéo de haute qualité à un prix abordable pour tout le monde.
- AV1 offrirait une meilleure technologie de compression que les codecs à haut rendement (environ 30% de mieux, selon une étude de l'Université d'Etat de Moscou) : pour les entreprises, cela se traduit par de plus petits fichiers vidéo qui sont plus rapides et moins chers à transmettre et occupent moins d'espace de stockage dans leurs centres de données. Pour le reste d'entre nous, nous aurons accès à une vidéo haute définition magnifique à travers les sites et services que nous connaissons et aimons déjà.
« AV1 est un codec de nouvelle génération développé par l'Alliance for Open Media. AV1 améliore l'efficacité de la compression de 30% par rapport à l'actuel codec vidéo de pointe, VP9. Le décodeur AV1 sera ajouté à Chrome Desktop (Windows, macOS, Linux, Chrome OS) en fonction de la spécification officielle bitstream. Actuellement, la prise en charge est limitée au profil "principal" 0 et n'inclut pas les capacités d'encodage. Le conteneur pris en charge est ISO-BMFF (MP4) », a noté Google sur la page dédiée aux statuts de Chrome.
Chrome s’accompagne également de plusieurs fonctionnalités CSS.
Prise en charge des encoches d'affichage
Les encoches d'affichage sont désormais prises en charge dans Chrome via la nouvelle fonction CSS env () (variables d'environnement) et la balise meta viewport-fit. Cela permet aux développeurs de tirer parti de l'intégralité de l'écran sur les périphériques dotés d'une encoche d’affichage.
Par exemple, pour indiquer au navigateur de se développer dans la zone d’encoche d'affichage, le site doit définir la propriété viewport-fit dans la balise META de viewport à couvrir. Le site peut ensuite utiliser les variables d'environnement CSS de la zone sécurisée pour mettre en page leur contenu sans qu’il ne soit superposé à l’encoche.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <meta name="viewport" content="viewport-fit: cover" />
<style>
#box {
margin-top: env(safe-area-inset-top);
margin-left: env(safe-area-inset-left);
margin-bottom: env(safe-area-inset-bottom);
margin-right: env(safe-area-inset-right);
}
</style>
<div id=box></div> |
Étant donné qu’un nombre croissant d'appareils mobiles sont sortis avec une encoche d'affichage, les applications natives seront en mesure de profiter de l'expansion dans la zone de découpe. L'ajout d'un support d’encoche d'affichage à la plate-forme Web permettra aux sites d'offrir une expérience comparable à celle d'une application native sur ces appareils.
Gradients coniques
Les gradients coniques CSS (angulaire / balayage) permettent des transitions de couleur autour d'un centre plutôt que de rayonner à partir de celui-ci. Cela permet, par exemple, de créer une roue de teinte en utilisant seulement deux propriétés CSS comme vous pouvez le voir ci-dessous.
Canvas
OffscreenCanvas est une nouvelle interface qui permet d'utiliser les contextes de rendu 2D et WebGL dans Workers. Cela augmente le parallélisme dans les applications Web et améliore les performances sur les systèmes multicœurs.
Chrome prend désormais en charge DedicatedWorker.requestAnimationFrame (), ce qui permet de déclencher les événements de type animation sur les Workers dédiés comme dans Windows. Par exemple:
Code:
1
2
3
| const offscreenCanvas = new OffscreenCanvas(100, 100);
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10); |
Ou avec Canvas
Code:
1
2
3
4
| const canvasElement = document.getElementById("mycanvas")
const offscreenCanvas = canvasElement.transferControlToOffscreen();
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10); |
Dans un Worker
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| self.onmessage = function(ev) {
const offscreenCanvas = ev.data;
const ctx = offscreenCanvas.getContext("2d");
let x = 0;
const draw = function() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(x, 0, 10, 10);
x = (x + 1) % ctx.canvas.width;
requestAnimationFrame(draw);
};
draw(0);
} |
Page principale
Code:
1
2
3
4
| const worker = new Worker("worker.js");
const offscreenCanvas =
document.getElementById("canvas").transferControlToOffscreen();
worker.postMessage(offscreenCanvas, [offscreenCanvas]); |
API JavaScript
JavaScript a plusieurs nouvelles API:
- l'API ReportingObserver fournit une fonction de rappel JavaScript invoquée en réponse aux dépréciations et aux interventions du navigateur. Le rapport peut être sauvegardé, envoyé au serveur ou manipulé à l'aide de JavaScript arbitraire. Cette fonctionnalité est conçue pour permettre aux développeurs de mieux comprendre le fonctionnement de leurs sites sur des périphériques réels.
- les tableaux JavaScript obtiennent deux nouvelles méthodes. Array.prototype.flat () renvoie un nouveau tableau avec tous les éléments du sous-tableau concaténés en récursif jusqu'à la profondeur spécifiée. Les éléments du sous-tableau deviennent membres du nouveau tableau. Array.prototype.flatMap () mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis porte le résultat dans un nouveau tableau. Cette méthode est fonctionnellement équivalente à une carte suivie par l'appel de flat () avec une profondeur de 1.
API Keyboard Map
Certaines applications telles que les jeux attribuent des fonctions spécifiques à des clés physiques spécifiques. Lorsque l'interface fait référence à ces clés, elle doit afficher soit le caractère affiché sur la touche, qui varie en fonction des paramètres régionaux, soit le caractère attribué à la touche par une disposition de clavier différente qui peut avoir été installée par l'utilisateur. En raison de ces variations de disposition, il est parfois possible que le caractère affiché dans l'interface ne fasse pas référence à la clé physique voulue.
Cette nouvelle API fournit un moyen de traduire les valeurs KeyboardEvent.code représentant les clés physiques en chaînes correctes pour l'affichage à l'utilisateur.
Google Chrome 69.0.3497.23 est maintenant disponible en téléchargement sur GNU / Linux, macOS et Microsoft Windows si vous voulez essayer les nouvelles fonctionnalités et améliorations. Il ne faut pas oublier que le logiciel est en version bêta et qu'il n'est donc pas recommandé pour une utilisation en production.
:fleche: Télécharger Chrome
Sources : blog Chromium, statuts Chrome
Et vous ?
:fleche: Quelles sont les fonctionnalités que vous appréciez le plus ?
Voir aussi :
:fleche: Comme Firefox et Chrome, Microsoft Edge se dote du support de WebAuthn, la norme de sécurité visant à mettre fin aux mots de passe sur le Web
:fleche: Des extensions Chrome, ainsi que des apps Android et iOS, ont collecté des données personnelles à l'insu de leurs utilisateurs
:fleche: Un ingénieur de Mozilla affirme que YouTube est plus lent sur Firefox et Microsoft Edge que sur Google Chrome
:fleche: Chrome 68 devient la première version du navigateur à marquer les sites HTTP comme étant non sécurisés, et s'accompagne d'autres fonctionnalités
:fleche: Après Chrome et Edge, Firefox Nightly permet lui aussi de mettre des sites en sourdine lorsqu'ils lancent automatiquement des contenus multimédia
