CSS images, image-set and strange units.


A candidate draft for CSS3 image values has been proposed, and it contains interesting ideas. Basically, an image can be something else than just an image file, instead it can be a set of images in fallback order and solid colour or a gradient. As I’m increasingly using SVG images for this blog, having the ability to specify fallback bitmaps is a nice feature. What I wish they would have added to the spec was the ability to have an image being a html sequence, that is, be able to specify image fallbacks for characters in exotic fonts (typically rare kanji, or emoji).

Another very interesting idea for image handling in CSS is the notion of image-set, which was proposed on the webkit mailing list, basically instead of specifying a single image, one would specify a set of images at different resolutions and the web-browser would select the one matching the current display. This is basically a problem with devices that have so called retina displays, like the iPhone 4. Basically, those devices do not display bitmaps at one pixel per CSS pixel, as they would display as post-stamps. In practice this means that the pixel is now an abstract unit, in CSS, a pixel is just a unit of length, defined as 1/96 of an inch, or 127/480 of a millimetre, and resolution can now be expressed in points per pixel. Yes, if you are geek, that does not really make sense, that would be like if atoms could be divided into parts…

I really hope those standards get traction, as the current situation is not satisfying: either I need to put images at twice the resolution on this blog, and then let the web browser scale them down to fit the layout, with the result that I’m wasting a lot of bandwidth, making the browser download four times too many pixels, or the picture look blurry on smartphones. It is also interesting to see that content negotiation between web browser and web server has failed: there is no simple way to tell wordpress to create a fallback bitmap when the browser cannot handle SVG.

Flattr this!

New skin

The blog's new skin

Regular readers to this blog will have noticed that I have been testing a new skin for this blog for a few days. Given the generally positive reactions I got, and the fact I have fixed most of the main bugs, I’m going to keep it. Between the new skin and the new version of WordPress, there quite a few new features:

Different authors are now supported properly, so I suppressed the categories representing authors – the number of posts written by other people is not important.
Tags are now supported by the core WordPress engine. I had some tags in the previous version, but the support was very flaky. Now I even have a tag cloud. Alas, tags from old posts go lost in the upgrade, not that they were consistent.

Gravatars now show up in the discussion pages.
This is not visible yet, but there is now an API to add geocodes to the posts. I still have to find a plugin that exports this is in a nice way.

The layout of this blog uses a few Safari specific extensions for cosmetical differences, typically shadows, and turning this blog’s title a bit to be aligned with the label sheet below. The shadow extensions should be available for Firefox 3.1, I’ll update the CSS once this version comes out.

Flattr this!

Mise à jour du CSS

J’ai à nouveau mis à jour la mise en page du site. Fondamentalement, ce sont surtout des changements pour rendre la mise en page plus stable. Normalement, le fond transparent derrière le texte, le titre et le menu devraient être visible avec la plupart des browsers. Auparavant, j’utilisais des couleurs spécifiées en rgba, mais seul le browser safari supportait cela. La solution actuelle utilise des image semi transparentes – cette solution est moins satisfaisante car elle implique deux images qui n’en sont pas réellement, et force l’ouverture de deux nouveau sockets pour les transférer (la taille des images est de l’ordre des 500 bytes), mais a au moins cela devrait fonctionner mieux avec Firefox.

J’ai aussi ajouté récemment le code pour faire des lettrines, j’aime bien les lettrines. D’une manière générale, je trouve que le CSS commence à devenir une technologie mature. La stabilité entre browsers reste un problème, mais le langage permet réellement de spécifier des mise en page sympa de manière relativement claire.

Je suppose que je pourrais faire une mise en page plus originale (celle-ci est fondamentalement celle par défaut avec d’autres couleurs), mais j’en suis assez content, et je manque d’idées (et de temps).

Flattr this!

Nouveau look

J’ai enfin eu le temps de personnaliser le look du blog. Le look ne casse pas des briques, il est fondamentalement inspiré de celui que j’utilise sur ma home page. J’ai un peu regardé les autres looks disponibles pour Word press, mais en général je les ais trouvé moches ou peu pratiques (j’aime bien zen, mais il gaspille vraiment trop de surface d’écran). À m’entendre on dirait que je suis en train d’acheter des chaussures :-P. Bref, j’ai juste un peu bricolé la feuille de style de ce site, mais je dois avouer que mes connaissances de CSS sont un peu rouillées.

En écrivant ce billet, j’ai essayé de trouver un exemple du style zen, et je suis trouvé sur une carte amusante: A fool’s world map, qui est un complètement idiot et ironique et qui mérite en tant que tel mon soutien.

Flattr this!