1. HOME
  2. ブログ
  3. IT技術
  4. 2023年のCSSの復習しておく

2023年のCSSの復習しておく

2023年のCSSの復習をしておこうかなと思いました!

CSSって、いつの間にか機能追加されてたり、効率的な実装方法が実はあったりして、定期的にキャッチアップしないとなーと思ってます^^;

今年注目された仕様や機能を見ていきます!
ここで紹介するものは、主要なブラウザの安定バージョンで対応されているものです。

コンテナクエリ

今まで、レスポンシブデザインを実装する際はビューポートのクエリを使うのが基本だったかと思いますが、指定要素のサイズ基準でレスポンシブできます。

以下の例では、親要素が500px以上のクエリを指定しています。
mainという名前のコンテナクエリを作成し、親要素のクラスにcontainerプロパティ(container-name + container-type)でコンテナクエリを適用しています。
container-typeでオプションに合わせたコンテナコンテキストが生成され、container-nameでは適用する名前付きコンテナを指定しています。

親要素の幅が500pxより大きい場合

親要素の幅が500px以下の場合

コンテナクエリ宣言時、名前をつけない場合は、コンテナのコンテキストを持つ要素(≒container-typeが宣言されている要素)全てにそのクエリが適用されます。

サブグリッド

display: grid;を利用するグリッドの話です。
サブグリッドを利用すると、親グリッド内の、子要素のグリッドの整列基準に、親グリッドのトラックを利用することができます。

具体的に言うと、grid-template-columnsgrid-template-rowssubgridというオプションが追加されました。
このオプションを設定すると、設定した行/列は、親のトラックを参照できるようになります。

親グリッドのCSS

子要素に通常のグリッドを適用した場合

子要素にサブグリッドを適用した場合

親のグリッドのトラックが変わったのが分かるかと思います。

補足

上記で、サブグリッドを適用した場合、理想の配置にするために、grid-rowを指定しましたが、指定しなかった場合はこうなります。
実際にサブグリッドを使うときは、開発者ツールでトラックの変化を確認しながら使うと良いかもです。

color-mix()

2つのカラーを組み合わせたカラーを表現できます。
特にメインカラーのサブカラーを色の割合で作りたい時に便利かなと思いました。

使用する際には、1.色空間, 2.カラー1つ目とその割合, 3.もう1つのカラー を指定します。
以下のコードでは、srgbの色空間で、red20%、white80%の色が指定されてます。

ネスト

Sassを使わなくても、通常のCSSでネストができちゃいます。
デフォルトでネストできるなんてとても便利で有り難いです〜。

こんな感じで使えます↓

layer

スタイルにレイヤーという考えを取り入れ、スタイルをレイヤーごとに管理できます。レイヤーの優先度もコントロール可能です。

以下のように、layerの中にスタイルを宣言すると、指定スタイルがレイヤーに割り当てられます。

また、最初に複数のレイヤーを宣言すると、優先度を設定できます。
後ろになるほど優先度が高くなるので、base < utilitiesのレイヤー構造を宣言できます。

ファイルごとにレイヤーを設定することもできます。
以下のコードだと、base.cssのスタイルデータをbase layerに、utilities.cssのものをutilities layerに割り当てています。

nth-of

nth-child等は、兄弟要素の位置(n番目)によって、スタイルを指定することができました。

これに、of という表現が加わったことで、条件に当てはまった要素の中で、指定位置のスタイルを宣言できます。

従来の使い方

偶数位置の要素のcolorがredになります。

of を使ってフィルタリング

focusクラスを持つ要素のなかで、偶数位置の要素にボーダーが付きます。

 

:user-valid / :user-invalid

:valid / :invalid に似た擬似セレクタです。
:valid / :invalid は、ユーザーが入力していない状態でも有効無効を判定するのに対して、:user-valid / :user-invalid はユーザーが入力した後に有効無効を判定します。

使い方は通常の擬似要素と同様です。

三角関数

CSSで扱う数値として三角関数が追加されました。
複雑なアニメーションやレイアウトを実装する際に役立ちそうです。

終わり

以上で復習事項の共有は終わりです!
実際に使っていけるといいですねー!

書いた人はこんな人

岡坂(エンジニア)
岡坂(エンジニア)
Webエンジニア。
好きなものはフルーツタルト。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア