Aller au contenu | Aller au menu | Aller à la recherche

Technologies Web

Articles, tutos, actualité sur les technologies du web

Fil des billets - Fil des commentaires

dimanche, juin 28 2009

De la 3D dans Firefox

Énorme ! Le coeur du code de l'extension qui apporte un contexte 3D dans la balise <canvas> vient d'être intégré dans le trunk de Mozilla. Dans une version future de Firefox, on pourra donc faire de l'affichage 3D via cette balise, avec semble-t-il une API proche d'openGL.

Voir la news sur xulfr.

vendredi, juin 26 2009

Chantiers: XBL2 et multi processes

Je l'avais déjà annoncé sur xulfr le mois dernier, le développement du support des multi-processeurs dans Gecko a démarré. Ce projet a même un nom maintenant : Electrolysis.

Benjamin Smedberg avait annoncé le projet "officiellement" il y a 10 jours, et peu de temps après, Chris Jones publiait une vidéo d'une première expérience, avec une simple fenêtre XUL dans lequel le contenu HTML était affiché via un processus différent.

Pour la petite anecdote, ils ont repris la bibliothèque de communication inter-processus de Chromium. Vive l'open source :-).

Autre bonne nouvelle, le développement de l'implémentation du langage XBL2 va bientôt démarrer, dixit Jonas Sicking, le développeur qui va s'en occuper. Pour en savoir plus sur XBL2, voir mon billet précédent sur ce sujet et les slides de la conférence sur XBL2 que j'avais donné à ParisWeb 2007.

J'aime bien ses périodes de release de Firefox, les développeurs n'ont plus trop de bugs à corriger pour la version qui sort, et du coup plus de temps pour développer des nouveaux trucs.

mardi, juin 23 2009

Pas de support DirectShow et Quicktime dans Firefox

À l'origine, dans le cadre de la balise video, il était prévu d'intégrer le support de DirectShow et de Quicktime dans Firefox, pour ses versions respectives sous windows et mac, en plus du support natif du format OGG/Theora. Finalement, cela ne se fera pas, comme l'explique Robert O'Callahan l'un des core-developer de Mozilla. Voici en gros les raisons :

  • Mozilla veut se concentrer sur la promotion des formats ouverts comme OGG/Theora
  • Apparemment, peu d'utilisateurs ont les codecs installés pour H264, par défaut, il n'y a que des codecs pour des "vieux" formats (sauf dans Windows 7 qui fournira un codec H264 en standard)
  • DirectShow est sous-spécifié, contient des bugs, et les codecs disponibles pour DirectShow sont de qualités très inégales, et ne fournissent pas tous tout ce qu'il faut pour que l'API de la balise video fonctionne correctement. C'est à dire, qu'avec certains codec, des scripts dans les pages web ne pourraient pas fonctionner, et l'auteur de la page web ne pourrait rien y faire. Déjà que la compatibilité cross-browser est un cauchemar, alors si il faut aussi se préoccuper des problèmes cross-codec...
  • Vu la qualité inégale des codecs, cela veut dire bugs potentiels, que les utilisateurs attribueraient à tord à Firefox. Les développeurs de Firefox ont assez de problèmes à régler comme ça
  • Il y a des codecs "malware"
  • Il y a des codecs avec des trous de sécurité, que Firefox ne pourrait pas "contrôler"
  • Deux backends en plus, c'est du boulot en plus, de la maintenance en plus etc.
  • Mozilla ne peut fournir des codecs par défauts avec le support Quicktime ou DirectShow (pour H264 notamment), à cause des royalties qu'il faudrait payer, et des problèmes de brevet.

Bref, dans Firefox, il n'y aura que le support natif de OGG/Theora (et OGG/Vorbis), ainsi que la backend GStreamer (au moins pour la version mobile, il n'est pas encore sûr qu'il le soit dans la version desktop).

jeudi, juin 18 2009

La technologie Zoomorama

