Février 2012
WebKit anime les CSS
par Christophe Laporte le 06.02.2009 à 15:27
Utiliser les dernières nightly build de WebKit donne une idée des technologies qui seront peut-être incontournables demain sur le web. Dans les dernières préversions de son moteur de rendu, l'équipe de développement vient d'ajouter une nouvelle classe relative à l'animation des CSS
Sur cette page, outre l'image, ceux qui possèdent une version récente de WebKit verront des feuilles tomber en arrière-plan. La démonstration est assez impressionnante.
Les possibilités offertes aux développeurs sont nombreuses et son utilisation est relativement simple.
Dans son billet, Dean Jackson indique que cette classe ainsi que celles de transformation et de transition (lire: Des feuilles de style qui s'animent) sont d'ores et déjà incluses dans Safari pour iPhone. La preuve :
Selon Dean Jackson, dans bien des cas, il est plus intéressant pour ce type d'animation d'utiliser les CSS que JavaScript. C'est sans doute également une manière d'indiquer qu'il y a une vie après Flash…
Sur cette page, outre l'image, ceux qui possèdent une version récente de WebKit verront des feuilles tomber en arrière-plan. La démonstration est assez impressionnante.
Les possibilités offertes aux développeurs sont nombreuses et son utilisation est relativement simple.
Dans son billet, Dean Jackson indique que cette classe ainsi que celles de transformation et de transition (lire: Des feuilles de style qui s'animent) sont d'ores et déjà incluses dans Safari pour iPhone. La preuve :
Selon Dean Jackson, dans bien des cas, il est plus intéressant pour ce type d'animation d'utiliser les CSS que JavaScript. C'est sans doute également une manière d'indiquer qu'il y a une vie après Flash…
|
2
1
Vos réactions (25 réactions)
[MGZ] Shralldam
[06/02/2009 15:33]
Cool ! Moi qui hais Flash...
Cool ! Moi qui hais Flash...
Mayeutik
[06/02/2009 16:20]
Très bien de premier abord car offre de vrai alternative au flash, qui reste une technologie extrêmement lourde (le processeur qui s'affole au moindre bandeaux de pub flash...). Maintenant il faudra que l'implémentation soit bonne pour éviter justement la consommation abusée de temps processeur...
Très bien de premier abord car offre de vrai alternative au flash, qui reste une technologie extrêmement lourde (le processeur qui s'affole au moindre bandeaux de pub flash...). Maintenant il faudra que l'implémentation soit bonne pour éviter justement la consommation abusée de temps processeur...
HyperB
[06/02/2009 16:21]
C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...
On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...
C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...
On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...
hooola
[06/02/2009 16:21]
Assez impressionnant en effet, autant sous firefox 3.1 c'est moche, mais l'animation avec l'iPhone est vraiment belle et fluide :)
Assez impressionnant en effet, autant sous firefox 3.1 c'est moche, mais l'animation avec l'iPhone est vraiment belle et fluide :)
mxmac
[06/02/2009 16:29]
c'est quoi cette réflexion a deux francs ... le jour ou CSS pourra connecter une base de donnée comme flash ou ajax on en reparle ...
y'a une vie après le sapin de Noël de 1998 dans flash faudrait le savoir .... Journaliste ???
c'est quoi cette réflexion a deux francs ... le jour ou CSS pourra connecter une base de donnée comme flash ou ajax on en reparle ...
y'a une vie après le sapin de Noël de 1998 dans flash faudrait le savoir .... Journaliste ???
Mayeutik
[06/02/2009 16:35]
@HyperB et @mxmac
flash est très puissant c'est sur, ça connecte des bdd, génère du contenue etc... Mais la majorité des sites se servent de flash uniquement pour faire bouger 3 icônes et foutre des sons dans le site, peu de gens l'utilise a fond, encore moins l'utilise bien, en ce sens se genre de petit plus de CSS est une alternative à flash.
Et en combinant ça + Ajax, on pourrais faire plein de chose qui remplacerais 90% des animation flash du web.
@HyperB et @mxmac
flash est très puissant c'est sur, ça connecte des bdd, génère du contenue etc... Mais la majorité des sites se servent de flash uniquement pour faire bouger 3 icônes et foutre des sons dans le site, peu de gens l'utilise a fond, encore moins l'utilise bien, en ce sens se genre de petit plus de CSS est une alternative à flash.
Et en combinant ça + Ajax, on pourrais faire plein de chose qui remplacerais 90% des animation flash du web.
ShowMeHowToLive
[06/02/2009 16:46]
@HyperB : oui mais dans 90% des sites visités, Flash n'est pas utilisé pour ça. Il reste utilisé majoritaire pour des menus qui pourraient être remplacés par du CSS/JS.
Flash prend de plus en plus de place dans la vidéo sur le net et là par contre, difficile de le remplacer.
@HyperB : oui mais dans 90% des sites visités, Flash n'est pas utilisé pour ça. Il reste utilisé majoritaire pour des menus qui pourraient être remplacés par du CSS/JS.
Flash prend de plus en plus de place dans la vidéo sur le net et là par contre, difficile de le remplacer.
BioSS
[06/02/2009 17:03]
Le flash c'est la vidéo, la 3D, les BDD, les XML, l'animation, et surtout la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... Des trucs qui seront JAMAIS en CSS / HTML ni même javascript, ou alors ça sera 100 fois plus lourd.
Et si les bandeaux de pub rament c'est parce que les mecs qui les créent sont des bras cassés, du Flash bien optimisé ça reste peu gourmand. D'ailleurs si la version Mac était optimisée la version PC personne ne dirait rien.
Le flash c'est la vidéo, la 3D, les BDD, les XML, l'animation, et surtout la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... Des trucs qui seront JAMAIS en CSS / HTML ni même javascript, ou alors ça sera 100 fois plus lourd.
Et si les bandeaux de pub rament c'est parce que les mecs qui les créent sont des bras cassés, du Flash bien optimisé ça reste peu gourmand. D'ailleurs si la version Mac était optimisée la version PC personne ne dirait rien.
codeX
[06/02/2009 17:16]
Justement elle ne l'est pas. Le jour ou, on pourra reparler du fait d'avoir de la vidéo, de la 3D, des BDD, du XML, des animations et la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... En attendant, qu'on nous lâche un peu avec Flash.
D'ailleurs si la version Mac était optimisée la version PC personne ne dirait rien.
Justement elle ne l'est pas. Le jour ou, on pourra reparler du fait d'avoir de la vidéo, de la 3D, des BDD, du XML, des animations et la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... En attendant, qu'on nous lâche un peu avec Flash.
brume
[06/02/2009 17:30]
En tout cas ça promet, c'est déjà assez fluide. Mais ... ça bouffe environ 90% de processeur ici.
Je reste perplexe sur le fait d'utiliser ça en CSS plutôt qu'en javascript. C'est plus difficile d'avoir de l'interaction.
En tout cas ça promet, c'est déjà assez fluide. Mais ... ça bouffe environ 90% de processeur ici.
Je reste perplexe sur le fait d'utiliser ça en CSS plutôt qu'en javascript. C'est plus difficile d'avoir de l'interaction.
Almux
[06/02/2009 17:55]
Eh bien, moi, cela m'intéresse au premier chef... puisque je SUIS un de ces bras cassés QUI NE SAIT PAS FAIRE DE JOLIS TRUCS QUI BOUGENT SANS FLASH! ActionScript... c'est un peu touffu, pour ma p'tite tête... ;)
Par contre, quand je peux faire une feuille de style efficace pour un site moins "cinématographique", je jubile!!
JavaScript?... ;p ...C'est un peu comme de l'ActionScript, non? Sacrément compliqué pour mon âge!
Mais si quelqu'un a un bon lien d'un tuto d'animation interactive en JavaScript, je veux bien tenter le coup!
Eh bien, moi, cela m'intéresse au premier chef... puisque je SUIS un de ces bras cassés QUI NE SAIT PAS FAIRE DE JOLIS TRUCS QUI BOUGENT SANS FLASH! ActionScript... c'est un peu touffu, pour ma p'tite tête... ;)
Par contre, quand je peux faire une feuille de style efficace pour un site moins "cinématographique", je jubile!!
JavaScript?... ;p ...C'est un peu comme de l'ActionScript, non? Sacrément compliqué pour mon âge!
Mais si quelqu'un a un bon lien d'un tuto d'animation interactive en JavaScript, je veux bien tenter le coup!
oomu
[06/02/2009 17:58]
"C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...
On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...
"
il n'y a aucun avenir à terme, à Flash.
pourquoi ?
parce que TOUS les services de flash sont mis, les uns après les autres, dans le navigateur standardisé !
la vidéo ? html5
la base de donnée locale ? html5
les sous-process ? html5
actionscript ? ben c'est javascript (notons que le moteur actionscript de flash9 fut donné à mozilla sous licence gpl)
vectoriel, animation : canvas dom+svg+javscript.
ce qui se passe, c'est que le navigateur est tout simplement en train d'être enrichi. Ce qui avant se faisait dans la boite noire flash est maintenant exposé sous forme de html , css et javascript
html est le contenu
javascript est la programmation
css est la forme.
pourquoi c'est important les animations et transformations en css ? parce que ce n'est qu'un style, une forme que peut prendre le site. ce n'est pas de l'interaction. il est très utile et efficace que cela soit modifiable simplement par css.
javascript est l'interaction. Javascript modifiera via DOM toutes les propriétés css et contenu html.
-
Flash ce n'est pas un plugin seulement. si ce n'était qu'un plugin et du actionscript , flash serait nul et on n'en parlerai plus.
Flash c'est un logiciel très étoffé, très complet. Flash MX.
Il serait tout à fait possible qu'à terme, Adobe créé un générateur de code svg+js qui soit l'exacte de ce qui était avant propriétaire flash (le swf binaire)
-
encore prématuré. HTML5 ne fournira pas tout ce que permet flash 10. Mais c'est clairement la voie, c'est clairement ce qui est désiré par à peu près tout le monde sauf Adobe.
-
par exemple, opengl sera accessible via DOM et js bientôt. cela sera encore un pan de moins pour flash.
"C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...
On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...
"
il n'y a aucun avenir à terme, à Flash.
pourquoi ?
parce que TOUS les services de flash sont mis, les uns après les autres, dans le navigateur standardisé !
la vidéo ? html5
la base de donnée locale ? html5
les sous-process ? html5
actionscript ? ben c'est javascript (notons que le moteur actionscript de flash9 fut donné à mozilla sous licence gpl)
vectoriel, animation : canvas dom+svg+javscript.
ce qui se passe, c'est que le navigateur est tout simplement en train d'être enrichi. Ce qui avant se faisait dans la boite noire flash est maintenant exposé sous forme de html , css et javascript
html est le contenu
javascript est la programmation
css est la forme.
pourquoi c'est important les animations et transformations en css ? parce que ce n'est qu'un style, une forme que peut prendre le site. ce n'est pas de l'interaction. il est très utile et efficace que cela soit modifiable simplement par css.
javascript est l'interaction. Javascript modifiera via DOM toutes les propriétés css et contenu html.
-
Flash ce n'est pas un plugin seulement. si ce n'était qu'un plugin et du actionscript , flash serait nul et on n'en parlerai plus.
Flash c'est un logiciel très étoffé, très complet. Flash MX.
Il serait tout à fait possible qu'à terme, Adobe créé un générateur de code svg+js qui soit l'exacte de ce qui était avant propriétaire flash (le swf binaire)
-
encore prématuré. HTML5 ne fournira pas tout ce que permet flash 10. Mais c'est clairement la voie, c'est clairement ce qui est désiré par à peu près tout le monde sauf Adobe.
-
par exemple, opengl sera accessible via DOM et js bientôt. cela sera encore un pan de moins pour flash.
oomu
[06/02/2009 18:01]
"Flash prend de plus en plus de place dans la vidéo sur le net et là par contre, difficile de le remplacer."
html5.
au moment où tous les navigateurs fourniront de base h264 et ogg, les sites feront vite la bascule. Le gain en performance sera substantiel et la simplicité accrue.
Plus besoin de se farcir un des lecteurs flash de vidéo flv , le tout sera manipulé par l'interface du site lui même que le développeur aura écrit en html/js, que le graphiste aura stylé en css.
l'utilisateur n'aura plus du tout la question du "plugin flash", ni de le mettre à jour.
-
non, cela ne se fera pas en 2009 malgré opera, safari 4 et firefox 3.1
"Flash prend de plus en plus de place dans la vidéo sur le net et là par contre, difficile de le remplacer."
html5.
au moment où tous les navigateurs fourniront de base h264 et ogg, les sites feront vite la bascule. Le gain en performance sera substantiel et la simplicité accrue.
Plus besoin de se farcir un des lecteurs flash de vidéo flv , le tout sera manipulé par l'interface du site lui même que le développeur aura écrit en html/js, que le graphiste aura stylé en css.
l'utilisateur n'aura plus du tout la question du "plugin flash", ni de le mettre à jour.
-
non, cela ne se fera pas en 2009 malgré opera, safari 4 et firefox 3.1
- B'n -
[06/02/2009 18:04]
Ce serait pas mal qu'ils intègrent des choses déjà plus basiques et récurentes dans le CSS comme par exemple la possibilité de faire des blocs arrondis, des ombres portées, des dégradés, …
Ça doit pas être compliqué à intégrer et allégerait grandement le code et le poids (moins d'images).
Il y a un endroit où on peut voir la roadmap des futures évolutions/intégrations des CSS/standards ?
[et pour le Flash, à chaque news on a les mêmes reproches… :) alors qu'il est si simple de supprimer tous les Flash ou tous les Flash de pub (PithHelmet, AdBlock…) Flash n'est pas une mauvaise technologie, mais est souvent mal utilisée c'est vrai.]
Ce serait pas mal qu'ils intègrent des choses déjà plus basiques et récurentes dans le CSS comme par exemple la possibilité de faire des blocs arrondis, des ombres portées, des dégradés, …
Ça doit pas être compliqué à intégrer et allégerait grandement le code et le poids (moins d'images).
Il y a un endroit où on peut voir la roadmap des futures évolutions/intégrations des CSS/standards ?
[et pour le Flash, à chaque news on a les mêmes reproches… :) alors qu'il est si simple de supprimer tous les Flash ou tous les Flash de pub (PithHelmet, AdBlock…) Flash n'est pas une mauvaise technologie, mais est souvent mal utilisée c'est vrai.]
oomu
[06/02/2009 18:04]
notons que youtube fournit déjà presque tout leur contenu en h264 (pour l'iphone), et que flash10 sait traiter du h264.
On est donc presque mure pour le passage généralisé à mpeg h264, et y a ogg comme solution de repli. Le plugin flash ne sera plus nécessaire.
-
accessoirement, il devient très facile de se faire son petit youtube à soi lisible via firefox 3.1/safari4. sans connaissance particulière de flash ni le moindre outil d'adobe.
notons que youtube fournit déjà presque tout leur contenu en h264 (pour l'iphone), et que flash10 sait traiter du h264.
On est donc presque mure pour le passage généralisé à mpeg h264, et y a ogg comme solution de repli. Le plugin flash ne sera plus nécessaire.
-
accessoirement, il devient très facile de se faire son petit youtube à soi lisible via firefox 3.1/safari4. sans connaissance particulière de flash ni le moindre outil d'adobe.
2
1
Réagir
Cinq consignes avant de réagir :
- Rester dans le cadre de la dépêche. Pour des discussions plus générales, vous pouvez utiliser nos forums.
- Développer son argumentation. Les messages dont le seul but est de mettre de l'huile sur le feu seront modifiés ou effacés sans préavis par la rédaction.
- Respecter les acteurs de l'informatique et les autres lecteurs. Les messages agressifs, vulgaires, haineux, etc. seront modifiés ou effacés sans préavis par la rédaction.
- Pour toute remarque concernant le contenu de l'article, pour nous signaler une erreur, une faute d'orthographe, une omission, merci de nous contacter exclusivement par e-mail.
- Relisez-vous, et pour les utilisateurs de Safari profitez de l'aide du navigateur : activez le menu édition > Orthographe > Vérifier l'orthographe lors de la frappe.