CSS: หลังจากไม่เพิ่มเนื้อหาให้กับองค์ประกอบบางอย่าง

Question 1

ฉันมีปัญหาในการทำความเข้าใจพฤติกรรมของ:afterคุณสมบัติCSS ตามข้อกำหนด ( ที่นี่และที่นี่ ):

ตามที่ระบุชื่อองค์ประกอบ:beforeและ:afterหลอกระบุตำแหน่งของเนื้อหาก่อนและหลังเนื้อหาโครงสร้างเอกสารขององค์ประกอบ

ดูเหมือนว่าจะไม่มีข้อ จำกัด ว่าองค์ประกอบใดสามารถมีคุณสมบัติ:after(หรือ:before) ได้ แต่ก็ดูเหมือนว่าจะทำงานเฉพาะกับองค์ประกอบเฉพาะ ... <p>งาน<img>ไม่ได้<input>ไม่ได้<table>ไม่ ฉันสามารถทดสอบเพิ่มเติมได้ แต่ประเด็นคือ โปรดทราบว่าสิ่งนี้ค่อนข้างสอดคล้องกันในเบราว์เซอร์ อะไรเป็นตัวกำหนดว่าวัตถุสามารถรับ a :beforeและ:afterคุณสมบัติได้หรือไม่?

Question 2

imgและinputทั้งสององค์ประกอบแทนที่

องค์ประกอบที่ถูกแทนที่คือองค์ประกอบใด ๆ ที่มีลักษณะและมิติที่กำหนดโดยทรัพยากรภายนอก ตัวอย่าง ได้แก่ ภาพ ( <img>แท็ก) ปลั๊กอิน ( <object>แท็ก) และองค์ประกอบของแบบฟอร์ม ( <button>, <textarea>, <input>และ<select>แท็ก) องค์ประกอบอื่น ๆ ทั้งหมดสามารถเรียกได้ว่าเป็นองค์ประกอบที่ไม่ถูกแทนที่

:beforeและ:afterใช้ได้เฉพาะกับองค์ประกอบที่ไม่ถูกแทนที่

จากข้อมูลจำเพาะ :

บันทึก. ข้อกำหนดนี้ไม่ได้กำหนดการโต้ตอบ :beforeและ:afterกับองค์ประกอบที่ถูกแทนที่อย่างสมบูรณ์ (เช่น IMG ใน HTML) สิ่งนี้จะได้รับการกำหนดรายละเอียดเพิ่มเติมในข้อกำหนดในอนาคต

ด้วยspan:before, span:afterDOM มีลักษณะดังนี้:

<span><before></before>Content of span<after></after></span>

<img src="" />เห็นได้ชัดว่าจะไม่ทำงานกับ

Question 3

:beforeและ:afterไม่จำเป็นต้องทำงานกับองค์ประกอบที่ถูกแทนที่และข้อกำหนดของ CSS ไม่ได้ระบุว่าจะทำงานอย่างไรสำหรับองค์ประกอบเหล่านี้และแนวคิดขององค์ประกอบที่ถูกแทนที่นั้นค่อนข้างคลุมเครือ

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

ผู้จำหน่ายเบราว์เซอร์เพิ่งตัดสินใจที่จะหลีกเลี่ยงปัญหาโดยการไม่ใช้องค์ประกอบหลอกเหล่านี้สำหรับองค์ประกอบบางอย่างเลย

ยังไม่ชัดเจนว่า“ องค์ประกอบที่ถูกแทนที่” หมายถึงอะไรและความหมายดูเหมือนจะเปลี่ยนไปบ้าง มักถูกตีความว่ามีความหมายเช่นเดียวกับองค์ประกอบว่าง (องค์ประกอบที่มีEMPTYเนื้อหาที่ประกาศกล่าวคือองค์ประกอบที่ไม่สามารถมีเนื้อหาใด ๆ ได้) แต่ CSS 2.1 จะแสดงสไตล์ชีตตัวอย่างพร้อมกับตัวเลือกbr:before(แม้ว่าเบราว์เซอร์จะเพิกเฉยต่อสิ่งนี้ แต่การใช้งานbrของตัวเอง ทาง). อาจเป็นที่ถกเถียงกันอยู่ว่ามีการย้ายองค์ประกอบเข้ามาในขอบเขตของการเรนเดอร์ CSS มากขึ้นเรื่อย ๆ อย่างน้อยก็บางส่วน ตัวอย่างเช่นinputองค์ประกอบ (รวมแบบอักษรสี ฯลฯ ) ส่วนใหญ่สามารถควบคุมได้ด้วย CSS ในเบราว์เซอร์สมัยใหม่

เบราว์เซอร์ปัจจุบัน (Firefox, IE, Chrome) ดูเหมือนจะไม่รองรับ:afterและ:beforeองค์ประกอบหลอกสำหรับองค์ประกอบว่างอื่น ๆ นอกเหนือhrจาก สำหรับhr, IE และ Chrome วางเนื้อหาที่สร้างภายในกล่องเป้ซึ่งเป็นการดำเนินงานของhr; เนื้อหาทำให้กล่องสูงขึ้น Firefox วางเนื้อหาของทั้งสอง (!) hrหลอกองค์ประกอบหลังจากที่กฎแนวนอนที่มีการดำเนินงานของ รูปแบบนี้แสดงให้เห็นถึงประเภทของปัญหา "การโต้ตอบ" ที่อ้างถึงใน CSS 2.1

มักอ้างว่าไม่สามารถใช้องค์ประกอบหลอกเหล่านี้สำหรับองค์ประกอบที่ว่างเปล่าเนื่องจากคำจำกัดความ HTML ไม่อนุญาตให้มีเนื้อหาใด ๆ นี่เป็นข้อผิดพลาดหมวดหมู่ กฎไวยากรณ์ของภาษามาร์กอัปไม่ได้ จำกัด สิ่งที่คุณทำได้ใน CSS

เพื่อสรุป:afterและ:beforeในขณะนี้ไม่สามารถใช้สำหรับองค์ประกอบว่าง (ยกเว้นเพียงเล็กน้อยสำหรับhr) แต่ส่วนใหญ่เกิดจากการใช้งานและอาจมีการเปลี่ยนแปลงในอนาคต

Question 4

องค์ประกอบที่ไม่มีแท็กปิดถือเป็นองค์ประกอบโมฆะและไม่สามารถแสดงเนื้อหาภายในได้:

https://www.w3.org/TR/html5/syntax.html#void-elements

เบราว์เซอร์ Blink, Webkit และ Quantum ทั้งหมดอนุญาตให้คุณสร้างองค์ประกอบหลอกเฉพาะในช่องทำเครื่องหมาย แต่สิ่งนี้ขัดแย้งกันเนื่องจากไม่มีข้อมูลจำเพาะที่อนุญาตให้มีพฤติกรรมนี้

นี่คือตัวอย่าง: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}