The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup. In the specification, it states "for the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents."

Compressive images give us a reduced file size, but it greatly increases the memory footprint. Thanks to the standards that have been developed around responsive images, it’s a trade-off we no longer need to make.

I find that often, when SVG is used for these smaller elements, or as a large area of illustration, it’s included as a background image for simplicity. The drawback to this is that the SVG is no longer under your control as a developer. You can’t adjust individual properties, like fill color, of an SVG background because it is treated just like any image. This color conundrum can be solved with CSS! Filters to the rescue!

Getting rid of pesky space above and below HTML text. The key benefit of this technique is that it removes top and bottom whitespace while preserving line height between lines in a multi-line block of text.

Once all browsers support :focus-visible, for situation where an indication of focus as a result of a mouse/pointer click is deemed undesirable, we’d be simply be using :focus-visible where previously we used :focus. However, to support any browsers that don’t implement the pseudo-class, we’ll either have to polyfill support for :focus-visible, or always use the less than elegant :not(:focus-visible) approach to essentially unset :focus styles in situations where the browser wouldn’t set its default visible focus indication either.