Le célèbre langage de mise en forme évolue de manière constante. Bien que le CSS3 est, et restera encore un moment, le standard du web, il peut être intéressant de connaitre les nouvelles fonctionnalités que nous réserve le « niveau 4 ».
Cet article propose d’effectuer un résumé des nouveautés les plus intéressantes. La plupart d’entre elles citées ici, sont encore à l’état d’expérimentation et ne peuvent évidemment pas être utilisées en production.
De nouvelles propriétés
Background-blend-mode : Permet d’effectuer la fusion entre une image et un ou plusieurs fonds colorés, ou également avec du texte coloré, lui donnant ainsi divers effets. Pour voir le support de cette propriété par les différents navigateurs, cliquez ici.
wrap-flow : Permet de dépasser les limites imposées par la propriété float, à savoir la possibilité de placer par exemple, une image seulement à droite ou à gauche d’un autre élément, comme du texte. wrap-flow offre la possibilité d’habiller du texte, en faisant en quelque sorte, un équivalent de « float :middle ». Cette fonctionnalité n’est supportée que par IE 10, 11 et Edge.
shape-outside : Permet de donner à un élément une forme géométrique complexe qui sera prise en compte par les autres éléments du site. Par exemple, si la propriété shape-outside: circle() est appliquée à une image placée (avec float ou wrap-flow) dans du texte, ce dernier se positionnera selon la forme circulaire définie.
Display:grid : Une propriété très intéressante qui permet de disposer des éléments en grille entièrement dans la feuille de style. Voici quelques exemples : gridbyexample.com . Cette fonctionnalité n’est supportée que par IE 10, 11 et Edge.
Les variables : CSS4 prend en charge l’utilisation de variables à la manière de SASS, mais elles ne sont supportées actuellement que par les dernières versions de Chrome et de Firefox.
Des pseudo-classes bien pratiques
Les pseudo-classes de relation
:not(a,b) : La négation est déjà présente dans CSS3 mais elle a été améliorée pour lui permettre de prendre en compte plusieurs éléments.
:has(a) : Cette pseudo-classe s’applique aux sélecteurs ayant pour enfant l’élément placé en argument. Combiné avec :not(), les possibilité offertes sont nombreuses.
:matches(a,b) : Permet d’imputer des propriétés semblables à plusieurs éléments.
:nth-match : Combine les fonctions de matches citées ci-dessus et de :nth-child . Une pseudo-classe qui promet donc d’offrir un large panel de possibilités.
Les pseudo-classes de navigation
:any-link() : Combine les définitions a:link et a:visited en une seule.
:local-link() : Ne prend en compte que les liens internes au site web.
Les pseudo-classes temporelles
:past, :current et :future : Ces pseudo-classes permettent de distinguer des éléments CSS dans le temps. Elles peuvent être utilisées, par exemple, pour l’affichage de sous-titres de vidéo. Ces sélecteurs peuvent avoir plusieurs arguments.
Les pseudo-classes de langues
:lang(*-language) : Cette fonctionnalité prometteuse permettra d’appliquer des règles de style à des éléments en fonction de la langue courante, pratique pour les sites multilingues.
Voici un lien qui indique la compatibilité des sélecteurs de niveau 4 avec votre navigateur, ainsi que des descriptions détaillées de chacun accompagnées d’exemples : css4-selectors.com/browser-selector-test
Le sélecteur de parents
Ce sélecteur va enfin permettre de combler un vide ressenti par tous les intégrateurs web. A savoir, la possibilité d’appliquer des styles à un parent qui possède un enfant défini. Dans une déclaration de règle, les styles sont d’ordinaire appliqués au dernier élément, mais le sélecteur de parents (« ! ») permettra de choisir à quel élément les règles seront appliquées.
Voici la syntaxe :
sujet! > selecteur {
/* declarations */
}
L’avenir du développement front-end est donc pavé de nouvelles possibilités (et de nouvelles facilités) apportées par les sélecteurs de niveau 4 du CSS. De nouvelles pseudo-classes, fonctions, propriétés et sélecteurs qui ouvriront la voie à de nombreuses possibilités d’intégration et permettront de s’émanciper un peu plus du JavaScript. Cependant, il se peut que nous ayons à attendre encore un certain temps avant de voir les navigateurs implémenter la totalité de cette spécification. Il n’y a plus qu’à attendre patiemment !
Sources :
