CSS מודרני — היכולות של 2024-2026 שמשנות הכל

6.1 למה CSS של 2024-2026 הוא לא ה-CSS שאתם מכירים

ה-CSS ש-AI כותב כברירת-מחדל הוא CSS של 2015. זה לא קוד רע — הוא פשוט ישן. הוא משתמש ב-@media queries לכל responsive, ב-:nth-child() וב-+ sibling selectors במקום :has(), ב-calc() במקום clamp(), ב-RGB במקום oklch(), ובמרבית המקרים — ב-JavaScript לדברים ש-CSS כבר עושה בעצמו.

למה זה קורה? כי ה-training data של ה-AI מכיל כמויות אדירות של קוד ישן. גם ה-AIs המתקדמים ביותר נוטים ל-"ברירת-המחדל הבטוחה" — קוד שעובד בכל מקום, אבל נראה כמו שנכתב לפני 10 שנים. עד שלא תבקשו במפורש פיצ'ר מודרני — לא תקבלו אותו.

המטרה של הפרק הזה היא כפולה: (א) לדעת מה קיים — להכיר את 20 הפיצ'רים החדשים שמשנים הכל. (ב) לדעת איך לבקש — לנסח פרומפט שמכריח את ה-AI להשתמש בהם.

ההבדל ב-3 דוגמאות

6.2 מערכת ה-4 Tiers — איך לסווג כל פיצ'ר חדש

הבעיה עם "CSS מודרני" היא שהוא לא מוצר אחיד. יש פיצ'רים שתומכים בהם ב-96% מהדפדפנים (אפשר להשתמש בלי מחשבה), ויש כאלה שעדיין רק ב-Chrome Canary (חכו שנה). כדי לא לבלבל, אנחנו מסווגים כל פיצ'ר ל-אחד מ-4 Tiers:

הסיווג של 20 הפיצ'רים בפרק (אפריל 2026)

הנה המפה המלאה של הפרק. שימו לב שהסטטוסים האלה משתנים מדי חודש — ה-cheat sheet שלכם חייב לכלול תאריך last-verified:

Last verified: אפריל 2026. הסטטוסים של שורות Tier 3 ככל הנראה ישתפרו משמעותית עד סוף 2026. בדקו ב-caniuse.com לפני כל פרויקט חדש.

6.3 Container Queries — הפיצ'ר שהורס את media queries

אם הייתם צריכים ללמוד רק פיצ'ר אחד מהפרק הזה — זה. Container Queries (שאילתות קונטיינר) הן המהפכה הגדולה ב-responsive design מאז media queries ב-2008. הרעיון: במקום לבדוק את רוחב המסך, אנחנו בודקים את רוחב הקונטיינר שבו האלמנט יושב.

הבעיה שהן פותרות

דמיינו product card. אותו רכיב מופיע ב-3 מקומות באתר: (א) בסיידבר צר של 280px, (ב) ב-main grid של 4 עמודות של 300px כל אחת, (ג) ב-hero של עמוד product שתופס 1200px. עם media queries רגילות, ה-card הזה לא יכול לדעת אם הוא בסיידבר או ב-hero — הוא רק יודע את רוחב המסך. אם המסך רחב (desktop 1440px), הוא "חושב" שיש לו הרבה מקום — אבל בפועל הוא נדחק ל-280px בסיידבר ונשבר.

Container Queries פותרות את זה. ה-card שואל את הקונטיינר שלו: "כמה מקום יש לי?" ומקבל תשובה מדויקת. אותו רכיב, 3 התנהגויות שונות, בלי JavaScript ובלי variants.

ה-Syntax הבסיסי

/* שלב 1: מסמנים את האב כ"container" */
.card-wrapper {
  container-type: inline-size;
  container-name: card;  /* optional — שם לשימוש ב-@container */
}

/* שלב 2: כותבים סטיילים על בסיס רוחב הקונטיינר */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

