Le W3C vient d'annoncer une prochaine recommandation de CSS avec le module de règles conditionnelles. Si certain(e)s d'entre vous connaissent sûrement déjà le mot clé @supports et son usage, sachez qu'il est enfin en passe d'être officiellement validé et reconnu à sa juste valeur. Dans le même temps, la fonctionnalité @media va aussi être complétée pour proposer plus de solutions aux web designers et intégrateurs web.
Plusieurs fonctionnalités de programmation intègrent peu-à-peu CSS, faisant de lui un langage de plus en plus complet (voire complexe pour les néophytes). Dans l'idée, il faut toujours voir ces ajouts de possibilités comme des avantages, pas nécessairement obligatoires à utiliser. Malgré tout, certaines recommandations changent la donne et les usages tant elles boostent le langage, et ce devrait être le cas avec les règles conditionnelles en CSS. Si vous êtes habitués à faire des "if... else..." en programmation, alors les "@supports (condition) { ... }" devraient vous plaire. Les deux exemples ci-dessous montre des cas conditionnés autour de la propriété display:flex, lorsque celle-ci est appliquée, ou non (avec le mot clé "not" ajouté avant la condition dans ce cas). Je ne pourrais pas faire l'étalage de toutes les possibilités mais l'intérêt est vraiment fort pour l'avenir de CSS !
@supports (display:flex) {
body, #navigation, #content { display:flex; }
#navigation { background:blue; color:white; }
#article { background:white; color:black; }
}
@supports not ( display: flex ) {
body { width:100%; height:100%; background:white; color:black; }
#navigation { width:25%; }
#article { width:75%; }
}
Dans les faits, la recommandation sur les conditionnelles en CSS est plus complet que ce que je vous annonce ici, et il serait réducteur de ne pas vous indiquer à minima deux autres points mis en avant pour la recommandation, qui peuvent aussi aider à terme à mieux intégrer nos pages web de plus en plus complexes :
- Création d'espaces de noms (namespaces) en CSS : il est possible de créer des espaces de noms, distincts de l'environnement général de CSS, avec la méthode @namespace. Cela permet de fournir un nom et une URL ciblée par l'espace de nom, et donc de conditionner la règle directement. Techniquement, cela revient à réduire le champ d'action de groupes de propriétés CSS pour des URL données, avec un préfixe déclaré via un espace de nom. Le code suivant donne un exemple :
@namespace x url(https://blog.internet-formation.fr/actualites/);
@supports (content:attr(x|href)) {
// Propriétés exécutées uniquement quand l'URL donnée est trouvée dans un href
}
- Rappel de l'usage des multiples @media : il est souvent rare de le voir dans les feuilles de style mais il est possible d'imbriquer des at-keyword comme @media pour exclure des règles consécutives dans certains contextes. Il s'agit donc ici d'une forme conditionnelle, pourtant non réalisée avec @supports. Il reste à chacun d'utiliser chaque méthode à bon escient, mais l'exemple ci-dessous peut vous donner une idée de cas concret.
@media print {
/* Retire le menu lors de l'impression, car inutile)
#navigation { display: none }
@media (max-width:15cm) {
/* Retire les flottements de blocs pour ramener les blocs les uns sous les autres pour les petites impressions uniquement */
.texte,
.photo {
float:none;
}
}
}
Je rappelle qu'à ce jour, il ne s'agit que d'un candidat à la recommandation, étape obligatoire pour atteindre l'objectif définitif. En général, tout se passe bien et il ne s'agit qu'une question de temps, d'où mon emballement à l'approche de ces nouvelles possibilités enfin officialisées. En effet, je fais partie des développeurs qui n'aiment pas sauter sur les dernières nouveautés avant qu'elles soient totalement officielles, par peur de problème de rétrocompatibilité, etc. Si @supports en déjà plutôt bien supportée par les navigateurs, c'est encore mieux si nous sommes certains que les règles que la fonction incarne sont officielles...