CSS for Modern Web Development: Dark Mode, Scroll Snap, and CSS Subgrid

Published 2 months ago

Introduction

CSS has evolved significantly, offering powerful features that enhance user experience and accessibility. In this blog, we will explore three essential modern CSS techniques:

Dark Mode Implementation
Scroll Snap and Scroll Behavior
CSS Subgrid (New in CSS Grid)

These techniques improve design aesthetics, usability, and responsiveness. Let’s dive into each of them.

1. Dark Mode Implementation

Dark mode is a popular design trend that reduces eye strain, saves battery on OLED screens, and enhances visual appeal. Implementing dark mode in CSS can be done using CSS variables, media queries, and JavaScript for toggling.

Using CSS Media Queries

The simplest way to enable dark mode is by detecting the user’s system preference using the prefers-color-scheme media query:

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

This method ensures the website respects the user’s system-wide dark mode settings.

Dark Mode Toggle with JavaScript

To allow users to switch between light and dark modes manually, we can use JavaScript:

<button id="dark-mode-toggle">Toggle Dark Mode</button>
const toggleButton = document.getElementById('dark-mode-toggle');
toggleButton.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-mode');
});
.dark-mode {
    --bg-color: #121212;
    --text-color: #ffffff;
}

2. Scroll Snap and Scroll Behavior

Modern websites often require smooth scrolling experiences, especially for mobile users. Scroll Snap allows developers to control how scrolling behaves, ensuring users land on predefined sections.

Scroll Snap Example

To create a scrollable container with sections that snap into place:

.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.section {
    scroll-snap-align: start;
    height: 100vh;
}
<div class="scroll-container">
    <div class="section" style="background: red;"></div>
    <div class="section" style="background: blue;"></div>
    <div class="section" style="background: green;"></div>
</div>

This ensures each section snaps neatly into view when scrolling.

Smooth Scroll Behavior

To enable smooth scrolling behavior for anchor links:

html {
    scroll-behavior: smooth;
}

This ensures a seamless experience when navigating through internal page links.

3. CSS Subgrid (New in CSS Grid)

CSS Grid revolutionized web layouts, and the introduction of Subgrid takes it even further by allowing nested grids to inherit the parent grid structure.

Subgrid Example

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
}
<div class="container">
    <div class="item">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
    </div>
</div>

This allows child elements to align perfectly with the parent grid, providing more flexibility in responsive design.

Conclusion

Modern CSS features like Dark Mode, Scroll Snap, and CSS Subgrid enhance web development by improving accessibility, user experience, and layout flexibility. By implementing these techniques, developers can create more dynamic and engaging websites.

Start using these CSS features today to build cutting-edge web applications!

Obafemi Emmanuel