CSS futuriste —

Je dirige l’enquête annuelle sur l’état du CSS, interrogeant les développeurs sur les fonctionnalités et les outils CSS qu’ils utilisent ou souhaitent apprendre. L’enquête est en fait ouverte en ce moment, donc allez le prendre!

L’objectif de l’enquête est d’aider à anticiper les futures tendances CSS, et les données sont également utilisées par les fournisseurs de navigateurs pour informer leur feuille de route.

Cette année, Lea Verou est intervenue en tant que concepteur principal d’enquêtes pour aider à sélectionner les fonctionnalités CSS à inclure. Mais même si nous avons ajouté de nombreuses fonctionnalités nouvelles et à venir (dont certaines, comme Imbrication CSSne sont même pas encore pris en charge), certaines fonctionnalités étaient si éloignées, farfelues et futuristes (ou tout simplement inventées !) que nous ne pouvions pas en toute bonne conscience les inclure dans l’enquête.

Mais c’est amusant de spéculer. Alors aujourd’hui, jetons un coup d’œil à quelques fonctionnalités CSS qui pourraient un jour faire leur chemin vers le navigateur… ou pas !

Bascule CSS

Le hack de la case à cocher CSS existe depuis plus de dix anset cela reste encore le seul moyen d’obtenir n’importe quel « effet de basculement » en CSS pur (je l’ai d’ailleurs utilisé moi-même récemment pour le sélecteur de langue sur cette page).

Mais et si nous avions réel bascule, cependant? Et si vous pouviez gérer les onglets, les accordéons, etc., le tout sans écrire une seule ligne de code JavaScript ?

C’est exactement ce que Tab Atkins et Miriam Suzanne Bascule CSS proposition veut introduire. La proposition est assez complexe, et le nombre de détails et de cas extrêmes impliqués montre clairement que ce sera loin d’être trivial pour les fournisseurs de navigateurs à mettre en œuvre. Mais bon, on peut rêver, et en fait, une réalisation expérimentale est récemment apparu dans Chrome Canary!

Fonction de commutation CSS

Une tendance majeure de ces dernières années – non seulement dans le CSS mais dans la société en général – a été de reconnaître que nous avons souvent mal réussi à répondre aux besoins d’une population diversifiée. En termes de développement Web, cela se traduit par la création de sites Web qui peuvent s’adapter non seulement à différents appareils et contextes, mais également à différents handicaps temporaires ou permanents tels que le daltonisme ou le mal des transports.

Le résultat est que nous devons souvent cibler ces différentes conditions dans notre code et y réagir, et c’est là que Miriam Suzanne switch proposition entre:

.foo {
  display: grid;
  grid-template-columns: switch(
    auto /
     (available-inline-size > 1000px) 1fr 2fr 1fr 2fr /
     (available-inline-size > 500px) auto 1fr /
   );
}

Alors que la proposition initiale se concentre sur les tests available-inline-size comme moyen de mettre en place des dispositions de grille, on peut imaginer la même chose switch La syntaxe est également utilisée pour de nombreux autres scénarios, en complément des requêtes sur les médias et les conteneurs.

Typographie intrinsèque

Typographie intrinsèque est une technique inventée par Scott Kellum, qui a développé l’outil de composition Typeture. En un mot, cela signifie qu’au lieu de donner au texte une taille spécifique, vous le laissez définir sa propre taille en fonction des dimensions de l’élément qui le contient :

Au lieu de dimensionner et d’espacer le texte pour chaque composant à chaque point d’arrêt, le texte reçoit des instructions pour répondre aux zones dans lesquelles il est placé. En conséquence, la typographie intrinsèque permet aux conceptions d’être beaucoup plus flexibles, s’adaptant à la zone dans laquelle il est placé. placé, avec beaucoup moins de code.

Cela va au-delà de ce qui est déjà bien utile Calculatrice d’échelle de type Utopia peut offrir, car il s’adapte uniquement en fonction des dimensions de la fenêtre d’affichage, et non des dimensions du conteneur.

Le seul problème avec Typetura est qu’il nécessite actuellement une bibliothèque JavaScript pour fonctionner. Comme c’est souvent le cas, cependant, on peut imaginer que si cette approche s’avère populaire, elle faire son chemin vers le CSS natif tôt ou tard.

