The humble element has gained some superpowers since it was created. We like images over on the Stack Overflow blog too. Images are so prominent that they are part of the most important content in over ~70% of pages on both mobile and desktop according to the largest contentful paint metric. This isn’t a huge surprise as we humans are quite visual and the tag has been around for almost 30 years. Browser supportĬlip has had support for quite a long time in all browsers except Safari, but support has landed in the Technical Preview for Safari 16, which should be released later this year.Images are one of the most pervasive parts of the web. In the image you can see that the Polypane UI and its shadow on the right side expands beyond the border on the top and bottom of the element, but is neatly clipped on the right side. The pink outline is the element with a horizontal clip but vertical visible value for the overflow. Here is a screenshot of the exaggerated effect. See the Pen Untitled by Kilian Valkhof ( on CodePen.Īs a more practical example I've used this on the Polypane homepage to prevent an image from expanding horizontally outside of the viewport (by adding an overflow-x: clip) to its wrapper, but allowing it to expand beyond the element vertically (with overflow-y: visible) to create more depth without the image influencing the layout. This enables a number of interesting features, as well as making some designs easier to work with because you're no longer having to deal with the scroll areas: So while you might not care about something being a scroll area or not (and to be frank, there's few situations where that distinction really matters) using clip means the limitations that a scroll area has no longer apply: You can clip in one direction while keeping your content visible in another direction. Without the scroll area, that limitation is no longer there. Keeping the scroll area around means that the UI still could end up being scrolled, and because it was a scroll area, it also prevented the non-scrolling axis to be set to visible. Enter ClipĬlip was added for a particular reason: an element with overflow: hidden could still programmatically scroll (just not as the result of a user interacting with it). That limits the type of design you can implement without adding additional HTML to style. See the Pen Overflow: Clip example by Kilian Valkhof ( on CodePen. Setting two different directional overflows would let you configure your element such that it (for example) only scrolls in the vertical direction while wrapping text and hiding overflows in the horizontal direction, a common requirement.īut it turns out, they have a hidden dependency: You can't have one axis be hidden in any way (hidden, scroll and auto all limit the content from expanding beyond the element) while having the other one set to visible: overflow: hidden scroll will hide any horizontal overflows while adding a scrollbar for the vertical direction. Overflow is also a shorthand that also allows for two values: the first for the x direction and the second for the y direction. While overflow sets the overflow value for both axis, you can set a different value for both the x and y axis with overflow-x and overflow-y or with overflow-inline and overflow-block if you want to use logical properties. Often times You want overflow: auto, not overflow: scroll.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |