かなり新鮮なCSS – Codepen

私は話している間に冗談を言った 先日ShoptalkでAdam Argyle 私たちが見ていたデモの1つに、CSS脳全体にあるデモの1つにもっと多くのCSSがあること。私たちは彼を見ていました カルーセルギャラリー これは、私が今まで見たCSSデモのより印象的なセットの1つです。 「カルーセル」という言葉にあなたの心を行き詰まらせないでください。ここでその言葉を使用するのは賢明だと思いますが、ここで開発されているCSSテクノロジーには、信じられないほどの数の用途があります。インタラクティブ性のスクロール、不活性、列のレイアウトなどに関連するもの。そのいくつかは、ブランドスパンキングの新しいものです。実際には ほんの数週間前、リンクしました Carousel Configurator そして言った：

実験的な機能のため、Google Chrome Canaryでのみ機能します。

当時はちょっと真実でしたが、機能はそうではありません それ もう実験的。すべての機能は、世界のために現在安定したリリースになっているChrome 135で公開されています。 もちろん、 このようなものを生産に展開しようとしている場合、プログレッシブエンハンスメントの観点から考える必要がありますが、これはいくつかの現実世界の動きです 巨大な CSSのもの。このようなものは、数年後に見て、カルーセルやカルーセルのような行動なら本当の間違いです。 そうではありません このように構築されました。これは、最高のパフォーマンス、最高のセマンティクス、そして最高のアクセシビリティの方法です。ブレヒトは すでにそれについてのブログ。それはすぐそこにある脈拍の指です。

CSSの土地では、他にかなり暑い ‘n’新鮮なものは何ですか？

• CSSマルチコールブロック方向ラッピング レイチェル・アンドリューによる – の最初の実装 columns 横切るのではなく、包むことができる。役に立つ。
• ミックスを解除できますか？ ミリアム・スザンヌによって – ミックスインは自分自身を次のように表現する可能性が高い @apply 最終的には（最終的に） 意図的に放棄されました 一度？）。カスタムプロパティとスタイルクエリでは、実際にカスケードの望ましい特性を持っていることで、すでにそれを行うことができます。何がしますか @apply それに対処するためにしますか？
• 機能CSSを検出します @starting-style サポート Bramus van Damme – いつか、 @supports at-rule(@starting-style) {} 動作しますが、そこには（🫥）はブラウザのサポートがまだありません。幸いなことに、スペーストグルトリックでそれを行う方法があります（これは最も多くのものです CSSで物事を曲げる心 あなたが私に尋ねるなら）。 CSS機能を最近テストする方法を混乱させていたと言及したいと思いますが、実際には値を返すので、それほど奇妙ではありません。私はする必要がありました @supports (color: light-dark(white, black) {} うまくいきました。に関連しています @starting-style、 これはかなり良い記事です。
• CSSの新しい値と関数 Alvaro Montoro – 新しい機能といえば、それらの多くの機能があります。 calc-size()、 first-valid()、 sibling-index()、 random-item()、そしてもっと。すばらしい。
• キーフレームコンボトリック by Adam Argyle – 単一の要素に2つのアニメーション、1つはページロード用、もう1つはスクロールアニメーション用です。彼らは戦います。それとも彼らは？
• コンテナクエリが解き放たれました Josh Comeau by – あなたが現在利用可能なものに骨を折っていないなら、誰も @container もの、それはルール、そしてジョシュはその理由を説明する素晴らしい仕事をしています。
• CSSインラインIF（）条件を使用したテーマの未来 クリストファー・カーク・ニールセンによって – ように見えます if() CSSでは、aのように動作します switch 他の言語では、カスタムプロパティの値が特定の値に等しいかどうかを確認し、必要な値を返すことです。強い！クリスはようなものを構築しています light-dark() ここでは、2つ以上のテーマと、テーマが単なる色よりも影響する場合を除きます。