Nous pouvons déjà réaliser beaucoup de cela aujourd’hui (ou très bientôt, du moins) avec unités de requête de conteneurqui vous permet de référencer la taille d’un conteneur lors de la définition d’unités pour tout ce qu’il contient.

Fonctions sœurs

Il est courant dans Sass d’écrire des boucles lorsque vous souhaitez styliser un grand nombre d’éléments en fonction de leur position dans le DOM. Par exemple, pour indenter progressivement chaque élément successif d’une liste, vous pouvez procéder comme suit :

@for $i from 1 through 10 {
  ul:nth-child(#{$i}) {
    padding-left: #{$i * 5px}
  }
}

Cela générerait alors l’équivalent de 10 déclarations CSS. L’inconvénient évident ici est que vous vous retrouvez avec dix lignes de code ! Et si votre liste comporte plus de dix éléments ?

Une solution élégante actuellement en cours est la sibling-count() et sibling-index() les fonctions. Utilisant sibling-index()l’exemple précédent deviendrait :

ul > li {
  padding-left: calc(sibling-index() * 5px); 
}

C’est une solution élégante à un besoin commun !

Modèles CSS

Il y a très, très longtemps, j’ai fabriqué un petit outil appelé Modeler cela vous permettrait de dessiner des modèles et de les exporter vers du code base64 pour les déposer en ligne dans votre code CSS. Mon concept était de vous permettre d’utiliser des modèles dans CSS mais avec Griffonnage CSS. Yuan Chuan avait l’idée inverse : et si vous utilisiez CSS pour créer les patrons ?

Création de modèles en CSS pur existe depuis un moment (et est récemment devenu plus élaboré avec l’introduction de dégradés coniques), mais Yuan Chuan a définitivement introduit de nouveaux concepts clés, à commencer par la possibilité de randomiser des motifs ou de spécifier facilement une grille.

De toute évidence, CSS Doodle est probablement beaucoup plus complexe qu’une API de modèle native n’aurait jamais besoin de l’être, mais il est toujours amusant d’imaginer ce que nous pourrions faire avec seulement quelques propriétés supplémentaires axées sur le modèle. La @image proposition pourrait être un pas dans cette direction, car il vous donne des outils pour définir ou modifier des images directement dans votre code CSS.

Graphiques HTML/CSS natifs

Maintenant, nous entrons vraiment dans la spéculation sauvage. En fait, pour autant que je sache, personne d’autre n’a jamais soumis de proposition ni même blogué à ce sujet. Mais en tant que personne qui passe beaucoup de temps à travailler sur visualisations de donnéesje pense que les graphiques HTML/CSS natifs seraient incroyables !

Désormais, la plupart des graphiques que vous rencontrerez sur le Web seront rendus à l’aide de SVG ou parfois de Canvas. En fait, c’est l’approche que nous utilisons pour les enquêtes via la bibliothèque DataViz Niveau.

Le gros problème avec cela, cependant, est que ni SVG ni Canvas ne sont vraiment réactifs. Vous pouvez les réduire proportionnellement, mais vous ne pouvez pas avoir le même contrôle précis qu’offre quelque chose comme CSS Grid.

C’est pourquoi certains ont essayé de mettre en page des graphiques en HTML et CSS purs, comme bibliothèque graphique Charts.css.

Le problème ici devient qu’une fois que vous avez dépassé les graphiques à barres simples, vous devez utiliser beaucoup de hacks et de code CSS complexe pour obtenir ce que vous voulez. Cela peut fonctionner, et des bibliothèques comme Charts.css aidez beaucoup, mais ce n’est pas facile du tout.

C’est pourquoi je pense qu’avoir des éléments de graphique natifs dans le navigateur pourrait être incroyable. Peut-être quelque chose comme :

<linechart>
  <series id=”series_a”>
    <point x=”0” y=”2”/>
    <point x=”1” y=”4”/>
    <point x=”2” y=”6”/>
  </series>
  <series id=”series_b”>
    <point x=”0” y=”6”/>
    <point x=”1” y=”4”/>
    <point x=”2” y=”2”/>
  </series>
</linechart>

Vous pourrez alors contrôler l’espacement, la mise en page, les couleurs, etc. du graphique en utilisant le bon vieux CSS, y compris les requêtes de médias et de conteneurs, pour que vos graphiques soient beaux dans toutes les situations.

