Matcha.css – 純粋なCSSで実装されたドロップインのセマンティックスタイリングライブラリ
(matcha.mizu.sh)- matcha.cssは、HTML要素をブラウザのデフォルトスタイルシートのようにそのまま整え、迅速なプロトタイピング、静的HTML、Markdown生成ドキュメントでの手作業のCSS作業を減らす
- ビルド手順、依存関係、JavaScript、設定なしで**`` 1行で適用でき、デフォルトのgzipサイズは約8.81kB**
- 文書構造とセマンティック要素を活用し、``サブメニュー、必須入力の
*表示、入力検証状態ごとの枠線色といった挙動をCSSだけで処理する - Default、Lite、Utility classes、Istanbul coverageプリセットとcustom builderを提供し、細かなスタイルディレクトリも直接読み込める
- MITライセンスのオープンソースで、ユーティリティクラスやレイアウト機能は便利だが、ドキュメントにクラスを追加するため、セマンティックベースの利用からは距離が生じる可能性がある
HTMLドキュメントをそのまま整えるドロップインCSS
- matcha.cssは、純粋なCSSでHTML要素をスタイリングするドロップインライブラリ
- ユーザーがドキュメントを直接修正しなくても、ブラウザのデフォルトスタイルシートに似た形でHTML要素を見栄えよくすることに重点を置いている
- 迅速なプロトタイピング、静的HTMLページ、Markdownから生成されたドキュメント、CSSの細部を深く扱わずにHTML要素全体を活用したい開発者に適している
- このページ自体もmatcha.cssでスタイリングされている
1行で導入でき、簡単に戻せる
- ビルド手順、依存関係、JavaScript、設定、ドキュメントのリファクタリングなしで利用できる
- gzip基準のデフォルトビルドサイズは
~8.81kB - ドキュメントの``に次の1行を追加すると適用される
- 削除する場合も該当する``を外せばよく、ドキュメントのリファクタリングや整理が不要になるよう設計されている
- アセットはVercelでホストされており、npmパッケージを配布するCDNサービスであるJSdelivrからも利用できる
- すべての公開バージョンは/v/ディレクトリで提供され、デフォルトでは
mainブランチが配信される
セマンティック構造を活用したスタイリング
- matcha.cssは、文書構造と要素階層を基準にスタイルを調整する
-
自動動作の例
- ``要素をネストすると暗黙的なサブメニューを作る
がと一緒に使われると、必須フィールド表示の*を自動で付ける[data-color-scheme="light"]はライトモードを強制し、[data-color-scheme="dark"]はダークモードを強制する[data-color-scheme]は特定の要素に適用して、選択的にカラースキームを強制できる:rootはCSS変数を設定し、@media (prefers-color-scheme)はユーザー環境設定に応じてモードを設定する!importantルールを使わないため、必要に応じてスタイルを上書きしやすい
ビルドと配布の選択肢
- デフォルトビルドのほか、目的別のプリセットビルドを提供する
- Default
~8.81kB:@istanbul-coverageを除くすべてのセマンティックスタイリングと追加機能 - Lite
~5.59kB: すべてのセマンティックスタイリング、@break-words、@discrete-scrollbars - Utility classes
~3.43kB:@root、@utilities - Istanbul coverage
~1.94kB:@root、@syntax-highlighting、@istanbul-coverage
- Default
- 必要な機能だけを選ぶにはcustom builderを利用できる
- より複雑なカスタマイズは、fork後に直接パッチする方法も可能
- github.com/lowlighter/matcha/stylesの各サブディレクトリは、Webサイトから直接配信される
- 例えば
@syntax-highlightingだけを使うなら、該当するmod.cssを直接含められる - 独自のCSS変数を提供しない場合、
@rootパッケージが必要になる可能性が高い - すべての
mod.cssファイルは、利便性のため親ディレクトリのエイリアスでも提供される
- 例えば
スタイリングされるHTML要素の範囲
-
文書構造
section、article、header、footer、aside、nav、menu、hgroup、見出し要素などをスタイリングする- ``は、親コンテナが
display: flexの場合に自然に統合されるよう設計されている 内のはbreadcrumbのように表示され、``はナビゲーションリストのように表示される
-
テキストとインライン要素
、、、、、、、、、、、、、、、、、、``などにスタイルを提供する- ブラウザのデフォルトツールチップはスタイリングできないため、CSSツールチップには
[title]の代わりに[data-title]属性を使うようにする
-
フォーム要素
、、、、、、、、``をスタイリングする- 入力要素は、ブラウザが行う検証以外の追加検証は行わない
:user-validには--successの枠線、:user-invalidには--dangerの枠線を適用するパターンを使うとrequiredかどうかを自動検出できるが、パターンでは不可能
-
表とメディア
- ``にはborder collapseを適用し、親に幅がある場合は自動overflowを使う
.table-responsiveコンテナで包むことができる、、``には角丸スタイルを適用する
-
とともデフォルトのスタイリング対象- ``の
::backdropはdialog.showModal()使用時に表示される - 送信時にブラウザがJavaScriptなしでdialogを閉じるよう、``の使用を推奨する
レイアウト機能の利便性とコスト
- matcha.cssはドキュメントレイアウトのオプションも提供する
.layout-simpleクラスを要素に追加すると、シンプルレイアウトを有効にする- 必要な構造には、
.layout-simple、header:first-of-type、main:only-of-type、aside、nav、footer:last-of-typeなどが含まれる - メディア条件に応じて構造が変わる
- デフォルト画面では
headerとmain中心で構成される min-width: 960pxではasideとmainの構成になるmin-width: 1280pxでは2つのasideとmainの構成を使う
- デフォルト画面では
- 小さい画面では
aside:nth-of-type(1)が非表示になり、data-expandで再表示したり、data-expandableで折りたためるようにしたりできる - レイアウトの利用にはドキュメントのリファクタリングが必要になる場合があり、後からmatcha.cssの利用をやめる際にも再度リファクタリングが必要になる可能性がある
ユーティリティクラスは補助機能に近い
- matcha.cssは利便性のため、一部のユーティリティクラスも提供する
- 色関連のクラスは次のとおり
.default、.muted、.accent、.active、.variant、.success、.attention、.severe、.dangerbd-*は枠線色、bg-*は背景色、fg-*は前景スタイルを変える
.flashは注意を引くブロックを作り、色クラスと組み合わせられる- テキスト、サイズ、位置、display、flex、overflow、cursor、selection、pointer-events、sizing、resize、shadow、SVG fill/stroke関連のユーティリティを提供する
- マージンとパディングは、
0、.125、.25、.5、.75、1、1.25、1.5、1.75、2、3、4の値を基にした番号型クラスを使う - ユーティリティクラスはドキュメントにクラスを追加する必要があるため、後からmatcha.cssから離れにくくする可能性がある
- 提供されるユーティリティが不足している、または限定的だと感じる場合は、ユーティリティファーストのCSSフレームワークの利用または移行を検討すべき
- matcha.cssは完全なCSSフレームワークになることを目標としていない
コード表示、エディタ風の見た目、Shadow DOM
- matcha.cssは
@media (prefers-color-scheme)に従うシンタックスハイライト用クラスを提供する - コードエディタ風の形を作るためのクラスも含む
- 必要な構造は
.editor、> textarea、> div.highlight - この追加スタイルは実際のシンタックスハイライトを行わず、コードエディタ風の見た目だけをスタイリングする
- 実際のハイライトにはhighlight.jsのようなシンタックスハイライトライブラリが必要
- 必要な構造は
- matcha.cssは
:host疑似クラスを使ってCSS変数も定義するため、Shadow DOMと互換性がある - Shadow DOM内ではmatcha.cssを再度importし、別のcustom stylesを適用しても、ドキュメントの他の部分と衝突しないよう分離できる
ブラウザ対応とライセンス
- matcha.cssは、すべてのモダンブラウザと互換性があるよう作られているとしている
- 対応表にはChrome 92%、Edge 96%、Safari 94%、Firefox 95%、Opera 95%、Android Chrome 96%、iOS Safari 93%、Samsung Internet 96%などが含まれる
- オープンソースとして公開されており、MIT Licenseを使用する
- リポジトリはgithub.com/lowlighter/matchaにある
1件のコメント
Hacker News のコメント
ドキュメントのレイアウトにおける唯一の信頼できる情報源を HTML として復活させるという考え方は良いし、複雑なデザインが不要なドキュメントでは生産的になりそうに見える
ただしデフォルトのデザイン選択、特に色と仕上げは惜しい。プロのデザイナーではないが、自分で作ったソフトウェアにユーザーから不満を言われた経験は十分あるので、色彩理論・情報密度・グラデーションのような背景を持つ優れたデザイナーが作ったものと比べて、何かぎこちない感じは察知できる
作者が見ているなら、Bulma や Tailwind のような他の FOSS プロジェクトの美感を活用したり、プロのデザイナーと協業したりすることも検討したのか気になる。jgthms もたまにこのサイトにいると認識している
フロントエンド開発者でもデザイナーでもないので、色彩理論、アクセシビリティ、他の人には当然に見えるかもしれない要素についての知識不足が表れているかもしれない。そのため手作り感も出ているのだと思う
指摘された点は今後さらに調べるつもり。プロのデザイナーとの協業については、助言を受けることにはオープンだが、サイドプロジェクトなので別途雇う予定はない。現時点では専門家が主な対象ではなく、趣味ユーザーにより刺さるのではないかと思っている
長く見るほど全体としてはより良く見えるのに、同時に少しぎこちない感じも強まるのがかなり不思議
追記: たぶんティーカップの色が少しぎこちなく感じるのだと思う。ロゴ全体は気に入っているが、ティーカップの色を上部の背景色にもう少し近づけてみてはどうかと思う
暗い背景に黒い文字は、美的にもアクセシビリティ面でもうまく合っていない。デフォルト設定がもっと磨かれれば申し分ない
ただし企業のデザインルックに合わせようとするデザイナーなら余白などに何時間も費やすことがあり、このツールはそういう人たち向けではなさそう
こういう小さなライブラリは好き。今は pico.css を使っているが、これも確認するつもり。ブラウザの標準 DOM 要素は本来こう見えるべきだと思う
だが実際にはそうではないので、こうしたライブラリが存在する。他のユーザーのコメントを見て、このライブラリで “classless” が何を意味するのか調べていたら、似たライブラリの一覧を見つけた
https://github.com/dbohdan/classless-css
ずっと以前から、クロームスタイルとコンテンツスタイルを切り替える仕組みがあればいいと思っていた。ナビゲーションバーや埋め込みの可視化・インタラクション要素は最小限のデフォルトスタイルだけを受けるクロームモードにして、本文はユーザーが好むスタイルを適用される、という形だと良さそう
Flask + HTMX + AlpineJS + PicoCSS の組み合わせが、今の自分の “All Python and HTML SPA” だ
面白そうだが、リンクの下線をなくし、ホバー前は色だけに依存するのはアクセシビリティの面でかなり良くない
視覚障害者はスクリーンリーダーや点字ディスプレイを使うので下線は必要ない。では他に誰が下線を必要とするのか？
有望そう。自分は Simple.css を使ってきた: https://simplecss.org/
ざっと見たところ matcha.css のほうが少し進んでいるようなので、一度使ってみるつもり
例えば https://andybrewer.github.io/mvp/, https://oxal.org/projects/sakura/, https://yegor256.github.io/tacit/, https://chimera-demo.vercel.app/, https://watercss.kognise.dev/, https://missing.style/ などがある
残念ながら matcha はそれほど有望にも見えない。スタイル適用済みの要素を素早く見られるデモページがなく、カラーパレットは派手で、デフォルトのボタンホバーは暗い背景に暗い文字で読みにくい。明らかにもっと磨く必要がある
こうしたクラスなし CSS フレームワークを生成するツールが必要かもしれない。そうすれば各自がカラーパレット、パディング、フォントサイズなどを細かく調整できる
30年間、私たちは標準コントロールとして比例スクロールバーを使ってきた。現在のウィンドウがドキュメントのどの程度を表示しているか分かり、スクロールバーをクリックしてドキュメントサイズに比例した位置へ簡単に移動できた
スクロールバーの上下の矢印ボタンも使えたし、タブで移動してからキーボードで操作することもできた。視覚や運動能力に制約があれば、OS の設定でコントラストを高めたり大きくしたりできた
ところが 2024年の Web では、人々が日常的にスクロールバーを壊してユーザー体験の悪夢にしている。CSS が、もともとうまく機能していた OS 提供の標準コントロールを完全に台無しにできるようにしたことで、ブラウザ UI/UX が低品質化したのは恥ずべきことだ
どうかこれを使わないでほしい
OS が提供する標準コントロールも時間とともに悪くなった。例えば Apple の消えるスクロールバーや丸いチェックボックスがある
それらは簡単には変えられないが、CSS を使えば少なくともそうした標準コントロールを改善できる
他の Web サイトでどう見えるか確認できるプレビュー機能が気に入った。CSS ページには本当に直感的でよく合っている
Swyx の Spark Joy リポジトリは外せない:
https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...
その議論で言及された、スクリーンショット付きの別のリスト: https://github.com/dbohdan/classless-css
選択肢は本当に多い。今もっとも価値のある情報は、実際に使ってみたときの使い勝手がどうかだ
なぜ今でも新しいCSS フレームワークが作られ続けるのだろう？ なぜこれはすでに解決済みの問題ではないのだろう？
アーティストたちが Web という媒体で自分を表現したいと思う限り、新しいスタイルシートや「フレームワーク」は出続ける