@container card (min-width: 600px) {
  .card {
    gap: 2rem;
  }
  .card img {
    width: 40%;
  }
}

תסתכלו על זה: אותו .card עובד בכל מקום. בסיידבר הוא column. ב-grid רחב הוא row. ב-hero הוא row עם תמונה גדולה. ה-HTML זהה. זה הקסם.

3 שימושים אמיתיים

Container Query Units — cqw, cqh

בנוסף ל-@container, יש יחידות חדשות שמבוססות על הקונטיינר:

• cqw — 1% מרוחב הקונטיינר (container query width)
• cqh — 1% מגובה הקונטיינר
• cqi — inline size (בכיוון הכתיבה — ב-RTL זה עדיין רוחב ברוב המקרים)
• cqb — block size

למשל, font-size: clamp(1rem, 3cqi, 2rem) — font שגודלו תלוי ב-container, לא ב-viewport. Genius.

6.4 :has() — הסלקטור שחיכינו לו 20 שנה

מ-1996 ועד 2022, ל-CSS היה חור גדול אחד: לא הייתה דרך לבחור אלמנט על בסיס הילדים שלו. יכולת לבחור child שיש לו parent מסוים (.parent .child), אבל לא להפך. ה-parent selector היה הבקשה הכי מבוקשת ב-CSS במשך שני עשורים.

ב-2022 הגיע :has() ופתר את זה. והוא עושה הרבה יותר מ"parent selector" — הוא מאפשר לבדוק כל קשר DOM: האם לאלמנט יש ילד? צאצא? אח (sibling) אחרי? אלמנט עם מצב ספציפי?

ה-Syntax

/* אלמנט X שיש לו ילד/צאצא Y */
X:has(Y) { ... }

/* .card שיש בתוכו img */
.card:has(img) {
  padding-top: 0;  /* בלי padding למעלה כי יש תמונה */
}

/* form שיש בו input לא-תקין */
form:has(input:invalid) {
  border: 2px solid red;
}

/* section שיש אחריו section */
section:has(+ section) {
  border-bottom: 1px solid var(--border);
}

8 שימושים מעשיים

.field:has(input:invalid:not(:placeholder-shown)) {
  --field-color: var(--danger);
}
.field:has(input:valid:not(:placeholder-shown)) {
  --field-color: var(--success);
}
.field label { color: var(--field-color, var(--neutral)); }
.field input { border-color: var(--field-color, var(--neutral)); }

.card:has(img) .card-text { padding: 1rem; }
.card:not(:has(img)) .card-text { padding: 2rem; text-align: center; }
.card:not(:has(img)) { background: var(--gradient-primary); }

.list:not(:has(li)) {
  display: block;
  padding: 4rem;
  text-align: center;
  color: var(--muted);
}
.list:not(:has(li))::before {
  content: "אין פריטים עדיין";
}

main { grid-template-columns: 1fr; }
main:has(aside) { grid-template-columns: 1fr 280px; }

body:has(#dark-mode-toggle:checked) {
  --bg: #0a0a0a;
  --text: #fafafa;
}

nav:has(a[href="/about"].active) .about-link {
  font-weight: 700;
}

.dropdown:has(.menu[aria-expanded="true"]) {
  background: var(--hover-bg);
}
.dropdown:has(.menu[aria-expanded="true"]) .arrow {
  transform: rotate(180deg);
}

article:has(+ article) {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

Performance — האם :has() איטי?

שאלה נפוצה: האם selector שמסתכל על ילדים לא יהיה לאט? התשובה: לא. המנועים המודרניים (Blink, WebKit, Gecko) אופטימיזו :has() למקרי שימוש פרקטיים — הוא רץ כמו כל selector אחר ברוב המקרים. המקרים היחידים שבהם אפשר לראות איטיות: :has() על עץ עמוק מאוד (1000+ אלמנטים) עם שינויי DOM תכופים. ברוב האתרים — לא תרגישו הבדל.

6.5 CSS Nesting — SASS בלי SASS

עשרים שנה השתמשו מפתחים ב-SASS/LESS/PostCSS רק בשביל דבר אחד: לכתוב CSS מקונן. נגמר. CSS Nesting native נתמך בכל הדפדפנים מ-2023, ואתם לא צריכים יותר preprocessor בשביל זה.

לפני ואחרי

/* CSS של 2015 — שטוח */
.card { padding: 1rem; border-radius: 0.5rem; }
.card h2 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); }
.card:hover { box-shadow: var(--shadow-md); }
.card.featured { border: 2px solid var(--primary); }
.card.featured h2 { color: var(--primary); }

