עדכון תחביר רגוע לגבי קינון CSS

התכונה 'עיצוב מותאם מראש' מופעל ב-Chrome 120.

Adam Argyle

מוקדם יותר השנה, הוספנו ל-Chrome את התכונה CSS nesting בגרסה 112, והיא זמינה עכשיו בכל הדפדפנים העיקריים.

עם זאת, הייתה דרישת תחביר קפדנית אחת, שעשויה להיות לא צפויה, שמפורטת במאמר הראשון של דוגמאות לא תקינות להטמעה. במאמר הזה נסביר מה השתנה במפרט, וממה שחל ב-Chrome 120.

שמות של תגי אלמנטים בתצוגת עץ

אחת מהמגבלות המפתיעות ביותר במהדורה הראשונה של תחביר ההטמעה של CSS הייתה חוסר היכולת להטמיע שמות של תגי רכיבים ריקים. הבעיה הזו תוקנה, כך שאפשר להשתמש ב-CSS בתצוגת עץ:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

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

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

מה השתנה כדי לאפשר את ההטמעה הזו?

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

היה ספק רב שאפשר ללמד את מנתח ה-CSS להבדיל בין שם תג (div) לבין שם מאפיין (visibility), כי כרגע למנתח אין מושג של מבט קדימה. כדי להבין שהאסימון הוא מאפיין, הדפדפן צריך לבדוק אם אחרי האסימון הלא ידוע מופיע :. לכן, במפרט המקורי, הסמל & שימש כדי להצביע לדפדפן שהקוד הבא הוא ערך בתצוגת עץ, ולא מאפיין וערך רגילים של CSS.

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