With several years of writing CSS under my belt, I've come to find several lesser-known CSS styles and functions that I would consider "hidden gems" as they aren't very widely used/mentioned online. Today I will share 5 of my favorites and talk about each of their use-cases, advantages in using them, as well browser compatibility. Each of the five items listed below I've used in my day-to-day work as a web engineer and you may find one, if not many, useful to your work as well!
clamp() is a CSS function to give an element's style dynamic dimension values while keeping them within the min/max range. Think of clamp() as a way to declare an elements size as well as its min & max values all within one statement. For example, we can declare an element's width, min-width, & max-width all within a single width delcaration using clamp().
.container { width: 70%; min-width: 200px; max-width: 400px; };
→
.container { width: clamp(200px, 70%, 400px); };
Browser Compatability: clamp() is supported by all modern browsers (not supported by Internet Explorer). Check out a full usage chart here.
The combination of scroll-snap-type and scroll-snap-align is incredibly useful when you want to help guide your users to specific sections of a scrollable container (and not in between sections). In the below example, we will utilize a "scroll-snap-type: y mandatory" style declaration in the scrollable container element, alongside a "scroll-snap-align: start" style declaration for the individual child div's. By doing so, we create a fluid user vertical scroll interaction where each individual child div will "snap" into place.
Browser Compatability: scroll-snap-type, scroll-snap-align styles are supported by all modern browsers (not supported by Internet Explorer). Check out a full usage chart here.
Have you ever been scrolling vertically through a section on a page or a pop-up modal only to reach the end and the main page behind the modal begins to scroll? Perhaps you didn't even realize you made it to the bottom yet! The overscroll-behavor CSS property fixes that by telling the browser what to do when reaching the boundary of an element's scrolling area. This property is incredibly powerful as we can avoid messing with any cumbersome scroll event listeners attached to specific elements on a given page. The below example is an exact replica of the previous demo, but you will notice when you vertically scroll and reach the final (third) slide, the main page will remain at the same vertical scroll position even if you continue scrolling vertically downward. This is accomplished by adding a "overscroll-behavior-y: contain" style declaration to the scrollable container. If you vertically scroll with your mouse pointer outside of the scrollable container, the rest of the page will scroll down!
Browser Compatability: overscroll-behavior is supported by all modern browsers. Check out a full usage chart here.
Do you have a unordered list of text and you'd like to seperate each item with a border? We can leverage a combination of the :not selector as well as the :last-of-type selector to accomplish this very simply. By combining these selectors on the list item element li:not(:last-of-type), we are able to apply a bottom border to all list items excluding the last list item in the unordered list.
Browser Compatability: :not, :last-of-type styles are supported by all modern browsers. Check out a full usage chart here.
In the modern web-development era of unanimous flexbox usage, the gap property is a style that I believe is highly underutilized. Rather than having to set margins and/or paddings to your child elements within a flex container, using the gap style can accomplish creating a uniform divider area between your flex items without the need for margin/padding. Below is an example of a flex container with a gap: 12px style applied to it, creating a cleanly spaced flex item arrangement using only a single style.
Browser Compatability: gap is supported by all modern browsers (not supported by Internet Explorer). Check out a full usage chart here.
Hope you enjoyed learning a few uncommon CSS styles/functions! you have any insights, comments, or questions about article feel free to reach out to me via the contact section below. Thanks for reading!
Tucker Massad
Boston, MA
tuckermassad@gmail.com