/* CSS של 2026 — מקונן, native */
.card {
  padding: 1rem;
  border-radius: 0.5rem;

  & h2 { margin-bottom: 0.5rem; }
  & p { color: var(--muted); }

  &:hover { box-shadow: var(--shadow-md); }

  &.featured {
    border: 2px solid var(--primary);

    & h2 { color: var(--primary); }
  }
}

הכלל של ה-&

האופרטור & מייצג את ה-selector החיצוני. &:hover שווה ל-.card:hover. &.featured שווה ל-.card.featured. כדי להימנע מ-ambiguity, הפרשנות של CSS Nesting דורשת & במקרים מסוימים — הכי בטוח להשתמש בו תמיד.

כלל הזהב: לא יותר מ-3 רמות

Nesting הוא נשק דו-פני. אם תקוננו 5 רמות עמוק, תקבלו specificity wars שאתם לא יכולים לפתור. הכלל: עד 3 רמות. אם הגעתם ל-4, תחלקו לקלאסים נפרדים.

6.6 @layer — סוף מלחמות ה-specificity

אם כתבתם CSS עד היום, אתם מכירים את זה: !important שדורס !important אחר. שני .class שדוחים #id. Utility classes של Tailwind שמפסידים ל-component CSS. זה specificity war, והוא אחת הסיבות העיקריות למה CSS "מרגיש שבור".

Cascade Layers (@layer) פותרים את זה אחת ולתמיד. הרעיון פשוט: מה שבשכבה מאוחרת יותר תמיד גובר, ללא קשר ל-specificity של הסלקטור. שכבות נקבעות בסדר מפורש.

הדפוס המומלץ — 4 שכבות

/* הצהרת השכבות — קובעת את הסדר. קריטי! */
@layer tokens, base, components, utilities;

/* שכבה 1: Design Tokens — CSS custom properties */
@layer tokens {
  :root {
    --color-primary: oklch(55% 0.2 250);
    --space-1: 0.5rem;
    --space-2: 1rem;
  }
}

/* שכבה 2: Base — reset ו-defaults */
@layer base {
  * { box-sizing: border-box; }
  body { font-family: Heebo, sans-serif; line-height: 1.6; }
  a { color: var(--color-primary); }
}

/* שכבה 3: Components — רכיבים בנויים */
@layer components {
  .card {
    padding: var(--space-3);
    border-radius: 0.75rem;
    background: var(--bg-card);
  }
  .button-primary {
    background: var(--color-primary);
    color: white;
  }
}

/* שכבה 4: Utilities — דריסות נקודתיות (Tailwind-style) */
@layer utilities {
  .mt-4 { margin-top: var(--space-4); }
  .text-center { text-align: center; }
  .hidden { display: none; }
}

למה זה משנה הכל

עכשיו .mt-4 (utility) תמיד גובר על .card (component), בלי !important. אפילו אם ה-utility הוא סלקטור של 1 קלאס וה-component הוא סלקטור של 3 קלאסים — ה-utility ב-layer מאוחר יותר, ולכן ינצח. זה הופך את ה-CSS לצפוי.

מתי להשתמש ב-@layer

• חובה: בפרויקטים עם design system (tokens + components + utilities)
• חובה: כשמשתמשים בספריית UI חיצונית (shadcn, Material UI) + CSS מותאם אישית — עטפו את הספרייה ב-layer נפרד
• מועיל: בכל פרויקט מעל 500 שורות CSS
• overkill: ב-landing page של 100 שורות

