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

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