Mot-clé - css transitions

Fil des billets

samedi 27 décembre 2008

WebKit's week - #7

French version

Christmas edition !

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (38826).

Web Workers (38150, 38567)

Once again, let's talk about a new specificaiton. With Web workers, you can realise complex tasks in JavaScript in another thread and so in the background. Therefore, the browser is not unresponsive and we can better use the multiple cores of the recent processors. The spec is a work in progress and changes often. You'll find more detailed explanations on the Web Tech blog of Mozilla (which implements this spec, available in Firefox 3.1β2). Some APIs are available in a Worker, but the DOM API isn't part of them. Oliver Hunt prepared a demo to show the performance gain.

WML support (38541, Bug 20393)

WML is the language intended for devices that implement the WAP protocol. WebKit doesn't support this language but it is currently being implemented. This support is not available by default in the nightlies. You'll have to compile your own copy if you want to test it.

HttpOnly Cookie (38566)

An Internet Explorer extension (added in Firefox and Opera since) will soon be supported by WebKit based browsers. This restricts the access to certain cookies. They are only available for an HTTP request and so not from JavaScript. This is an important functionality to restrict the damages of an XSS vulnerability. This is not available in the nightlies because you need some updated Apple proprietary libraries (CFNetwork). UPDATE (29 december) : CFNetwork has been updated since this commit so it is now testable in the nightlies, my bad.

Updated propositions (38717, 38737, 38760)

Propositions for CSS Transforms, CSS Transitions and CSS Animations have been updated. CSS Transforms have been splitted into a 2D and 3D proposition. Also, a proposition of extension to the CSS Media Queries for the previous propositions. And an extension of pointer-events to HTML elements. All these propositions are consultable on a unique location.

Underground work

In addition to all this, a lot of what I call "underground" work has been done. A lot of renamings, cleanings, fixes for recently introduced features, a smaller memory footprint, tests for conformity. There's too much commits for me to point. All this work, which is not really visible but very useful, is an occasion for me to remind you the goals of the WebKit project.


This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #7

Édition de Noël !

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (38826).

Web Workers (38150, 38567)

Une fois n'est pas coutume, nous allons parlons d'une nouvelle spécification. Les Web workers permettent de réaliser des actions complexes en JavaScript dans un autre thread et donc en tâche de fond. Cela permet de ne pas bloquer le navigateur mais aussi de mieux utiliser les multiples cœurs des processeurs récents. La spécification est actuellement en plein travail et change relativement souvent. Vous trouverez des explications plus détaillées sur le blog Web Tech de Mozilla (qui a aussi implémenté cette spécification qui est disponible dans Firefox 3.1β2). Certaines API sont disponibles dans un Worker mais l'API DOM n'en fait pas partie. Oliver Hunt a préparé une démo pour illustrer le gain en performance.

Support de WML (38541, Bug 20393)

Le WML est le langage destiné aux terminaux respectant le protocole WAP. WebKit ne supportait pas ce langage mais il est actuellement en cours d'implémentation. Ce support n'est pas activé par défaut dans les nightlies, ce qui vous empêchera de le tester sans compiler vous même.

HttpOnly Cookie (38566)

Une extension de Internet Explorer (depuis ajoutée à Firefox et Opera) sera bientôt fonctionnelle dans les navigateurs basés sur WebKit. Cela permet de restreindre l'accès à certains cookies. Ils ne sont disponibles que lors d'une requête HTTP et donc pas en JavaScript. C'est une fonctionnalité importante pour restreindre les dégâts de failles XSS. Ceci n'est pas testable dans les nightlies car cela demande d'avoir des librairies propriétaires d'Apple à jour (CFNetwork). Mise à jour (29 décembre) : Ceci est testable puisque CFNetwork a été mis à jour depuis.

Mise à jour de propositions (38717, 38737, 38760)

Les propositions de CSS Transforms, CSS Transitions et CSS Animations ont été mises à jour. Les CSS Transforms ont même étés séparées entre les transformations 2D et 3D. Il y a aussi une proposition d'extension des CSS Media Queries pour les étendre aux propositions précédentes. Une proposition d'extension des pointer-events au HTML a aussi été ajoutée. Toutes les propositions actuelles sont regroupées en une adresse unique.

