CSS3 : de l'accélération matérielle graphique pour les filtres sur Chromium

Le W3C donne le feu vert au retrait des préfixes propriétaires

Le 2012-06-08 12:10:25, par Idelways, Expert éminent sénior

Deux, trois filtres CSS3 font freezer l'écran sur la plus récente version stable de votre navigateur ultra-moderne ? Et mettent en branle les ventilateurs de l'ordinateur dès qu'ils sont couplés à une pincée de transitions ? Vous vous dites que Flash a encore de beaux jours devant lui ?

Ça commence à changer ! En tout cas pour les utilisateurs de Google Chrome et de son moteur de rendu Webkit.

Le blog officiel de Chromium (le logiciel libre d'où est directement issu Chrome) nous annonce l'intégration de l'accélération matérielle graphique pour assurer les filtres et transitions CSS. Et soulager le CPU !

« L'accélération GPU de ces filtres améliore les performances au point qu'ils peuvent être utilisés pour animer des éléments en conjonction avec les animations CSS réalisées avec -webkit-transition ou même pour les balises vidéo HTML5 », a déclaré l'ingénieur Stephen White.

Pour rappel, la spécification définit 10 fonctions filtres, à savoir grayscale (niveau de gris), sepia, saturate, hue-rotate (teinte), invert, opacity, brightness (luminosité), contrast, blur (flou) et drop-shadow (ombre portée).

Ces fonctions peuvent prendre des paramètres (pour ajuster notamment le degré de la transformation) et être combinées entre elles.

Tester les filtres avec l'outil de dessin abstrait en ligne par Google

Toujours au sujet des feuilles de styles en cascade, mais dans un autre contexte, le groupe de travail CSS du W3C vient de donner un feu vert aux éditeurs de navigateurs. Celui de lever les préfixes propriétaires des modules Transformations, Transitions et Animations.

Ces préfixes (-moz-, -ms-, -webkit-...) ont été conçus pour permettre de cibler des navigateurs précis en attendant que le standard soit finalisé. Les développeurs Web se souviendront de l'implémentation différente de la fonction linear-gradient entre Webkit- et le reste des navigateurs. L'usage du préfixe a permis dans ce cas d'éviter une incompatibilité avec la syntaxe standard adoptée par la suite.

Mais gardez vos préfixes pour encore quelque temps. Le temps que les navigateurs adoptent tous la syntaxe standard, d'autant plus que les préfixes continueront à être pris en compte pour encore un bon moment.

Internet Explorer 10 s'y colle déjà selon le IEBlog (officiel), qui vient de publier la liste exhaustive des propriétés supportées sans vilains préfixes.

Sources :

Blog de Chromium

IEBlog

Blog Twitter de CSS Working Group

Et vous ?

Utilisez-vous des filtres CSS 3 ? Que pensez-vous de leurs performances ?
Quelle méthode utilisez-vous pour générer les différentes variantes des déclarations CSS préfixées ?

Discussion forum

3 commentaires

Aurelien Plazzotta
Membre extrêmement actif

Bonjour,

Tout d'abord merci pour l'article

On voit bien l'influence qu'exerce le directeur technique d'Opera, qui je le rappelle, est le créateur du CSS. Opera est également le plus gros apporteur de capitaux du W3C depuis l'entrée de l'entreprise dans le cercle fermé des membres des groupes de travail du consortium.

M'enfin c'est une bonne nouvelle pour l'écriture et la maintenance du code et éviter d'éventuelles dégradations ou effets de bords dans nos feuilles de style =)

Il reste encore les sélecteurs CSS4 lol (je blague ^^)

le 08/06/2012 à 21:02
McBenny
Nouveau membre du Club

Oui, très bonne nouvelle, mais il faut garder les préfixes pour les 4 ou 5 prochaines années quand même : les dernières versions des navigateurs supportent les déclarations sans préfixe mais les anciennes ? Sachant que les utilisateurs qui ne mettent pas (ou ne peuvent pas mettre) à jour leurs logiciels sont extrêmement nombreux (voir le cas IE6), si on veut fournir le même contenu à tout le monde, on doit continuer. C'est tout le problème de ces préfixes, les créer permettait d'avancer plus vite que la norme, mais maintenant, on va se les balader encore un moment !

le 13/06/2012 à 9:37
BPiero
Membre actif

Envoyé par Idelways

Utilisez-vous des filtres CSS 3 ? Que pensez-vous de leurs performances ?

Non pas encore, y'a que chrome qui le supporte.

Envoyé par Idelways

Quelle méthode utilisez-vous pour générer les différentes variantes des déclarations CSS préfixées ?

je les génère pas, je les copie puis les modifie à la main si besoin. C'est chiant à gérer, donc vivement qu'il y ai plus du tout de préfixes proprio, mais je dois reconnaitre que pour gérer certains bugs spécifiques à des navs ça peut être pas mal (j'ai rencontré des soucis avec un box-shadow inset combiné à une anim jquery sous chrome et safari, du coup j'ai fait sauter le inset dans la version -webkit- et j'ai diminué la taille de l'ombre et c'était géré).

le 16/06/2012 à 17:08