ימים מוקדמים של שאילתות בסגנון מיכל

אנחנו עדיין בתחילת הימים עם שאילתות מיכל. מוקדם מדי לתמיכה בדפדפן רחבה, אבל Chromium כבר תומך בזה, Safari התחילו לתמוך בו בגרסה 16, ופיירפוקס הוא ככל הנראה לא הרחק מאחור.

רוב השיחות המוקדמות שנסבו סביב שאילתות מיכל בדרך כלל משווים את התחביר לשאילתות מדיה.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

שני אלה עושים שאילתות עבור min-width: 600. ההבדל הוא ששאילתת המדיה בוחנת את הרוחב של נקודת התצוגה כדי להפעיל את השינויים בסגנון בעוד שאילתת המכולה בוחנת את הרוחב המחושב של .posts אֵלֵמֶנט. מתוק!

אבל אחרי האזנה CSS פודקאסט פרק 59, אונה ואדם הסתכלו על עתיד שאילתות המכולה: שאילתות בסגנון! טיוטת העבודה הנוכחית של מפרט CSS Containment Module Level 3 מגדיר שאילתות בסגנון מיכל:

A שאילתה בסגנון מיכל מאפשר שאילתה של ערכים מחושבים של מיכל שאילתה. זהו שילוב בוליאני של אינדיבידואל תכונות סגנון () שכל שאילתה מאפיין יחיד וספציפי של מיכל השאילתה.

אבל עדיין אין דוגמאות על תחביר - רק תיאור קצר:

התחביר של א  זהה לזה של א הכרזה, והשאילתה שלו נכונה אם הערך המחושב של המאפיין הנתון במיכל השאילתה תואם את הערך הנתון (שמחושב גם ביחס למיכל השאילתה), לא ידוע אם המאפיין או הערך שלו אינם חוקיים או לא נתמכים, ו-false אחרת . שילוב התחביר הבוליאני והלוגיקה תכונות סגנון אל שאילתת סגנון זהה לזה של שאילתות תכונות CSS. (ראה @ תומך.)

אז, כן, בהינתן זמן אנחנו צריכים לצפות לעשות משהו כזה:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

זו דוגמה די מטומטמת. דבר אחד שיש לציין הוא שה container-type אינו מבוסס עוד על זה של המכולה inline-size אלא על ידי style. נוכל לפנק את זה כך:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…אבל כל שאילתות המכולה הן style שאילתות כברירת מחדל. נו. לפחות כפי שהוא נראה היום. למרים סוזן יש נחמד מתאר את הבעיות האפשריות שעלולות לצוץ עם זה.

היכן עשוי להיות שימושי שאילתת סגנונות מיכל? אני עדיין לא יודע! אבל דעתי מגיעה לכמה מקומות:

• ערכי נכסים מותאמים אישית: ראינו מאפיינים מותאמים אישית בשימוש כמו אינדיקטורים של מצב, כגון שיטת החלפת DRY אנה סיקרה לפני זמן מה. הערך משתנה, וכך גם הסגנונות.
• גישת מצב כהה חלופית: במקום לבסס הכל על שינוי במחלקת גוף שמקצה מחדש ערכי מאפיינים מותאמים אישית, אולי נוכל לשנות פלטת צבעים שלמה אם, נניח, רקע הגוף ישנה צבע.
• תנאי שאילתה מורכבים יותר: כמו, נניח, אנחנו רוצים ליישם סגנונות כאשר size ו style מתקיימים תנאים למיכל.

אונה גם הזכירה בפודקאסט CSS ששאילתות בסגנון מכיל יכולות לעזור למנוע כמה מצבי סגנון מביכים, כמו אם במקרה יש לנו טקסט נטוי בטקסט שכבר נטוי blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}