Hanblog - Tag - webkit

WebKit's week - #6

Anthony Ricaud — Tue, 02 Dec 2008 20:19:00 +0100

Apologizes for the chaotic rhythm of publication. So here is a raw version.

Changes of the week

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

Multiline Inputs (35739)

Before this commit, WebKit was only sending the first line of an input field. Now, a multiline text (entered with copy and paste) will keep all the text. The carriage return will be replaced by spaces. This matches other browsers behavior.

Computed styles tab collapsed (37523)

After the post on the redesigned Web Inspector, many people were asking why styles can't be edited. In fact, they were trying to edit the computed styles. As the name explains, it represents the final styles after being calculated by the browser and therefore, they are not editable. To avoid this confusion and keep an easy access to this data, this tab is now collapsed by default.

Debug without reloading the page (37622)

Wanna debug some Javascript ? You just have to enable the debugger and there you go. No reloading involved.

Time and size per resource

In order to ease the interpretation of the waterfall in the Resources panel, the time and size for each resources were added. You just have to hover the resource to get the different times (waiting and loading times) or the size of the resource.

On demand profiler (37730, 37933)

Before these commits, the profiler was always enable when the Safari's Developer menu was enabled. This affects performance, even when you weren't running a profile. Now, the profiler is disabled by default. A new activation screen is therefore necessary. A similar screen was added for the profiler too.

Geolocation API (37854)

A lot of applications could benefit from knowing the user position and offer local services. So an API is under development at the W3C : Geolocation API. There is a clear usecase with the iPhone for example. This functionality can't be tested in the nightlies at the moment.

Multi-file upload (37863)

HTML5 introduces the multiple attribute on file inputs. This allows uploading multiple files at a time. Combined with XMLHttpRequest version 2, this allows uploading files with a progression bar without external plugins.

Mozilla cursors (37902)

Two new values were added to customise cursors : -webkit-grab and -webkit-grabbing. They were already used in Mozilla. Demo of all supported cursors

Changing the accesskey shortcut (38211)

Originally, the accesskey shortcut was Ctrl. This caused collisions with the Emacs style shortcuts in Mac OS. The shorcut was changed to Ctrl+Opt. But this caused new problems with VoiceOver. So the intermediate solution is now : Ctrl+Opt without VoiceOver and Ctrl with VoiceOver.

Julien Chaffraix and I were at Paris Web 2008. Among many good moments, they were a nice browser panel with a represent of the four big engines.

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 - #6

Anthony Ricaud — Thu, 27 Nov 2008 00:04:00 +0100

Je n'arrive pas à tenir le rythme, voici donc une revue avec très peu d'explications pour rester à flot.

Changements de la semaine

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

Input multi-lignes (35739)

Avant ce changement, WebKit n'envoyait que la première ligne d'un champ input. Maintenant, un copier coller d'un texte multilignes conservera tout le texte. Les retours chariots seront remplacés par des espaces. Cela harmonise le comportement avec les autres navigateurs.

Onglet Computed style replié (37523)

Après le billet sur le redesign du Web Inspector, de nombreuses personnes semblaient se demander pourquoi les styles n'étaient pas éditables. Ils se trouvaient tout simplement dans la partie Computed Style des styles. Comme son nom l'indique, elle représente les styles finaux après calcul et ne sont donc pas éditables. Pour éviter cette confusion mais garder un accès facile à cette information, cet onglet est désormais replié.

Débugger sans recharger la page (37622)

Envie de débugger du JavaScript. Il suffit d'activer le debugger et vous êtes parés. Pas de rechargement à attendre.

Temps et poids de chargements détaillés