6.7 color-mix() ו-oklch() — הצבעים של 2026

אם פרק 3 נתן לכם פלטת צבעים — הפרק הזה נותן לכם את השפה המודרנית לעבוד עם צבעים. שתי פונקציות חדשות משנות הכל:

1. color-mix() — ערבוב מכני של צבעים

/* ערבוב 60% אדום עם 40% כחול במרחב oklch */
background: color-mix(in oklch, red 60%, blue);

/* ליצור variants של ה-primary color */
--primary-light: color-mix(in oklch, var(--primary) 70%, white);
--primary-dark: color-mix(in oklch, var(--primary) 70%, black);
--primary-muted: color-mix(in oklch, var(--primary) 20%, transparent);

/* hover state — primary עם שכבת שקיפות */
.button:hover {
  background: color-mix(in oklch, var(--primary) 90%, black);
}

זה מחליף חישובי RGB ידניים, ספריות JS של color manipulation, ו-SASS lighten()/darken(). פחות מתמטיקה, יותר שליטה.

2. oklch() — מרחב צבע שהעין רואה נכון

HSL (Hue, Saturation, Lightness) היה הסטנדרט במשך 15 שנה. הבעיה: Lightness ב-HSL לא נתפס אחיד על-ידי העין האנושית. צהוב עם L=50% נראה בהיר בהרבה מסגול עם L=50%. זה הופך design systems לכאב ראש — אם תרצו ליצור גרדאציה אחידה של בהירות, תצטרכו לחשב ידנית.

OKLCH (OK Lightness Chroma Hue) פותר את זה. הבהירות אחידה perceptually. L=50% נראה זהה בבהירות בכל גוון. זה הופך את בניית ה-palette לקלה ועקבית.

/* Palette עם 5 רמות בהירות — כל שורה באותה בהירות חזותית */
--gray-100: oklch(95% 0.005 250);
--gray-300: oklch(85% 0.008 250);
--gray-500: oklch(60% 0.012 250);
--gray-700: oklch(35% 0.015 250);
--gray-900: oklch(15% 0.018 250);

/* Primary, secondary, accent — באותה בהירות */
--primary:   oklch(60% 0.18 250);  /* כחול */
--secondary: oklch(60% 0.18 20);   /* כתום — באותה בהירות */
--accent:    oklch(60% 0.18 140);  /* ירוק — באותה בהירות */

שלושת הפרמטרים של oklch()

• L (Lightness): 0-100% — 0 שחור, 100 לבן. perceptually uniform.
• C (Chroma): 0-0.4 לרוב — 0 אפור, ערכים גבוהים = רווי יותר. אין "מקס" אבנורמלי — תלוי בגוון ובדפדפן.
• H (Hue): 0-360 — גלגל הצבעים. 0 אדום, 90 צהוב, 180 ציאן, 270 סגול.

6.8 Subgrid — יישור מושלם בין grid items

הבעיה: יש לכם row של 4 cards. בכל card יש: כותרת, תיאור, מחיר, כפתור. הכותרות באורך שונה — חלקן שורה אחת, חלקן שתיים. זה גורם לתיאור ב-card עם כותרת קצרה להתחיל "גבוה יותר" מאשר ב-card עם כותרת ארוכה. ה-cards לא מיושרים.

Subgrid פותר את זה. במקום שכל card יהיה grid עצמאי — הוא יורש את ה-rows מה-grid הורה. כל הכותרות בשורה אחת, כל התיאורים בשורה אחרת, כל המחירים בשורה אחרת, כל הכפתורים בשורה אחרת. יישור מושלם.

הקוד

.card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto auto;  /* title, desc, price, button */
  gap: var(--space-3);
}

.card {
  display: grid;
  /* הקסם: יורש את ה-rows מה-parent */
  grid-template-rows: subgrid;
  grid-row: span 4;  /* התופס 4 שורות של ה-parent */
  gap: 0.5rem;
}

