![]() It sounds backwards at first, but think of the min() value as providing the maximum value a property can have. So if the viewport is 1300px wide, the would end up being 650px wide (which translates to 50vw), however, if the viewport is, say, 1600px wide, the would only be 700px wide, because that is the smaller value between the two options available. What this ends up meaning is: the width of the pink div will be up to 700px wide, however, if the div would be smaller at 50% of the viewport width (50vw = 50 view width), it will take the smaller of the two values. In addition to the background-color and height for this, the CSS to focus on is: width: min(50vw, 700px) The pink rectangle in the CodePen above is the CSS min() example. Seeing this in action in a browser really helps me understand these concepts better, so I recommend you play around with the example above before proceeding to my more detailed, technical explanations. If you resize the browser this example runs in, you’ll see the pink and green rectangles resize accordingly (just inspect their sizes with the developer console tools to see how they adjust). Simple CodePen illustrating CSS min() and CSS max() and CSS clamp() and how they differ from each other in practice. Here’s a small CodePen example I put together of all three options, so can can see how each function differs when compared side by side. Similarly, CSS max() will set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value.īoth the min() and max() functions can be used anywhere a, ,, ,, , or is allowed. Ok, so back in the day, there were two CSS functions known as CSS min() and CSS max().ĬSS min() lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. Understanding them will help make CSS clamp() easier to wrap your head around (and when you see some of the workarounds that used to have to happen to accomplish the same thing, you’ll be so glad it exists!). An approach that is more suitable to the new world of shareable independent components.īefore I dive into CSS clamp(), however, let’s look back briefly at its two main predecessors: CSS min() and CSS max(). Today, I want to share with you the CSS clamp() function - a single function, purpose-built to allow almost any element to adjust its size within certain bounds to fit the viewport.ĬSS clamp() is an element-first approach to responsive styling. No, nothing requiring so much effort as that anymore, for we live in an age where CSS is awesome, and it just keeps getting better by the day (and with wider and wider spread browser support too). ![]() But what you won’t have to do is come up with some complex event listeners using the Web API ResizeObserver or CSS calc() functions or even CSS media queries that would swap out complete elements or components depending on the viewport size. If you haven’t experienced this yet, not to worry, you will. You know that moment when you’re coding something and think to yourself: “I wish this would grow or shrink depending on the viewport size… but only up to a certain point”? Photo by Heike Mintel on Unsplash Today is such a wonderful time to write CSS ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |