新しいCSS機能

皆さんこんにちは。
近年、CSSの進化がすさまじくJSを使用しなくてもCSSでプログラム的表現ができるようになってきました！

今回はそんな新しいCSSの機能について、いくつか紹介したいと思います。

1.width: stretch;

width: stretch;は親要素の利用可能な幅いっぱいに広げることができる機能です。
マージンやパディング等を考慮して親要素からはみ出ることがないので崩れてしまったりするのを防ぐことができます！

これまでwidth: 100%; やwidth: calc(100% - 〇〇px);などで指定した際に想定外に幅を超えてしまったことがあると思います。

SCSS

/* これまで */
box {
    width: calc(100% - 60px);
    margin-inline: 30px;
}

しかし、このwidth: stretch;で指定することでもっと簡単に崩れず表現することができます。

SCSS

/* 使用例 */
box {
    width: stretch;
    margin-inline: 30px;
}

2.if()関数

if()関数を使うことでCSSでif elseの条件式が使用できるようになり、プロパティに対して条件値を設定できます。

下記の例は「背景色が黒の時、文字色を白」に、「背景色が白の時、文字色を黒」になるように指定しています。

HTML

<div class="bg-black">black</div>
<div class="bg-white">white</div>

SCSS

div:is(.bg-black, .bg-white) {
    background-color: var(--color);
    color: if(style(--color: #fff;): #000; else: #fff);
}
.bg-black {
    --color: #000;
}
.bg-white {
    --color: #fff;
}

より詳しく知りたい方は以下参考をご覧ください。

参考：新しい if() 関数を使用した CSS 条件

3. reading-flow、reading-order

よくdisplay: flex;やdisplay: grid;などを用いて表示される要素の順番を入れ替えたりしますよね。
しかし、順番を入れ替えると見た目の順序とDOMツリー内の順序が異なることがあります。
これはキーボードやアクセシビリティツールなどを使うユーザーにかなり影響を与えてしまいます。

このreading-flow、reading-orderを使うことでTABキーによる操作などを画面に表示されている順番に制御することができるようになります。

reading-flow

reading-flowプロパティは、フレックス、グリッド、ブロックレイアウト内の要素がアクセシビリティツールに表示される順序と、線形シーケンシャルナビゲーションメソッドを使用してフォーカスを当てる方法を制御します。

reading-flowプロパティの値は1つのキーワード値で設定します。デフォルトは normal で、要素をDOM順に並べ替える動作を維持します。
フレックスコンテナ内で使用する場合は、値を flex-visual または flex-flow に設定します。
グリッドコンテナ内で使用する場合は、値を grid-rows、grid-columns、または grid-order に設定します。

↑のflexboxで使用した場合以下のようになります。

SCSS

.box {
    /*13452と左から右に読む場合の視覚的な順序になります*/
    reading-flow: flex-visual;
    /*25431と右から左に読む場合の視覚的な順序になります*/
    reading-flow: flex-flow;
}

↑のgridレイアウトで使用した場合以下のようになります。

SCSS

.box {
    /* 5,1,3,2,4,6,7,8,9,10,11,12と 行ごとに視覚的な順序になります */
    reading-flow: grid-rows;
    /* 5, 6, 9, 7, 10, 1, 2, 11, 3, 4, 8, 12と 列ごとに視覚的な順序になります */    
    reading-flow: grid-columns;
}

reading-order

reading-orderプロパティは、読み上げフロー コンテナ内のアイテムの順序を手動で上書きできます。このプロパティをグリッド、フレックス、ブロックコンテナ内で使用する場合は、コンテナの reading-flow 値を source-order に設定し、個々のアイテムに reading-orderプロパティで整数値を設定します。

ここでは簡単にしか紹介していませんが詳しい使用方法など知りたい方は以下参考をご覧ください。

参考：論理的な連続フォーカス ナビゲーションに CSS 読み上げフローを利用する

まとめ

日々CSSも進化して、どんどんCSSだけで表現できることが増えています。

今回紹介したCSS機能はまだ全デバイスで対応されていないまたは開発段階の機能なのでまだ実務で使用することはできませんが、
使えるようになった際には絶対に使用したい機能ばかりですので興味ありましたら一度詳しく調べてみてください！