Afin de faciliter l'interprétation de la cascade dans l'onglet Ressources, des temps et poids de chargement détaillés ont été ajoutés. Il suffit de survoler la resource pour obtenir les différents temps (temps d'attente et temps de téléchargement) ou le poids de la resource.

Profiler à la demande (37730, 37933)

Avant ces changements, le profiler était toujours activé lorsque le menu développeur de Safari était activé. Cela dégradait les performances, même lorsqu'on ne souhaitait pas profiler du code. Avec ces changements, le profiler est maintenant désactivé par défaut. Un nouvel écran d'activation a donc fait son apparition. Un écran similaire a été ajouté pour le débugger.

Geolocation API (37854)

De nombreuses applications souhaitent obtenir la position de l'utilisateur pour rendre des services locaux. Une API est donc en cours de développement au W3C : Geolocation API. Nous voyons tout de suite l'intérêt que cela pourrait avoir sur un iPhone. Cela dit, cette fonctionnalité n'est pas testable dans les nightlies.

Upload de plusieurs fichiers (37863)

HTML5 introduit l'attribut multiple sur les champ de type file. Cela permet d'uploader plusieurs fichiers en une seule fois. Combiné avec XMLHttpRequest version 2, cela permet de faire des uploads avec une barre de progression sans utiliser de plugins.

Curseurs Mozilla (37902)

Deux nouvelles propriétés ont été ajoutées pour personnaliser les curseurs : -webkit-grab et -webkit-grabbing. Ils étaient déjà utilisées dans Mozilla. Démo de tous les curseurs actuels

Changement du raccourci accesskey (38211)

À l'origine, le raccourci pour les accesskey était Ctrl. Cela posait des problèmes avec les raccourcis type Emacs de Mac OS. Le raccourci a donc été changé pour Ctrl+Alt. Mais cela pose maintenant problème avec VoiceOver. D'où la solution intermédiaire : utiliser Ctrl+Alt sans VoiceOver et Ctrl avec Voiceover.

Julien Chaffraix et moi-même étions à Paris Web 2008. Entre autre bons moments, une jolie table ronde navigateurs avait lieu.

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.

Paris Web, a really nice conference

Anthony Ricaud — Mon, 20 Oct 2008 09:40:00 +0200

The third edition of Paris Web will be held from November 13 to 15. I should have mentioned it earlier since the early bird is over. But guess what : it's still really affordable.

The program is remarkable. Chris Wilson, Daniel Glazman, François Yergeau, Nicole Sullivan, Christian Heilmann, Charles MacCathieNeville, Aaron Leventhal will all be there. And I'm just talking about the famous names. There's a lot more interesting persons speaking there.

On Saturday, I will present a workshop on Firebug and the Web Inspector :

Our web pages are less and less static. After writing the code, we have to understand how they are interpreted by the browsers.

Which CSS rules apply to this element

What is this bug in my JavaScript code ?

Why is this action taking so much time ?

We will discover and use these two tools to answer those questions and much more. We will talk about the Console API and the command line.

I would also like to talk about the new features in WebKit, we still need to figure out how. Julien Chaffraix (another WebKit contributor) will be there too. He'll be part of the browser discussion on Friday.

In addition to the lectures and workshops, there will be a free party on friday night.

This is an awesome organisation. They are all volunteers but it's a professional class event. If you're gonna be there, leave a message here if you want.

WebKit's week - #5

Anthony Ricaud — Mon, 13 Oct 2008 15:20:00 +0200

French version

One month without news is bad. So we resume with only two weeks.

Changes of the week

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

Styling placeholder (37123, 37217)

WebKit supports a placeholder attribute on input elements. This attribute allows you to display a tooltip in the field when the user hasn't enter any content. By default, this tooltip is printed in light gray. Now, we can play with his style using the -webkit-input-placeholder pseudo-element. See the example.

Debugging before onload fires (37313)

Before this fix, it was impossible to debug a part of code running before the resource finished its loading. It wasn't really handy for a tool like the Web Inspector. Fixed !

Origin header for POST requests (37317)

Beginning of implementation for the Access Control for Cross-Site Requests specification. An Origin header, which only contains the domain of the originating page, is added. This allows application to check if the request comes from an authorized domain. Unlike the Referer header, this one doesn't reveal the complete path of the originating page.

Exact line search (37389)

Like Firebug, it's now possible to search for a particular line in the Resources panel. We can use two syntaxes : #123 or line:123. We can add a keyword to only match lines with this keyword.

Fixing SunSpider (37389)

As David Mandelin mentioned on his blog, the regexp-dna test on SunSpider was incorrect. An option only supported in Gecko was in the test and so, this engine was disadvantaged. Eveyrthing is fine now, all the engines do the same test.

News of the week

While I wasn't giving news, three new posts were added to the Surfin' Safari blog:

Introducing Squirrelfish Extreme, the latest evolution of the JavaScript engine.
Full pass of Acid3, the last condition (smooth animation) is now ok.
Web Inspector redesign, a summary of all the evolutions for the last nine months.

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 - #5

Anthony Ricaud — Mon, 13 Oct 2008 03:30:00 +0200

Un mois sans nouvelle, bouh, c'est pas bien. Du coup, on reprend avec seulement deux semaines.

Changements de la semaine

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

Style du texte de remplacement (37123, 37217)

WebKit accepte un attribut placeholder sur les éléments de type input. Cet attribut permet d'afficher une aide dans le champ lorsque l'utilisateur n'a entré aucun contenu. Par défaut, ce texte d'aide est affiché légèrement grisé. On peut désormais jouer sur son style en utilisant le pseudo-element -webkit-input-placeholder. Voir cet exemple.

Débuguer avant la fin du chargement (37313)

Avant cette correction, il était impossible de débuguer une partie de code s'exécutant avant que la ressource ne soit finie d'être chargée. C'était un peu handicapant pour un outil comme le Web Inspector. Corrigé donc.

En-tête Origin pour les requêtes POST (37317)

Début d'implémentation de la spécification Access Control for Cross-Site Requests. Un en-tête Origin, ne contenant que le domaine de la page déclenchant la requête POST, est ajouté. Cela permet aux applications de vérifier que la requête provient bien d'un domaine autorisé. Contrairement à l'en-tête Referer, celui-ci ne révèle pas le chemin complet de la page d'origine.

Recherche de ligne précise (37389)

Comme Firebug, il est possible de rechercher une ligne précise d'un fichier dans le panneau Ressources. On peut utiliser #123 ou line:123 comme syntaxe. Il est même possible d'ajouter un mot pour ne trouver que les lignes contenant ce mot.

Correction du test SunSpider (37389)

Comme l'a mentionné David Mandelin sur son blog, le test regexp-dna de SunSpider était incorrect. Une option supportée uniquement par Gecko était présente et défavorisait donc ce moteur. Tout est rétabli, les moteurs font désormais le même test.

Nouvelles de la semaine

Pendant que je ne donnais pas de nouvelles, trois nouveaux billets sont apparus sur le blog Surfin' Safari :

Introduction de Squirrelfish Extreme, la dernière itération du moteur JavaScript.
Réussite complète de Acid3, la dernière condition (animation correcte) est remplie.
Redesign du Web Inspector, un résumé de toutes les évolutions depuis neuf mois.

WebKit's week - #4

Anthony Ricaud — Mon, 08 Sep 2008 02:15:00 +0200

French version

After a few weeks off, let's get back with webkit news. By the way, the english versions are now aggregated on Planet Webkit.

Changes of the week

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

DOM properties and local variables editing (35835)

Double clicking a property in the sidabar of Elements or Scripts panels now allows you to change the value of this property. You can even enter JavaScript as shown in this screenshot.

console.count support (35842)

Still a Firebug compatibilty stuff. This method allows you to count how many times a specific code has been called.

Editable Metrics tab (35876)

Like Firebug, it is now possible to edit dimensions, padding, borders, margins and position of a box.

Canvas Text support (36060)

Canvas, the element allowing you to draw in 2D now has an API to draw text. You can use the two tests to learn it.

Chrome consequences

Obviously, you haven't missed Google's announcement this week. A new browser using WebKit. And the two projects are working together as you can see with the following commits.

36074 New constants for Skia, V8 and Chromium.
36095 V8 benchmarks are integrated into WebKit.
36097 Little anecdote, some Google developers gave patches under fake names to stay under the radar before the announcement.

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 - #4

Anthony Ricaud — Mon, 08 Sep 2008 01:42:00 +0200

On reprend le rythme doucement, après quelques semaines sans nouvelles. Au passage, les billets en anglais sont désormais recensés sur le Planet Webkit.

Changements de la semaine

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

Édition des propriétés DOM et des variables locales (35835)

En double cliquant sur une des propriétés dans la barre latérale dans le panneau Elements ou Scripts, vous pouvez changer la valeur de la propriété associée. Vous pouvez entrer du javascript comme le montre la capture suivante

Support de console.count (35842)

Toujours pour la compatibilité avec Firebug, une nouvelle méthode s'ajoute à la liste. Elle permet de compter le nombre de fois qu'une ligne a été appelée.

Onglet Metrics éditable (35876)

Tout comme Firebug, il est maintenant possible d'éditer les dimensions, padding, bordures, marges et position d'une boîte.

Support de Canvas Text (36060)

Canvas, l'élément qui permet de faire du dessin en 2D s'est vu ajouté une API pour dessiner directement du texte. Deux tests peuvent vous servir d'exemples.

Conséquences de Chrome

Évidemment, vous n'avez pas manqué l'annonce de Google cette semaine. Un nouveau navigateur utilisant WebKit. Et les deux projets s'entendent, j'en veux pour preuve ces quelques commits.

36074 Nouvelles constantes pour Skia, V8 et Chromium.
36095 Les benchmaks de V8 sont intégrés à WebKit.
36097 Petite anecdote, certains développeurs de Google fournissaient des patchs sous des pseudonymes pour ne pas éveiller l'attention avant l'annonce.

WebKit's week - #3

Anthony Ricaud — Mon, 18 Aug 2008 23:33:00 +0200

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.

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

Anthony Ricaud — Mon, 18 Aug 2008 23:02:00 +0200

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.

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.

WebKit's week - #2

Anthony Ricaud — Mon, 11 Aug 2008 10:31:00 +0200

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

Anthony Ricaud — Mon, 11 Aug 2008 09:46:00 +0200

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

WebKit's week - #1

Anthony Ricaud — Sun, 03 Aug 2008 23:06:00 +0200

French version

I've been following the WebKit project for 4 months now and I thought it would be interesting to extract cool news of the week here. This is the first post in this series and I hope it will be interesting and live long.

I'm French so my tailor is rich but my English is poor. Please correct me if you find mistakes.

Changes of the week

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

CSS parser enhancements (35403)

It's always good to improve standards compliance. The menu:

don't fail when closing braces are not found for a declaration at the end of the file;
don't accept "!important fail" as valid;
keep accepting @import when it comes after invalid @ rules;
don't drop the whole @media block when there's an error before the closing brace;
some other minor css parsing revisions.

Support for CSS variable declaration blocks (35414)

The CSS WG is working (among other stuff) on CSS variables. To support this effort and try to find the best syntax, there are some tries in WebKit.

So this week, we have support for CSS variable declaration blocks. See the example in a test to see how it works.

Of course, these are experiments and do not represent the final syntax. There are other experimentations going on, like the use of the var keyword.

Support for console.group (35421)

Let's start by saying the Web Inspector (WebKit's equivalent to Firebug basically) is being refreshed. It has almost nothing to do with the one in Safari 3.1. Try it!

