CSS Working Group Editor Drafts #CSS

CSS Working Group Editor Drafts

CSS Working Group Editor Drafts を眺めていて、
気になったものを Pickup してみました。
一言コメントを記載しておりますが、
詳細は Reference を参照ください。

CSS Working Group Editor Drafts は、
草案や議論促進のためのものなので、
廃案になるかもしれないし、
導入されるかもしれないし、
というものです。

当方IT業界外の人間です。
琴線がズレているかもしれません。
ご了承ください。

CSS Cascading and Inheritance Level 5

@layer

詳細度を変更せずに明示的に再配置できるようにするためのアットルール。

CSS Cascading and Inheritance Level 6

@scope

一部の冗長な記法をより簡潔に記述できるようにするためのアットルール。

CSS Conditional Rules Module Level 4

@when

@whenは@mediaや@supportsなどを一緒くたに判定できるようにするためのアットルール。

@else

@elseは@whenに対してelse文を提供するためのアットルール。

CSS Containment Module Level 3

@container

コンテナの使用可能な幅に応じて条件分けするためのアットルール。

container query length units ( cqw, cqh, cqi, cqb, cqmin, cqmax )

コンテナクエリの寸法を100とした長さの単位。

CSS Grid Layout Module Level 3

CSS Grid で Masonry Layout をできるようにするための仕様。
Firefoxの(開発版の)実験的機能として試せるもよう。

CSS Nesting Module

ネストによる記述をできるようにするための仕様。
Chromeの(開発版の)実験的機能として試せるもよう。

Scroll-linked Animations

スクロール量にリンクしてアニメーションをできるようにするための仕様。
Chromeの(開発版の)実験的機能として試せるもよう。

CSS Animations Level 2

animation-composition

アニメーションが複数同時に、
同じプロパティに影響を与える場合に、
どのように作用するかを設定するためのプロパティ。

animation-timeline

Scroll-linked Animations の @scroll-timeline 用...?

CSS Backgrounds and Borders Module Level 4

border-limit ( or border-parts ? )

borderの描画を一部のみにするプロパティ。

border-clip

borderの描画を一部のみにするプロパティ。

CSS Box Model Module Level 4

margin-trim

コンテナの最初と最後のmarginを制御するためのプロパティ。

CSS Fragmentation Module Level 4

margin-break

フラグメンテーションブレークの箇所で、
ボックスの上端と下端のmarginを制御するためのプロパティ。

CSS Shapes Module Level 2

shape-inside

shape-outsideのinside版

shape-padding

shape-marginのpadding版

CSS Values and Units Module Level 4

large viewport-percentage units (lvh, lvw, lvi, lvb, lvmin, and lvmax)

大きいviewportを100とする長さの単位。

small viewport-percentage units (svh, svw, svi, svb, svmin, and svmax)

小さいviewportを100とする長さの単位。

dynamic viewport-percentage units (dvh, dvw, dvi, dvb, dvmin, and dvmax)

動的なviewportを100とする長さの単位。

Selectors Level 4

:has()

指定した要素が一致する場合に適用される疑似クラス

:open

<details>や<select>や<dialog>などが開いている場合に適用される疑似クラス

:closed

<details>や<select>や<dialog>などが閉じている場合に適用される疑似クラス

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

https://caniuse.com/?search=css.layer
https://caniuse.com/?search=css.when.else
https://caniuse.com/?search=css.container.queries
https://caniuse.com/?search=css.grid.masonry
https://caniuse.com/?search=css.nesting
https://caniuse.com/?search=css.scroll-timeline
https://caniuse.com/?search=css.has.relational
https://caniuse.com/?search=large.small.dynamic.viewport.units

https://css-tricks.com/tag/layer/
https://css-tricks.com/tag/scoping/
https://css-tricks.com/tag/container-queries/
https://css-tricks.com/tag/scroll-linked-animation/

CSS Working Group Editor Drafts