Une fois n'est pas coutume, je vais vous parler de ce qu'on fait dans la boîte où je travaille, Zoomorama, ou plus exactement, de la technologie que l'on a crée ou utilisé.

Lire la suite...

mercredi, juin 17 2009

Des articles intéressants sur hacks.mozilla.org

Zut, j'ai oublié de vous signaler la publication de ma démo sur hacks.mozilla.org, que je vous avez promis. Je ne suis plus au point en matière de teasing, vous avez connu mieux sur ce blog, n'est-ce pas ? :-)

Donc voilà ma démo, à tester avec Firefox 3.5b99 au moins. Si des développeurs spécialisés sur Webkit (Riiiiik !), Opera ou Konqueror, pouvaient jeter un coup d'oeil voir si je peux améliorer ça pour leur navigateur préféré respectif... (Ouai, je m'y prend un peu tard, mais là, je n'ai plus la tête hors de l'eau, tellement ma todo list est lourde, et j'ai un tuba pour éviter de me noyer).

Bon sinon, sur hacks.mozilla.org, il y a des articles que j'ai vraiment aimé jusqu'ici, et finalement bien plus impressionnant que ma petite démo, et que je veux vous faire partager (pour ceux qui ne suivent pas hacks.m.o) :

Et puis il y a aussi ce débat (ici et ) sur la qualité de Theora par rapport à ce qu'on peut avoir dans YouTube par ex. Conclusion, Theora, c'est bon, mangez-en !

Et ce n'est pas fini, mon petit doigt me dit qu'il va y avoir encore de belle demo sur les nouvelles technologies web :-)

mardi, juin 9 2009

Les nouveautés de Firefox 3.5 en 35 jours

Mozilla vient d'ouvrir un site, hacks.mozilla.org. Pendant 35 jours, nous allons vous montrer les nouvelles possibilités du moteur de Firefox, tant en terme d'API javascript, qu'en terme de support de HTML5 et de CSS3. J'ai réalisé une démo qui sera publié sur ce site. Ce sera une démo sur CSS, qui utilisera des fontes téléchargeables (propriété font-face), les ombrages sur les textes (text-shadow) et les boites (box-shadow), accompagné d'une pincé de bords arrondis (border-radius).

Stay tuned !

Mise à jour: comme promis...

mardi, juin 2 2009

Des problèmes XML dans webkit

Ici à Zoomorama, on hallucine sur les implémentations de XML dans les navigateurs. En effet, dans un de nos projets, on doit manipuler en javascript un document XML, créé à partir d'un DOMParser, et on a besoin de pouvoir propager un événement DOM sur des éléments XML. Et c'est loin d'être facile...

Lire la suite...

jeudi, mai 28 2009

La balise <video> chez Dailymotion

L'adoption du format Ogg Theora fait son chemin : DailyMotion viennent d'annoncer sur leur blog (et via un communiqué de presse) qu'ils vont prendre en charge la balise <video> de HTML5, en particulier avec Firefox 3.5 qui sortira dans quelques jours en RC.

Ils ont ouvert un site en test diffusant les vidéos au format Ogg Theora, openvideo.dailymotion.com à visiter avec Firefox 3.5. Ils ont également fait une page de démonstration montrant les possibilités de l'utilisation de la balise <video>, conjointement avec les autres technologies web comme javascript, css, svg etc...

Qu'un site majeur dans la diffusion de vidéos sur Internet utilise ces technologies, promet un bel avenir à Theora. Bien que les encodeurs actuels pour Theora soient de moins bonne qualité que pour le H264 par exemple, un travail est en cours (sponsorisé notamment par Mozilla), pour les améliorer, tant au niveau de la qualité de l'image, que la taille des fichiers. Voir par exemple une de ces améliorations faite au début du mois.

Pour rappel, Ogg Theora est un format libre et ouvert pour stocker de la vidéo. Pour en savoir plus sur la balise <video>, vous pouvez lire un de mes billets précédents sur le sujet.

Go Theora ! Go !

vendredi, avril 24 2009

