Matcha.css – bibliothèque de stylage sémantique prête à l’emploi en pur CSS

 (matcha.mizu.sh)
4 points par GN⁺ 2024-05-25 | 1 commentaires | Partager sur WhatsApp
  • matcha.css stylise directement les éléments HTML comme une feuille de style navigateur par défaut, ce qui réduit le travail CSS manuel pour le prototypage rapide, le HTML statique et la documentation générée depuis Markdown
  • S’applique avec une seule ligne `` sans étape de build, dépendance, JavaScript ni configuration, pour une taille gzip par défaut d’environ 8.81kB
  • En s’appuyant sur la structure du document et les éléments sémantiques, gère uniquement en CSS des comportements comme les sous-menus `` implicites, l’indication * des champs obligatoires et les couleurs de bordure selon l’état de validation des champs
  • Propose les préréglages Default, Lite, Utility classes, Istanbul coverage ainsi qu’un custom builder, et permet aussi d’importer directement des répertoires de styles détaillés
  • Open source sous licence MIT, avec des classes utilitaires et des fonctions de layout pratiques, mais qui peuvent l’éloigner d’un usage fondé sur la sémantique puisqu’elles ajoutent des classes au document

Un CSS prêt à l’emploi pour styliser immédiatement un document HTML

  • matcha.css est une bibliothèque prête à l’emploi qui stylise les éléments HTML en pur CSS
  • Elle vise à rendre les éléments HTML agréables à l’œil, à la manière d’une feuille de style navigateur par défaut, sans que l’utilisateur ait à modifier directement son document
  • Elle convient au prototypage rapide, aux pages HTML statiques, à la documentation générée depuis Markdown, et aux développeurs qui veulent exploiter toute l’étendue des éléments HTML sans entrer profondément dans les détails du CSS
  • Cette page elle-même est stylisée avec matcha.css

Une intégration en une ligne, facile à retirer

  • Peut s’utiliser sans étape de build, dépendance, JavaScript, configuration ni refactorisation du document
  • La taille du build par défaut est de ~8.81kB en gzip
  • Il suffit d’ajouter la ligne suivante dans le `` du document
  • Pour le retirer, il suffit aussi d’enlever ce ``, sans nécessiter de refactorisation ni de nettoyage du document
  • Les assets sont hébergés sur Vercel et peuvent aussi être utilisés via JSdelivr, un service CDN pour les packages npm
  • Toutes les versions publiques sont disponibles dans le répertoire /v/, et la branche main est servie par défaut

Un stylage fondé sur la structure sémantique

  • matcha.css ajuste les styles en fonction de la structure du document et de la hiérarchie des éléments

  • Exemples de comportements automatiques

    • Imbriquer des éléments `` crée un sous-menu implicite
    • Quand est utilisé avec, un marqueur de champ obligatoire * est ajouté automatiquement
    • [data-color-scheme="light"] force le mode clair, et [data-color-scheme="dark"] force le mode sombre
    • [data-color-scheme] peut être appliqué à un élément précis pour forcer sélectivement un schéma de couleurs
    • :root définit les variables CSS, et @media (prefers-color-scheme) règle le mode selon les préférences de l’utilisateur
    • N’utilise pas de règle !important, ce qui facilite la surcharge des styles si nécessaire

Options de build et de déploiement

  • En plus du build par défaut, des builds préréglés sont proposés selon l’usage
    • Default ~8.81kB : tout le stylage sémantique et les fonctions supplémentaires, sauf @istanbul-coverage
    • Lite ~5.59kB : tout le stylage sémantique, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB : @root, @utilities
    • Istanbul coverage ~1.94kB : @root, @syntax-highlighting, @istanbul-coverage
  • Pour ne sélectionner que les fonctions nécessaires, il est possible d’utiliser le custom builder
  • Pour des personnalisations plus complexes, on peut aussi faire un fork puis appliquer ses propres correctifs
  • Chaque sous-répertoire de github.com/lowlighter/matcha/styles est servi directement depuis le site web
    • Par exemple, si l’on veut uniquement @syntax-highlighting, il est possible d’inclure directement le mod.css correspondant
    • Si votre propre CSS ne fournit pas ses variables CSS, le package @root sera probablement nécessaire
    • Tous les fichiers mod.css sont également proposés via des alias du répertoire parent pour plus de commodité

