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

האפשרות 'סידור מראש' מופעלת ב-Chrome 120.

Adam Argyle

מוקדם יותר השנה, Chrome שלח את סידור CSS בגרסה 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 רגילים.

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