2020年から2023年までのCSSの変遷を振り返る

https://gyazo.com/c23c7c38e90e271121e3d12fd652d17f

https://gyazo.com/5510d4e88c34b7dc94f91817952946e7

メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります

自己紹介

得意領域

それまでの間に色々な変化があったと思います

https://blogs.windows.com/wp-content/uploads/prod/sites/31/2022/06/0068a7bb9c0f730b18bad4d4ea898227.gif

https://gyazo.com/021a2f8298a9417756e310135d99d0e2

where

グローバル指定のものに敗北していた

is

要素群をひとまとめに管理できるようになる（省略化）

code:css

section h1,

article h1,

aside h1,

nav h1 {

font-size: 3.6rem;

}

/** 下記のように書けるようになる */

:is(section, article, aside, nav) h1 {

font-size: 3.6rem;

}

まとめられたセレクタ内で一番詳細度が高いものに揃う

この中にid指定のものがあると…

aspect-ratio: attr(width) / attr(height);

あるいは属性から持ちよって指定もできる

code:flex-gap.css

display: inline-flex;

gap: 8px;

Grid指定は直下のものしかグリッドアイテムとして反映されず子要素には影響なかった

例：要素内の高さを親のグリッド関係からもらってきて並べるようにする

要素自体の幅を判定して要素のレイアウトを切り替える

code:css

.spui-Pagination {

align-items: center;

container: spui-pagination / inline-size; /** container指定（名前とタイプの一括） */

display: flex;

flex-direction: column;

}

@container spui-pagination (width <= 360px) { /** 360ピクセルより狭い場合 */

.spui-Pagination-item--first,

.spui-Pagination-item--last {

display: none;

}

}

@container spui-pagination (width <= 768px) {　/** 768ピクセルより狭い場合 */

.spui-PaginationItem-label {

display: none;

}

}

:focus-visible

code:css

:focus-visible { /** 見えるべきフォーカスのための対応 */

outline: 2px solid;

outline-offset: 2px;

}

code:css

/** 以前は以下のような指定が必要だったが今は不要になった */

:focus:not(:focus-visible) { outline: 0 };

論理プロパティ

文章の流れる方向に合わせたプロパティの指定ができるように

アラビア語だと右から左への流れになる

以下は横書きモードの想定

margin-block-[*]

標準の見た目でブランドカラーを適応する、みたいな形ができそう

code:css

<input type="checkbox">

<input type="radio">

<input type="range">

<progress>

さまざまな単位の登場

code:css

.scroller {

height: 300px;

overflow-y: scroll;

scroll-snap-type: y mandatory;

}

.scroller section {

scroll-snap-align: start;

}

html { scroll-behavior: smooth }

細かな指定はできない（直線的な移動のみ、バウンドのような細かな指定はできない）

code:old.css

top: 0;

bottom: 0;

left: 0;

right: 0;

code:new.css

inset: 0;

表現としてもより直接的でわかりやすくなった感じがある

適応の範囲を明確に指定できるようにする

@scope

code:css

@scope (.card) to (.card__content) { /** .card から .card_content までの上限下限を指定 */

img {

border-color: pink;

}

}

@layer

code:css

@layer base, special; /** base, special の順で適応していく */

@layer special {

.item {

color: rebeccapurple; /* colorとしてはspecial layerのほうが勝る */

}

}

@layer base {

.item {

color: green;

border: 5px solid green;

font-size: 1.3em;

padding: 0.5em;

}

}

:has()

引数に特定の要素を含んでいる要素のスタイル指定をできるようになる

code:css

/* img要素を含んでいるa要素を指定 */

a:has(> img) { border: 1px solid red }

/* p要素が隣接しているh1要素を指定 */

h1:has(+ p) { font-style: italic }

code:css

.hoge {

.fuga {

color: green

}

}

/** 以下と同等 */

.hoge .fuga { color: green }

code:css

@layer base {

html {

block-size: 100%

& body {

min-block-size: 100%

}

}

}

/** 以下と同等

@layer base {

html { block-size: 100% }

html body { min-block-size: 100% }

}

*/

ネイティブはアンパサンドでの suffix 表現は使えない

code:js

// 関数の実行前後の表示結果間でトランジションする

document.startViewTransition(() => {

// この中で DOM の更新処理を行う

});

code:css

.view-transitions-demo-image {

/* ページ遷移中に共有する要素に名前をつける */

view-transition-name: demo-image;

contain: paint;

}

おわりに

紹介しきれずにまだ挙げそびれているものはある（はず）

ユーザーの使用しているOSバージョンでは追えてない可能性がある

Thank you for listening !

https://gyazo.com/4c1d0df4903765cc351797c10f903ba1

掲載