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://drafts.csswg.org/
https://drafts.csswg.org/css-animations-2/
https://drafts.csswg.org/css-animations-2/#animation-composition
https://drafts.csswg.org/css-animations-2/#animation-timeline
https://drafts.csswg.org/css-backgrounds-4/
https://drafts.csswg.org/css-backgrounds-4/#border-limit
https://drafts.csswg.org/css-backgrounds-4/#border-clip
https://drafts.csswg.org/css-box-4/
https://drafts.csswg.org/css-box-4/#margin-trim
https://drafts.csswg.org/css-break-4/
https://drafts.csswg.org/css-break-4/#break-margins
https://drafts.csswg.org/css-cascade-5/
https://drafts.csswg.org/css-cascade-5/#layering
https://drafts.csswg.org/css-cascade-6/
https://drafts.csswg.org/css-cascade-6/#scoped-styles
https://drafts.csswg.org/css-conditional-5/
https://drafts.csswg.org/css-conditional-5/#when-rule
https://drafts.csswg.org/css-conditional-5/#else-rule
https://drafts.csswg.org/css-contain-3/
https://drafts.csswg.org/css-contain-3/#container-queries
https://drafts.csswg.org/css-contain-3/#container-lengths
https://drafts.csswg.org/css-grid-3/
https://drafts.csswg.org/css-nesting-1/
https://drafts.csswg.org/css-shapes-2/
https://drafts.csswg.org/css-shapes-2/#shape-inside-property
https://drafts.csswg.org/css-shapes-2/#shape-padding-property
https://drafts.csswg.org/scroll-animations-1/
https://drafts.csswg.org/css-values-4/
https://drafts.csswg.org/css-values-4/#large-viewport-percentage-units
https://drafts.csswg.org/css-values-4/#small-viewport-percentage-units
https://drafts.csswg.org/css-values-4/#dynamic-viewport-percentage-units
https://drafts.csswg.org/selectors-4/
https://drafts.csswg.org/selectors-4/#relational
https://drafts.csswg.org/selectors-4/#open-state
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/