.card h3 { grid-row: 1; }
.card p { grid-row: 2; }
.card .price { grid-row: 3; }
.card button { grid-row: 4; }

התוצאה: יש לכם 4 "שורות וירטואליות" שגולשות על פני כל ה-cards. כל אלמנט עם grid-row: N יהיה באותו גובה באופקי. זה מה שלא היה אפשר בלי subgrid.

6.9 @scope — הגבלת סטיילים לאזור ב-DOM

פיצ'ר מתקדם יותר. @scope יוצר "גבול" ל-CSS — הוא חל רק על אלמנטים בתוך אזור מוגדר של ה-DOM. זה פותר את הבעיה של widgets שמשתלבים באתרים אחרים או components עם style isolation.

/* כל ה-CSS הזה חל רק בתוך .shopping-cart */
@scope (.shopping-cart) {
  :scope { padding: 1.5rem; }
  .item { border-bottom: 1px solid var(--border); }
  .price { font-weight: 700; color: var(--primary); }
}

/* Scope עם "Lower boundary" — חל מ-.article עד ל-.comments */
@scope (.article) to (.comments) {
  /* כאן כללים שחלים בתוך article אבל לא נכנסים לאזור תגובות */
  p { font-size: 1.125rem; line-height: 1.75; }
}

זה בעצם CSS Modules ללא build step. שימושי למי שבונה widgets, לא לרוב הפרויקטים.

Tier 2 באפריל 2026 — Chrome/Edge מלא, Safari/Firefox בבנייה. אם זה קריטי — @supports selector(:scope) ל-fallback.

6.10 Popover API — modals ו-tooltips ללא JavaScript

Popover API הוא אחד הפיצ'רים הכי חמים של 2024-2026. הוא מביא modals, tooltips, context menus, ו-dropdowns כ-HTML native — עם keyboard traps, Esc support, ו-click-outside handling מובנים.

דוגמה מינימלית

<!-- כפתור שפותח פופאובר -->
<button popovertarget="user-menu">תפריט משתמש</button>

<!-- הפופאובר עצמו -->
<div id="user-menu" popover>
  <a href="/profile">הפרופיל שלי</a>
  <a href="/settings">הגדרות</a>
  <button popovertarget="user-menu" popovertargetaction="hide">סגור</button>
</div>

זה הכל. אפס JavaScript. הדפדפן מטפל ב:

• פתיחה/סגירה בלחיצה על הכפתור
• סגירה ב-Esc
• סגירה בלחיצה מחוץ לפופאובר (auto mode)
• Keyboard navigation עם Tab
• Focus management — מחזיר focus לכפתור כשסוגרים
• Accessibility — ARIA attributes מובנים

2 סוגי Popover

• popover="auto" (ברירת-מחדל) — רק אחד פתוח בכל רגע, light dismiss (לחיצה מחוץ סוגרת).
• popover="manual" — כמה פתוחים בו-זמנית, לא נסגר אוטומטית — לתזכורות/טוסטים.

Styling עם ::backdrop

[popover] {
  padding: 1.5rem;
  border: none;
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
}

/* הרקע שמאחורי — כשה-popover פתוח */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

6.11 Anchor Positioning — סוף לספריית Floating UI

Floating UI (לשעבר Popper.js) היא ספרייה של ~10KB שכמעט כל אתר מודרני משתמש בה כדי למקם tooltips, dropdowns, popovers ליד כפתורים. Anchor Positioning מחליף אותה. CSS טהור.

/* הכפתור משמש כ-anchor */
button.help-btn {
  anchor-name: --help-anchor;
}

/* ה-tooltip "מתחבר" ל-anchor */
.help-tooltip {
  position: absolute;
  position-anchor: --help-anchor;

  /* ממוקם למעלה של ה-anchor, ממורכז אופקית */
  top: anchor(top);
  left: anchor(center);
  translate: -50% -100%;

  /* מרווח של 8px מה-anchor */
  margin-bottom: 8px;
}

