องค์ประกอบจำลอง

The CSS Podcast - 014: Pseudo-elements

หากมีบทความเนื้อหาและต้องการให้ตัวอักษรตัวแรกเป็นอักษรตัวพิมพ์ใหญ่ที่ใหญ่กว่ามาก คุณจะทำอย่างไร

ใน CSS คุณสามารถใช้องค์ประกอบสมมติ ::first-letter เพื่อให้ได้รายละเอียดการออกแบบประเภทนี้

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

องค์ประกอบจำลองจะคล้ายกับการเพิ่มหรือกำหนดเป้าหมายองค์ประกอบเพิ่มเติมโดยไม่ต้องเพิ่ม HTML เพิ่มเติม โซลูชันตัวอย่างนี้ที่ใช้ ::first-letter เป็นหนึ่งในองค์ประกอบจำลองหลายรายการ องค์ประกอบจำลองมีบทบาทที่หลากหลาย และคุณจะได้เรียนรู้ในบทเรียนนี้ว่าองค์ประกอบจำลองใดบ้างที่ใช้ได้และวิธีใช้

::before และ ::after

ทั้งองค์ประกอบเสมือน ::before และ ::after จะสร้างองค์ประกอบย่อยภายในองค์ประกอบก็ต่อเมื่อคุณกำหนดพร็อพเพอร์ตี้ content

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content อาจเป็นสตริงใดก็ได้ แม้แต่สตริงว่าง แต่โปรดทราบว่าโปรแกรมอ่านหน้าจอมีแนวโน้มที่จะอ่านออกเสียงทุกอย่างที่ไม่ใช่สตริงว่าง คุณสามารถเพิ่มรูปภาพ url ซึ่งจะแทรกรูปภาพในขนาดเดิม คุณจึงปรับขนาดไม่ได้ นอกจากนี้ คุณยังแทรก counter ได้ด้วย

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

เมื่อสร้างองค์ประกอบ ::before หรือ ::after แล้ว คุณจัดสไตล์องค์ประกอบดังกล่าวได้ตามต้องการโดยไม่มีขีดจำกัด คุณสามารถแทรกองค์ประกอบ ::before หรือ ::after ลงในองค์ประกอบที่ยอมรับองค์ประกอบย่อยได้เท่านั้น (องค์ประกอบที่มีโครงสร้างเอกสาร) ดังนั้นองค์ประกอบอย่าง <img />, <video> และ <input> จึงใช้ไม่ได้

: input[type="checkbox"] จะเป็นข้อยกเว้น อนุญาตให้มีองค์ประกอบย่อยจำลอง

::first-letter

เราเคยเห็นองค์ประกอบจำลองนี้ตอนต้นบทเรียน โปรดทราบว่าพร็อพเพอร์ตี้ CSS บางรายการใช้ไม่ได้เมื่อกําหนดเป้าหมาย::first-letter พร็อพเพอร์ตี้ที่ใช้ได้มีดังนี้

