"Découverte" des CSS features

Connaissez-vous les CSS features ?

Mine de rien, c'est un principe qui existe depuis l'été 2016, et qui a pour but de gérer plus facilement la gestion des versions des navigateurs dans notre code.

En gros, vous allons vérifier dans notre code CSS ... la présente ou non d'une feature CSS !!

Par exemple, nous pouvons regarder si notre navigateur gère le "display grid" en faisant le code suivant:

@supports (display: grid) { main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

Facile non ?

Nous pouvons aussi vérifier en mettant une condition, comme le cas suivant où nous regardons si nous pouvons afficher la première lettre d'un paragraphe sur plusieurs lignes:

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; } }

Et nous pouvons aussi faire une négation:

@supports (height: 100vh) { // my layout that uses viewport height } @supports not (height: 100vh) { // the alternative layout for older browsers }

Le principe de @supports est de mettre en place une stratégie de gestion du contenu:

• Soit bottom-up: nous utilisons les features CSS classiques et en fonction des disponibilités, nous les appliquons
• Soit top-down: nous utilisons les features CSS les plus récentes et nous mettons en place des falbacks pour les vieux navigateurs.

Pour des sites Webs récents, la dernière stratégie est la meilleure. Autrement, préviligiez la première approche.

Il faut savoir que seul Internet Explorer ne connait pas cela, mais ce n'est pas grave car si nous utilisons la première stratégie, nous aurons notre affichage idéal, et @supports ne fera pas planter le navigateur, car en CSS, toute ligne non reconnu sera interprété !