One of the novelty is to support the same Console API as Firebug to help web developers work.

This week, WebKit now supports console.group and console.groupEnd. I must point out this work was done by Keishi Hattori, one of the students participating in the Webkit GSoC .

Support for XMLHttpRequestUpload (35435)

Again, a work in progress specification and a testing implementation. The implementation has even more details than the latest spec I could find.

The idea ? Add events to allow better knowledge about the status of the XHR request. This could allow upload forms with progress bars.

The example shows the new available events and properties.

Ability to disable individual CSS properties (35514)

Also in the refresh project of the inspector. A useful functionality to analyse a web page design, try new things, etc.

News of the week

Ariya Hidayat had some fun adding a live tab previews in Arora (a browser based on QtWebKit).

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 - #1

Anthony Ricaud — Sun, 03 Aug 2008 17:28:00 +0200

Depuis le temps que je suis le projet WebKit, je me suis dit que ce serait intéressant d'en faire un résumé, à la manière de Laurent Jouanneau pour Mozilla. C'est donc le premier billet de la série que j'espère longue et intéressante.

Changements de la semaine

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

Amélioration du parser CSS (35403)

Toujours une bonne chose d'améliorer le respect des standards. Au menu :

Si la dernière accolade d'un fichier est oubliée, la règle sera tout de même considérée comme bonne;
Une règle finissant par "!important fail" ne sera plus considérée comme juste;
Si une règle @import n'est précédée que de règles @ invalides, elle sera valide;
Un bloc @media ne sera pas entièrement rejeté s'il y a une erreur avant l'accolade de fermeture;
D'autres améliorations mineures.

