CSS Protips: Little-Known Features and Tricks

Table of Contents

1. CSS Custom Properties (Variables) Beyond the Basics
2. The :has() Pseudo-Class: The “Parent Selector” We’ve Waited For
3. Styling Scrollbars: From Ugly to Elegant
4. Responsive Typography with clamp(): No More Media Queries
5. aspect-ratio: Ditch the Padding Hack for Perfect Proportions
6. accent-color: Customize Form Controls in One Line
7. backdrop-filter: Create Stunning Glassmorphism Effects
8. content-visibility: Supercharge Performance for Large Pages
9. :is() and :where(): Simplify Selectors, Reduce Repetition
10. Logical Properties: Design for Global Audiences
11. Advanced Math Functions: min(), max(), and mod()

1. CSS Custom Properties (Variables) Beyond the Basics

Most developers know CSS variables (e.g., --primary-color: #3498db) for reusing values, but their true power lies in dynamic theming, inheritance, and interaction with JavaScript.

Key Features:

• Fallback values: Define backups for unsupported browsers or missing variables:

  .button {  
    color: var(--text-color, #333); /* Uses #333 if --text-color is undefined */  
  }  

• Media query scoping: Override variables for dark mode or mobile:

  :root { --bg-color: #fff; }  
  @media (prefers-color-scheme: dark) {  
    :root { --bg-color: #1a1a1a; } /* Dark mode bg */  
  }  

• JS integration: Update variables on the fly (e.g., theme toggles):

  document.documentElement.style.setProperty('--primary-color', '#e74c3c');  

Why It Matters:

Variables eliminate magic numbers, simplify theming, and enable real-time style updates without reloading the page.

2. The :has() Pseudo-Class: The “Parent Selector” We’ve Waited For

For years, CSS lacked a way to style a parent based on its children—until :has(). Dubbed the “parent selector,” it lets you target an element that contains specific descendants.

Syntax:

parent:has(descendant) { /* styles */ }  

Examples:

• Style a card if it has no image:

  .card:has(:not(img)) { border: 2px dashed #ffc107; }  

• Highlight a form label when its input is focused:

  label:has(+ input:focus) { color: #2ecc71; font-weight: bold; }  

Browser Support:

Supported in Chrome 105+, Firefox 121+, and Safari 15.4+. Use Can I Use for updates.

3. Styling Scrollbars: From Ugly to Elegant

Default scrollbars are often an afterthought, but CSS lets you customize them with minimal code—no JavaScript required.

Modern Approach (Standardized):

Use scrollbar-width (controls thickness) and scrollbar-color (track/thumb colors):

/* Thin, dark scrollbar */  
.scrollable {  
  scrollbar-width: thin; /* auto | thin | none */  
  scrollbar-color: #888 #eee; /* thumb color | track color */  
}  

WebKit Browsers (Chrome, Safari):

For more control (e.g., rounded corners, shadows), use prefixes:

.scrollable::-webkit-scrollbar { width: 8px; }  
.scrollable::-webkit-scrollbar-track { background: #eee; border-radius: 4px; }  
.scrollable::-webkit-scrollbar-thumb {  
  background: #888;  
  border-radius: 4px;  
  transition: background 0.2s;  
}  
.scrollable::-webkit-scrollbar-thumb:hover { background: #555; }  

Pro Tip:

Hide scrollbars entirely with scrollbar-width: none (standard) or ::-webkit-scrollbar { display: none; } (WebKit), but ensure content remains scrollable!

4. Responsive Typography with clamp(): No More Media Queries

clamp(min, preferred, max) dynamically scales values (like font size) between a minimum and maximum, based on viewport size. It replaces messy media queries for responsive text.

How It Works:

h1 {  
  font-size: clamp(2rem, 5vw, 4rem);  
  /* min: 2rem (32px), max: 4rem (64px), scales with 5% of viewport width */  
}  

Why It’s Better Than Media Queries:

• One line of code instead of 3+ media query blocks.
• Smoother transitions between breakpoints.

Advanced: Combine with calc()

For precise control, pair clamp() with calc():

p {  
  font-size: clamp(1rem, calc(1rem + 2vw), 1.5rem);  
}  

5. aspect-ratio: Ditch the Padding Hack for Perfect Proportions

Maintaining fixed aspect ratios (e.g., 16:9 for videos, 1:1 for avatars) used to require tricky padding hacks. Enter aspect-ratio.

Syntax:

.element { aspect-ratio: width / height; }  

Examples:

• 16:9 video container:

  .video { aspect-ratio: 16/9; width: 100%; }  

• Square avatar:

  .avatar { aspect-ratio: 1; border-radius: 50%; }  

Before vs. After:

6. accent-color: Customize Form Controls in One Line

Tired of default blue checkboxes and radio buttons? accent-color lets you set a custom color for form elements like checkboxes, radios, and progress bars—no need to rebuild them from scratch.

Example:

:root { accent-color: #9b59b6; } /* Purple accents */  

/* Specific overrides */  
input[type="checkbox"] { accent-color: #e74c3c; } /* Red checkboxes */  

Supported Elements:

• Checkboxes (<input type="checkbox">)
• Radio buttons (<input type="radio">)
• Range inputs (<input type="range">)
• Progress bars (<progress>)

7. backdrop-filter: Create Stunning Glassmorphism Effects

backdrop-filter applies effects (blur, brightness, contrast) to the area behind an element, unlike filter, which affects the element itself. It’s the secret to glassmorphism (frosted glass) effects.

Example: Glassy Navigation Bar

.navbar {  
  background: rgba(255, 255, 255, 0.7); /* Semi-transparent bg */  
  backdrop-filter: blur(8px); /* Blur behind the navbar */  
  -webkit-backdrop-filter: blur(8px); /* Safari fallback */  
}  

Pro Tip:

Pair with background: transparent and a subtle border for depth:

.glass-card {  
  background: rgba(255, 255, 255, 0.5);  
  backdrop-filter: blur(10px) brightness(1.1);  
  border: 1px solid rgba(255, 255, 255, 0.2);  
}  

8. content-visibility: Supercharge Performance for Large Pages

content-visibility tells the browser to defer rendering off-screen content, drastically improving load times for long pages (e.g., blogs, product lists).

How to Use:

.article-section {  
  content-visibility: auto; /* Renders only when on-screen */  
  contain-intrinsic-size: 800px; /* Hints at off-screen size to prevent layout shifts */  
}  

Why It Works:

• Off-screen elements skip layout, painting, and compositing.
• contain-intrinsic-size avoids “layout thrashing” by estimating the element’s size before it’s rendered.

Best For:

• Long lists (e.g., search results, comments).
• Articles with many sections or images.

9. :is() and :where(): Simplify Selectors, Reduce Repetition

These pseudo-classes group selectors, eliminating redundant code. The key difference: :is() has higher specificity, while :where() has 0 specificity.

:is() Example: Style Multiple Headings

Instead of:

h1 a, h2 a, h3 a { color: #3498db; text-decoration: none; }  

Use:

:is(h1, h2, h3) a { color: #3498db; text-decoration: none; }  

:where() Example: Low-Specificity Resets

Use :where() to avoid overriding styles with high specificity:

/* Low-specificity link reset */  
:where(nav, footer) a { color: inherit; }  

Pro Tip:

Combine with :not() for even more power:

:is(ul, ol):not(.no-bullets) { list-style: disc; }  

10. Logical Properties: Design for Global Audiences

Traditional properties like margin-left or text-align: left assume left-to-right (LTR) languages. Logical properties use flow-relative terms (e.g., inline-start instead of left) to support RTL (right-to-left) languages like Arabic or Hebrew.

Common Conversions:

Example: RTL-Friendly Card

.card {  
  padding-inline-start: 1rem; /* LTR: left padding; RTL: right padding */  
  text-align: start; /* Aligns with the language’s direction */  
}  

Why It Matters:

Future-proofs your design for global audiences without rewriting CSS for each language.

11. Advanced Math Functions: min(), max(), and mod()

Beyond calc(), CSS offers min(), max(), and mod() for dynamic value calculations.

min(): Enforce a Maximum Value

Limit a container’s width to the smaller of 800px or 90% of the viewport:

.container { width: min(90vw, 800px); }  

max(): Enforce a Minimum Value

Ensure font size is at least 16px, even on tiny screens:

body { font-size: max(1rem, 3vw); }  

mod(): Repeat Values with Remainders

Create striped backgrounds with precise spacing:

.striped {  
  background-image: linear-gradient(  
    45deg,  
    #ddd 0, #ddd mod(100%, 30px), /* Repeat every 30px */  
    transparent 0, transparent mod(100%, 30px)  
  );  
}  

Conclusion

CSS is more powerful than ever, and these protips barely scratch the surface. From :has() to content-visibility, these features streamline workflows, boost performance, and unlock creative designs. Start experimenting with one or two—you’ll wonder how you ever coded without them!

References

• MDN CSS Docs
• Can I Use (Browser support)
• CSS Tricks Almanac
• Web.dev CSS Guides

Let me know in the comments which protip you’ll use first—happy styling! 🚀