Étendue des éléments HTML stylisés

  • Structure du document

    • Stylise section, article, header, footer, aside, nav, menu, hgroup, les éléments de titre, etc.
    • `` est conçu pour s’intégrer naturellement lorsque le conteneur parent utilise display: flex
    • Dans , s’affiche comme un fil d’Ariane, et `` comme une liste de navigation

  • Texte et éléments inline

    • Fournit des styles pour , , , , , , , , , , , , , , , , , , `` et autres
    • Comme les info-bulles natives du navigateur ne peuvent pas être stylisées, il faut utiliser l’attribut [data-title] au lieu de [title] pour les info-bulles CSS

  • Éléments de formulaire

    • Stylise , , , , , , , , ``
    • N’effectue aucune validation supplémentaire au-delà de celle réalisée par le navigateur sur les champs de saisie
    • :user-valid applique une bordure --success, et :user-invalid une bordure --danger
    • Le motif permet de détecter automatiquement si un champ est requis, mais ce n’est pas possible avec le motif

  • Tableaux et médias

    • `` applique border collapse et active automatiquement l’overflow si le parent a une largeur définie
    • Peut être enveloppé dans un conteneur .table-responsive
    • , , `` reçoivent un style à coins arrondis

  • et

    • et font aussi partie des cibles stylisées par défaut
    • Le ::backdrop de `` s’affiche lors de l’utilisation de dialog.showModal()
    • L’usage de `` est recommandé afin que le navigateur puisse fermer la boîte de dialogue à la soumission sans JavaScript

Les fonctions de layout : pratiques, mais avec un coût

  • matcha.css propose aussi des options de layout pour le document
  • Ajouter la classe .layout-simple à un élément active un layout simple
  • La structure requise inclut .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type, etc.
  • La structure varie selon les conditions media
    • Sur l’écran par défaut, la composition se concentre sur header et main
    • À partir de min-width: 960px, on passe à une composition aside + main
    • À partir de min-width: 1280px, la disposition utilise deux aside et main
  • Sur les petits écrans, aside:nth-of-type(1) est masqué, mais il peut être réaffiché avec data-expand ou rendu repliable avec data-expandable
  • L’utilisation du layout peut exiger une refactorisation du document, et en cas d’abandon ultérieur de matcha.css, une nouvelle refactorisation peut être nécessaire

Les classes utilitaires restent des fonctions annexes

  • matcha.css fournit aussi quelques classes utilitaires pour plus de commodité
  • Les classes liées aux couleurs sont les suivantes
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* modifie la couleur des bordures, bg-* la couleur d’arrière-plan et fg-* le style au premier plan
  • .flash permet de créer un bloc visuellement accrocheur, combinable avec les classes de couleur
  • Propose des utilitaires liés au texte, à la taille, au positionnement, à display, à flex, à l’overflow, au curseur, à la sélection, à pointer-events, au dimensionnement, à resize, aux ombres et au fill/stroke SVG
  • Les marges et paddings utilisent des classes numérotées fondées sur les valeurs 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4
  • Comme les classes utilitaires doivent être ajoutées au document, elles peuvent rendre plus difficile une sortie ultérieure de matcha.css
  • Si les utilitaires fournis sont insuffisants ou trop limités, il peut être pertinent d’envisager l’usage d’un framework CSS utility-first ou une migration vers celui-ci
  • matcha.css ne vise pas à devenir un framework CSS complet

Affichage du code, apparence d’éditeur et Shadow DOM

  • matcha.css fournit des classes de coloration syntaxique qui suivent @media (prefers-color-scheme)
  • Des classes sont aussi incluses pour créer une apparence d’éditeur de code
    • La structure requise est .editor, > textarea, > div.highlight
    • Ces styles additionnels n’effectuent pas eux-mêmes la coloration syntaxique, ils ne stylisent que l’apparence d’un éditeur de code
    • Pour la vraie coloration, une bibliothèque comme highlight.js est nécessaire
  • matcha.css définit aussi des variables CSS via la pseudo-classe :host, ce qui le rend compatible avec le Shadow DOM
  • Dans un Shadow DOM, il est possible de réimporter matcha.css et d’appliquer des styles personnalisés séparés, tout en évitant les conflits avec le reste du document grâce à l’isolation