Quand une nouveauté CSS en chasse une autre...

Les nouvelles propriétés CSS qui arrivent dans nos navigateurs permettent de faire des choses plus sophistiquées mais de façon plus simple qu'avant.

J'avais déjà montré cette facilité en appliquant des styles d'ombrages et de rotation sur la page d'accueil de jelix.org. Mais il n'y a pas que les sites web qui vont pouvoir profiter de ces avancées, il y a aussi Firefox.

Comme vous le savez certainement déjà, Firefox utilise un langage XML, le XUL, pour son interface graphique et CSS pour le design de cette interface. Je vais prendre un exemple de l'utilisation des nouvelles propriétés CSS dans Firefox : la barre de boutons de la boite de dialogue des extensions, sous MacOSX.

Dans Firefox 3.0, ça donne ça :

toolbar dans Firefox 3.0 sur MacOSX

C'est assez sobre. Pour les arrondis sur les boutons droite et gauche, border-radius[1] est utilisée, et sur tout les boutons, il y a une simple image de fond avec un léger dégradé.

Durant le développement de Firefox 3.5, est arrivé la propriété border-image (Voir un de mes billets sur ce sujet). Un contributeur s'est dit, "utilisons là", pour rendre ces boutons plus jolis. Et les boutons sont devenus ceci, comme on peut le voir dans Firefox 3.1 beta3:

toolbar dans Firefox 3.1 beta 3 sur MacOSX

Comme vous le voyez, avec border-image, on peut faire des bordure plus sympa et assez facilement en CSS. D'ailleurs l'auteur en a profité pour ajouter des "effets" selon l'état du bouton (voir par exemple le bouton "extension" sur lequel j'ai le bouton de la souris enfoncé). Le seul souci de cette approche est que ça utilise pas mal d'images. Déjà, il y a trois types de boutons (gauche, milieu, centre), mais en plus il y a plusieurs états du boutons : relâché, sélectionné, enfoncé, actif etc... Voici par exemple trois de ces images pour le bouton de droite :

images pour réaliser une toolbar dans Firefox

Pour réaliser des bordures complexes, on n'a toutefois pas le choix.

Mais que remarque-t-on sur ces images ? En fait elles ne font que reproduire des effets d'ombres.

Des ombres ? Ça tombe bien, il y a une autre nouvelle propriété dans Firefox 3.5 pour faire des ombres : box-shadow. Et si on l'utilisait ? C'est ce que s'est dit un contributeur. Hop, quelques lignes de css à modifier, suppression de toutes ces images (70ko en moins) et le résultat que vous pourrez admirer dans Firefox 4[2] :

toolbar dans Firefox 3.6a1 sur MacOSX

On obtient quasiment la même chose qu'avec la technique du border-image précédente, mais sans images donc plus léger, avec une manière plus simple de créer et modifier le design.

Notes

[1] ou plutôt -moz-border-radius, cette propriété n'étant pas encore un standard dans CSS3, Mozilla l'a préfixé avec -moz- comme le permet la spécification CSS, tout comme box-shadow

[2] pas sûr que le patch sera intégré dans Firefox 3.5

jeudi, avril 23 2009

Interface de la balise video dans Firefox

Depuis quelques heures, des améliorations sur l'interface utilisateur de la balise video ont été incluses dans le trunk et pour la prochaine beta de Firefox (cliquez sur l'image pour la voir en taille réèlle)

capture de l'interface de la balise video dans Firefox 3.5b4pre

