การอัปเดตไวยากรณ์ที่ผ่อนคลายเกี่ยวกับการซ้อน 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 ปกติ

โชคดีที่วิศวกรค้นพบว่าเมื่อโปรแกรมแยกวิเคราะห์แยกวิเคราะห์ตัวเลือกที่ฝังอยู่เป็นพร็อพเพอร์ตี้ตามการส่งผ่านการใช้งานตามปกติไม่สำเร็จ ก็สามารถเริ่มโปรแกรมแยกวิเคราะห์อีกครั้งในโหมดที่ถือว่าตัวเลือกเป็นพร็อพเพอร์ตี้แทน การแยกวิเคราะห์จะดำเนินต่อ โดยยอมรับว่าการฝังเป็นลําดับชั้นของตัวเลือก การดำเนินการนี้รวดเร็วและเชื่อถือได้มากพอที่ระบบจะพิจารณาว่าเพียงพอที่จะเผยแพร่ไวยากรณ์