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

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

Adam Argyle

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

תמיכה בדפדפנים

• 120
• 120
• 117
• 17.2

מקור

עם זאת, הייתה דרישת תחביר קפדנית אחת, שעשויה להיות לא צפויה, שמפורטת במאמר הראשון של דוגמאות לא תקינות להטמעה. במאמר הזה נסביר מה השתנה במפרט, וממה שחל ב-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.

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