Les améliorations en questions :

  • réglette pour choisir le volume sonore (tout à droite)
  • affichage du temps total de la vidéo
  • affichage du temps écoulé, dans la petite bulle au dessus de la barre de progression, petite bulle qui sert également à aller directement à l'endroit voulu dans le film en la déplaçant.
  • affichage de la progression du téléchargement dans la barre de progression de lecture (je ne sais plus si ça n'y était pas déjà dans la beta précédente)

Bref, on commence à avoir une interface par défaut plutôt complète. Notez que cette interface n'apparaît que si la souris est au dessus de l'élément <video>, et seulement si l'attribut controls est présent.

Ce qui est interressant à savoir, c'est la façon dont cette barre de contrôle est implémentée dans Firefox. En fait, ce n'est pas le code de la balise vidéo qui effectue directement cet affichage, mais un simple composant XBL qui est attaché à cet élément.

Pour rappel, XBL est un langage XML (en cours de normalisation au W3C) qui permet de définir le contenu d'un élément en indiquant les éléments fils (anonymes) à ajouter, ainsi que son comportement, c'est à dire un ensemble de méthodes javascript pour son API, et également des fonctions appelées sur des événements DOM (sur le click etc). Dans un fichier XBL, on peut ainsi définir plusieurs éléments.

Comme on peut le voir dans ce fichier XBL de l'élément video, les contrôles sont en fait des éléments XUL. Et sur les click et autre de ces élements XUL, le code javascript appel l'API native de l'élément video.

Le design est déclaré via une feuille CSS. Dans la feuille de style dédiée, on peut voir que tout est quasiment fait en CSS, que ce soit les arrondis, les couleurs, les opacités etc. Les seules images utilisées concernent juste les symboles play/pause, le dessin du haut parleur, et la bulle du temps écoulé.

Bref, on utilise des technos du web pour implémenter en partie... des technos du web :-)

Mais ce n'est pas tout !

Cette interface par défaut ne vous plaît pas ? Faites une extension qui propose un nouveau XBL en remplacement de l'original ! Ou une autre feuille de style CSS ! Où les deux !

Aaah, c'est beau les technos Mozilla, n'est-ce pas ? :-)

jeudi, mars 26 2009

Différences entre documents et API

