Pour fêter le 1000e article du blog, rien de mieux qu’un article complet et détaillé sur l’avenir de CSS. Bonne lecture !
Le langage CSS (Cascading style sheets) permet de gérer la mise en forme des pages web intégrées en HTML, souvent accompagné par son acolyte Javascript pour certaines animations complexes. Facile à prendre en main avec sa syntaxe très abordable et sa liste de propriétés relativement limitée, CSS offre un confort de programmation qui lui offre l’appréciation de bon nombre de débutants ou de profanes. Mais CSS arrive à l’âge de la maturité, et tout pourrait changer…
Nous allons découvrir dans la suite de cet article 5 nouveautés du langage CSS qui le rapproche de plus en plus des langages de programmation classiques, avec des possibilités accrues et utiles pour aller plus loin dans les techniques de mise en forme et d’animation. S’il sera toujours possible de faire du CSS “à l’ancienne”, il ne fait aucun doute que le CSS de demain est alléchant et risque de satisfaire aussi bien les développeurs que les néophytes du design web. Avec des nouveautés typiques des préprocesseurs CSS comme Less, Sass ou encore Stylus, le CSS va pouvoir offrir de possibilités au moins équivalentes nativement, donc sans risquer d’aller à l’encontre des standards du langage. Une aubaine ! 🙂
À l’heure d’écrire ces lignes, la majorité des fonctionnalités CSS présentées ci-après ne fonctionnent pas correctement sur l’ensemble des navigateurs. Contrairement à certains de mes confrères, j’estime aussi que le monde du web n’a pas encore totalement abandonné IE 9 à IE 11, bien que le nombre d’usagers se réduit comme peau de chagrin. Par conséquent, vous pourriez considérer que certaines nouveautés sont déjà utilisables aujourd’hui, mais dans mon esprit, la pleine compatibilité est pour demain, d’où la nuance dans mes propos…
L’utilisation de variables est la base immuable de tout langage de programmation. CSS s’en dote enfin et va permettre d’offrir un confort de gestion non négligeable, notamment pour les projets contenant des centaines voire milliers de lignes en CSS.
L’intérêt des variables CSS est d’enregistrer une valeur quelconque au sein d’un élément réutilisable partout dans le code (la fameuse variable), sans avoir à répéter sa valeur. Prenons un exemple simple : votre site web possède deux couleurs principales, une pour les fonds et une pour les textes. Ces couleurs devant être utilisées un peu partout dans le code, il sera plus simple de les enregistrer dans des variables puis d’appeler ces variables partout où les couleurs sont à insérer. Ainsi, si vous voulez tester d’autres couleurs, vous n’aurez plus qu’une ligne à changer…
Les variables CSS fonctionnent sur le principe des propriétés personnalisées (custom properties) et doivent être précédées de deux tirets lors de leur déclaration. Comme ce sont en réalité des propriétés personnalisées, il faut les déclarer dans un bloc d’instruction. Pour cela, on utilise le bloc d’instruction de premier niveau, appelé :root { … }. Enfin, on appelle et utilise les variables avec la méthode var() au sein des propriétés qui en ont besoin. L’exemple suivant résume tout cela…
Hormis Internet Explorer (jusqu’au 11) et Opera Mini, les variables CSS sont utilisables sans problème. Il existe quelques polyfills pour améliorer la compatibilité des variables sur IE notamment, alors foncez ! 😉
En programmation classique, il faut des variables et des structures conditionnelles pour commencer à s’amuser un peu, et CSS l’a bien compris. C’est pour cette raison que les features queries (règle @supports { … }) entrent en jeu. Il ne s’agit pas à proprement parler de if/else comme dans la programmation habituelle, mais le résultat en est presque identique malgré tout. En effet, @supports permet de détecter si une propriété ou une fonctionnalité existe et fonctionne dans le navigateur en cours d’utilisation. Ainsi, nous pouvons prévoir des comportements différents selon les cas, voire offrir des variantes d’intégration selon la compatibilité avec les propriétés. Si nous prenons l’exemple du display:flex; (flexbox), on pourrait s’assurer d’une mise en forme différente en cas d’incompatibilité, avec un display:inline-block; à la place ou une autre méthode.
Le fonctionnement est très simple, il faut indiquer la règle, le mot clé not ou non (cela permet de faire un “if “ou un “if not“), puis la condition à tester entre parenthèse, comme dans l’exemple suivant :
Nous pouvons aussi cumuler des vérifications avec les mots clés and ou or. Ainsi, il est très simple de vérifier l’existence de plusieurs propriétés sur lesquelles nous avons des doutes, comme ceci :
Sachez qu’il est également possible de tester une syntaxe de sélecteur avec selector() par exemple (fonctionne seulement avec Firefox pour le moment), afin de vérifier que le sélecteur peut fonctionner dans le navigateur. On peut aussi vérifier l’existence d’une variable CSS, etc. L’exemple par le code :
Comme d’habitude, seul notre ami Internet Explorer est incompatible avec @supports en CSS, il faut donc passer par un polyfill pour s’offrir un support total…
Les positionnements flexibles avec Flexbox (display:flex; et display:inline-flex;) ont révolutionné le monde de la mise en forme/page tant cela était attendue depuis des années par les webdesigners. CSS ne s’arrête pas en si bon chemin et fait déjà fonctionner dans tous les navigateurs actuels (sauf IE…) les CSS Grid, à savoir les grilles CSS.
CSS Grid est un élément qu’il faut utiliser en complément des Flexbox, car son rôle est davantage de placer les éléments principaux que de faire les petits éléments de positionnement (là où Flexbox est idéal). Pour une structure de page web, on peut donc facilement créer la structure avec Grid CSS, et la modifier comme bon nous semble.
Mozilla fournit un exemple en ligne qui résume tout l’intérêt des grilles CSS. Je propose ici un exemple simple pour une structure de base en HTML :
Et voici le CSS correspondant :
Et le rendu final de la structure :
CSS se dote d’une multitude de nouvelles propriétés qui vont offrir des effets visuels en tout genre. Il est impossible de toutes les notifier ici mais voici quelques propriétés sympa à retenir ou à étudier de près :
Voilà pour ce tour d’horizon extrêmement rapide… 😉
Quel intégrateur CSS n’a pas rêvé de pouvoir remonter jusqu’au parent dans un sélecteur CSS ? Jusqu’à présent, tout le principe du langage repose sur les sélecteurs descendants, allant donc des parents vers les enfants. Mais parfois, il serait absolument nécessaire de pouvoir faire le cheminement inverse, et CSS semble avoir enfin répondu à ce besoin…
En réalité, il ne s’agit pas vraiment d’un sélecteur parent, mais d’une méthode qui permet d’indiquer un parent contenant un enfant en particulier. Dans les précédentes spécifications CSS (notamment celle de 2011), le signe “$” puis “!” était utilisé pour indiquer le “sujet” du sélecteur, c’est-à-dire l’élément qui allait appliquer le style déterminé. Depuis la spécification de 2013, CSS utilise la pseudo-class :has() pour indiquer un parent contenant un enfant en particulier, comme ceci :
Pour le moment, :has() est incompatible quasiment partout, mais je vous conseille de suivre de près cette fonctionnalité avancée…
Je vais vous laisser sur votre faim mais sachez qu’il existe de nombreux nouveaux sélecteurs intéressants, comme :any-link, :focus-within, :scope, :target ou encore :current (liste non exhaustive). Lisez la documentation du W3C si vous voulez en savoir plus…
Bonjour,
Toutes ces features ne sont pas “le futur” et sont déjà utilisées en production, certaines depuis déjà quelques années (notamment les variables).
Leur implémentation est aujourd’hui assez bonne dans les navigateurs depuis environs 4-5 ans.
Aussi, “CSS 4” n’existera pas, le langage n’est plus versionné de la sorte, mais découpé en modules qui évolueront indépendamment les uns des autres.
Merci pour ton commentaire !
Pour le coup, j’ai mis dans ma “note” du début d’article que certaines fonctionnalités sont déjà utilisées en production mais que je fais partie des gens qui ne le font pas car ce n’est pas encore entièrement compatible sans polyfill (souvent pour IE). J’ai donc bien nuancé dans la note du début, comme tu le fais ici.
Pour ce qui est du “CSS 4”, le versioning est en effet abandonné depuis longtemps côté CSS, mais paradoxalement, la documentation se découpe encore en CSS 3, CSS 4, etc. C’est pour cette unique raison que je maintiens l’appellation CSS 4 pour “situer” les évolutions dans le temps. Tu noteras d’ailleurs que je ne l’ai pas précise dans le titre car je ne souhaitais justement pas porter à confusion.
En tant que formateur, je sais parfaitement ce que tu évoques en commentaire, mais il était bon de préciser, et je te remercie pour ça ! 🙂
Le découpage en niveau existe toujours, mais il est assigné à chaque élément.
Flexbox et Grid sont des éléments de niveau 1 car ils sont nouveaux.
Il y a un article en anglais qui explique ça très bien : https://www.xanthir.com/b4Ko0
Pour le coup cet article est top et explique bien tout en détail. Il existe des confusions pouvant laisser croire qu’un “CSS 4” existerait, mais en soi ce ne sont que des confusions dues au nom des modules CSS attribués par CSSWG. Bien vu, et merci pour l’info !
Salut !
Moi, j’attends le support général de backdrop-filter, pour notamment faire un flou d’arrière-plan, un peu à la iOS 😍
Quand un truc n’est pas encore à porter de main, je trouve qu’il faut improviser.
perso: je mets le flou en utilisant le blend-mode.
Perso j’attend l’implémentation parent qui est deja utilisé dans Sass du style :
ul {
display:block;
li {
display:inline-block;
}
}
Quelqu’un sait si c’est quelque chose de prévu ?
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (345 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (570 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 29,90 € (522 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 19,90 € (411 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 29,90 € (622 pages)
Télécharger “SwipeMenu.zip”SwipeMenu.zip – Téléchargé 2435 fois – 52 Ko
Télécharger “Spider Simulator PHP”spider-simulator.zip – Téléchargé 2293 fois – 2 Ko
Télécharger “ReadingIndicator 1.0”readingIndicator-1.0.zip – Téléchargé 1406 fois – 7 Ko
Télécharger “Parseur Facebook”parser-facebook.zip – Téléchargé 2299 fois – 3 Ko
Télécharger “Pack complet – moteur de recherche PHP 5.5 – PHP 7”moteurPHP5.5.zip – Téléchargé 12592 fois – 171 Ko
Ce blog est le résultat de plusieurs années de travail mais il ne fait pas manger son homme. Découvrez l’agence web et l’organisme de formation géré par Mathieu Chartier et n’hésitez pas à prendre contact pour suivre des formations personnalisées.
Tous droits réservés © Blog Internet-Formation 2009 – 2022
5