CSS Working Group Editor Drafts

## CSS Working Group Editor Drafts

[CSS Working Group Editor Drafts](https://drafts.csswg.org/) を眺めていて、
気になったものを Pickup してみました。
一言コメントを記載しておりますが、
詳細は [Reference](#reference) を参照ください。

[CSS Working Group Editor Drafts](https://drafts.csswg.org/) は、
草案や議論促進のためのものなので、
廃案になるかもしれないし、
導入されるかもしれないし、
というものです。

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

## CSS Cascading and Inheritance Level 5

### @&#x200b;layer

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

## CSS Cascading and Inheritance Level 6

### @&#x200b;scope

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

## CSS Conditional Rules Module Level 4

### @&#x200b;when

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

### @&#x200b;else

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

## CSS Containment Module Level 3

### @&#x200b;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 の @&#x200b;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

&lt;details&gt;や&lt;select&gt;や&lt;dialog&gt;などが開いている場合に適用される疑似クラス

### :closed

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

## 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/