Travail soutterain

En plus de tout cela, beaucoup de travail que je nommerai "souterrain" a été réalisé. De nombreux renommages, nettoyages ont été effectués, des corrections sur les fonctionnalités récemment introduites, une réduction de l'empreinte mémoire, des tests de conformité. Il y a beaucoup trop de changements pour que je les indique individuellement. Tout ce travail pas très visible mais bien utile me donne l'occasion de rappeler les buts du projet WebKit.


Voilà pour cette semaine. Évidemment, ce n'est qu'une sélection que j'ai faite. Si vous avez remarqué d'autres changements intéressants, n'hésitez pas à les mentionner. Idem si je me suis trompé dans une explication.

lundi 18 août 2008

WebKit's week - #3

French version

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (35806).

CSS Animations implementation (35666)

I announced this implementation too early last week. Comparing to the two specs, associated events were missing.

Compatibility with Firebug's API (35676, 35786, 35787)

New commands are available in the console. $, $$, $x, keys, values, profile/profileEnd, clear. You can find these functions descriptions in Firebug's documentation And don't forget the addition of console.dir to list all properties of an object. console.dir

SVG tests (35675, 35679, 35680, 35682, 35683, 35695, 35700)

I'm not familiar with SVG but something like 80 tests were added to ensure the right behaviour of the engine. Especially, the elements line, radialGradient, image, marker, mask, cursor, pattern and rect are concerned. Some fixes were made in consequence.

Resizable and closable inspector in docked mode (35719, 35720, 35722)

When the inspector is inside a page, it is now possible to resize and close it. I waited a long time for this. This docked mode is now the default. And to finish with this, the inspector will remember in which mode you've let it.

Loader enhancements (35799, 35801)

In order to always get better performances, some tweaks were made :

  • Stylesheets get highest priority since the engine won't render before having downloaded every stylesheets.
  • For each new host, the connection is established as soon as possible in order to reduce the effect of the latency due to it.
  • When the document and all stylesheets are parsed, there's no need to maintain a queue, we can download all documents, whatever priority they have.
  • To avoid delaying the initial rendering, resources in <body> are not downloaded if there's no render. This improves by 25%, or 5 seconds, the initial rendering for CNN with a bandwith limited to 300kb/s, interesting for mobile devices.


This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #3

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (35806).

Implémentation des CSS Animations (35666)

J'avais annoncé un peu rapidement cette implémentation la semaine dernière. Par rapport aux deux spécifications, il manquait les événements associés.

Compatibilité avec l'API de Firebug (35676, 35786, 35787)

De nouvelles commandes sont disponibles dans la console. $, $$, $x, keys, values, profile/profileEnd, clear. Vous trouverez les descriptions de ces fonctions dans la documentation de Firebug. Sans oublier l'ajout de console.dir pour lister les propriétés d'un objet. console.dir

Tests SVG (35675, 35679, 35680, 35682, 35683, 35695, 35700)

Je ne suis pas familier avec SVG mais environ 80 tests ont été ajoutés pour s'assurer du bon comportement du moteur. En particulier, les éléments line, radialGradient, image, marker, mask, cursor, pattern et rect sont concernés. Quelques corrections ont eu lieu à cette occasion.

Inspecteur redimensionnable et fermable en mode "dock" (35719, 35720, 35722)

Lorsque l'inspecteur est intégré à la page, il est désormais possible de le redimensionner et de le fermer. J'attendais cela depuis longtemps. Il utilise d'ailleurs ce mode par défaut désormais. Et pour compléter cela, il se rappellera dans quel mode vous l'avez laissé.

Amélioration du chargement (35799, 35801)

