CSSのより驚くべき力 – Codepen

キリアン・バルクフは今週良いものを持っています、 そのためにJavaScriptは必要ありません、の一部として htmlhell 毎年のアドベントカレンダー（ブログ投稿の）。彼は最小の力のルールで開きます：

特定の目的に適した最も強力な言語を選択します。

CSSは かわいい ウェブサイトを構築することに関しては、低言語。 （それはあなたがアセンブリにアコーディオンコンポーネントを書くようにしようとするという意味ではありません。）それは、彼がそれを置くように、それは次のことを意味します：

Webでは、これはCSSよりもHTMLを好むことを意味し、次にJSよりもCSSを好むことを意味します。

すでにJSレベルにいる場合は、JSフレームワークまたはメタ言語よりもJSを好むことを意味します。それらのことが価値がないということではありません（ヘック、Codepenの目的の1つは、言語の抽象化とライブラリを簡単に使用しています）、それは、より低いレベルに進む方が良いアイデアです。ダウンロードするのは少なくなり、破損することが少なく、ブラウザが最適化する可能性が高く、アクセス可能になる可能性が高く、時間の経過とともに長持ちする可能性が高くなります。そのようなもの 問題。

キリアンはカスタムの「トグル」コンポーネントでオープンします。実際、コンポーネントはおそらく強すぎます。これは、スタイルのHTMLチェックボックスです。これを作るために、それほど多くのCSSでもありません。

私が読んでいる間、どこで 考え キリアンは行っていました 実際にウェブサイトの機能をオンとオフにします。それは、明確なジャバスリクトの領域のように感じるようなものですが、それでも、古典的な「チェックボックスハック」（例： :checked セレクターとセレクターの組み合わせ）チェックボックスだけで多くのWebサイトを制御できます。

それを行う能力は、チェックボックスでウェブサイトを制御することで、私たちが持っている今、劇的に増加しています :has() CSSで。例えば：

  ... literally anywhere deep in the bowels of the DOM ...
  

心配する必要はありません どこ DOMでは、このチェックボックスはもうあり、スタイルを整えることができます 何でも 今このようにそこに：

body:has([.feature:checked]) .literally-anything {
  /* do styles */
}

スタイリングの選択肢を開始できます 身体レベルで上昇します と :has()、そのチェックボックス（本質的にトグル）とスタイルを探しています ページ上の何でも チェックされているかどうか。それは私にとって非常に強力だと感じています。

CSSとJavaScriptの精神的なクロスオーバーといえば、Yaphi Berhanu’s JavaScript関数からアイデアを借りて、より良いCSSを書いてください 面白かった。 CSSには実際には関数がありません（しかし、それを待ってください！）しかし、それはコードについての私たちの考え方がどのように関連するかを考慮することができないという意味ではありません。私は検討することについて少し好きでした パラメーターが多すぎます vs 十分なパラメーターがありません。 Yaphiは、そのアイデアをあまりにも多くのセレクターを繰り返し繰り返して宣言しすぎて接続しています。

しかし、私の心が行くところは、そのレッスンを受けて、それをカスタムプロパティに適用しようとしています。カスタムプロパティの使用を取るだけのCSSを見ました（そして書いた！） 遠すぎます – コードが容易ではなく、推論や維持が難しいと感じるまで。

アニメーションの変数を作成する場合のように…

.do-animation {
  animation: 3s ease-in 1s infinite reverse both running slidein;
}

あなた できた これを制御可能で再利用可能にする正しい方法は次のようなものであると判断します。

:root {
  --animation-duration: 3s;
  --animation-easing: ease-in;
  --animation-delay: 1s;
  --animation-direction: reverse;
  --animation-fill-mode: both;
  --animation-play-state: running;
  --animation-name: slidein;
}

.do-animation {
  animation: var(--animation-duration) var(--animation-easing) var(--animation-delay) var(--animation-direction) var(--animation-fill-mode) var(--animation-play-state) var(--animation-name);
}

多分あなたはそれが好きですか？しかし、私はそれがすでに行き過ぎていると思います。また、たとえば、デフォルトのフォールバックを設定する別の変数セット全体を持つことができるため、簡単に進むことができます。

それはあなたがやりたいことに依存しますが、あなたの目標が単に「再利用可能性」であるならば、

:root {
  --brandAnimation: 3s ease-in 1s infinite reverse both running slidein;
}

そして、必要なときにそれを使用することは、ベイビーベアのおridgeに近づきます。

少しリマインダー：移行中に眠らないでください。

Interop 2024が1月まで何をするかはわかりませんが、 提案、それは良いチャンスだと思います。

