Contact [email protected] Specificationhttp://drafts.csswg.org/css-contain-1/#c3
Summary Used values for contain different from none on the root or body elements will disable propagation of CSS properties from body as per specification[1]. [1] https://drafts.csswg.org/css-contain-1/#c3 This change was brought to the CSSWG because the unconditionally propagating body styles to the viewport would create circular dependencies for CSS Container Queries. For instance, a propagated writing-mode from body to the viewport, when orthogonal to the outer, could change the size of root element which in turn could affect style resolution for body via container queries, which again could result in a different computed writing-mode for body. See the github issue for details: https://github.com/w3c/csswg-drafts/issues/5913. It should be noted that the CSSWG has regretted introducing propagation from body and have resolved <https://github.com/w3c/csswg-drafts/issues/6079#issuecomment-816307011> on not introducing new properties to be propagated from body. The implementation was added to M93 behind a flag along with use counters for used contain values different from none on html root and body: https://chromestatus.com/metrics/feature/timeline/popularity/3936 https://chromestatus.com/metrics/feature/timeline/popularity/3937 These use counters cover more cases than potentially problematic ones, as they do not detect if the styles are different on body and root and would make any differences. Still the use counters are low - 0.0004% and 0.0008% respectively. Blink componentBlink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> TAG reviewNone. Change to a W3C Recommendation in the CSSWG. TAG review statusNot applicable Risks Interoperability and Compatibility - Not shipping this change would block shipping CSS Container Queries, or cause stateful style/layout issues. - Low use counters for containment on body and root. - There is an interop risk if the other engines do not change their implementations. The use counters indicate that, at least at the moment, applying containment to root and body is rare. I have not filed a standards position for Gecko. This seems like a rather small change compared to APIs typically filed as a standards position. I got a quick reply on the webkit-thread. Issues are filed for both browsers and I have triaged the failing tests on wpt.fyi accordingly. Gecko: No signals https://bugzilla.mozilla.org/show_bug.cgi?id=1730763 WebKit: No objection: https://lists.webkit.org/pipermail/webkit-dev/2021-September/031982.html Web developers: No signals Debuggability Viewport propagated properties are not exposed in devtools Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md> ?contain-body-bg-001.html <https://wpt.fyi/results/css/css-contain/contain-body-bg-001.html> contain-body-bg-002.html <https://wpt.fyi/results/css/css-contain/contain-body-bg-002.html> contain-body-bg-003.html <https://wpt.fyi/results/css/css-contain/contain-body-bg-003.html> contain-body-bg-004.html <https://wpt.fyi/results/css/css-contain/contain-body-bg-004.html> contain-body-dir-001.html <https://wpt.fyi/results/css/css-contain/contain-body-dir-001.html> contain-body-dir-002.html <https://wpt.fyi/results/css/css-contain/contain-body-dir-002.html> contain-body-dir-003.html <https://wpt.fyi/results/css/css-contain/contain-body-dir-003.html> contain-body-dir-004.html <https://wpt.fyi/results/css/css-contain/contain-body-dir-004.html> contain-body-overflow-001.html <https://wpt.fyi/results/css/css-contain/contain-body-overflow-001.html> contain-body-overflow-002.html <https://wpt.fyi/results/css/css-contain/contain-body-overflow-002.html> contain-body-overflow-003.html <https://wpt.fyi/results/css/css-contain/contain-body-overflow-003.html> contain-body-overflow-004.html <https://wpt.fyi/results/css/css-contain/contain-body-overflow-004.html> contain-body-t-o-001.html <https://wpt.fyi/results/css/css-contain/contain-body-t-o-001.html> contain-body-t-o-002.html <https://wpt.fyi/results/css/css-contain/contain-body-t-o-002.html> contain-body-t-o-003.html <https://wpt.fyi/results/css/css-contain/contain-body-t-o-003.html> contain-body-t-o-004.html <https://wpt.fyi/results/css/css-contain/contain-body-t-o-004.html> contain-body-w-m-001.html <https://wpt.fyi/results/css/css-contain/contain-body-w-m-001.html> contain-body-w-m-002.html <https://wpt.fyi/results/css/css-contain/contain-body-w-m-002.html> contain-body-w-m-003.html <https://wpt.fyi/results/css/css-contain/contain-body-w-m-003.html> contain-body-w-m-004.html <https://wpt.fyi/results/css/css-contain/contain-body-w-m-004.html> contain-html-bg-001.html <https://wpt.fyi/results/css/css-contain/contain-html-bg-001.html> contain-html-bg-002.html <https://wpt.fyi/results/css/css-contain/contain-html-bg-002.html> contain-html-bg-003.html <https://wpt.fyi/results/css/css-contain/contain-html-bg-003.html> contain-html-bg-004.html <https://wpt.fyi/results/css/css-contain/contain-html-bg-004.html> contain-html-dir-001.html <https://wpt.fyi/results/css/css-contain/contain-html-dir-001.html> contain-html-dir-002.html <https://wpt.fyi/results/css/css-contain/contain-html-dir-002.html> contain-html-dir-003.html <https://wpt.fyi/results/css/css-contain/contain-html-dir-003.html> contain-html-dir-004.html <https://wpt.fyi/results/css/css-contain/contain-html-dir-004.html> contain-html-overflow-001.html <https://wpt.fyi/results/css/css-contain/contain-html-overflow-001.html> contain-html-overflow-002.html <https://wpt.fyi/results/css/css-contain/contain-html-overflow-002.html> contain-html-overflow-003.html <https://wpt.fyi/results/css/css-contain/contain-html-overflow-003.html> contain-html-overflow-004.html <https://wpt.fyi/results/css/css-contain/contain-html-overflow-004.html> contain-html-t-o-001.html <https://wpt.fyi/results/css/css-contain/contain-html-t-o-001.html> contain-html-t-o-002.html <https://wpt.fyi/results/css/css-contain/contain-html-t-o-002.html> contain-html-t-o-003.html <https://wpt.fyi/results/css/css-contain/contain-html-t-o-003.html> contain-html-t-o-004.html <https://wpt.fyi/results/css/css-contain/contain-html-t-o-004.html> contain-html-w-m-001.html <https://wpt.fyi/results/css/css-contain/contain-html-w-m-001.html> contain-html-w-m-002.html <https://wpt.fyi/results/css/css-contain/contain-html-w-m-002.html> contain-html-w-m-003.html <https://wpt.fyi/results/css/css-contain/contain-html-w-m-003.html> contain-html-w-m-004.html <https://wpt.fyi/results/css/css-contain/contain-html-w-m-004.html> Flag nameCSSContainedBodyPropagation Requires code in //chrome?False Tracking bughttps://crbug.com/1215265 Estimated milestones M96 Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5663240823504896 This intent message was generated by Chrome Platform Status <https://www.chromestatus.com/>. -- Rune Lillesveen -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQk%2BYv2iUkTPkTdwj7fF_syaHEUtOLyqPvcT_DN_nH2jg%40mail.gmail.com.