Compatibilité navigateur et licence

  • matcha.css indique avoir été conçu pour être compatible avec tous les navigateurs modernes
  • Le tableau de compatibilité inclut notamment Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93% et Samsung Internet 96%
  • Le projet est publié en open source sous licence MIT
  • Le dépôt se trouve sur github.com/lowlighter/matcha

À lire aussi

1 commentaires

 
GN⁺ 2024-05-25
Avis sur Hacker News

  • J’aime l’idée de faire revivre HTML comme source unique de vérité pour la mise en page des documents, et cela semble pouvoir être productif pour des documents qui n’ont pas besoin d’un design complexe.
    En revanche, les choix de design par défaut, surtout les couleurs et les finitions, me laissent sur ma faim. Je ne suis pas designer professionnel, mais j’ai eu suffisamment d’utilisateurs mécontents de logiciels que j’ai créés pour être capable de sentir qu’il y a quelque chose d’un peu maladroit par rapport à ce que produirait un bon designer avec des notions de théorie des couleurs, de densité d’information et de dégradés.
    Si l’auteur lit ceci, je me demande s’il a envisagé de s’inspirer de l’esthétique d’autres projets FOSS comme Bulma ou Tailwind, ou de collaborer avec un designer professionnel. Je crois que jgthms passe aussi parfois sur ce site.

    • Merci pour le retour constructif ; en fait, j’ai été un peu surpris que cela arrive sur HN avant même que je poste moi-même un Show HN.
      Je ne suis ni développeur front-end ni designer, donc mon manque de connaissances en théorie des couleurs, accessibilité et autres éléments qui peuvent sembler évidents à d’autres peut transparaître. C’est probablement aussi pour cela qu’il y a un côté artisanal.
      Je vais approfondir les points mentionnés. Pour une collaboration avec un designer professionnel, je suis ouvert aux conseils, mais je n’ai pas prévu d’en embaucher un pour un projet annexe. Pour l’instant, je ne vise pas vraiment les professionnels ; je pense que cela parlera davantage aux utilisateurs amateurs.
    • Moi aussi, j’ai une impression un peu étrange, mais cela m’est déjà arrivé avec des choses faites par des designers. Malgré tout, cela me paraît plutôt correct, comme si c’était fait par quelqu’un ayant un certain sens du design ou par un designer débutant.
      Plus je le regarde, plus l’ensemble me plaît, mais en même temps cette légère impression de maladresse devient aussi plus forte, ce qui est assez curieux.
      Modification : je pense que c’est peut-être la couleur de la tasse de thé qui me semble un peu étrange. J’aime le logo dans son ensemble, mais je me demande si la couleur de la tasse ne gagnerait pas à être plus proche de la couleur de fond du haut.
    • D’accord. Un exemple de ce ressenti maladroit est le style au survol des boutons.
      Du texte noir sur un fond sombre ne fonctionne pas bien, ni esthétiquement ni du point de vue de l’accessibilité. Si les réglages par défaut étaient un peu plus peaufinés, ce serait la cerise sur le gâteau.
    • Le site comporte une section permettant de créer directement un build personnalisé, ce qui donne un certain contrôle sur les choix de styles par défaut.
      Cela dit, un designer qui chercherait à s’aligner sur l’identité visuelle d’une entreprise peut passer des heures sur des détails comme les espacements, et cet outil ne semble pas fait pour ce public.

  • J’aime bien ces petites bibliothèques. J’utilise actuellement pico.css, mais je vais aussi regarder celle-ci. À mon avis, les éléments DOM standard du navigateur devraient ressembler à cela par défaut.
    Mais en pratique ce n’est pas le cas, d’où l’existence de ce genre de bibliothèques. En voyant le commentaire d’un autre utilisateur, j’ai cherché ce que “classless” signifiait pour cette bibliothèque et je suis tombé sur une liste de bibliothèques similaires.
    https://github.com/dbohdan/classless-css

    • Je suis d’accord avec l’idée que “les éléments DOM standard du navigateur devraient ressembler à cela par défaut”, mais cela pourrait aussi devenir un cauchemar pour ceux qui veulent créer leurs propres styles. Les styles par défaut actuels sont déjà un peu pénibles de ce point de vue.
      Depuis longtemps, je me dis qu’il serait utile d’avoir une bascule entre style chrome et style de contenu. Les barres de navigation, visualisations intégrées et éléments interactifs resteraient en mode chrome avec un style par défaut minimal, tandis que le corps du texte recevrait le style préféré de l’utilisateur.
    • Il existe aussi un site pour tester rapidement ce genre de choses. Celui que je connais est https://www.cssbed.com/.
    • J’adore pico.css. C’est un compromis assez complet, rapide et facile à apprendre.
      La combinaison Flask + HTMX + AlpineJS + PicoCSS est actuellement ma “SPA tout en Python et HTML”.

  • Cela a l’air intéressant, mais supprimer le soulignement des liens et dépendre uniquement de la couleur avant le survol est très mauvais du point de vue de l’accessibilité.

    • Les personnes ayant une déficience de la perception des couleurs peuvent ajouter une extension CSS qui souligne ou met en évidence les liens.
      Les personnes aveugles utilisent des lecteurs d’écran ou des afficheurs braille, elles n’ont donc pas besoin de soulignement. Qui d’autre a besoin de soulignements ?

  • Cela semble prometteur. J’utilise Simple.css : https://simplecss.org/
    À première vue, matcha.css semble un peu plus avancé, donc je vais essayer.

  • Il faudrait peut-être un outil pour générer ce genre de framework CSS sans classes. Chacun pourrait alors ajuster finement sa palette de couleurs, les paddings, la taille des polices, etc.

  • Pendant 30 ans, nous avons utilisé des barres de défilement proportionnelles comme contrôles standard. On pouvait savoir quelle portion du document la fenêtre affichait, et cliquer sur la barre de défilement pour se déplacer facilement à une position proportionnelle à la taille du document.
    On pouvait aussi utiliser les flèches au-dessus et au-dessous de la barre de défilement, la sélectionner avec Tab puis la manipuler au clavier. En cas de limitations visuelles ou motrices, on pouvait augmenter le contraste ou la taille via les paramètres du système d’exploitation.
    Mais sur le web en 2024, les gens cassent régulièrement les barres de défilement et en font un cauchemar d’expérience utilisateur. Il est honteux que l’UI/UX des navigateurs se soit dégradée au point que CSS puisse complètement saboter des contrôles standard fournis par le système d’exploitation qui fonctionnaient très bien.
    S’il vous plaît, n’utilisez pas ça.

    • Je suis fortement en désaccord.
      Les contrôles standard fournis par les systèmes d’exploitation se sont aussi dégradés avec le temps. Par exemple, les barres de défilement qui disparaissent chez Apple et les cases à cocher arrondies.
      On ne peut pas les modifier facilement, alors qu’avec CSS on peut au moins améliorer ces contrôles standard.

  • J’aime la fonction de prévisualisation qui permet de voir à quoi cela ressemblerait sur d’autres sites web. C’est vraiment intuitif et parfaitement adapté à une page CSS.

  • Impossible de ne pas mentionner le dépôt Spark Joy de Swyx :
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Pourquoi continue-t-on encore à créer de nouveaux frameworks CSS ? Pourquoi ce problème n’est-il pas déjà résolu ?

    • Ce n’est pas un framework CSS, mais une feuille de style que l’on inclut quand on ne veut pas se soucier du CSS ou du styling, tout en obtenant un site qui a une apparence correcte.
    • Une grande partie du CSS relève de l’art et de l’esthétique. Le travail sur CSS ne sera jamais “terminé”.
      Tant que des artistes voudront s’exprimer sur le média qu’est le web, de nouvelles feuilles de style et de nouveaux “frameworks” continueront d’apparaître.