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

vendredi, juillet 17 2009

Transformations 2D et 3D en CSS

Ainsi donc, webkit supporte maintenant les transformations 3D en CSS. Je trouve ça génial. J'apprécie déjà les transformations 2D (que j'utilise sur la page d'accueil de jelix.org). Mais là, ça ouvre encore plus de perspectives (c'est le cas de le dire ;-)).

Seulement, à travers les demos que j'ai ouvert dans mon Firefox (qui ne supporte pas les propriétés transform3D), j'ai remarqué que l'utilisation de ces transformations avaient un écueil : ça se dégrade très mal dans les navigateurs ne supportant pas ces propriétés. Du genre, les éléments s'affichent les uns sur les autres. Il y a certainement des améliorations possibles dans ces démos pour que ça se dégrade un peu mieux. Mais c'est certain qu'il va falloir faire attention...

Pour les plus curieux d'entre vous, les brouillons des spécifications sont disponibles sur le site du W3C : CSS3 3D transforms, CSS3 3D transforms.

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...

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, décembre 4 2008

Petits plaisirs avec CSS3

Pour la sortie de la version 1.1 de Jelix, je suis en train de faire quelques retouches sur le design du site web jelix.org. Je suis loin d'être un as du web design, de maitriser Gimp ou autre comme un pro, alors j'essaye de m'amuser avec les dernières propriétés CSS implémentées dans Firefox 3.1 qui arrive.

Lire la suite...

dimanche, novembre 23 2008

Ma présentation à ParisWeb 2008

Je viens de mettre en ligne les slides de ma présentation à Paris Web 2008. Elle contient un peu plus de précisions et de liens par rapport à la version présentée en live.

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...

dimanche, juillet 27 2008

Avancées dans Gecko 1.9.1

Malgré les 3 ans de développement qu'a necessité Gecko 1.9.0 (le moteur de Firefox 3), il n'a pas été possible d'implémenter certaines choses qu'ont déjà Safari et Opera, bien que toutefois les nouveautés pour les développeurs soient très alléchantes, avec des morceaux de HTML5 dedans :-). En effet, les développeurs du "coeur" s'étaient concentrés principalement sur la gestion de la mémoire, les performances, la refactorisation de gros morceaux de code, et la correction de bugs pour passer le test Acid2. C'était donc beaucoup de travail sur des choses "qui ne se voient pas". Mais une des conséquence de ces développements "sous-terrains", c'est que Gecko 1.9.0 est devenu une bonne base pour avancer bien plus vite sur l'implémentation des standards.

Du coup, les développeurs peuvent se concentrer sur le futur. Et ils ne s'en privent pas depuis un mois et demi. Je vous avez parlé de l'implémentation de la balide video, de l'implementation du style CSS border-image, mais aussi évoqué l'implementation complète des selecteurs CSS3 (modulo 2-3 bugs), le support de text-shadow (pour créer des ombres sur du texte), de box-shadow (pour faire des ombres sur des boîtes).

Et ces derniers jours, voici les nouveautés :

  • Implémentation de la propriété CSS3 word-wrap
  • Implémentation des propriétés CSS3 column-rule-*, pour styler les séparations entre les colonnes CSS. Souvenez-vous que depuis sa version 1.5, Firefox permet de créer des colonnes en CSS, ce qui évite de faire appel à des tables pour avoir des colonnes de texte. J'en avais parlé à l'époque.
  • Implémentation de l'objet NodeIterator dans l'API DOM traversal, permettant de parcourir un arbre DOM de manière séquentiel, contrairement au TreeWalker qui propose plutôt une vue arborescente de la navigation.
  • Implémentation des toutes nouvelles fonctions DOM querySelector et querySelectorAll : elles permettent de récupérer un ou plusieurs noeud DOM en utilisant un sélecteur CSS, ce qui est plus simple que d'utiliser un selecteur XPath (fonction evaluate sur les objets document). Voici un exemple issue de la spécification. Voici ce qu'il faut faire en temps normal quand on veut récupérer la deuxième cellule de chaque ligne d'un tableau (ayant pour id score) :
var table = document.getElementById("score");
var groups = table.tBodies;
var rows = null;
var cells = ;

for (var i = 0; i < groups.length; i++) {
  rows = groupsi.rows;
  for (var j = 0; j < rows.length; j++) {
   cells.push(rowsj.cells1);
  }
}

Et voici maintenant l'équivalent avec querySelectorAll :

 var cells = document.querySelectorAll("#score>tbody>td:nth-of-type(2)");

Sympa non ? :-)

Parmis les développements actifs en ce moment, et qui vont donc aboutir d'ici quelques semaines, voici ceux là :

  • Les propriétés CSS de transformation proposées par Webkit, permettant de faire des animations en CSS.
  • L'implémentation des medias queries de CSS. (mise à jour : en fait ça vient juste d'être intégré dans le trunk !)
  • Fonctions javascript trim, ltrim, et rtrim
  • DOMWorkerThreads : la possibilité de faire, en javascript, de vrai traitement en parallèle...
  • Une partie de l'implémentation de @font-face

Bien sûr, cette liste est loin d'être exhaustive :-)

jeudi, juillet 17 2008

Bordures en image dans Firefox

Bon bah ça y est, plus besoin de recourir à des divs dans tout les sens pour utiliser des images pour décorer les bordures des éléments HTML. Le support du style CSS3 border-image vient d'être intégré dans la version de développement de Firefox 3.1 :-) Voir une présentation de border-image sur css3.info. Comme la spécification au W3C est encore en brouillon, il faut utiliser -moz-border-image.

Firefox rattrape son petit retard sur l'implémentation de styles CSS3 par rapport à d'autres navigateurs :-)

Pendant qu'on en parle, au niveau du test acid3, il en est à 81/100.

PS : un post de John Resig qui explique un peu le fonctionnement

mardi, juillet 8 2008

canvas et svg utilisés pour le background

Firefox 3 est sorti, le record de téléchargement en 24 h a été officiellement établi. Mais ce n'est pas pour ça qu'il faut se reposer sur les lauriers. Après tout, la version 3.1 est prévue pour la fin de l'année, avec des choses sympas comme la balise <video> ou le style border-image. D'ailleurs, le trunk était à peine ouvert pour le développement de la 3.1, que pas mal de patchs ont été intégré, comme le support complet des sélecteurs CSS3, le support de text-shadow, des corrections pour le test ACID3 (ils en sont à 80% contre 70% pour Firefox 3), et plein d'autres "bug fix".

Mais ce n'est pas tout, il faut bien s'amuser aussi un peu, et donc certains expérimentent des petites choses. Roc par exemple, vient de faire un patch pour pouvoir utiliser du SVG avec background-image. Mais aussi <canvas> avec background-image.

 background: url(#truc);

truc est l'id d'un morceau de SVG ou d'un canvas dans le document. Cela permet de faire des petites choses comme ça. Et bien sûr, on peut appliquer les autres styles background : background-position, background-repeat etc..

Pour l'instant, pas sûr que ce soit intégré dans Firefox 3.1. Patience donc :-)