Today I Learned - Rocky Kev

TIL Overflow:clip

POSTED ON:

TAGS: css

Oh it's coming!

Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context, which gives it better performance than overflow: hidden. And if you need it, you can apply clipping to a single axis via overflow-x and overflow-y.

.overflow-clip {
  overflow: clip;
}

There's also overflow-clip-margin, which allows you to expand the clip border. This is useful for cases where there is ink overflow that should be visible.


.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Status

CSS Overflow is in Working Draft.
https://www.w3.org/TR/css-overflow-3/

Reference

https://developer.chrome.com/blog/new-in-chrome-90/

Support

It's only supported on Edge, Firefox, and Chrome.
https://caniuse.com/?search=overflow

As usual, Safari lags behind.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')