Miriam Suzanne est auteur, artiste et développeuse Web à Denver, dans le Colorado. Elle travaille actuellement sur des spécifications CSS intéressantes, telles que les requêtes de conteneurs et les calques Cascade.
Cet article fait partie de Designcember. Une célébration de la conception Web, proposée par web.dev.
Miriam Suzanne est auteure, artiste et développeuse Web à Denver, dans le Colorado. Elle est cofondatrice d'OddBird (une agence Web), rédactrice pour CSS Tricks, membre de l'équipe principale Sass et experte invitée du W3C dans le groupe de travail CSS. Dernièrement, elle s'est concentrée sur le développement de nouvelles fonctionnalités CSS, telles que les couches Cascade, les requêtes de conteneur et le champ d'application. Hors connexion, Miriam est une romancière, dramaturge et musicienne publiée. Nous avons parlé de son travail avec Sass et CSS.
Rachel:J'ai découvert votre travail grâce à Susy, qu'est-ce qui vous a poussé à créer cela ?
Miriam:En 2008, la mise en page sur le Web était très différente. Les développeurs ont abandonné la disposition en table au profit de grilles flottantes plus sémantiques (mais toujours piquantes). Les "frameworks de grille" à 12 colonnes, qui offrent une grille prédéfinie (généralement statique) avec un ensemble de classes CSS prédéfinies, ont connu un essor. Si vous aviez besoin de quelque chose de plus personnalisable, vous étiez seul. Il était évident que les sites Web devaient devenir plus réactifs, mais les requêtes média n'étaient pas encore disponibles et de nombreux problèmes de compatibilité des navigateurs se produisaient autour des floats fluides.
J'utilisais l'approche CSS Systems de Natalie Downe, qui était intelligente pour répondre aux tailles de police et de fenêtre d'affichage, mais j'étais frustrée par toutes les astuces mathématiques et des navigateurs pour y parvenir. Au même moment, Sass commençait à attirer l'attention, et il correspondait parfaitement à ce dont j'avais besoin. Le premier brouillon de Susy était très simple: juste quelques mixins pour faire les calculs et ajouter les astuces dont j'avais besoin. L'objectif était d'être minimal et de ne générer que le code essentiel. Grilles entièrement personnalisables, sans classe prédéfinie
Rachel:Comment êtes-vous passé d'un préprocesseur CSS à des spécifications CSS ? Pensez-vous que travailler sur le préprocesseur a été une bonne formation pour rédiger des spécifications ?
Miriam:D'après mon expérience, il y a beaucoup de chevauchements, et je suis toujours très actif de part et d'autre. Je pense toutefois que cela est principalement dû à l'équipe Sass, dirigée par Natalie Weizenbaum, qui adopte une vision à très long terme : elle s'efforce de développer des outils qui s'intègrent parfaitement aux normes Web en cours de développement. Ne vous contentez pas d'une approche universelle. et à développer une flexibilité à long terme est essentiel lorsque vous réfléchissez à l'avenir des normes Web fondamentales.
Comment créer des outils qui respectent la diversité des besoins et des approches des développeurs, tout en encourageant et facilitant l'accessibilité et d'autres considérations importantes ?
Rachel:Beaucoup d'éléments arrivent dans le langage CSS et remplacent essentiellement les fonctionnalités qui faisaient généralement partie de Sass. Y a-t-il de fortes raisons de continuer à utiliser quelque chose comme Sass ?
Miriam:Oui, pour certaines personnes, mais il n'y a pas de réponse universelle. Prenons l'exemple des variables. Les variables Sass ont une portée lexique et sont compilées sur le serveur, avec des structures de données organisées telles que des listes et des objets, la manipulation des couleurs, etc. C'est idéal pour la logique du système de conception qui n'a pas besoin de s'exécuter dans le navigateur.
Les variables CSS se chevauchent légèrement et peuvent également stocker des valeurs. Toutefois, elles fournissent un ensemble complètement différent de points forts et de points faibles basés sur la cascade. Sass ne peut pas gérer les propriétés personnalisées, et le CSS n'est pas vraiment capable de gérer les données structurées. Les deux sont utiles et puissants, mais vos besoins spécifiques peuvent varier.
Je pense que c'est génial quand les gens peuvent éliminer les outils dont ils n'ont plus besoin, et que certains projets peuvent ne pas nécessiter à la fois des variables côté serveur et côté client. Parfait. Mais il est trop simple de supposer qu'ils sont identiques et que l'un remplace simplement l'autre. Il y aura toujours des cas d'utilisation pour une logique de conception côté serveur et d'autres côté client, même si les langages fournissent essentiellement les mêmes fonctionnalités. Les préprocesseurs nous accompagnent sur le long terme.
Rachel:Y a-t-il quelque chose qui vous a surpris lorsque vous vous êtes davantage impliqué dans le travail de création de normes, ou quelque chose dont vous pensez que les gens ne sont généralement pas au courant du processus ?
Miriam:Avant de m'impliquer, le processus de normalisation me semblait étrange et magique, et je ne savais pas à quoi m'attendre. J'avais peur de ne pas avoir suffisamment de connaissances sur les composants internes du navigateur pour apporter ma contribution, mais en réalité, ils n'ont pas besoin de plus d'ingénieurs en navigateur. Elles ont besoin de plus de développeurs et de concepteurs qui créent des sites Web et des applications dans le monde réel.
J'ai été surpris de constater que très peu de personnes concernées se concentrent principalement sur les normes, mais que très peu d'entre elles développent ou conçoivent des sites Web. Le W3C se compose de "bénévoles" des organisations membres (souvent payées par ces organisations, mais pas comme leur travail principal) et l'adhésion n'est pas onéreuse. Cela éloigne les participants des concepteurs et des développeurs quotidiens, en particulier ceux d'entre nous qui travaillent avec des clients dans de petites agences ou en indépendant. Mon rôle d'expert invité serait entièrement bénévole, un passe-temps coûteux, si je n'avais pas trouvé de financement extérieur pour ce travail.
En réalité, le processus est assez ouvert et public, et nécessite l'intervention de développeurs. Mais il y a toujours tellement de conversations en même temps qu'il peut être difficile de trouver sa place. Surtout si ce n'est pas votre travail.
Rachel:Les requêtes avec des conteneurs sont le Saint Graal de nombreux développeurs Web depuis de nombreuses années. Je me réjouis de pouvoir compter sur elles. J'ai l'impression que beaucoup de gens réfléchissent à l'utilité des requêtes conteneurisées. Pensez-vous qu'elles ont également le potentiel de stimuler la créativité ?
Miriam:Absolument, même si je ne vois pas les deux cas comme étant entièrement distincts. Nous avons tous peu de temps, et nous essayons d'écrire un code facile à gérer et performant. Lorsqu'une activité est difficile dans la pratique, nous avons moins de chances de laisser libre cours à notre créativité.
Pourtant, l'industrie du Web est aujourd'hui dominée par les grandes entreprises, qui obtiennent toujours plus de temps de communication que les artistes Web. Et je pense que nous perdons beaucoup de choses si nous ignorons la créativité Web comme principal cas d'utilisation des fonctionnalités. J'ai hâte de voir des personnes qui maîtrisent le CSS avec le prototype de requête de conteneur. Jhey Tompkins a conçu une démo particulièrement intelligente et interactive des stores vénitiens CSS pour commenter le vieux mème anti-CSS. Je pense qu'il y a beaucoup plus à explorer dans ce domaine, et j'ai hâte de voir ce que les autres ont imaginé.
Nous nous sommes également concentrés sur les requêtes basées sur la taille (comme le cas d'utilisation initial), mais j'ai hâte de voir ce que les utilisateurs font avec les requêtes de style : la possibilité d'écrire des styles conditionnels en fonction de la valeur d'une propriété ou d'une variable CSS. Il s'agit d'une fonctionnalité extrêmement puissante, qui n'a pour l'instant pas été explorée. Je pense que cela offre encore plus d'opportunités créatives !
Rachel:Y a-t-il quelque chose que nous ne pouvons pas faire (ou que nous proposerons prochainement) dans les CSS ?
Miriam:J'ai hâte de découvrir les autres spécifications sur lesquelles j'ai travaillé. Les calques en cascade offrent aux auteurs davantage de contrôle sur les problèmes de spécificité, et la portée devrait les aider à cibler plus précisément les sélecteurs. Mais ces deux problèmes sont des problèmes d'architecture de haut niveau. L'artiste en moi est plus enthousiaste à l'égard des fonctionnalités comme les boutons d'activation/de désactivation CSS, une méthode déclarative permettant de créer des styles interactifs ou les "timelines" de conteneurs, qui nous permettent de faire passer en douceur des valeurs entre des points d'arrêt multimédias ou de conteneurs. Cela a des implications très pratiques pour la typographie réactive, mais cela ouvrirait également de nombreuses opportunités créatives pour le graphisme et l’animation réactifs.
Rachel:Qui d'autre réalise actuellement du contenu vraiment intéressant, amusant ou créatif sur le Web ?
Miriam:Je ne sais même pas comment répondre, car il y a tellement de personnes qui font des créations dans des domaines aussi différents. De nombreux projets concernant les normes du CSSWG et d'Open-UI sont en cours, y compris concernant la fragmentation. Mais ce sont souvent les artistes Web qui m'inspirent le plus, et la façon dont les gens mettent ces outils en production, d'une manière qui n'est pas directement liée au commerce. Des internautes comme Jhey, Lynn Fisher ou Yuan Chuan, ou bien d'autres personnes qui repoussent les limites des technologies Web, de manière visuelle et interactive. Même les personnes dont le travail est davantage axé sur l'entreprise peuvent apprendre beaucoup de leurs techniques artistiques.
J'apprécie également l'art du Web plus conceptuel de personnes comme Ben Grosser, qui ne cesse de nous pousser à redéfinir ce que nous voulons du Web, et des réseaux sociaux en particulier. Découvrez son nouveau minus.social, par exemple.
Rachel:Pour en savoir plus sur le travail de Miriam sur les CSS, rendez-vous sur css.oddbird.net et découvrez son actualité en consultant son site Web à l'adresse miriam.codes et Twitter @TerribleMia.