• color
• พร็อพเพอร์ตี้ background รายการ (เช่น background-image)
• พร็อพเพอร์ตี้ border รายการ (เช่น border-color)
• float
• พร็อพเพอร์ตี้ font (เช่น font-size และ font-weight)
• พร็อพเพอร์ตี้ข้อความ (เช่น text-decoration และ word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

หมายเหตุ: คุณใช้ :first-letter ได้เฉพาะกับคอนเทนเนอร์บล็อกเท่านั้น ดังนั้น คุณจะเพิ่มลงในองค์ประกอบที่มี display: inline ไม่ได้

::first-line

องค์ประกอบจำลอง ::first-line จะให้คุณจัดรูปแบบบรรทัดแรกของข้อความได้ก็ต่อเมื่อองค์ประกอบที่มีการใช้ ::first-line มีค่า display เป็น block, inline-block, list-item, table-caption หรือ table-cell

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

เช่นเดียวกับองค์ประกอบสมมติ ::first-letter คุณจะใช้ได้เฉพาะพร็อพเพอร์ตี้ CSS บางรายการเท่านั้น ดังนี้

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

::backdrop

หากมีองค์ประกอบที่แสดงในโหมดเต็มหน้าจอ เช่น <dialog> หรือ <video> คุณสามารถจัดสไตล์พื้นหลัง ซึ่งเป็นพื้นที่ระหว่างองค์ประกอบกับส่วนที่เหลือของหน้าเว็บ โดยใช้องค์ประกอบจำลอง ::backdrop ดังนี้

video::backdrop {
  background-color: goldenrod;
}

::marker

องค์ประกอบจำลอง ::marker ช่วยให้คุณจัดรูปแบบสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลขสำหรับรายการในลิสต์หรือลูกศรขององค์ประกอบ <summary> ได้

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker รองรับพร็อพเพอร์ตี้ CSS เพียงชุดย่อยเล็กๆ เท่านั้น ดังนี้

• color
• content
• white-space
• ที่พัก font แห่ง
• พร็อพเพอร์ตี้ animation และ transition

คุณเปลี่ยนสัญลักษณ์เครื่องหมายได้โดยใช้พร็อพเพอร์ตี้ content คุณสามารถใช้คำสั่งนี้เพื่อตั้งค่าสัญลักษณ์บวกและลบสำหรับสถานะปิดและว่างขององค์ประกอบ <summary> ตัวอย่างเช่น

::selection

องค์ประกอบจำลอง ::selection ช่วยให้คุณจัดรูปแบบลักษณะที่ปรากฏของข้อความที่เลือกได้

::selection {
  background: green;
  color: white;
}

องค์ประกอบเสมือนนี้สามารถใช้เพื่อจัดรูปแบบข้อความที่เลือกทั้งหมดได้ ดังที่แสดงในตัวอย่างด้านบน นอกจากนี้ยังใช้ร่วมกับตัวเลือกอื่นๆ เพื่อเลือกรูปแบบที่เฉพาะเจาะจงมากขึ้นได้ด้วย

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

เช่นเดียวกับองค์ประกอบจำลองอื่นๆ ระบบจะอนุญาตเฉพาะพร็อพเพอร์ตี้ CSS บางรายการเท่านั้น ดังนี้

• color
• background-color แต่ไม่ใช่ background-image
• ที่พัก text แห่ง

::placeholder

Browser Support

• 57
• 79
• 51
• 10.1

Source

คุณสามารถเพิ่มคำแนะนำผู้ช่วยเพื่อสร้างองค์ประกอบ เช่น <input> ที่มีแอตทริบิวต์ placeholder องค์ประกอบจำลอง ::placeholder ช่วยให้คุณจัดสไตล์ข้อความนั้นได้

input::placeholder {
  color: darkcyan;
}

::placeholder รองรับกฎ CSS เพียงชุดย่อยเท่านั้น ดังนี้

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

หมายเหตุ: placeholder ไม่ใช่ <label> และไม่ควรใช้แทน <label> องค์ประกอบของแบบฟอร์มต้องมีการติดป้ายกำกับ มิเช่นนั้นผู้ใช้จะเข้าถึงไม่ได้

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

องค์ประกอบสุดท้ายในทัวร์ชมองค์ประกอบจำลองนี้คือองค์ประกอบจำลอง ::cue ซึ่งช่วยให้คุณจัดรูปแบบคำบอกใบ้ WebVTT ได้ ซึ่งเป็นคำบรรยายแทนเสียงขององค์ประกอบ <video>

นอกจากนี้ คุณยังส่งตัวเลือกไปยัง ::cue ได้ด้วย ซึ่งจะช่วยให้คุณจัดสไตล์องค์ประกอบที่เฉพาะเจาะจงภายในคำบรรยายแทนเสียงได้

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับองค์ประกอบจำลอง

ข้อใดต่อไปนี้ไม่ใช่องค์ประกอบจำลอง

::before

อย่าลืมเพิ่ม content: '';

::first-paragraph

ซึ่งไม่มีใน CSS

::after

อย่าลืมเพิ่ม content: '';

::marker

นี่เป็นองค์ประกอบสัญลักษณ์หัวข้อย่อยเมื่อคุณใช้องค์ประกอบรายการหรือประเภทการแสดงผล

::pencil

ซึ่งไม่มีใน CSS

:active

นี่เป็นคลาสจำลอง ไม่ใช่องค์ประกอบจำลอง

องค์ประกอบจำลองจะอยู่ในไฟล์ HTML

จริง

แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงองค์ประกอบจำลองในแผงองค์ประกอบ แต่องค์ประกอบจำลองจะไม่อยู่ใน HTML เนื่องจากเป็นของเบราว์เซอร์

เท็จ

คุณสามารถกําหนดเป้าหมายโดยใช้ CSS ได้ แต่จะไม่เห็นใน HTML