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

Mot-clé - transform

Fil des billets - Fil des commentaires

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.

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 :-)

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 :-)