🏠 Home / Hub

🎨 CSS Lesson 10 — CSS Variables & Modern CSS

← Back to CSS Menu  |  🏠 Hub

1. CSS Custom Properties (Variables)

/* Define in :root (global) */
:root {
  --primary-color: #42b883;
  --font-size-lg:  1.25rem;
  --border-radius: 8px;
}

/* Use with var() */
button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
}

/* Fallback value */
color: var(--missing, #333);   /* --missing မရှိရင် #333 သုံး */

/* Scope to component */
.card {
  --card-bg: white;
  background: var(--card-bg);
}

All elements below use CSS variables from :root:

var(--bg) + var(--radius) + var(--text) + var(--font-sm)

2. Theme Switching with CSS Variables

:root { --bg: #f0f4f8; --text: #333; }

.dark { --bg: #1a1a2e; --text: #e2e8f0; }

/* Toggle with JS */
document.body.classList.toggle('dark')

Theme Demo

ဒီ paragraph က var(--text) ကို color အဖြစ်သုံးတယ်

Card 1
Card 2

3. Change CSS Variables with JavaScript

// JS နဲ့ CSS variable ပြောင်း
document.documentElement.style.setProperty('--primary', '#e53e3e')

// Read CSS variable
getComputedStyle(document.documentElement)
  .getPropertyValue('--primary')
Color: var(--primary) | Radius: var(--radius)

4. calc() — Dynamic Calculations

width: calc(100% - 40px);          /* full minus padding */
width: calc(50% - 16px);           /* 2 columns with gap */
font-size: calc(14px + 0.5vw);     /* fluid font */
height: calc(100vh - 60px);        /* full height minus navbar */
margin: calc(var(--spacing) * 2);  /* var + calc combo */

Parent = full width | gap = 16px

calc(33% - 11px)
calc(33% - 11px)
calc(33% - 11px)
calc(70% - 8px)
calc(30% - 8px)

Fluid font-size = calc(14px + 0.5vw):

This text grows with viewport! Resize browser.

5. clamp() — Fluid but Bounded

clamp(minimum, preferred, maximum)

font-size: clamp(14px, 2.5vw, 24px);
/* min:14px မအောက် | vw based preferred | max:24px မကျော် */

width: clamp(200px, 50%, 600px);
/* min:200px | fluid 50% | max:600px */

Resize browser to see fluid changes:

clamp(16px, 3vw, 32px) — Fluid Heading!

clamp(13px, 1.5vw, 18px) — Body text, fluid but controlled

width: clamp(200px, 60%, 500px)

6. Modern Selectors — :is(), :where(), :has()

/* :is() — group selectors, keeps specificity */
:is(h1, h2, h3) { color: blue; }
/* = h1, h2, h3 { color: blue } ကို တိုသေးတယ် */

/* :where() — same but specificity = 0 */
:where(h1, h2, h3) { color: blue; }

/* :has() — parent selector! (new!) */
.card:has(img) { border: 2px solid green; }
/* img ပါတဲ့ .card ကိုပဲ */

.form:has(input:invalid) { border-color: red; }
/* invalid input ပါတဲ့ form ကို */

Without :has()

ပုံမှန် card

:has(img) → green border

img ပါတဲ့ card

7. Container Queries (New!)

/* Parent container ကို reference ယူ — viewport မဟုတ်ဘဲ */
.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 1fr 1fr; }
}

/* Media query → viewport ကြည့်
   Container query → parent container ကြည့် ✅ more flexible */
💡 Container queries က relatively new (Chrome 105+, Firefox 110+) — production မှာ support စစ်ပြီးမှ သုံးပါ

8. Design Token System — Real Project Pattern

:root {
  /* Colors */
  --color-primary:   #42b883;
  --color-secondary: #3182ce;
  --color-danger:    #e53e3e;
  --color-bg:        #f0f4f8;
  --color-surface:   #ffffff;
  --color-text:      #2c5364;
  --color-muted:     #718096;

  /* Spacing scale */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;

  /* Typography */
  --font-sm: 0.875rem;  --font-base: 1rem;
  --font-lg: 1.125rem;  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;   --font-3xl: 2rem;

  /* Border */
  --radius-sm: 4px;  --radius-md: 8px;
  --radius-lg: 16px; --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
}

Design tokens ကို :root မှာ centralize လုပ်ထားရင် — theme ပြောင်းတာ၊ redesign တာ အများကြီး လွယ်ကူတယ်

← CSS 09  |  🏠 CSS Menu

📌 Study Checklist