Bien sûr, c’est quelque chose qui est déjà possible grâce aux composants Web, et beaucoup expérimentent dans cette direction. Mais vous ne pouvez pas battre la simplicité du HTML/CSS pur.

Et aussi…

En voici quelques-unes plus rapides juste pour vous garder sur vos gardes :

Requêtes de style de conteneur

Vous savez peut-être déjà que les requêtes de conteneur vous permettent de définir le style d’un élément en fonction de la largeur ou de la hauteur de son élément conteneur. Requêtes de style conteneur laissez-vous faire la même chose, mais en fonction du style de ce conteneur – vous l’avez deviné -, et il existe déjà une implémentation expérimentale dans Chrome Canary.

Comme Geoff Graham soulignecela pourrait prendre la forme de quelque chose comme :

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

C’est un peu comme :has()si :has() vous permet de sélectionner en fonction des styles et pas seulement des propriétés et des attributs DOM, ce qui, maintenant que j’y pense, pourrait être une autre fonctionnalité intéressante aussi !

Nombres aléatoires

Les gens ont essayé de simuler un générateur de nombres aléatoires en CSS pendant longtemps (en utilisant le Technique du « principe de la cigale » et autres hacks), mais avoir un véritable caractère aléatoire intégré serait formidable.

UN Générateur de nombres aléatoires CSS serait utile non seulement pour la création de modèles, mais à chaque fois que vous avez besoin de rendre un design un peu plus organique. Il y a une proposition assez récente cela suggère une syntaxe pour cela, il sera donc intéressant de voir si nous obtenons jamais un CSS aléatoire !

Sélecteur de coordonnées de grille

Et si vous pouviez cibler des éléments de grille en fonction de leur position dans une disposition de grille ou de boîte flexible, soit en stylisant une ligne ou une colonne spécifique, soit même en ciblant un élément spécifique via son x et y coordonnées ?

Cela peut sembler être un cas d’utilisation de niche au début, mais comme nous utilisons de plus en plus Grid et Subgrid, nous pourrions également avoir besoin de nouvelles façons de cibler des éléments de grille spécifiques.

Meilleur style de formulaire

Le style des entrées de formulaire a traditionnellement été si pénible que de nombreuses bibliothèques d’interface utilisateur décident d’abstraire complètement l’entrée de formulaire native et de la recréer à partir de zéro en utilisant un tas de divs. Comme vous pouvez l’imaginer, même si cela peut donner lieu à des formulaires plus beaux, cela se fait généralement au détriment de l’accessibilité.

Et bien que les choses se soient améliorées, il y a certainement encore beaucoup de choses que nous pourrions améliorer en ce qui concerne la formation du style d’entrée et le style des widgets natifs en général. Le nouveau <selectmenu> élément proposition est déjà un bon début dans cette direction.

Animation en automatique

Nous avons tous rencontré ceci : vous voulez animer la hauteur d’un élément à partir de 0 à, eh bien, quelle que soit sa taille pour afficher son contenu, et c’est là que vous réalisez que CSS ne vous permet pas d’animer ou de passer à auto.

Il y a solutions de contournement, mais ce serait quand même bien de régler ce problème au niveau du navigateur. Pour que cela se produise, nous devrons également pouvoir utiliser auto à l’intérieur calcpar exemple calc(auto / 2 + 200px / 2).

Prédire le futur

Soyons réalistes une seconde : les chances que l’une de ces fonctionnalités soit implémentée (et encore moins prise en charge dans tous les principaux navigateurs) sont minces, du moins si nous envisageons les deux prochaines années.

Mais encore une fois, les gens pensaient la même chose à propos de :has() ou l’imbrication CSS native, et il semble que nous soyons sur la bonne voie pour pouvoir utiliser ces deux – et bien d’autres – dans notre code plus tôt que plus tard.

Alors reprenons la base dans cinq ans et voyons à quel point j’avais tort. Jusque-là, je continuerai à tracer le cours du CSS à travers nos enquêtes annuelles. Et j’espère que vous nous aiderez en répondre à l’enquête de cette année!

Merci à Lea Verou et Bramus Van Damme pour leur aide dans cet article.

(vf, yk, il)