การอัปเดตไวยากรณ์ที่ผ่อนคลายเกี่ยวกับการซ้อน CSS

เปิดใช้การซ้อน Lookahead ใน 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 ทั่วไป พร็อพเพอร์ตี้และมูลค่า

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