/* Auto fallback — אם אין מקום למעלה, תעבור למטה */
.help-tooltip {
  position-try: flip-block;
}

זה מחליף חישובי JS של getBoundingClientRect, scroll/resize listeners, ו-reposition logic. CSS טהור, יותר מהיר, פחות קוד.

סטטוס אפריל 2026: Tier 2 — Chrome 125+/Edge 125+ מלא. Safari/Firefox בבנייה. @supports (position-anchor: --x) לבדיקה.

6.12 Native CSS Masonry — Pinterest ב-CSS טהור

Masonry הוא layout שבו אלמנטים בגבהים שונים "נופלים" לעמודות באופן אופטימלי — כמו Pinterest. עד 2025, זה דרש JavaScript (Masonry.js, Isotope). עכשיו CSS עושה את זה לבד.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: masonry;  /* זה הקסם */
  gap: 1rem;
}

שורה אחת. פחות שורה בעצם — שינוי של grid-template-rows ל-masonry. האלמנטים "נופלים" לעמודה הקצרה ביותר בכל פעם. Pinterest layout מלא.

Tier 3 באפריל 2026 — Chrome 145+ מאחורי flag. שאר הדפדפנים מתוכננים. עד שיהיה יציב — השתמשו ב-columns: 3 + column-gap כ-fallback (לא אותו דבר, אבל דומה).

6.13 CSS Mixins (@mixin, @apply) — reusable patterns native

עוד פיצ'ר שגוזל את SASS. Mixins הם "פונקציות CSS" — בלוק של כללים שאפשר "להחיל" על selector אחר.

/* הגדרת mixin */
@mixin card-base {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}

/* שימוש */
.product-card {
  @apply card-base;
  border: 1px solid var(--border);
}

.article-card {
  @apply card-base;
  max-width: 42rem;
}

Tier 3 — Chrome 145+ מאחורי flag. עד שיציב — Tailwind @apply הוא ה-alternative (אבל זה build-step, לא native). --var: paren-value עם @property הוא פתרון ביניים.

6.14 sibling-index() ו-sibling-count() — סטיילינג דינמי לפי מיקום

עד 2025, אם רציתם לסטייל אלמנטים על בסיס מיקומם במערך אחים, הייתם צריכים :nth-child(1), :nth-child(2) וכו' — מדרגה-מדרגה ידנית. sibling-index() ו-sibling-count() הופכים את זה לחישוב דינמי.

/* כל פריט ב-list — opacity דינמי לפי מיקום */
.list-item {
  opacity: calc(1 - (sibling-index() - 1) / sibling-count() * 0.5);
  /* הפריט הראשון — opacity 1, האחרון — 0.5 */
}

/* animation delay מדורג */
.card {
  animation: slide-in 0.6s ease forwards;
  animation-delay: calc(sibling-index() * 0.1s);
  /* card ראשון — 0ms, שני — 100ms, שלישי — 200ms... */
}

זה הרבה יותר אלגנטי מ-:nth-child(1) { ... } :nth-child(2) { ... } של 10 שורות. Tier 3 — Chrome 145+ באפריל 2026. @supports fallback.

6.15 corner-shape ו-superellipse — squircles בסגנון Apple

אם הסתכלתם על אייקון iOS אי-פעם — הפינות שלו "מעוגלות יותר מעיגול". זה נקרא squircle (square + circle), או מתמטית — superellipse. הפינה עוברת יותר בחלקות מהצלע לעקומה.

עד 2025, זה דרש SVG או JavaScript. עכשיו:

.ios-icon {
  border-radius: 20%;
  corner-shape: superellipse(2.5);
  /* הערך 2.5 = squircle "עגול יותר מעיגול" */
  /* superellipse(2) = עיגול רגיל */
  /* superellipse(4) = יותר מרובע */
  /* superellipse(infinity) = ריבוע חד */
}

