Modern CSS
Learn about current CSS features and best practices that make styling more maintainable and powerful.
🎯 🚀 CSS Has Evolved
- Have you ever copied the same color code or value multiple times across a stylesheet?
- What happens when you need to change that value—how many places do you have to update?
- How do modern development tools like JavaScript frameworks handle reusable values?
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Define and use CSS custom properties (variables) for maintainable code
- ✓ Apply Apply modern selectors like :is(), :where(), and :has() for efficient targeting
- ✓ Utilize CSS functions (calc, clamp, min, max) for dynamic values
- ✓ Work with modern units (ch, ex, vmin, vmax) for responsive designs
- ✓ Implement logical properties for international layout support
- ✓ Understand Understand CSS Grid fundamentals as a modern layout system
- ✓ Recognize when to use modern CSS features vs. preprocessors
Prerequisites: Basic understanding of CSS and colors (covered in previous tutorials)
Introduction to Modern CSS
Modern CSS provides powerful features that make our stylesheets more maintainable, flexible, and easier to work with. In this tutorial, we'll explore these features and how they can improve your web development workflow.
What We'll Cover
- CSS Custom Properties (Variables)
- Modern Selectors and Pseudo-classes
- CSS Functions
- Modern Units and Values
- Logical Properties
- Grid and Modern Layout Concepts
CSS Custom Properties
Building on what we learned in the Colors tutorial, CSS Custom Properties (also known as CSS Variables) allow us to define reusable values throughout our stylesheets.
Basic Usage
Key Features:
- Can store any CSS value (colors, sizes, timing functions, etc.)
- Can be updated with JavaScript
- Can be scoped to specific elements
- Support fallback values
Modern Selectors
CSS has evolved to include powerful new selectors that make targeting elements more precise and maintainable.
New Selector Types
Pro Tip: Modern selectors can help reduce the need for extra classes and make your HTML cleaner.
CSS Functions
Modern CSS provides powerful built-in functions that help with calculations, transformations, and dynamic values.
Understanding CSS Functions
calc()
The calc() function performs calculations to determine CSS property values. It can:
- Mix different units (px, rem, %, vw, etc.)
- Perform basic math operations (+, -, *, /)
- Be nested inside other functions
clamp()
The clamp() function takes three values: minimum, preferred, and maximum. It:
- Ensures a value stays within a range
- Great for responsive typography
- Useful for maintaining layout constraints
minmax() for Grid
Used specifically in Grid layouts, minmax() sets a size range for grid tracks:
- Defines minimum and maximum sizes
- Creates flexible grid layouts
- Often used with auto-fit/auto-fill
Note: We're showing a basic example of CSS Grid here, but we'll cover Grid layouts in much more detail in the Intermediate CSS tutorials. For now, focus on understanding how the minmax() function works.
Function Combinations
CSS functions become even more powerful when combined:
Practical Examples
Pro Tip: Combining CSS functions with Custom Properties creates powerful, dynamic layouts.
Modern CSS Units
Modern CSS provides flexible units that help create responsive and maintainable designs.
Viewport Units
Units that are relative to the viewport (browser window) size:
New Viewport Units
Modern browsers now support small (s) and large (l) viewport units:
svh,lvh- Viewport height considering mobile browser chromesvw,lvw- Viewport width variantssvi,lvi- Inline size variantssvb,lvb- Block size variants
Container Units
Units that are relative to a container's size (with container queries):
Modern Relative Units
Units that provide better control over sizing:
Logical Properties
Logical properties and values allow you to write CSS that adapts to different writing modes and text directions.
Understanding Logical Properties
Physical Properties (Old Way)
Logical Properties (Modern Way)
Key Concepts:
- Block - The direction blocks are stacked in (usually top-to-bottom)
- Inline - The direction text flows (usually left-to-right)
- Start - The beginning of the flow
- End - The end of the flow
Common Logical Properties
Practical Examples
Pro Tip: Use logical properties when building internationalized websites or applications that need to support multiple writing modes.
Browser Compatibility
Most modern browsers support these CSS features, but it's important to know the coverage:
| Feature | Chrome | Firefox | Safari | Edge | Notes |
|---|---|---|---|---|---|
| CSS Custom Properties | ✅ 49+ | ✅ 31+ | ✅ 9.1+ | ✅ 15+ | Widely supported |
| Modern Selectors (:is, :where) | ✅ 88+ | ✅ 78+ | ✅ 14+ | ✅ 88+ | Good support |
| calc() | ✅ 26+ | ✅ 16+ | ✅ 7+ | ✅ 12+ | Excellent support |
| clamp() | ✅ 79+ | ✅ 75+ | ✅ 13.1+ | ✅ 79+ | Good modern support |
| Logical Properties | ✅ 87+ | ✅ 66+ | ✅ 15+ | ✅ 87+ | Modern browsers only |
| Container Queries | ✅ 105+ | ✅ 110+ | ✅ 16+ | ✅ 105+ | Recent feature |
Note: Browser support data is approximate. Check Can I Use for the most current information.
⏸️ Pause & Check: Do You Understand?
Before moving forward, can you answer these?
- Why use CSS custom properties instead of repeating values?
- How do :is() and :where() selectors help reduce specificity?
- When would you reach for clamp(min, preferred, max)?
- What problem do logical properties solve?
Check Your Answers
- Custom properties store reusable values in one place (e.g., :root { --brand-primary: #1e3a8a; }). They support runtime changes, theming, and dynamic updates via JavaScript without recompiling CSS.
- :is() and :where() let you group selectors while writing one rule. :where() always has zero specificity, making it ideal for utility styles. :is() takes on the specificity of its most specific argument.
- clamp() creates fluid values that stay within boundaries (e.g., clamp(1rem, 2vw, 1.5rem) for responsive font-size). It replaces media queries for many responsive sizing scenarios.
- Logical properties (margin-inline, padding-block, inset-inline, etc.) adapt to writing modes. They prevent duplicated rules for left/right or top/bottom, making internationalization and RTL support easier.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Lesson checkpoint
Test Your Knowledge
Strengthen your understanding of Modern by answering the quiz below.
Modern Quiz
Test your understanding of Modern concepts.
Lesson Complete: What You Learned
Key Takeaways:
- CSS custom properties enable theming, dark mode, and shared design tokens
- Modern selectors (:is, :where, :has) reduce duplication and control specificity
- Functions like calc(), min(), max(), and clamp() produce fluid, mathematical layouts
- Modern units (vh, vw, vmin, vmax, ch) create responsive designs without constant breakpoints
- Logical properties make internationalization and writing-mode support straightforward
- Keeping up with browser support ensures you ship safe, progressive enhancements
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Define and use CSS custom properties effectively Check!
- ✅ Apply modern selectors to target elements cleanly Got it!
- ✅ Use CSS math functions for responsive sizing Can explain it!
- ✅ Leverage new units and logical properties for global-ready layouts Could teach this!
- ✅ Plan progressive enhancement strategies based on browser support Check!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
Progressive Enhancement
- How do you ship modern features while keeping fallbacks?
- Which features require @supports checks in your projects?
Global Design
- How would logical properties simplify RTL support?
- What design tokens should become CSS custom properties?
🤔 Real-World Test:
Modern CSS powers design systems at companies like Shopify, GitHub, and Adobe. Teams rely on custom properties for theming, CSS math for fluid typography, and logical properties for global products. Staying current with CSS capabilities reduces dependency on heavy JS solutions and preprocessors.
Understanding modern CSS makes you more effective collaborating with designers and building performant interfaces.
🎯 Looking Ahead:
With modern CSS fundamentals in place, you're ready for the Responsive Design tutorial. You'll combine Flexbox, Grid, clamp(), and logical properties to craft layouts that adapt beautifully to any screen.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
JavaScript BasicsRelated Topics
Explore these related tutorials to expand your knowledge:
Practice Projects
Apply what you've learned with these hands-on projects:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: Using CSS animations - Guide to CSS animations
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings