3 ms·

The new CSS property that boosts your rendering performance (2020)

27 points by cmpit 2y ago

taspeotis 2y ago
The new CSS property that boosts your rendering performance (web.dev) 4 points by cmpit 1 hour ago Needs (2020) > Last updated 2020-08-05 UTC.
echoangle 2y ago
Unrelated to the content: who had the idea to machine-translate programming posts? The property name the post is about is localized for me, which makes no sense at all.
- deleted 2y ago
  [deleted]
- p4bl0 2y ago
  Same here, the post was in really bad French and was impossible to understand before I found on the page how to show the original version.
- eska 2y ago
  Microsoft also translates documentation based on my IP and it’s atrocious
taraparo 2y ago
why is a manual property needed. why is the browser engine not able to figure out what is off-screen?
- alenmilk 2y ago
  Because of inline css and different fonts on different os-es and generally no guarantees about render size. In short, you have no idea how big a block is without rendering it.
  - kevindamm 2y ago
    That would be a good point, as the C in CSS should stand for complicated, but this recommended setting is "auto" (changed from the default of "visible"). Setting it to auto turns on layout containment, style containment, and paint containment for the element. It allows the browser to skip rendering but still keep the elements available to, e.g. tab order. It's like a hybrid of visible and hidden. https://www.w3.org/TR/css-contain-2/#content-visibility https://www.w3.org/TR/css-contain-2/#content-visibility I think the answer to the GP's question is that the browser does know how to compute this before starting the render pass, but the additions to the spec that allow for placing fences around the layout- and style-related containment was too new for all browsers yet, so the default is to assume all rendering is done, and the HTML/CSS author can opt in to turning this on (which in early days may have had the risk of bugs in implementation or inconsistencies across browsers).
- edflsafoiewq 2y ago
  The design of CSS is such that pretty much any element in the document can affect any other element. Therefore determining what is off-screen generally requires processing the entire document. The manual property changes the behavior of CSS so that elements in a subtree cannot affect elements outside the subtree, allowing the browser to quickly discard whole subtrees instead.
cloudking 2y ago
Great, lazy loading without JS
kevindamm 2y ago
For those who were wondering, it is available more broadly [0] than it was when the article was written (2020).. 75+%, almost 85% on tracked desktop. Containment spec, which `content-visibility` is built on top of, reaches around 95%, (98% mobile) [1]. [0]: https://caniuse.com/?search=content-visibility https://caniuse.com/?search=content-visibility [1] https://caniuse.com/css-containment https://caniuse.com/css-containment
- _hyn3 2y ago
  For content-visibility, once again IOS Safari proves to be the IE of our time.. ;( (perhaps ironically, Microsoft Edge supported it fully four years before Apple got around to it.)
  - alpinisme 2y ago
    Given that Edge is chromium based, that is not ironic, it is expected: Chromium launching the feature is exactly what OP is about.
deleted 2y ago
[deleted]
deleted 2y ago
[deleted]

27 points by cmpit 2y ago

The new CSS property that boosts your rendering performance (web.dev) 4 points by cmpit 1 hour ago Needs (2020) > Last updated 2020-08-05 UTC.

echoangle 2y ago

Unrelated to the content: who had the idea to machine-translate programming posts? The property name the post is about is localized for me, which makes no sense at all.

deleted 2y ago
[deleted]
p4bl0 2y ago
Same here, the post was in really bad French and was impossible to understand before I found on the page how to show the original version.
eska 2y ago
Microsoft also translates documentation based on my IP and it’s atrocious

taraparo 2y ago

why is a manual property needed. why is the browser engine not able to figure out what is off-screen?

alenmilk 2y ago
Because of inline css and different fonts on different os-es and generally no guarantees about render size. In short, you have no idea how big a block is without rendering it.
- kevindamm 2y ago
  That would be a good point, as the C in CSS should stand for complicated, but this recommended setting is "auto" (changed from the default of "visible"). Setting it to auto turns on layout containment, style containment, and paint containment for the element. It allows the browser to skip rendering but still keep the elements available to, e.g. tab order. It's like a hybrid of visible and hidden. https://www.w3.org/TR/css-contain-2/#content-visibility https://www.w3.org/TR/css-contain-2/#content-visibility I think the answer to the GP's question is that the browser does know how to compute this before starting the render pass, but the additions to the spec that allow for placing fences around the layout- and style-related containment was too new for all browsers yet, so the default is to assume all rendering is done, and the HTML/CSS author can opt in to turning this on (which in early days may have had the risk of bugs in implementation or inconsistencies across browsers).
edflsafoiewq 2y ago
The design of CSS is such that pretty much any element in the document can affect any other element. Therefore determining what is off-screen generally requires processing the entire document. The manual property changes the behavior of CSS so that elements in a subtree cannot affect elements outside the subtree, allowing the browser to quickly discard whole subtrees instead.

cloudking 2y ago

Great, lazy loading without JS

kevindamm 2y ago

For those who were wondering, it is available more broadly [0] than it was when the article was written (2020).. 75+%, almost 85% on tracked desktop. Containment spec, which `content-visibility` is built on top of, reaches around 95%, (98% mobile) [1]. [0]: https://caniuse.com/?search=content-visibility https://caniuse.com/?search=content-visibility [1] https://caniuse.com/css-containment https://caniuse.com/css-containment

_hyn3 2y ago
For content-visibility, once again IOS Safari proves to be the IE of our time.. ;( (perhaps ironically, Microsoft Edge supported it fully four years before Apple got around to it.)
- alpinisme 2y ago
  Given that Edge is chromium based, that is not ironic, it is expected: Chromium launching the feature is exactly what OP is about.

deleted 2y ago

[deleted]

deleted 2y ago

[deleted]