Mozilla et Khronos annoncent la création d'un standard ouvert pour définir une API 3D en javascript, sur l'élément canvas en particulier. (voir le billet de Tristan pour plus d'info).

Comme à l'époque de l'apparition de canvas, resurgissent les questionnements sur l'utilité d'une API[1] face à des formats existants comme SVG pour la 2D, et X3D/WRML pour la 3D. Pour quoi faire une API alors que des formats existent ?

Réponse : parce que ce n'est pas du tout fait pour le même usage.

Un document (SVG,X3D ou autre), c'est statique. Je peux le trimballer où je veux. D'ailleurs, je n'ai pas à le "programmer". Je sors un outils comme Inkscape pour faire un joli dessin ou logo avec ma souris, je l'enregistre au format SVG, et je peux alors le lier dans une page web, l'utiliser comme îcone d'un programme (dans le bureau KDE par ex). Comme c'est du vectoriel, je peux l'afficher en gros, en petit. Je peux l'envoyer par mail, le compresser, le détruire. Bref. C'est un document comme n'importe quel document, et c'est utilisable en dehors du contexte web.

Canvas, c'est comme si vous aviez un tableau blanc dans votre page web. Et avec son API 2D et bientôt 3D, c'est comme si vous disposiez de crayons de couleurs et autres outils de dessin.

Ainsi, avec canvas et ses API, je ne peux pas faire la même chose qu'avec un document. Ce que je dessine avec mes crayons de programmeur, je ne peux pas le trimballer où je veux. Je ne peux pas en faire un document.

Par contre je peux faire d'autres choses que je ne peux faire avec un document. Je peux faire des animations, sans être limité à la structure d'un format d'un document. Je dessine ce que je veux, d'une manière simple, et surtout dynamiquement. C'est donc idéal par exemple pour représenter à l'écran des choses qui bougent tout le temps. Il est impossible par exemple d'utiliser un document SVG pour dessiner une scène 3D dans laquelle le point de vue change tous le temps (comme dans un jeu comme Quake). Ce serait en tout cas absolument inefficace. Essayez donc de réaliser la même chose que cette démo 3D, avec du SVG ou X3D. Bon courage ! D'ailleurs, la future API 3D va être utile pour ce genre d'application : les performances seront bien meilleures qu'avec l'api 2D actuelle de canvas, et la programmation sera simplifiée.

Il n'y a pas, bien sûr, que les jeux où canvas est utile. Représenter des graphes de statistiques dynamiquement, manipuler le rendu d'autres éléments HTML, comme dans une des démos de Paul, faire des éditeurs de dessins, ou l'utiliser comme surface de rendu d'un éditeur de texte et j'en passe et des meilleurs... L'utilisation de canvas va bien au délà de ce qu'on peut faire avec un document SVG/X3D.

À contrario, utiliser canvas pour afficher simplement un logo, aussi complexe qu'il serait, est assez ridicule, vu le nombre de lignes de code qu'il faudrait taper. Utiliser un document SVG est plus pertinent. Mieux que du PNG d'ailleurs, puisqu'on peut utiliser le même document pour afficher le logo en taille différente, ce qui permet de diminuer les temps de téléchargement (le SVG est placé dans le cache du navigateur). C'est d'ailleurs je pense l'une des raisons de l'implémentation de SVG dans les navigateurs modernes destinés aux mobiles et cie...

Bref, les usages de SVG/X3D et de canvas ne sont pas les mêmes, et n'ont d'ailleurs pas les mêmes résultats. C'est comme si on comparait un 4x4 et une voiture de sport. Ces deux types de véhicules permettent tout deux de se déplacer. Ils ont 4 roues, un volant, un moteur. Mais on ne les utilisent pas forcement pour les mêmes raisons et de la même façon. Si on veut faire une course sur circuit, on utilisera une voiture de sport. Mais si on veut rouler sur des chemins accidentés, on utilisera un 4x4.

Notes

[1] API= Application Programming Interface; C'est un ensemble de fonctions à utiliser dans un programme pour réaliser diverses tâches

mercredi, mars 4 2009

Gnome : Mozilla ou Webkit ?

Dans le projet GNOME, les développeurs veulent mettre du web dans leur desktop. Ils cherchent donc un moteur de rendu qu'ils pourraient intégrer. Dans le monde open-source, il n'y a pas trop le choix : c'est Mozilla, ou Webkit. Mais lequel choisir ?

Un très intéressant billet sur le blog GNOME fait le topo sur les différences entre les deux projets, tant techniques que "philosophiques". Et ça me rappel la conférence de Paul Rouget (contributeur Mozilla) et de Julien Chaffraix (contributeur webkit) aux RMLL 2008, qui concluait : Mozilla est fait pour embarquer, Webkit est fait pour être embarqué.

Ce billet est d'autant plus sympa à lire qu'il n'y a ni troll, ni d'erreurs (enfin, pas au sujet de Mozilla à ma connaissance), et qu'il est vraiment très pragmatique. À lire pour avoir une vue d'ensemble des deux projets.

dimanche, février 22 2009

L'expérimentation Bespin

Comme vous le savez certainement, un nouveau projet est sorti des laboratoires de Mozilla : Bespin. C'est un éditeur de code en ligne. En découvrant ses entrailles, j'ai été bluffé par le fait qu'ils utilisent l'élément canvas pour faire le rendu.

Lire la suite...

dimanche, février 1 2009

Relativisons les resultats du test acid3

Frédéric Bezies a fait remarquer que Netscape 7.0.1 (vieux de 6 ans) a un meilleur score au test acid3 par rapport à IE8 RC1.

On peut trouver ça dommage et se moquer de IE8, mais il faut quand même relativiser.

Lire la suite...

jeudi, octobre 23 2008

Questions réponses sur l'élement video

Au mois d'aout dernier, Schrep avait écrit un article sur son blog, répondant à certaines questions sur l'existance de cette nouvelle balise video, et surtout sur l'utilisation du format ogg theora par défaut.

Cet article vient d'être traduit en français sur framablog. À lire !

En résumé :

  • La spécification de la balise video n'impose pas un format, tout comme la balise img. Et on se rend compte que seul quelques formats d'images sont vraiment utilisés. Il en sera certainement de même pour les formats video.
  • Il faut cependant promouvoir un format libre, ne nécessitant pas de plugins propriétaires. En effet, ces plugins ne sont que très rarement présent sur les mobiles. Or ce genre de plate-forme est en pleine expansion. Et même sur les desktops, il y a des chances que ces plugins ne soient pas installés. (Note de moi même: flash fait quand même exception)
  • ogg theora n'est pas très répandu, mais une fois Firefox 3.1 sorti et d'autres (200 millions d'utilisateurs), ça le sera très certainement, tout comme cela a été pour le H264, qui n'était pas très répandu il y a quelques années..
  • utiliser un format libre, cela veut dire que n'importe quel navigateur, n'importe quel appareil, peut l'utiliser librement, pas de royalties. Cela veut donc dire aussi que quiconque embarque Firefox, Fennec, Gecko dans son appli ou son mobile, peut utiliser librement ogg theora, peut afficher de la video sans souci. Ce ne serait pas le cas si l'implémentation de Mozilla reposait sur des formats non libres, puisque cela voudrait dire utilisation de bibliothèques non libre, payement de royalties etc. Et cela rendrait Firefox non libre.
  • pas de brevet logiciels à l'horizon sur ogg theora. Mais il peut exister des brevets "cachés". Cependant, c'est la même problématique que pour tout développeur de logiciels. Personne n'est à l'abri. Si cela arrive, Mozilla fera tout pour invalider ces brevets, ou pour utiliser librement le format ogg theora.

Le reste chez framablog

mercredi, octobre 22 2008

Des news sur XBL2

Un billet de Daniel nous donne des informations très intéressantes sur XBL2 :

  • Il est en cours d'implémentation chez Opéra
  • Il est en cours d'implémentation dans Webkit (comme je l'avais déjà évoqué il y a quelques mois, coucou Julien !)
  • Ça intéresse apparemment l'équipe d'Internet Explorer

Concernant Mozilla, je ne sais pas où ça en est. C'est prévu bien entendu, mais apparemment pas encore démarré, Cependant, on a déjà XBL 1 :-)

Si Internet Explorer implémente XBL2 dans un futur proche (IE9 ou IE10), en plus d'Opera, Mozilla et Webkit, ça sera géant pour le web !!! Aller, on croise les doigts !

Pour en savoir plus sur XBL2, voir mes précédents billets dessus :

lundi, octobre 20 2008

Animations CSS, ou SMIL/SVG ?

Daniel demande si on aimerait avoir des propriétés d'animations en CSS[1]. Les développeurs de webkit proposent en effet une spécification pour pouvoir faire des animations en CSS.

Il faut savoir qu'en SVG, nous avons de quoi faire des animations. Une partie de ces balises et attributs proviennent d'ailleurs du langage SMIL, avec quelques trucs en plus.

Alors, pour faire des animations, CSS ou SMIL ?

Avantages de CSS
  • ça a l'air plus simple à écrire, c'est moins verbeux.
  • on peut utiliser la cascade CSS pour redéfinir des propriétés d'animations. Cette redéfinition peut être utile aussi dans les feuilles de style utilisateurs.
  • en théorie, cela fonctionne pour n'importe quel langage XML, puisque CSS n'est pas dédié uniquement à (x)HTML, bien que SMIL 3.0 le permette plus ou moins, mais c'est plus intrusif.
Avantages de SMIL[2]
  • les séquences de transformation et d'animations peuvent être modifiées dynamiquement, de manière plus simple je trouve, puisqu'il suffit d'utiliser les fonctions DOM classiques. Tandis que pour CSS, faut se coltiner le DOM CSS qui n'est pas très pratique je trouve.
  • SMIL est beaucoup plus riche et plus précis (en tout cas,par rapport à l'état actuel de la spécification de webkit)
  • SMIL est du contenu XML, donc utilisable par autre chose qu'un navigateur graphique. Au niveau accessibilité donc, il apporte des informations, permettant de retranscrire l'animation oralement par exemple (même si ça doit être difficile à écouter :-))
Conclusion

Je pense que les animations CSS ont leur place, surtout pour les petites animations qui sont purement décoratives. Pour les animations qui ont plus de sens, une animation dans un tutoriel par exemple, montrant vraiment quelque chose d'informatif, on préférera SMIL. C'est un peu la même chose entre choisir background-image et l'élément HTML img pour afficher une image.

Donc je dis oui aux animations CSS :-)

