You can check the original post on my blog in both English and Spanish
Earlier this week, I saw that Chrome was getting its 90 update and they release a cool video about it with a lot of new stuff coming to the browser, the two main things that got my attention were:
- new CSS overflow clip
- Declarative Shadow DOM
So let's jump on the first one, since this is a CSS feature I'm gonna be doing some small demos with Codepen to show what's up
CSS Overflow Clip
first of all, everybody at some point in their life struggles with CSS, so let's define what the overflow property does first, according to w3schools:
The CSS overflow property controls what happens to content that is too big to fit into an area.
to show you more in detail about the different behavior of the overflow and the current ones here's the Codepen demo
- Overflow visible (default): the content doesn't care about the size of its parent and it grows no matter what
- Overflow hidden: the content is quite shy on this one, once the content surpasses the parent container, it stops showing
- Overflow scroll: this one is simple, no matter what happens you will always have a scroll, simple but effective some times (can look ugly though)
- Overflow auto: the smartest of all, while the content fits it doesn't show a scrollbar, but once it starts overflowing, it starts showing a scrollbar (you can click on the button of the last box to see the behavior)
Overflow clip:
Note Since this is available starting Chrome 90 if you specify it and don't have that version, It will fallback to overflow visible since it's the default value
What the clip value does, it's pretty similar to the hidden one, and what it does differently, is that it doesn't apply a scroll container to the box, resulting in a better performance when rendering the CSS into the document
Also, when adding overflow clip, you have access to the property overflow-clip-margin which lets you control how much of content do you want to show after the parent is reached
Bonus: I found a bug when adding a border-radius to the overflow clip resulting on the overflow-clip-margin not being applied, so you can try it on the codepen demo by removing the border-radius: 0 !important
Declarative Shadow DOM
before writing this post, I had never heard of the shadow DOM, but what it does is control the way the browser handles all the complex HTML elements under the hood, if you're interested in more about this, I recommend reading this article about it, also before chrome 90, the only way to create a shadow DOM was with the use of JS, but now with this new update, it's possible to create a shadow DOM with HTML which now can be used when doing SSR (Server side rendering)
Sources
Top comments (0)