Support des blocs pour les variables (35414)

Le CSS WG travaille (entre autre) sur des variables en CSS. Pour supporter cet effort et permettre de choisir la meilleure syntaxe, des tentatives sont faites dans WebKit.

Cette semaine, ce sont donc le support de blocs en tant que variables. Voyez l'exemple fourni par un test pour mieux comprendre.

Ce sont bien évidemment des tests et ne représente en rien la syntaxe finale. Il y a d'ailleurs d'autres expérimentations en cours, sur l'utilisation du mot-clef var.

Support de console.group (35421)

Commençons d'abord par expliquer que l'inspecteur web (l'équivalent de Firebug en gros) est en cours de refonte. Il n'a quasiment rien à voir avec celui de Safari 3.1. Essayez-le, vous verrez.

L'un des chantiers est de supporter la même Console API que Firebug pour simplifier la vie des développeurs.

Cette semaine, la nouveauté est donc le support de console.group et console.groupEnd. Il est à noter que ce travail a été réalisé par Keishi Hattori, l'un des étudiants participant au GSoC de WebKit.

Support de XMLHttpRequestUpload (35435)

Encore une spécification en chantier et une implémentation de test. Visiblement l'implémentation a plus de détails que la dernière spécification que j'ai pu trouver.

L'idée ? Ajouter des événements permettant de mieux connaître l'état de la requête XHR. Cela permet par exemple de faire des formulaires d'upload avec une barre de progression.

L'exemple joint montre les nouveaux événements et propriétés disponibles.

Possibilité de désactiver des propriétés CSS (35514)

Encore la refonte/amélioration de l'inspecteur. Une fonctionnalité bien utile pour analyser le design de sa page, faire des expérimentations, etc.

Nouvelles de la semaine

Ariya Hidayat s'est amusé à rajouter un aperçu en direct du contenu des onglets dans Arora (un navigateur basé sur QtWebKit).

Nouveautés Safari 3.1 : Selectors API

Anthony Ricaud — Tue, 03 Jun 2008 02:14:00 +0200

Présentation

Comme promis, on va parler de quelque chose de bien plus intéressant pour accélérer vos applications web. Une attente de longue date, la fameuse et célèbre Selectors API ! C'est l'équivalent de $$ en Prototype et Mootools, $ en jQuery, YAHOO.util.Selector.query en YUI et... document.querySelectorAll pour base2. ^[1] Pour ceux qui connaissent, cela permet donc de sélectionner un liste d'éléments qui correspondent à un sélecteur CSS.

L'exemple du billet précédent devient donc document.querySelectorAll('.post'). Une différence à noter entre ces deux méthodes : querySelectorAll retourne une liste statique, un tableau en quelque sorte.

Regardons un peu les performances :

var start = new Date(); for (var i = 0; i < 1000; i++) var list =document.querySelectorAll('.post'); new Date() - start
104
var start = new Date(); for (var i = 0; i < 1000; i++) var list =document.getElementsByClassName('post'); new Date() - start
2

C'est sans appel, pour un sélecteur simple, il vaut mieux utiliser une méthode spécialisée. J'ai fait quelques autres tests. De manière générale, si vous voulez traversez simplement le DOM, tenez-vous en aux autres solutions. Cette méthode sera peut-être optimisée plus tard, ce n'est que la première implémentation.

Évidemment, le navigateur ne reconnaîtra que les sélecteurs qu'il connaît. Pas de problème avec Safari 3.1 puisqu'il connaît tous les sélecteurs disponibles à ce jour (on en reparlera plus tard, peut-être). Par contre, avec IE8, ce sera plus compliqué. Oui oui, IE8 implémentera cette API ! Et comme cette API a été bien conçue, le navigateur est censé renvoyer une exception lorsqu'il ne connaît pas un sélecteur. Le monde est presque parfait !

Les librairies

Prototype : dans la version de dev (un appel à un div vide puis le vrai appel)
YUI : rien
mootools : rien
base2 : Oui, en dev.
jQuery : rien.

Le piège.

Le comportement de cette API est pour l'instant trompeuse. Lorsque l'on utilise cette méthode sur un élément, elle va chercher tous les éléments du document qui correspondent puis ne retourne que ceux qui sont des enfants de l'élément. Le comportement des librairies (et qui me semble plus naturel) est d'appliquer le sélecteur à partir de l'élément en question. John Resig en parle bien mieux que moi

Les petits plus

Que peut-on faire de marrant avec cette API ? On peut par exemple récupérer tous les liens présents sur la page qu'a visité l'utilisateur. Un simple document.querySelectorAll(':visited') fera l'affaire.

On peut aussi récupérer la liste de tous les éléments qui sont actuellement survolés par l'utilisateur. document.querySelectorAll(':hover') vous donnera satisfaction.

Notes

[1] Oui, cette librairie est tellement bien qu'il n'y a pas besoin d'apprendre autre chose que les standards

Nouveautés Safari 3.1 : getElementsByClassName

Anthony Ricaud — Thu, 10 Apr 2008 20:39:00 +0200

Allez, on continue dans Webkit (parce que ça me botte en ce moment). Je ne suis pas tombé sur beaucoup d'articles en français résumant les nouveautés de Safari 3.1. Et comme on n'est jamais mieux servi que par soi-même...

Commençons par getElementsByClassName. Kékecé ? À l'instar des getElementById, getElementsByTagName, getElementsByName c'est une méthode pour récupérer des éléments du DOM selon un critère, en l'occurence la ou les classes. Par exemple, sur la page d'accueil de ce blog, document.getElementsByClassName('post').length renvoie 20 mais document.getElementsByClassName('post odd').length renvoie 10. Comme toutes ces consœurs, cette méthode marche aussi à partir d'un élément du DOM, restreignant ainsi les résultats.

Il faut faire attention en manipulant la liste renvoyée. Elle est "live", c'est-à-dire que tout changement dans le DOM la modifie (comme getElementsByTagName). Exemple:

var list = document.getElementsByClassName('post');
for (var i=0; i < list.length; i++)
{
  list[i].parentNode.removeChild(list[i]);
  alert(list.length);
}

En exécutant cette fonction sur la page d'accueil, on verra disparaître un billet sur deux et la NodeList diminuera au fur et à mesure. Attention donc en manipulant les résultats. Pour être sûr de ce qui va se passer, on peut recopier le tout dans un tableau classique, mais attention aux performances.

Cette méthode est actuellement supportée par Safari 3.1 (of course) et bientôt Firefox 3 et Opera 9.5. Elle fait partie du brouillon pour HTML 5.

Vous voyez évidemment à quoi ça sert ? Ça accélère considérablement tous les accès qu'on peut faire, si on l'utilise. Et comme de plus en plus de gens utilisent des librairies pour ne pas s'embêter avec les compatibilités entre navigateurs, on va vérifier qu'on bénéficie bien de cette amélioration quand disponible. On va surtout étudier les méthodes du style $ ou $$, qui permettent de sélectionner des éléments à partir d'un sélecteur CSS

Prototype n'a pas. Pire, ça peut casser dans les anciennes versions.
jQuery : y a pas non plus.
mootools : y a pas.
YUI : non plus.
base2 : non plus.

Bilan : Ah bah c'est pas génial. Si j'étais mesquin, je dirais que c'est une raison de plus pour ne pas utiliser de librairies Javascript. À leur décharge, ce n'est pas vraiment nécessaire puisqu'elles utilisent XPath lorsque c'est disponible et c'est disponible sur tous les navigateurs ayant cette méthode. Pour jQuery, c'est regrettable, puisqu'elle n'a pas d'implémentation XPath. Bien évidemment, XPath est plus rapide que DOM, mais tout de même plus lent que getElementsByClassName.

Mais finalement, on verra bientôt qu'il y a d'autres méthodes pour nous aider.

Mon premier bug chez Webkit

Anthony Ricaud — Mon, 07 Apr 2008 09:40:00 +0200

Depuis un petit moment, je suis de plus en plus près le projet Webkit, le moteur derrière Safari.

Ayant remarqué un bug dans la gestion des évènements sur une interface que j'utilise quasi-quotidiennement, je me suis décidé hier à en faire un joli rapport de bug. J'ai aussi pu traîner un peu sur le salon IRC #webkit et l'accueil était plutôt agréable. J'ai pu poser quelques questions et apprendre qu'un nouveau moteur Javascript est en cours d'écriture, que le WebInspector était en cours de refonte.

En écrivant le test minimal pour le bug, j'ai aussi remarqué que la taille minimum d'un élément <select> sur plusieurs lignes est de 4 lignes. Au premier abord, on peut se dire que ce n'est pas normal par rapport à la spécification. Mais c'est un bon point ergonomique puisqu'il est plus facile d'avoir du contexte sur 4 lignes et qu'il est impossible de présenter une barre de défilement sur 2 petites lignes. Un comportement à retenir si l'on souhaite utiliser de petites listes de sélection.