Transformations en CSS3
Par Laurentj le lundi, septembre 15 2008, 13:16 - Technologies Web - Lien permanent
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...
- Annonce de l'implémentation sur Mozilla Web-tech
- Brouillon des spécifications par l'équipe de webkit
- CSS3 transform au W3C (pas encore de spécification à ce jour)
Commentaires
Et en JavaScript c'est accessible comment ?
???
Non:
Concernant le bug des pointillés blancs, le mieux serait de rapporter le bug à Mozilla (avec un ptit testcase)... Trop de personnes trouvent des bugs sans les rapporter, espèrent qu'ils vont être réglés, et après sont pas contents de voir qu'ils sont toujours là dans la version suivante. :p D'autant plus qu'en faisant des recherches sur border-image et transform dans Bugzilla, je n'ai rien trouvé là-dessus.
Si tu n'as pas de compte bugzilla ou que tu as la flemme de le faire, je peux m'en occuper.
Si bien sûr que j'ai un compte Mozilla. Pour poster le bug, j'allais le faire...
Edit : voici le bug
Okay, cool. :)
Tiens, nous avons eu la même idée de premier test :-D
@Laurent: Je viens de faire quelques tests avec ton image, le pb n'est pas lié à la transformation, mais à -moz-border-image: si tu supprimes la transformation et augmentes la taille du bord (border-width: 60px; par exemple) tu auras le même effet. Par contre en utilisant stretch à la place de round, ça a l'air de mieux fonctionner. Oui, je sais, il faudrait que j'aille dire ça dans les commentaires du bug.
@Stifu: le pb est aussi d'être sûr que c'est un bug, pour ne pas donner de boulot aux devs pour rien. Par exemple, j'ai remarqué un problème avec les ombres sur les boîtes, qui lorsque je les applique sur des éléments très grands consomment beaucoup de CPU. Mais étant donné que je suis sous Nunux sans avoir activé les drivers proprios de ma carte graphique, il y a 1 chance sur 2 pour que le pb vienne de ma carte plutôt que de FF. Avant de déclarer le bug, il faudrait que je trouve un zindoz pour tester.
J'oubliais: le pb des entêtes de colonne, c'est que d'après la spec, les éléments transformés ne sortent pas du flux, donc c'est leur boîte avant transformation qui est prise en compte. Pour connaître les coordonnées de la boîte après transformation, je pense qu'il faudrait utiliser window.convertPointFromNodeToPage, mais je n'ai pas l'impression que la méthode soit déjà implémentée.
Franchement, l'intérêt est nul. Toutes ces fonctions moz-xxx ne sont supportées que par firefox. Il peut en exister des équivalents dans d'autre moteur de rendu, mais avec d'autres noms. Il faut savoir si on veut défendre un développement standard indépendant du navigateur, ou faire du microsoft like, à coup de balisage spécifique. Il ne faut surtout pas utiliser ces trucs en production. On en reparlera quand le W3C se sera décidé à arrété de se ridiculiser, et après 10 ans se décidera enfin à publier au moins une partie de la norme CSS3 en définitif. Ce qui n'est pas prêt d'arriver, semble t'il.
En bref, cela ne sert à rien avant une norme standard, et l'inefficacité du W3C aidant, on aura pas cette norme avant des années, voir jamais. C'est dommage, d'ailleurs.
Christophe : C'est sûr que tout ça bouge assez lentement niveau standards, mais l'utilisation de préfixe est une recommandation du W3C, et est amenée à disparaitre une fois la propriété passée en CR et bien implémentée dans le navigateur... donc rien à voir avec les machins proprio de Microsoft. Surtout qu'on retrouve les mêmes propriétés entre navigateurs respectueux des standards, au préfixe près, donc il suffit de définir la propriété plusieurs fois pour tous les différents préfixes... un peu laborieux, certes, mais c'est temporaire et ça marche. Bref, tu sais sûrement déjà tout ça. Et on peut déjà utiliser ce genre de propriétés CSS3 de manière intelligente, en s'assurant que ça se dégrade convenablement sur les autres navigateurs moins avancés.
Perso, je suis content de la manière dont les choses évoluent... Ça va dans le bon sens (même IE se met à l'utilisation de préfixes pour IE8), et ça bouge pas si lentement que ça au final...
@christophe :
qui t'empêche de mettre en même temps à la fois le nom standard et les noms temporaires supportés actuellement ?
la propriété transform deviendra probablement un truc de CSS3, comme les liens que j'ai mis dans le billet l'indiquent (mais que tu n'as apparement pas suivi)
Ah? pourquoi ? le ciel va nous tomber sur la tête sinon ? Est-ce vraiment grave si un site n'a pas tout à fait la même apparence d'un navigateur à un autre ? du moment que le site reste lisible, je pense que ce soit un drame (tu ne ferais parti de ceux qui aiment avoir un design identique au pixel près dans tout les navigateurs ?)
Il n'y a pas à attendre 10 ans pour ça. Il y a actuellement plusieurs modules CSS3 qui sont au stade Candidate Recommendation, c'est à dire à la dernière étape avant que cela devienne un standard : la spec est en attente de quelques implémentations pour la valider. Donc oui, implémenter la propriété -moz-transform, ça a une utilité : valider la future spécification. Ça permet de savoir si d'une part c'est faisable, et d'autre part de détecter les "flous" éventuels qu'il pourrait y avoir dans la spécification de la propriété.
Au lieu de critiquer de manière infondée sur le W3C, je pense que tu devrais plutôt t'intéresser à comment cela se passe, et ce qui s'y passe exactement.
@stifu : +1 :-)