Accueil > Blog > Intégration, développement > CSS4 : Des nouveautés au compte goutte

CSS4 : Des nouveautés au compte goutte

Alors que CSS3 a permis de nombreuses avancées dans l’univers du CSS amenant tout un tas de nouveautés pour les intégrateurs Front-End, CSS4 pointe le bout de son nez depuis maintenant 1 an.

J’avoue que personnellement, je n’en avais pas encore entendu parlé tellement l’annonce est passée inaperçu mais je profite de ce moment pour vous faire part de mes retours sur ces nouvelles avancées.

Pas pour tous

Comme toutes les nouvelles versions de CSS, CSS4 est encore très peu déployée sur les navigateurs, même les plus récents ne prennent pas en compte toutes les avancées.

Par exemple, la dernière version de Chrome (54.0.2840.71) ne prend en charge que 38% des fonctionnalités annoncées de ces nouveaux paramètres. IE (notre vieil ami) ne supporte que 15%, Firefox 29%, Safari quant à lui semble mieux tirer son épingle du jeu.

Vous pouvez tester votre navigateur et sa compatibilité sur http://css4-selectors.com/browser-selector-test/.

Tout cela est bien mais alors quelle utilité ? Et bien comme pour CSS3, pour lequel il aura fallu attendre quelques années avant que les principales fonctionnalités soient mises en place sur les navigateurs principaux du marché et avait été aidé par la poussée du HTML5, CSS4 va se faire timide, beaucoup plus timide (on n’en avait pas encore beaucoup entendu parlé alors qu’il est sorti il y a un an !)…

Que peut-on faire avec ?

Quelques points intéressants sont tout de même à noter dans cette nouvelle version :

:matches

« :matches » permet dans CSS4 de sélectionner plusieurs éléments directement. C’est l’opposé de « :not » mais le rend beaucoup moins utile car déjà dispo en faisant une simple combinaison CSS classique :

Voir CSS4 Matches by Carl Pigeot (@carlitonadamas) sur CodePen 1

Et en plus, il faut utiliser les webkit et moz… alors qu’en CSS simple, on aurait écrit :

Voir CSS4 Matches 2 by Carl Pigeot (@carlitonadamas) sur CodePen 1

En résumé, c’est pas encore ça !

Des avantages quand même peut être ?

Oui, sur la partie style des formulaires avec les pseudo-éléments suivants :

Voir CSS4 by Carl Pigeot (@carlitonadamas) sur CodePen 1

Avec petit bonus sur les placeholder.

Avantage en plus, ces derniers sont valables sur une grande partie des navigateurs !

 

Tout cela est testable ici : http://css4.rocks/selectors-level-4

Il en existe d’autres fonctionnalités, il faut creuser et y trouver l’utilité dans les futurs devs !

Partagez-le !Share on Facebook0Tweet about this on TwitterPin on Pinterest0Share on LinkedIn0Share on Google+0Share on Reddit0Email this to someone

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *