User Preference Queries

🎨 User Preference Queries: CSS That Listens to You!

The Magic of a Website That Knows What You Like

Imagine walking into a magical room. The lights automatically dim if you have sensitive eyes. The music stops if loud sounds bother you. Everything adjusts to make YOU comfortable.

That’s what User Preference Queries do for websites!

Your browser tells the website what you prefer. The website listens and changes itself to match. It’s like having a personal assistant for every webpage you visit.

🌙 prefers-color-scheme: Light vs Dark Mode

The Story

Think about your room at night. Some people like bright lights. Others prefer cozy darkness. Your phone knows which one you picked in settings!

Websites can read this preference too.

How It Works

Your device has a setting: “I like dark mode” or “I like light mode.”

CSS can detect this and change colors automatically!

/* Default: light theme */
body {
  background: white;
  color: black;
}

/* If user prefers dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a2e;
    color: #eee;
  }
}

Real Life Example

• You set your phone to dark mode at night
• You open a website
• The website instantly shows dark colors
• Your eyes feel happy!

Quick Tip 💡

Always design light mode first (it’s the default). Then add the dark mode rules inside the media query.

🎭 prefers-reduced-motion: Gentle on the Eyes

The Story

Some people get dizzy or feel sick when things move too fast on screen. It’s like being on a rollercoaster when you just wanted to sit on a bench!

Your device has a setting that says: “Please, no spinning or bouncing. Just show me things calmly.”

How It Works

When someone enables “Reduce motion” on their device, CSS can detect it:

/* Fun bouncy animation */
.button {
  animation: bounce 1s infinite;
}

/* If user wants less motion */
@media (prefers-reduced-motion: reduce) {
  .button {
    animation: none;
  }
}

What to Reduce

The Kind Rule 🌟

Never take away information—just remove the motion. A button should still work, just without the bounce.

👆 Hover and Pointer: Touch vs Mouse

The Story

Your finger is different from a mouse cursor.

• A mouse can hover (float above a button without clicking)
• A finger can only tap (touch means you already clicked!)

Some devices have precise pointers (mouse). Others have coarse pointers (big thumbs on small screens).

How It Works

CSS can detect what kind of pointing device you have:

/* Only show hover effects if user has a mouse */
@media (hover: hover) {
  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  }
}

/* For touch screens - bigger tap targets */
@media (pointer: coarse) {
  .button {
    min-height: 48px;
    min-width: 48px;
  }
}

The Pointer Types

graph TD
    A["What pointing device?"] --> B["pointer: fine"]
    A --> C["pointer: coarse"]
    A --> D["pointer: none"]
    B --> E["Mouse/Trackpad - Small precise clicks"]
    C --> F["Touch/Stylus - Big finger taps"]
    D --> G["No pointer - Keyboard only"]

The Hover Types

Pro Tip 🎯

Always make buttons at least 44×44 pixels on touch devices. Tiny buttons frustrate everyone!

🖨️ Print Stylesheets: Paper-Friendly Pages

The Story

You find an amazing recipe online. You click “Print.” But wait—it prints the menu, the ads, the comments, and 15 pages of nonsense!

Print stylesheets tell the browser: “When printing, hide the junk. Show only what matters.”

How It Works

/* Normal screen styles */
.navigation {
  display: flex;
  background: blue;
}

/* When printing */
@media print {
  /* Hide things that don't belong on paper */
  .navigation,
  .sidebar,
  .ads,
  .comments {
    display: none !important;
  }

  /* Make text dark and clear */
  body {
    color: black;
    background: white;
    font-size: 12pt;
  }

  /* Show link URLs so people know where to go */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
}

What to Do for Print

The Print Checklist ✅

1. Hide - Navigation, ads, videos, forms
2. Show - Main content, important images
3. Simplify - Black text, white background
4. Reveal - Full URLs for links
5. Size - Use points (pt) not pixels

🎪 Putting It All Together

Here’s a complete example showing all four features working together:

/* === Base Styles === */
body {
  font-family: 'Karla', sans-serif;
  background: #fff;
  color: #333;
}

.card {
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s;
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  body {
    background: #1e1e2f;
    color: #f0f0f0;
  }
  .card {
    background: #2a2a3d;
  }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

/* === Mouse Users Get Hover === */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
  }
}

/* === Touch Screens Need Big Buttons === */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
    padding: 12px 24px;
  }
}

/* === Print Version === */
@media print {
  nav, footer, .sidebar {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
}

🌟 Why This Matters

User Preference Queries make websites kind.

• 🌙 Dark mode saves battery and helps tired eyes
• 🎭 Reduced motion prevents dizziness
• 👆 Touch-friendly buttons prevent frustration
• 🖨️ Print styles save paper and ink

You’re not just coding. You’re caring.

🚀 Quick Reference

🎯 Remember This

User Preference Queries are like asking a guest: “How can I make you comfortable?”

Good websites listen. Great websites respond.

You now know how to build websites that automatically adapt to what users need. That’s not just smart coding—that’s thoughtful design. 💜