使い勝手は如何ほどか？モダンCSSの所感

普段ロクに読みもしないメルマガの見出しに「モダンCSS」の見出しを見かけ、気にはなっていたけどちゃんと調べたことないなーという状態だったので、調査がてら学習。
その中でも、業務ですぐに出番がありそうと思われるものを数点列挙してみます。

コンテナクエリ

レスポンシブデザインにおいてブラウザなど、メディア類の横幅に応じてスタイルを当てていたのが主流でしたが、この仕様で、入れ子など要素の大きさに応じてスタイルを切り替えることが可能になります。
詳しくは、この共同マガジンにも投稿している、チームメンバーのtanabeが以前投稿した記事にありますので、そちらをご覧ください。

scroll-behavior

JS頼りだったスムーススクロールが、たった1行で可能になります。

html {
  scroll-behavior: smooth;
}

ただし、速度など細かい挙動は指定できません。
そういった指定などなければ、手っ取り早く実装できる手段ではありますね。

margin-inline

margin指定の際は、-topなどどちらか1方向、略式でも全体、上下・左右、上・左右・下の3パターンだけでしたが、インライン軸（左右軸）のみという、かゆいところに手の届く仕様が出てきました。

/*　いままで　*/
margin-right: auto;
margin-left: auto;

/*　これから　*/
margin-inline: auto;

レスポンシブによるスタイルの切り替えなどで、横軸marginをよく弄るので、このプロパティは非常にありがたいです。

aspect-ratio

アスペクトレシオ・・・まんまアスペクト比を司るプロパティ。
「使用する画像の大きさはバラバラだけど、表示する大きさ（比率）は縦横すべて合わせたい」なんて要望があった際、paddingハックを利用したアス比の指定を行っていました。
それが面倒な計算なく、直感的に指定できます。

/*　いままで　*/
.padding_hack {
  position: relative;
  width: 100%;
  padding-top: calc((9 / 16) * 100%); /* 56.25% */
}

/*　これから　*/
.aspect_highdef {
  aspect-ratio: 16 / 9;
}

とはいえ、アス比を指定している要素より、大きなサイズの要素が入っているとそちらに引っ張られてしまうので、paddingハックの時と同様、うまく工夫する必要はアリ。

メディアクエリの範囲表記

max-widhtやmin-widthを使用してブレイクポイントを指定していましたが、「大なり小なり（>、<）」や「以上以下（≧、≦）」が使えるように。

Breakpoint 768px以下で切り替え

/*　いままで　*/
@media (max-width: 768px) {
}

/*　これから　*/
@media (width <= 768px) {
}
または
@media (width < 769px) {　/* 769px未満 */
}

今まではどちらを指定したらいいか混乱することがたまにありましたが、記号を使えることにより、より直感的に指定することができるようになりました。

:has()

CSSでは「特定の親要素→特定の子要素」といった指定が常で、「特定の子要素を持った親要素」という子要素起点の指定はJavascriptを使用しないと厳しいものがありました。
が、この疑似クラスを使用することにより、子要素起点の親要素指定ができるようになったようです。

/* 子要素に.mogeを持つ、.hogehogeを指定する場合 */
.hogehoge:has(.moge) {
}

他の疑似クラス同様、後にセレクタを追加するのも可能なので、応用は利きそうです。
ただ、記述に関しては優先度合いも踏まえ、上の例のような単純にはいかないと思うので、ネスト化したほうがわかりやすいかもしれません。
（そういや、sassを使わないCSSネスト化ってのもどこかであったな）

subgrid

親のグリッドサイズを子要素に引き継ぐことができるとか、これにより子要素のグリッドをきれいに整理することができるとか・・・グリッド内のグリッドを整えるのに有用そうですが、そもそもグリッドレイアウト（display：grid）を理解しないことには、ってことで。

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

他と比べて習熟難度は高そうだけど、この仕組みが理解できるようになれば、Bento gridとか凝ったレイアウト指定が来ても組めて行けるのでは？という淡い期待はあります。

そういえば

モダンCSSをモボ・モガ風に略したら、モシ？モC？になるんですかね？

そんなことより。
モダンCSSで調べると、ここに挙げた以上の仕様が出てきます。
仕様の理解はもとより、ブラウザのサポート状況等、実際に活用できるかどうかの見極めは必要ですが、Javascriptを活用しないと出来なかったことが、CSSでもある程度表現出来るようになったことは、表現コスト削減の一助になるのではないでしょうか。

YUIDEA CREATIVE公式note｜note