CSS futuriste — Smashing Magazine

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 qu’ils souhaitent découvrir. L’enquête est ouverte dès maintenant, alors répondez-y !

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 a participé en tant que concepteur principal de l’enquête 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 l’imbrication CSS, ne sont même pas encore prises en charge), certaines fonctionnalités étaient si éloignées, invraisemblables et futuristes (ou simplement inventées !) que nous pouvions ‘t sur la bonne conscience les inclure dans l’enquête.

Mais c’est amusant de spéculer. Alors aujourd’hui, jetons un coup d’œil à certaines fonctionnalités CSS qui pourraient un jour arriver dans le navigateur… ou non !

Bascule CSS

L’astuce de la case à cocher CSS existe depuis plus de dix ans, et c’est toujours le seul moyen d’obtenir une sorte d ‘ »effet de basculement » en CSS pur (en fait, je l’ai récemment utilisé pour changer de langue dans cette page).

Mais et si nous avions courant Est-ce qu’il alterne, 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 la proposition CSS Toggles de Tab Atkins et Miriam Suzanne veut présenter. La proposition est assez complexe, et la quantité de détails et de cas marginaux 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 changement 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é la reconnaissance du fait que nous avons souvent fait un mauvais travail pour répondre aux besoins d’une population diversifiée. En termes de développement Web, cela signifie créer des 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 la proposition arrive :

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

Bien que la proposition initiale se concentre sur les tests available-inline-size comme moyen de configurer des dispositions de grille, on peut imaginer la même chose switch syntaxe qui est également utilisée pour de nombreux autres scénarios, en tant que plug-in pour les requêtes de conteneur et de média.

typographie intrinsèque

La typographie intrinsèque est une technique inventée par Scott Kellum, qui a développé l’outil de composition Typetura. 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 contenant :

Au lieu de modifier la taille et l’espacement du texte pour chaque composant à chaque point d’arrêt, le texte est chargé de répondre aux zones dans lesquelles il est placé. En conséquence, la typographie intrinsèque permet aux mises en page d’être beaucoup plus flexibles, s’adaptant à la zone dans laquelle elles se trouvent. placé, avec beaucoup moins de code.

Cela va au-delà de ce que la calculatrice de mise à l’échelle de type Utopia peut offrir, ce qui est déjà très utile car elle ne se met à l’échelle qu’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. Cependant, comme c’est souvent le cas, on peut imaginer que si cette approche s’avère populaire, tôt ou tard, elle fera son chemin vers le CSS natif.

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

rôles de frères et 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 l’équivalent de 10 déclarations CSS. L’inconvénient évident ici est que vous vous retrouvez avec dix lignes de code ! Que se passe-t-il également si votre liste contient plus de dix éléments ?

Une solution élégante actuellement en cours d’élaboration est la sibling-count() Oui sibling-index() Fonctions utilisant sibling-index()l’exemple ci-dessus deviendrait :

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

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

Modèles CSS

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

Maintenant, la structuration CSS pure existe depuis un certain temps (et est récemment devenue plus élaborée avec l’introduction de dégradés effilés), mais Yuan Chuan a définitivement introduit de nouveaux concepts clés, à commencer par la possibilité de randomiser des modèles 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’en aurait besoin, mais il est toujours amusant d’imaginer ce que nous pourrions faire avec seulement quelques propriétés centrées sur le modèle. Les @image La proposition pourrait être un pas dans cette direction, car elle 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 soumis de proposition ou même blogué à ce sujet. Mais en tant que personne qui passe beaucoup de temps à travailler sur des visualisations de données, je pense que des graphiques HTML/CSS natifs seraient géniaux !

Désormais, la plupart des graphiques que vous trouverez 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 Nivo de DataViz.

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

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

Le problème ici est qu’une fois que vous avez dépassé les graphiques à barres simples, vous devez utiliser de nombreuses astuces et un code CSS complexe pour obtenir ce que vous voulez. Cela peut fonctionner, et des bibliothèques comme Charts.css Cela aide beaucoup, mais ce n’est en aucun cas facile.

C’est pourquoi je pense qu’avoir des widgets natifs dans le navigateur pourrait être génial. 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 disposition, les couleurs, etc. du graphique en utilisant l’ancien CSS, y compris les conteneurs et les requêtes multimédias, afin 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 rapides juste pour vous garder sur vos gardes :

Requêtes de style conteneur

Vous savez peut-être déjà que les requêtes de conteneur vous permettent de styliser un élément en fonction de la largeur ou de la hauteur de l’élément conteneur. Les requêtes de style conteneur vous permettent de 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 le souligne Geoff Graham, cela 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()Oui :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 également être une autre fonctionnalité intéressante !

nombres aléatoires

Les gens essaient depuis longtemps de simuler un générateur de nombres aléatoires en CSS (en utilisant la technique du « principe de cigale » et d’autres astuces), mais avoir un véritable caractère aléatoire intégré serait formidable.

UN Générateur de nombres aléatoires CSS Ce serait utile non seulement pour créer des motifs, mais aussi à chaque fois que vous avez besoin de rendre un design un peu plus organique. Il existe une proposition assez récente suggérant une syntaxe pour cela, il sera donc intéressant de voir si nous obtenons un jour le caractère aléatoire CSS.

Sélecteur de coordonnées de grille

Et si vous pouviez cibler les éléments de la grille en fonction de leur position dans une disposition flexible de grille ou de boîte, soit en disposant une ligne ou une colonne spécifique, soit même en dirigeant un élément spécifique via votre x Oui 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 pouvons également avoir besoin de nouvelles façons de cibler des éléments de grille spécifiques.

meilleur style de forme

Le style d’entrée de formulaire a traditionnellement été si compliqué 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 divoui Comme vous pouvez l’imaginer, même si cela peut se traduire par des formes plus attrayantes, cela a généralement un coût d’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 mise en forme des styles d’entrée et des styles de widgets natifs en général. Le nouveau <selectmenu> La proposition d’élément est déjà un bon début dans cette direction.

Animation à la voiture

Nous avons tous rencontré cela : vous voulez animer la hauteur d’un élément depuis 0 a, eh bien, peu importe la taille dont il a besoin pour afficher son contenu, et c’est là que vous vous rendez compte que CSS ne vous permet pas d’animer ou de passer à auto.

Il existe des solutions de contournement, mais ce serait toujours bien que cela soit corrigé au niveau du navigateur. Pour cela, nous devrons également pouvoir utiliser auto à l’intérieur calcpar exemple calc(auto / 2 + 200px / 2).

prédire le futur

Maintenant, soyons réalistes une seconde : les chances que l’une de ces fonctionnalités soit implémentée (sans parler d’être prises en charge dans tous les principaux navigateurs) sont minces, du moins lorsque vous envisagez 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 le point d’utiliser ces deux, et bien d’autres, dans notre code le plus tôt possible.

Alors reprenons la base dans cinq ans et voyons à quel point je me trompais. D’ici là, je continuerai à tracer la voie du CSS par le biais de nos enquêtes annuelles. Et j’espère que vous nous aiderez en répondant au sondage de cette année !

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

(vf, yk, il)