הערך 2-2.5 נותן את ה-look של iOS. Tier 3 — Chrome 146+ מאחורי flag באפריל 2026. fallback — border-radius רגיל נראה "בסדר" גם בלי.

6.16 Can I Use — איך לבדוק support ב-30 שניות

האתר caniuse.com הוא מקור האמת של עולם ה-web. לפני כל פיצ'ר חדש — בדקו שם. ה-workflow של 30 שניות:

1. גשו ל-caniuse.com/<feature-name> (למשל caniuse.com/css-has)
2. חפשו את "Global" percentage בראש העמוד. זה אחוז המשתמשים העולמי שדפדפנם תומך
3. סתכלו על טבלת הדפדפנים. ירוק = תומך. אדום = לא. כתום = עם prefix או behind flag
4. בדקו "Notes & Known issues" למטה — יש תמיד גאצ'ות
5. קבלו החלטה לפי 4-Tier framework שלכם

דוגמה — :has() באפריל 2026

• Global: ~92%
• Chrome 105+ ✓, Edge 105+ ✓, Safari 15.4+ ✓, Firefox 121+ ✓
• החלטה: Tier 1. השתמשו בחופשיות.

דוגמה — CSS Masonry

• Global: ~50% (Chrome 145+ בלבד, מאחורי flag)
• החלטה: Tier 3. חכו או בנו עם fallback של columns.

6.17 @supports — Progressive Enhancement שלא שובר כלום

Progressive Enhancement (שיפור הדרגתי) היא אסטרטגיה: בונים קודם UX בסיסי שעובד בכל הדפדפנים, ואז מוסיפים שכבה של שיפור לדפדפנים שתומכים בפיצ'רים חדשים. ה-at-rule @supports הוא הכלי.

ה-Syntax

/* בסיס — עובד בכל הדפדפנים */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* שיפור — רק אם הדפדפן תומך ב-masonry */
@supports (grid-template-rows: masonry) {
  .gallery {
    grid-template-rows: masonry;
  }
}

Template מוכן להעתקה

/* ===== PROGRESSIVE ENHANCEMENT TEMPLATE ===== */

/* 1. BASELINE — UX בסיסי לכולם */
.modal {
  /* בסיס עם JavaScript toggle */
  display: none;
  position: fixed; inset: 0;
  background: white; padding: 2rem;
}
.modal.is-open { display: block; }

/* 2. ENHANCED — Popover API לדפדפנים שתומכים */
@supports selector(:popover-open) {
  /* כאן: שימוש ב-popover HTML attribute במקום class toggle */
  .modal[popover] { /* styles */ }
  /* JS יכול להשתמש ב-.showPopover() במקום להוסיף class */
}

/* 3. ENHANCED+ — anchor positioning */
@supports (position-anchor: --x) {
  .tooltip {
    position: absolute;
    position-anchor: --help-anchor;
    top: anchor(top);
  }
}

/* 4. ENHANCED++ — container queries */
@supports (container-type: inline-size) {
  .card-wrapper { container-type: inline-size; }
  @container (min-width: 400px) {
    .card { flex-direction: row; }
  }
}

3 סוגי @supports

• @supports (property: value) — בודק property/value (הכי נפוץ)
• @supports selector(:has(*)) — בודק selector (ל-:has, :popover-open)
• @supports not (container-type: inline-size) — בודק אי-תמיכה (שימושי ל-fallbacks)

6.18 Modern CSS Prompt — איך לכפות על AI לכתוב CSS של 2026

זה ה-deliverable המרכזי של הפרק. פרומפט מובנה שתוכלו להעתיק-להדביק לתחילת כל פרויקט AI, שמכריח את הכלי להשתמש ב-CSS של 2026 ולא של 2015.

Modern CSS Prompt Template v1.0 (English for AI tools)

MODERN CSS REQUIREMENTS — Use these features by name. Do not substitute with older alternatives:

Layout & Responsiveness:
- For COMPONENT responsiveness (cards, widgets, embeds) use Container Queries with container-type: inline-size and @container (min-width: N) {...}. Do NOT use @media for component-level responsive.
- For PAGE-LEVEL responsiveness (navbar, sidebar, hero), use @media.
- For card rows requiring alignment, use subgrid: grid-template-rows: subgrid.

Selectors & State:
- Use :has() for parent/ancestor state: form validation (.field:has(input:invalid)), card variants (.card:has(img)), empty states (.list:not(:has(li)))), conditional layouts.
- Do NOT use JavaScript for state that can be expressed via HTML (checkbox + :has(), aria-attributes + :has()).

Structure:
- Use CSS Nesting with & operator. Max 3 levels deep.
- Use @layer with this exact order: @layer tokens, base, components, utilities;.
- Wrap design tokens in @layer tokens, components in @layer components, utilities/Tailwind-style helpers in @layer utilities.

Colors:
- Use oklch() color space for all palette definitions. Do NOT use HSL for new palettes.
- Use color-mix(in oklch, X N%, Y) for variants (lighter/darker/muted). Do NOT use manual RGB math.
- Hover/active states: color-mix(in oklch, var(--primary) 90%, black).

UI Components:
- For modals, dropdowns, tooltips, context menus — use Popover API (HTML popover attribute + popovertarget).
- For positioning relative to another element (tooltips, dropdowns) — use Anchor Positioning (anchor-name, position-anchor, anchor()). Do NOT use Floating UI library.
- Use ::backdrop with backdrop-filter: blur() for modal overlays.

Fluid sizing:
- Use clamp(min, fluid, max) for responsive font-sizes and spacing. Do NOT use multiple media queries for this.
- Prefer cqi units in clamp() when sizing inside a container-typed element.

Progressive Enhancement:
- For features beyond baseline (Tier 2-3), use @supports to add enhancements without breaking older browsers.
- For :has(): @supports selector(:has(*)).
- For container queries: @supports (container-type: inline-size).

DO NOT (anti-patterns that AI defaults to):
- Do NOT use @media inside a component — use @container.
- Do NOT use JavaScript to toggle classes when :has() can read HTML state.
- Do NOT use SASS/LESS @import or nesting — use native CSS Nesting.
- Do NOT use HSL for new color palettes — use OKLCH.
- Do NOT use Floating UI, Popper, or manual getBoundingClientRect — use Anchor Positioning.
- Do NOT use position: fixed + manual focus trap for modals — use Popover API.
- Do NOT use !important — use @layer ordering instead.

Browser Support Baseline (last verified: April 2026):
- Target: Chrome 120+, Edge 120+, Safari 17+, Firefox 121+
- All Tier 1 features work. Tier 2-3 need @supports.

QUALITY GATE:
Before delivering, audit the CSS: (1) Is there any @media that should be @container? (2) Is there any JavaScript class-toggle that can be :has()? (3) Are colors in oklch()? (4) Are there @layer declarations? (5) Is there an Anchor Positioning block instead of JS positioning? (6) Are modals using popover attribute? If any answer is "no", check if you should refactor.

4 שלבי ההתאמה האישית

1. Target browsers: אם הפרויקט צריך לתמוך ב-IE11 (נדיר מאוד ב-2026) — הסירו את Tier 2-3. אחרת — השאירו הכל.
2. אילו פיצ'רים ב-Tier 2 לאשר? Popover ו-Subgrid — תמיד. Anchor Positioning — רק אם יש ספרייה שעדיין משתמשים בה. @scope — אם יש צורך ב-isolation.
3. Progressive Enhancement — להשאיר או להסיר: לפרויקט עם 5%+ פלח של משתמשים ישנים — להשאיר. לפרויקט internal/portfolio — אפשר להסיר ולהיות Chrome-first.
4. Quality gate — תמיד להשאיר: זה מה שמאלץ את ה-AI לבדוק את עצמו בסוף.