Tutoriel pour apprendre à utiliser des fonctionnalités avancées de CSS

CSS @supports va vous changer la vie

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 disposerait pas d'un navigateur adapté.

Lorsque nous utilisons les nouvelles propriétés CSS, nous pouvons 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.

Commentez Donner une note  l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. CSS Shapes

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

Image non disponible

Voici le CSS :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
.shape {
  width: 20em;
  height: 20em;
  float: left;
  margin: 1em 2em 1em 0;
  border-radius: 25em;
  shape-outside: circle(50%);
}

À ce jour, la compatibilité navigateur 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, le texte reste simplement droit comme d'habitude :

Image non disponible

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

II. Blend modes

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

Voici le CSS :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
.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, nous appliquons un blend-mode. Voici le résultat dans 72 % des navigateurs :

Image non disponible

Et voici ce que donneront les navigateurs non compatibles :

Image non disponible

Nous ne voyons 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 nous lisons 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.

III. @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 :

 
Sélectionnez
1.
2.
3.
4.
5.
@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 {},. Entre parenthèses nous avons donc 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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.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. Ces derniers reçoivent donc 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.

Image non disponible

IV. Compatibilité de @supports

Très bien, 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 cela ne pose pas de problème.

Reprenons 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.

Image non disponible

V. CSS Shapes et @supports

Nous pouvons maintenant améliorer notre premier exemple, avec du texte qui s'enroule autour d’une image (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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
.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, nous verrons l'image de gauche ci-dessous, et quand il n'est pas compatible nous aurons l'image de droite. C'est beaucoup mieux, n'est-ce pas ?

Image non disponible

Nous pouvons 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é :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
.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. Cela 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 !

Ressources complémentaires en anglais

Ressources complémentaires en français

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2019 Charlotte Jackson. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.