The CSS Podcast - 030: Lists
สมมติว่าคุณมีสินค้าหลายรายการที่วางแผนจะซื้อระหว่างไปซื้อของใช้ทั่วไปครั้งถัดไป วิธีหนึ่งที่พบบ่อยในการแสดงข้อมูลนี้ด้วยภาพคือรายการ แต่คุณจะเพิ่มการจัดรูปแบบลงในรายการซื้อของได้อย่างไร
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
การสร้างรายการ
รายการก่อนหน้าเริ่มต้นด้วยองค์ประกอบเชิงความหมายหรือ <ul>
ที่มีรายการในรายการซื้อของใช้ทั่วไป (องค์ประกอบ <li>
) เป็นรายการย่อย หากตรวจสอบองค์ประกอบ <li>
แต่ละรายการ คุณจะเห็นว่ามี display: list-item
ทั้งหมด ซึ่งเป็นเหตุผลที่เบราว์เซอร์แสดงผล ::marker
โดยค่าเริ่มต้น
li {
display: list-item;
}
นอกจากนี้ยังมีรายการอีก 2 ประเภท
คุณสร้างรายการที่เรียงลําดับได้ด้วย <ol>
ซึ่งในกรณีนี้รายการในลิสต์จะแสดงตัวเลขเป็น ::marker
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
และรายการคำอธิบายสร้างขึ้นด้วย <dl>
แต่รายการประเภทนี้ไม่ได้ใช้องค์ประกอบรายการย่อย <li>
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
รูปแบบรายการ
เมื่อทราบวิธีสร้างรายการแล้ว คุณก็จัดรูปแบบรายการได้ พร็อพเพอร์ตี้ CSS แรกที่ค้นพบคือพร็อพเพอร์ตี้ที่ใช้กับทั้งรายการ
พร็อพเพอร์ตี้รายการมี 3 รายการที่คุณสามารถใช้เพื่อจัดรูปแบบตัวอย่าง ได้แก่ list-style-position
, list-style-image
และ list-style-type
list-style-position
list-style-position
ช่วยให้คุณย้ายหัวข้อย่อยไปยัง inside
หรือ outside
เนื้อหาของรายการได้ outside
เริ่มต้นหมายความว่าหัวข้อย่อยจะไม่รวมอยู่ในเนื้อหาของรายการย่อย ส่วน inside
จะย้ายองค์ประกอบแรกในเนื้อหาของรายการย่อย
list-style-image
list-style-image
ช่วยให้คุณแทนที่หัวข้อย่อยของรายการด้วยรูปภาพได้ ซึ่งจะช่วยให้คุณตั้งค่ารูปภาพ เช่น url
หรือ none
เพื่อทําให้หัวข้อเป็นรูปภาพ, svg หรือ gif ได้ นอกจากนี้ คุณยังใช้สื่อประเภทใดก็ได้หรือแม้แต่ URI ข้อมูลก็ได้
มาดูวิธีเพิ่มรูปภาพสินค้าแต่ละรายการในร้านขายของใช้ทั่วไปเป็นlist-style-image
กัน
list-style-type
ตัวเลือกสุดท้ายคือการจัดรูปแบบ list-style-type
ซึ่งจะเปลี่ยนหัวข้อย่อยเป็นคีย์เวิร์ดรูปแบบที่คุ้นเคย สตริงที่กำหนดเอง อีโมจิ และอื่นๆ คุณดูประเภทรูปแบบรายการทั้งหมดที่เป็นไปได้ได้ที่นี่
list-style
ข้อความสั้นๆ
เมื่อคุณมีพร็อพเพอร์ตี้แต่ละรายการเหล่านี้แล้ว คุณจะใช้ตัวย่อ list-style
เพื่อตั้งค่ารูปแบบรายการทั้งหมดในบรรทัดเดียวได้ ดังนี้
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
ช่วยให้คุณประกาศการผสมผสานพร็อพเพอร์ตี้ list-style
1, 2 หรือ 3 รายการตามลำดับใดก็ได้ หากตั้งค่าทั้ง list-style-type
และ list-style-image
ระบบจะใช้ list-style-type
เป็นภาพสำรองหากรูปภาพไม่พร้อมใช้งาน
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
นี่เป็นพร็อพเพอร์ตี้ที่ใช้กันมากที่สุดของรูปแบบรายการที่กล่าวถึงในส่วนนี้ การใช้งานที่พบบ่อยอย่างหนึ่งคือ list-style: none
เพื่อซ่อนสไตล์เริ่มต้น สไตล์เริ่มต้นมาจากเบราว์เซอร์ และคุณมักจะเห็นสไตล์ชีตที่รีเซ็ตนำสไตล์รายการออก เช่น ระยะขอบและระยะห่าง คุณยังใช้ตัวย่อนี้เพื่อตั้งค่าสไตล์ได้ด้วย เช่น list-style: square inside;
จนถึงตอนนี้ ตัวอย่างต่างๆ มุ่งเน้นที่การจัดสไตล์รายการทั้งหมดและรายการในรายการ แต่จะมีแนวทางที่ละเอียดยิ่งขึ้นไหม
::marker
องค์ประกอบจำลอง
องค์ประกอบเครื่องหมาย list-item
คือสัญลักษณ์หัวข้อ ขีดกลาง หรือตัวเลขโรมันที่ช่วยระบุรายการแต่ละรายการในรายการ
หากตรวจสอบรายการใน DevTools คุณจะเห็นองค์ประกอบ ::marker
สำหรับรายการแต่ละรายการ แม้ว่าจะไม่ได้ประกาศรายการใดใน HTML ก็ตาม หากตรวจสอบ ::marker
เพิ่มเติม คุณจะเห็นการจัดรูปแบบเริ่มต้นของเบราว์เซอร์
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
เมื่อคุณประกาศรายการ แต่ละรายการจะมีเครื่องหมายกำกับ แม้ว่าจะไม่มีหัวข้อย่อยหรือตัวเลขโรมันใน HTML ก็ตาม องค์ประกอบนี้เป็นองค์ประกอบจำลองเนื่องจากเบราว์เซอร์สร้างองค์ประกอบนี้ให้คุณ และมี API การจัดรูปแบบแบบจำกัดเพื่อกำหนดเป้าหมาย ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างของหัวข้อย่อย CSS ::marker
มีการรองรับแบบจำกัดใน Safari
กล่องเครื่องหมาย
ในโมเดลเลย์เอาต์ CSS เครื่องหมายรายการในลิสต์จะแสดงด้วยกล่องเครื่องหมายที่เชื่อมโยงกับรายการในลิสต์แต่ละรายการ กล่องเครื่องหมายคือคอนเทนเนอร์ที่มักมีสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลข
หากต้องการจัดรูปแบบกล่องเครื่องหมาย ให้ใช้ตัวเลือก ::marker
ซึ่งจะช่วยให้คุณเลือกเฉพาะเครื่องหมายแทนการจัดสไตล์ตามรายการทั้งหมดได้
รูปแบบเครื่องหมาย
เมื่อเลือกเครื่องหมายแล้ว มาดูพร็อพเพอร์ตี้การจัดสไตล์ที่ใช้ได้กับตัวเลือกนี้กัน ดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อย่อยที่กำหนดเองด้วย CSS ::marker ได้ใน web.dev
พร็อพเพอร์ตี้ ::marker
ของ CSS ที่อนุญาตมีค่อนข้างมาก ดังนี้
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
ประเภทดิสเพลย์
พร็อพเพอร์ตี้ list-style
และ ::marker
ทั้งหมดของเราจะกำหนดสไตล์ให้กับองค์ประกอบ <li>
ได้เนื่องจากมีค่าการแสดงผลเริ่มต้นเป็น list-item นอกจากนี้ คุณยังเปลี่ยนสิ่งที่ไม่ใช่ <li>
ให้เป็นรายการในลิสต์ได้ด้วย
โดยเพิ่มพร็อพเพอร์ตี้ display: list-item
ตัวอย่างการใช้ display: list-item
คือในกรณีที่คุณต้องการหัวข้อที่มีหัวข้อย่อยแบบแขวนเพื่อให้คุณเปลี่ยนหัวข้อย่อยเป็นอย่างอื่นได้โดยใช้ ::marker
ตัวอย่างต่อไปนี้แสดงส่วนหัวที่ใช้ display: list-item
เพื่อจัดสไตล์ โดยมีรายการที่ใช้มาร์กอัปรายการที่ถูกต้อง
แม้ว่าคุณจะเปลี่ยนทุกอย่างให้เป็นมุมมองรายการด้วย display
ได้ แต่ไม่ควรใช้แทนการใช้มาร์กอัปรายการที่ถูกต้อง หากเนื้อหาที่คุณจัดสไตล์เป็นรายการจริงๆ การเปลี่ยนลักษณะที่ปรากฏของรายการเป็นรายการในลิสต์จะไม่เปลี่ยนวิธีที่บริการการช่วยเหลือพิเศษอ่านและจดจำรายการดังกล่าว ดังนั้นรายการดังกล่าวจะไม่ได้รับการอ่านเป็นรายการในลิสต์สำหรับโปรแกรมอ่านหน้าจอหรืออุปกรณ์เปลี่ยน คุณควรใช้มาร์กอัปเชิงความหมายและสร้างรายการด้วย <li>
ทุกครั้งที่ทำได้
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับลิสต์
องค์ประกอบที่อยู่ก่อนหน้ารายการในลิสต์เรียกว่า
::pencil
::marker
::counter
::bullet
รายการ HTML มี 3 ประเภท ได้แก่
<list>
<dl>
<ul>
<ol>
<lo>
<li>
รูปแบบใด 2 รูปแบบในรายการนี้จะนํารูปแบบไปใช้กับ ::marker
background-color
color
transition
display