提案中のclass-prefix selector、3状態color mode、9セルtile文法がCSS構造を高速で読みやすいinterface ruleへ変えます。 開発ですぐ活用できるよう整理しました。
提案中のClass Prefix Selectorはbase classを加えたりsubstring attribute selectorを使ったりせず、.btn-*で.btn-primaryや.btn-dangerのfamilyを選べるようにします。css-selector-benchmarkでは通常class selectorが毎秒6,000回を超えた一方、attribute回避策は最低328回で約20倍の差でした。CSS Working Groupは当初提案から2年後の8月、Selectors Level 5へ加えると決議しました。空prefixのmatch、不正なclass文字、共通wildcard syntaxは未解決です。有望なspecification作業ですが、今日deployできるbrowser featureではありません。
Binaryなlight-or-dark controlは、多くの利用者が持つ第三の選好、つまりOSへ追従する選択を暗黙に捨てます。三状態controlはlight、dark、systemを明示値として保つため、利用者がoverrideするまでOS themeの変更が反映されます。24時間の公開pollでは43人が三状態、6人がbinary switchを選びました。Articleはこのsignalを意味論の代替ではなく検証に使います。実装はsystemを明確にlabelし、正確な値を保存し、現在のcomputed themeから推測してはいけません。一状態を足すことで利用者のintentを可逆かつ確認可能にします。
Carmen AnsioはBarcelonaのhydraulic-tile geometryを一枚のstatic illustrationとして写さず、再利用可能なCSS systemへ移します。各tileは9×9 gridで、cellはradial・linear gradient、border radius、transform、共有custom propertyを組み合わせます。Fan、lens、star、cornerなどのnamed shapeがvisual grammarをremixできるほど読みやすくします。色とgeometryを分離し、assetを描き直さず複数のpaletteやarrangementを作れます。小さなvocabularyを見つけcomponentにencodeし、layoutにvariationを組ませる装飾UI patternです。
提案中のClass Prefix Selectorはbase classを加えたりsubstring attribute selectorを使ったりせず、.btn-*で.btn-primaryや.btn-dangerのfamilyを選べるようにします。css-selector-benchmarkでは通常class selectorが毎秒6,000回を超えた一方、attribute回避策は最低328回で約20倍の差でした。CSS Working Groupは当初提案から2年後の8月、Selectors Level 5へ加えると決議しました。空prefixのmatch、不正なclass文字、共通wildcard syntaxは未解決です。有望なspecification作業ですが、今日deployできるbrowser featureではありません。
Binaryなlight-or-dark controlは、多くの利用者が持つ第三の選好、つまりOSへ追従する選択を暗黙に捨てます。三状態controlはlight、dark、systemを明示値として保つため、利用者がoverrideするまでOS themeの変更が反映されます。24時間の公開pollでは43人が三状態、6人がbinary switchを選びました。Articleはこのsignalを意味論の代替ではなく検証に使います。実装はsystemを明確にlabelし、正確な値を保存し、現在のcomputed themeから推測してはいけません。一状態を足すことで利用者のintentを可逆かつ確認可能にします。
Carmen AnsioはBarcelonaのhydraulic-tile geometryを一枚のstatic illustrationとして写さず、再利用可能なCSS systemへ移します。各tileは9×9 gridで、cellはradial・linear gradient、border radius、transform、共有custom propertyを組み合わせます。Fan、lens、star、cornerなどのnamed shapeがvisual grammarをremixできるほど読みやすくします。色とgeometryを分離し、assetを描き直さず複数のpaletteやarrangementを作れます。小さなvocabularyを見つけcomponentにencodeし、layoutにvariationを組ませる装飾UI patternです。
CSS Working Groupは、.btn-*のようなsyntaxを使うClass Prefix SelectorをSelectors Level 5へ追加すると決議しました。すべてのclassを列挙したりsubstring attribute selectorへ頼ったりせず、命名familyを対象にします。あるbenchmarkでは通常のclass selectorが毎秒6,000回を超えた一方、attributeによる回避策は328回まで落ち、約20倍遅く、frame budgetの約3msを消費しました。
Theme controlにも同じく明示的なmodelが必要です。light-or-dark switchではOSに追従したい利用者を表せないため、持続的なcontrolにはlight、dark、systemの状態が必要です。小規模な公開pollは43対6で三状態modelを支持しましたが、より強い根拠は意味論です。値を明示的に保存し、systemを明確に表示して、利用者が変更するまでOSの変化を反映させます。
Carmen Ansioのmodernist tileは同じ発想の構成面を示します。各tileは9×9のCSS Gridで、cellはgradient、border、transformと小さなshape vocabularyから反復可能なmotifを作ります。geometryに名前を付けることで視覚referenceが編集可能なruleとなり、一回限りのcoordinateの山にせずdesignを拡張・変形できます。