ジェレミー・キースはよく測定されたテイクを持っています ビューの移行をWebサイトに追加します。良いリソースへのリンクとそれを使用する例があります。 タイラーのゴーの素晴らしい投稿。それは更新で終わり、多分それがどのようにあるかについての警告で終わります ない 「レガシーコンテンツで機能を毒する」可能性があるため、このような素晴らしいアイデア。意味が多すぎると、これを行う人は、より良い人であっても、何かを変えることをためらうことができます。私は、改善の余地があると思うので、そのような選択が行われた場合、それが吸うことに同意します（例：移行グループ）。私は知らない、私はこのようなものが文字通り機能フラグの背後にあるので、それは十分だと思う あなた自身の責任で 警告。彼らがコードを破る何かを変更したい場合 私 出荷された、私はそれでかっこいいです。私は賭け金を知っています。

私たちはすぐにもっと興味深い例と経験を見始めると思います。そして！ゴッチャス！ニック・チャンのように 遷移と積み重ねのコンテキストを表示：なぜ私のCSSは、遷移を見るのはなぜz-indexを無視するのですか？ 混乱しています。それは、それが遷移されているときに要素であることをやめる要素のようなものです。彼らは要素のように見えますが、彼らは本当に一時的なラスター化された幽霊です。ただし、特別な擬似要素セレクターで選択することもできます。そのため、必要なことを完了できるはずです。

これは、ウェブサイトでダークモード /ライトモードのこと全体を行うことに複雑さを継承しています。あなたが尊重することを選ぶことができるシステム全体の好みの両方があり、それは良い考えです。そして、これを実装するサイトがおそらくそうです また テーマを設定するためにUIトグルを提供します。そのため、対処する必要がある2つの別々の好みのビットであり、コードはそれらを個別に処理する可能性があります。

クリストファー・カーク・ニールセン CSSコンテナスタイルのクエリを使用したテーマの未来 これの良い味を私たちに与えてくれます。すぐにジャンプしてコーディングしましょう：

/* No theme has been set, or override set to light mode */
html:where(:not([data-theme])),
:root[data-theme=light] {
  --color: black;
  --background: antiquewhite;
  /* … and all your other "variables" */
}

/* Apply dark mode if user preferences call for it, and if the user hasn't selected a theme override */
@media (prefers-color-scheme: dark) {
  html:where(:not([data-theme])) {
    --color: ghostwhite;
    --background: midnightblue;
    /* … and all your other "variables" */
  }
}

/* Explicitly set the properties for the selected theme */
:root[data-theme=dark] {
  --color: ghostwhite;
  --background: midnightblue;
  /* … and all your other "variables" */
}

あなたが私があなたが見ると思うことを読んだなら、あなたは必要です @media システムの設定に対処するには、HTMLが直接セットの好みに対処するために属性を属性し、一方が他方と重複する必要があります。

スタイルクエリを入力します。彼らが本当にいるのは次のとおりです。 「要素が特定のカスタムプロパティと価値を持っている場合、この他のことも行います。」 クリストファーの「将来のアプローチ」を使用することはより多くのコードですが、それがよりきれいで読みやすいことに同意します。

/* Optionally, we can define the theme variable */
@property --theme {
  syntax: ''; /* We could list all the themes separated by a pipe character but this will do! */
  inherits: true;
  initial-value: light;
}

/* Assign the --theme property accordingly */
html:where(:not([data-theme])),
:root[data-theme=light] {
  --theme: light;
}

@media (prefers-color-scheme: dark) {
  html:where(:not([data-theme])) {
    --theme: dark;
  }
}

:root[data-theme=dark] {
  --theme: dark;
}

/* Then assign the custom properties based on the active theme */
@container style(--theme: light) {
  body {
    --color: black;
    --background: antiquewhite;
    /* … and all your other "variables" */
  }
}

@container style(--theme: dark) {
  body {
    --color: ghostwhite;
    --background: midnightblue;
    /* … and all your other "variables" */
  }
}

しかし、クリストファーの記事をチェックしてください。もっとたくさんのことがあります。

少し良いol ‘ファッションのCSS熱意で終わりましょう。

何年もの間、高品質のWebサイトを作成することは、主に、デザイナーが何らかの形でアイデアをブラウザで機能させるために、困難な戦いのように感じたものと戦わなければならなかったことを意味していました。同時に、「本当に申し訳ありませんが、あなたが設計したこのソリューションはCSSではできません」のような文章 […]

これは、反対に変更されました。

レバレッジのレイアウトをエミュレートして自信を持って設計したい CSSグリッドの可能性 Figma、Adobe XD、Sketchなどの主要な設計ツールのいずれか？不可能です。

マティアス・オット、 新しいCSS

そして：

CSSがこれまでにできない（そうすべきではない）ことのために、私はまだサスを維持しますが、スタイルを書くときに私の心の最前線にいるのではなく、彼らは背景に消えています。そして、小さくて単純なプロジェクトのために、私はそれらをまったく使用しません。純粋なCSSだけです。私はそれが不足しているとは思っていません。

ジェフ・サンドバーグ、 CSSはまた楽しいです