Notes

[1] Pour ceux qui n'ont pas trop suivi, il est en plein meeting du CSS Working Group au W3C à Mandelieu

[2] je ne suis pas un expert sur SMIL et les animations SVG, donc j'ai pu raté des avantages ou inconvénients sur ces langages

jeudi, octobre 16 2008

L'élement video

Il y a plus d'un an, j'avais publié un billet sur l'élément <video>. Les choses ont un peu évolué, les implémentations et les interrogations aussi. Voici donc un récapitulatif des avantages de cet élément sur l'élément <object>, ainsi que quelques démonstrations. On peut espérer que la balise object ne sera plus trop utilisée pour insérer de la vidéo : l'élément <video> est déjà présent dans Safari 3.1, dans des versions expérimentales d'Opéra, et la version beta1 de Firefox 3.1 qui vient de sortir.

Lire la suite...

lundi, septembre 15 2008

Transformations en CSS3

Ce week-end, l'implémentation des propriétés de transformations CSS ont été incluses dans la version de développement de Firefox 3.1 (proposé par David Hyatt dans webkit il y a un an, et en partie au CSS working group, il y a 10 ans).

La propriété transform permet d'appliquer des transformations sur un élément : rotation, décalage, zoom, déformation, perspective. Je me suis amusé donc à faire quelques essais.

