L'amélioration progressive est un beau principe nous invitant à utiliser des fonctionnalités CSS avancées dès maintenant, la feature-query @support est notre nouvel outil pour cela. Petite intro par Charlotte Jackson.

Par

L'amélioration progressive nous permet d'utiliser toutes sortes de fonctionnalités formidables dès maintenant, quand bien même tout le monde ne dispose pas d'un navigateur adapté.

Lorsqu'on utilise les nouvelles propriétés CSS, on peut souvent laisser à CSS le soin de la solution de rechange (fallback), CSS pardonne beaucoup et il ignore les lignes de code qu'il ne comprend pas. Du coup, les navigateurs qui ne supportent pas telle ou telle propriété ne l'appliqueront pas. Prenons un exemple.

CSS Shapes

CSS Shapes est simple, mais beau, et il est vraiment très simple de l'ajouter ( NdT : voir l'article de Sara Soueidan CSS Shapes, une introduction), elle permet par exemple d'enrouler un texte autour d'une image comme ceci :

le texte s'enroule autour de la photo

Voici le CSS :

.shape {
  width: 20em;
  height: 20em;
  float: left;
  margin: 1em 2em 1em 0;
  border-radius: 25em;
  shape-outside: circle(50%);
}

À ce jour, la compatibilité navigateurs de shape-outside est de 65%, pas très brillant donc, mais ce n'est pas grave. Le résultat reste convenable dans les navigateurs non compatibles, c'est juste que le texte reste droit, comme d'habitude :

Cette approche tranquille nous permet d'utiliser pas mal de nouveautés CSS, mais pas toutes cependant. Prenez blend modes par exemple :

Blend modes

La dernière fois que j'ai vérifié, la compatibilité de background-blend-modes était de 72%.

Voici le CSS :

.wrapper {
    background-image: 
    linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url("https://c7.staticflickr…"); 
    …
    background-blend-mode: hue;
}

Il y a plusieurs images de background : une image et deux dégradés. Là-dessus, on applique un blend-mode. Voici ce que cela donne dans 72% des navigateurs :

Et voici ce que donneront les navigateurs non compatibles :

L'image n'est pas mélangée, on ne voit que les dégradés

On ne voit que les dégradés parce qu'ils sont au-dessus de l'image et celle-ci ne se mélange pas avec eux comme elle le devrait. Sans l'image, le message ne fonctionne pas et d'ailleurs on lit difficilement le texte. Nous ne pouvons pas utiliser ce résultat en production.

Mais n'éliminons pas blend modes tout de suite ! Nous pouvons quand même l'utiliser en production. Pour y parvenir, nous disposons d'un outil CSS très puissant qui va peut-être vous changer la vie : @supports.

@supports

Avec @supports, nous pouvons écrire une déclaration conditionnelle (a.k.a feature query), qui sera prise en compte si et seulement si la propriété CSS est supportée par le navigateur.

Les feature queries ressemblent aux media queries :

@supports (background-blend-mode: hue) {
   /* ce code ne sera lu que si 
   le navigateur supporte 
   background-blend-mode: hue */
}

Dans la première ligne, nous écrivons @supports et ce qui suit est l'équivalent d'un if {}, donc entre parenthèses nous avons l'équivalent de si background-blend-mode:hue est supporté, alors applique tout ce qui est entre les accolades, s'il n'est pas supporté, n'applique pas les règles.

Voici comment @supports nous permet d'utiliser les blend mode en production :

.wrapper {
    background-image: url(“https://   c7.staticflickr…");  
}
@supports (background-blend-mode: hue) {
    .wrapper {
        background-image: linear-gradient(lightblue 0%, pink 100%),
        linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr.com/2/1510/…”);  
        background-blend-mode: hue;
    }
}

Les styles appliqués à la classe .wrapper (au sommet) sont utilisés par tous les navigateurs. Donc tous les navigateurs reçoivent au minimum cette image de background. Les styles appliqués à la classe .wrapper à l'intérieur de la query @supports ne sont utilisés que par les navigateurs supportant background-blend-modes:hue;. Voici notre exemple précédent tel qu'il apparaît dans des navigateurs non compatibles avec blend modes. Elle est beaucoup plus présentable et nous pouvons sans problème l'utiliser en production.

l'image est visible, ainsi que le texte

Compatibilité de @supports

Ok, parfait, mais qu'en est-il de la compatibilité de @supports elle-même ? 77% des navigateurs sont actuellement compatibles. Aucun support dans IE ni Opera mini pour l'instant. Alors que se passe-t-il si @supports n'est pas supporté ? Eh bien il n'exécutera pas le code situé dans la query @supports, et ça ne pose pas de problème.

Revoici notre exemple. Voici ce que nous obtenons lorsque @supports n'est pas supporté. C'est exactement la même chose que précédemment puisqu'il n'a appliqué aucun des styles de la query.

le résultat est identique

CSS Shapes et @supports

Nous pouvons maintenant améliorer notre premier exemple, celui du texte qui s'enroule (ou pas). Nous pouvons indiquer au navigateur que même s'il supporte border-radius il ne l'applique que si shape-outside est également supportée :

.shape{
    width: 20em;
    height: 20em;
    float: left;
    margin: 0.25em 2em 1em 0;
}
@supports (shape-outside: circle()) {
    .shape {
        shape-outside: circle(50%);
        border-radius: 25em;
    }    
}

De la sorte, quand le navigateur supporte shape-outside, on verra l'image de gauche ci-dessous, et quand il n'est pas compatible on verra l'image de droite. C'est beaucoup mieux, n'est-ce pas ?

à gauche le texte s'enroule autour d'une image ronde, à droite il s'aligne le long d'une image carrée

On peut vérifier plusieurs propriétés CSS en les enchaînant avec des or et des and. Si par exemple vous voulez prendre le maximum de précaution avec notre exemple, vous pouvez ajouter une condition supplémentaire pour vous assurer que border-radius est aussi supporté :

.shape{
    width: 20em;
    height: 20em;
    float: left;
    margin: 0.25em 2em 1em 0;
}
@supports (border-radius: 25em) and (shape-outside: circle()) {
    .shape {
        shape-outside: circle(50%);
        border-radius: 25em;
    }    
}

Jusqu'à présent, nous avons utilisé Modernizr pour cibler les propriétés CSS non compatibles. Ça fonctionne bien, mais c'est encore mieux si l'on évite JavaScript. Le script Modernizr peut être tout petit, mais il faut le télécharger avant que CSS soit appliqué. Et il y a toujours un risque que JavaScript ne soit pas exécuté. Je crois que nous allons utiliser de plus en plus @supports pour implémenter les nouveaux CSS !


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.


Ressources complémentaires en anglais

@supports dans CSS Reference de Codrops

Ressources complémentaires en français

@supports dans MDN

Sur l'amélioration progressive, 3 articles d'Aaron Gustafson traduits en français :

Comprendre l'amélioration progressive
Amélioration progressive avec CSS
Amélioration progressive avec JavaScript


original paru le 7 octobre 2016 dans le blog de Charlotte Jackson
Traduit avec l’aimable autorisation de l’auteur.
Copyright Charlotte Jackson © 2016
.

Sur l’auteur : est front-end developer chez Clearleft à Brighton. Quand elle ne travaille pas, elle court, plonge, escalade et on peut la trouver au bord de la mer ou à la montagne en train de photographier.