Image illustrant CSS @supports à la rescousse de l'accessibilité

CSS @supports à la rescousse de l’accessibilité

Trois navigateurs (Firefox, Chrome, Opera) viennent d’ajouter le support de @supports (oh le mauvais jeu de mots) pour faciliter la détection des capacités de rendu CSS du navigateur.

Jusqu’à présent

Deux solutions étaient proposées aux intégrateurs de site internet pour profiter des nouvelles propriétés CSS et ainsi suivre le principe de l’amélioration progressive.

**Via la surcharge CSS

En profitant du fait que les lignes de CSS non comprises par l’interpréteur sont purement ignorées par ce dernier. Exemple avec un générateur de dégradés CSS.

div {
        background: #1e5799; /* Valeur par défaut et de fallback*/
        /* Propriétés vendeurs ex: -moz-linear-gradient */
        background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* Syntaxe W3C interprétée uniquement si supportée par le navigateur */
}

Cette solution pose problème lorsque l’on aborde la maintenabilité du code CSS et que l’on cherche la performance optimale en ne dupliquant pas ses déclarations de style.

**Via la détection JavaScript

En utilisant des outils tels que Modernizer qui se chargent de « détecter » le support des propriétés CSS3 (linear-gradient dans notre cas). Une fois ses détections faites, l’outil ajoute des classes indiquant ou pas le support de chacune des propriétés CSS3 au noeud html de notre document. On obtient alors quelque chose de très verbeux :

<body class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls no-download formdata">

Du coup je peux dire que le navigateur que j’utilise actuellement supporte le JavaScript (js), les transitions (csstransitions) et que je n’utilise pas un support tactile (no-touch)

En plus d’être une bibliothèque JavaScript à charger en plus, cette solution n’est absolument pas envisageable pour les navigateurs où JavaScript est désactivé.

Aucune des deux solutions ci-dessus nous assure d’avoir un site facilement maintenu, accessible et performant. Or ce sont mes objectifs d’intégrateur web.

@supports à la rescousse

@supports est un ajout plus que bienvenu dans la spécification CSS et vient combler les lacunes des deux techniques présentées ci-dessus.
Actuellement @support n’est supporté que par le navigateurs de « pointe » faisant tourner WebKit Nightly (Chrome Canary) ou Firefox Nightly. Les versions plus anciennes de Firefox peuvent activer le support de @support en activant la clé layout.CSS.supports-rule.enabled dans about:config.

La syntaxe devrait vous être familière car similaire à celle des media-queries :

@support ( propriété : valeur ) {
        /* Déclaration à interpréter dans le cas où la paire propriété/valeur est supportée */
}

Il est aussi possible d’utiliser la négation avec :not :

@support not ( propriété : valeur ) {
        /* Déclaration à interpréter dans le cas où la paire propriété/valeur n'est pas supportée*/
}

Et plusieurs conditions peuvent être combinées :

@support ( propriété : valeur )
        and ( propriété : valeur )
        and ( propriété : valeur ) {
        /* Déclaration à interpréter dans le cas où chacune des paires propriété/valeur est supportée */
}

Exemple utile

Je ne doute pas que nous allons voir de plus en plus de cas tirant profit de @support dans les mois qui viennent mais l’utilisation qui me vient à l’esprit est de détecter le support du layout flexbox.

section {
        float: left;
}

@supports (display: -webkit-flex) or
         (display: -moz-flex) or
         (display: flex) {

        section {
                 display: flex;
                 float: none;
        }
}

@support et JavaScript

J’en parle juste pour vous mettre au courant mais je ne vais pas m’étendre sur le sujet puisque un de mes objectifs est de rentre mes sites accessibles.

Vous pouvez utiliser la méthode CSS.supports() de l’objet window. Cette méthode accepte deux syntaxes pour les paramètres :

if( CSS.supports( "propriété", "valeur") )  { }
if( CSS.supports( "(propriété : valeur) and (propriété : valeur)") ) { }

Mais évidemment et comme d’habitude, les navigateurs ne nous rendent pas la tâche facile et ont utilisé des noms de méthodes différents (Opéra ce coup-ci). Voici le code pour vous assurer d’obtenir la bonne méthode :

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

Je vous souhaite bien du plaisir à utiliser cette nouvelle fonctionnalité CSS et prédit un bel avenir à cette solution accessible relative à l’amélioration progressive !