Je veux placer ce titre verticalement à gauche de la page :

Voici alors les styles appliqués :

 position: absolute;    /* pour sortir l'élement du flux normal */
 top:0; left:0;   /* on le place tout en haut à gauche */

 /* on fait une rotation de -90 degré, suivi d'une translation vers la gauche de 10em 
   10em étant à peu prés la longueur du texte */
 -moz-transform: rotate(-90deg) translate(-10em,0);

/* le centre de rotation se situe en haut à droite de la boite h1 */
 -moz-transform-origin: top right;

Et le résultat :

Imaginons maintenant que je veuille mettre une belle icône "nouveau" sur un article, en travers du titre de cet article. Plutôt que de faire une image comme on doit le faire dans les navigateurs actuels, faisons tout ça en CSS/HTML. Le HTML est le suivant:

 <h2><span>Nouveau ! </span>Lecteur MP3 Syno XZ-789</h2>

Appliquons maintenant le style de transformation :

 -moz-transform: rotate(-20deg);
 -moz-transform-origin: center center;

On obtient ceci :

Habillons le maintenant en utilisant border-image et cette image

 border-width: 15;
 -moz-border-image: url(etoile.png) 15 15 15 15 round round;

Et voici notre super logo :

Vous remarquerez qu'il apparaît de fines lignes blanches en pointillé, je suppose que c'est un bug qui j'espère n'existera plus dans Firefox 3.1 :-)

J'ai essayé rapidement aussi d'avoir des en-tête de colonnes obliques dans un tableau :

Mais ça ne donne pas un résultat vraiment interressant. Déjà la taille des colonnes restent les mêmes, mais aussi les bordures entre cellules ne sont pas prisent en compte...Il faudrait que je triture un peu plus la feuille de style je pense...

mercredi, septembre 10 2008

La folle histoire des User Agent Strings

Si vous vous demandez pourquoi tout les navigateurs mettent "Mozilla" dans leur identification, ou pourquoi Google Chrome prétend être Safari, Khtml et Gecko à la fois, lisez ceci : l'histoire des chaînes d'identification. C'est hilarant :-)

- page 2 de 15 -