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

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