Afin d'avoir toujours de meilleures performances, quelques ajustements ont été faits :

  • Les feuilles de styles ont une priorité plus importante puisque le moteur ne fera pas de rendu tant qu'il n'a pas téléchargé toutes les feuilles.
  • Pour chaque nouveau domaine, la connection est établie dès que possible, afin de réduire la latence due à l'établissement de cette connexion.
  • Dès que le document et les feuilles de styles ont été parsées, plus la peine de maintenir de queue de téléchargements, on peut télécharger des documents de n'importe quelle priorité
  • Pour ne pas retarder le rendu initial, les ressources dans <body> ne sont pas téléchargées tant que le rendu n'a pas commencé. Cela améliore de 25%, soit 5 secondes, le rendu initial de CNN avec une connection limitée à 300kb/s, intéressant pour les mobiles.


Voilà pour cette semaine. Évidemment, ce n'est qu'une sélection que j'ai faite. Si vous avez remarqué d'autres changements intéressants, n'hésitez pas à les mentionner. Idem si je me suis trompé dans une explication.

lundi 11 août 2008

WebKit's week - #2

French version

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (35657).

CSS Animations implementation (35545, 35568, 35580, 35646)

CSS Animation is a work in progress spec written by Apple. Like its mate, CSS Transition, it allows animated effects in CSS. When transitions are just effects computed when a property is changed, animations are called explicitly to trigger a value change. There's a keyframe system to have a precise control of the animation flow. See how it works with the different examples.

Quick edition for numeric values (35561)

For CSS properties accepting numeric values, it is now possible to increase or decrease them with the keyboard. Remember the handy shortcuts changing the amount : with Alt, we jump by 0.1, with Shift or Page Up by 10, with Shift and Page Up by 100.

Profiler's Heavy view (35625)

OK, it's not an amazing novelty but it's a reason to talk about the new profiler. It allows you to get detailed information about the execution time of your JavaScript. Comparing to Firebug, results are displayed as a tree so you can look closer. Two views are available, Tree or Heavy, each one is interesting for different purposes. It's also possible to reduce noise by filtering the results to focus on some code. It reacts to console.profile and console.profileEnd, like Firebug.

Squirrelfish engine improvements (35593, 35639)

This engine was announced two months ago and since, it's always improved. I can't explain what they are doing but the figures speak for themselves : 2.6% and 2.5% progression for the SunSpider test


This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #2

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (35657).

Implémentation des CSS Animations (35545, 35568, 35580, 35646)

CSS Animation est une spécification en cours d'écriture par Apple. Comme sa copine, CSS Transition, elle permet d'obtenir des effets animés en CSS. Là où les transitions ne sont que des effets à chaque changement d'une propriété, les animations sont appelées explicitement pour provoquer un changement de valeur. Il y a un système de keyframe pour contrôler précisément le déroulement de l'animation. Voyez les quelques exemples pour plus de détails.

Édition rapide de valeurs numériques (35561)

Pour les propriétés CSS acceptant des valeurs numériques, il est désormais possible d'augmenter ou de diminuer cette valeur avec le clavier. À noter, les raccourcis claviers pratiques modifiant la valeur : avec Alt, on saute de 0.1, avec Shift ou Page Up de 10, avec Shift et Page Up de 100.

Heavy view du profiler (35625)

Ok, ce n'est pas une nouveauté révolutionnaire, mais ça me permet de parler du nouveau profiler. Celui-ci permet de récupérer des informations détaillées sur le temps d'exécution du JavaScript dans votre page. Par rapport à celui de Firebug, il affiche les résultats sous forme d'arbre, permettant de regarder plus en détail. Deux types de vues sont disponibles Tree ou Heavy chacune ayant son intérêt. Il est aussi possible de réduire le bruit pour se concentrer sur une partie du code. Il réagit aux commandes console.profile et console.profileEnd, tout comme Firebug.

Améliorations du moteur Squirrelfish (35593, 35639)

Ce moteur a été annoncé il y a deux mois et depuis, il est en constante amélioration. Je ne pourrais pas du tout expliquer ce qu'ils font mais les chiffres parlent d'eux-mêmes : 2.6% et 2.5% d'améliorations pour le test SunSpider


Voilà pour cette semaine. Évidemment, ce n'est qu'une sélection que j'ai faite. Si vous avez remarqué d'autres changements intéressants, n'hésitez pas à les mentionner. Idem si je me suis trompé dans une explication.