Unlock the Power of CSS: 6 Golden Nuggets to Simplify Your Code
As the boundaries between CSS and JavaScript continue to blur, it’s exciting to explore the capabilities of CSS in handling functionality that previously required JavaScript. With each browser release, CSS is becoming an increasingly powerful language, capable of handling tasks that were once the domain of JavaScript.
Smooth Scrolling: A One-Line Wonder
Gone are the days of relying on JavaScript implementations to achieve smooth scrolling. The scroll-behavior property allows us to handle smooth scrolling with just one line of CSS code! Browser support is around 75%, and it’s coming to Edge 76 soon.
Dark Mode: A Clever Workaround
Implementing dark mode doesn’t have to be complicated. Wei Gao showed us a clever way to achieve a similar result using mix-blend-mode: difference, one of the blending modes supported on CSS. This approach eliminates the need to specify inverted colors, and you can isolate the elements you don’t want to change.
Truncate Text: A Native Solution
Meet text-overflow and line-clamp, two CSS properties that can provide a native, easy-to-implement solution for truncating text. These properties can help you achieve a consistent design across different sizes or resolutions, without relying on JavaScript-based solutions.
Scroll Snapping: Locking the Viewport
CSS scroll snapping is another handy functionality that allows you to create interactions like fullscreen sections, locking the viewport on specific locations as you scroll. With scroll-snap-type and scroll-snap-align, you can achieve this effect natively, without the need for math calculations and JavaScript.
Sticky Navigation: Simplifying Positioning
Sticky positioning is now easier than ever, thanks to the position: sticky property. An element with sticky positioning will behave as a relatively-positioned element until a given point on the viewport is reached, and then become a fixed-positioned element. Browser support is up to 92% with the -webkit prefix.
Bonus: @supports Media-Rule
Even though these CSS features are widely adopted and supported, you might still want to check if they are available on the browser before adding them. The @supports feature query allows you to test if the browser supports a specific property: value pair before applying a set of styles.
By leveraging these CSS golden nuggets, you can simplify your code, reduce your JavaScript bundle, and create compelling UIs that delight your users.