עדכון תחביר רגוע לגבי קינון 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.

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