CSS Working Group Editor Drafts

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 詳細度を変更せずに明示的に再配置できるようにするためのアットルール。 Chrome,Firefox,Safariの(開発版の)実験的機能として試せるもよう。 CSS Cascading and Inheritance Level 6 @​scope 一部の冗長な記法をより簡潔に記述できるようにするためのアットルールのもよう。 CSS Conditional Rules Module Level 4 @​when @​whenは@​mediaや@​supportsなどを一緒くたに判定できるようにするためのアットルール。 @​else @​elseは@​whenに対してelse文を提供するためのアットルール。 @​elseは@​when以外のアットルールに使用できるのでしょうか...? CSS Containment Module Level 3 @​container コンテナの使用可能な幅に応じて条件分けするためのアットルール。 Chromeの(開発版の)実験的機能として試せるもよう。 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 ネストによる記述をできるようにするための仕様。 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とする長さの単位。 UI要素(アドレスバーなど?)が表示されたりとか大きくなったりすると、 コンテンツを覆い隠すみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 small viewport-percentage units (svh, svw, svi, svb, svmin, and svmax) 小さいviewportを100とする長さの単位。 UI要素(アドレスバーなど?)が非表示になるとか小さくなったりすると、 余分な隙間が発生するみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 dynamic viewport-percentage units (dvh, dvw, dvi, dvb, dvmin, and dvmax) 動的なviewportを100とする長さの単位。 全ての場合において、 スクロールバーは存在しない想定とのことみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 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-4/ https://drafts.csswg.org/css-conditional-4/#when-rule https://drafts.csswg.org/css-conditional-4/#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://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.container.queries https://caniuse.com/?search=css.masonry https://caniuse.com/?search=css.nesting https://caniuse.com/?search=css.scroll-timeline 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/?s=grid-masonry-layout https://css-tricks.com/tag/scroll-linked-animation/