CodePenで作ったものの振り返り#01
この記事は、自分のブログ記事の和訳です。
今月は、昨年のCSS Wrappedで紹介されたCSSの新フィーチャーズや、興味のある機能、ネットで見た誰かがやっているファンシーなPensの簡単な写経など、Penをかなり作ってみました（別の会社で新しい仕事を始めたばかりで、暇すぎるから）。
grid-template-xxx: subgrid
Subgridは最近よく議論されるトピックです。グループ内でアライメントを同じにする必要があるが、コンテンツは動的に変化するため、開発者は仮定を入れなければならず、さらに悪い場合には、コンテンツのサイズを動的に取得しなければならない。しかし、subgridは、互いのコンテンツを知る術を持たないコンテナコンポーネントが、同じ整列を維持し、常に同じコンテンツの整列を保つことを容易にすることで、この問題を解決します。
まず次の例を見てみましょう。
gridの列と行を定義する際、コンテナ全体に対してグリッドを定義するのが一般的ですが、subgridを使用する場合は、コンテンツごとにグリッドを定義することになります。
// parent container containing the card components
.container {
// ...
grid-template-rows: auto auto 200px auto auto;
// ...
}
// card component should take 5 grids vertically
.card {
// ...
grid-row: span 5;
// ...
}
@starting-styleと離散属性のtransition
CSSだけを使っていると、画面に入ったり出たりする要素のアニメーションやトランジションを実装するのが難しく、JSやframer-motionやGSAPのようなアニメーションライブラリ（autoAlphaなど）に頼らざるを得ないことがよくあります。しかし、CSSの新しい機能である@starting-styleと離散的な属性に対するトランジションエフェクトのサポートは、下の例のように、この問題を解決するのに役立ちます。
要素のエントリーエフェクト（display: none;からのトランジション）には、@starting-styleで指定できます。
@starting-style {
.card {
opacity: 0;
height: 0;
}
}
ページから消える要素については、display: none;への遷移がネイティブCSSでサポートされています。@ruleなどは必要なく、プロパティに直接書くだけなので簡単です。
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
エッジが光るカード
新しい会社のプロジェクトの開発にはnuxt.jsが使われています。様々なnuxt.jsモジュールのホームページを見ていて、このようなエッジが光るカードがあちこちにあることに気づきました（nuxt組織のデザインガイドラインなのでしょうか・・・）。そこで簡単なコピーを作ってみました。
この種のカード開発の主なアイデアは、カーソル位置を追跡しながら、カード自身とカードコンテナ要素の ::after 擬似クラスを使用し、リアルタイムでCSS変数に値を割り当てることです。
このようなCSS変数へのリアルタイムの値の割り当ては、あらゆる種類のファンシーなウェブエフェクトで見られるのに、なぜ私は今まで試さなかったのでしょう…？
Variable fonts
Variable fontsもまた、最近かなり人気のあるトピックのようです（実際に制作に導入している人を見かけるのは稀ですが）。
Variable fontsは、font-weight、slant、font width、その他のフォントプロパティをより細かく制御できるようにします。例えば、font-weightの制御は、もはや100刻みではなく、1刻みにすることができます。この機能により、通常はあまり意味をなさないフォントプロパティが、非常にスムーズなトランジションを実現するために使用できるようになりました。
下の例のように、フォント自体が提供する軸を利用してフォントの表示を非常にきめ細かく制御できます。
同様に、上述したカーソル位置の取得とCSS変数の割り当て方法を使えば、非常にスタイリッシュなフォントの変形効果を実現できます。
Discussion