รายการ

พอดแคสต์ CSS - 030: รายการ

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

<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 คือสัญลักษณ์หัวข้อย่อย ขีดกลางสั้น หรือตัวเลขโรมันที่ช่วยระบุแต่ละรายการในลิสต์

หากตรวจสอบรายการในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะเห็นองค์ประกอบ ::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

มีพร็อพเพอร์ตี้ CSS ::marker ที่อนุญาตอยู่หลายรายการ ได้แก่

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

ประเภทดิสเพลย์

พร็อพเพอร์ตี้ list-style และ ::marker ทั้งหมดรู้จักจัดรูปแบบองค์ประกอบ <li> เนื่องจากมีค่าการแสดงผลเริ่มต้นของรายการลิสต์ คุณยังสามารถสร้างสิ่งต่างๆ ที่ไม่ใช่ <li> ลงในรายการได้

ซึ่งทำได้ด้วยการเพิ่มพร็อพเพอร์ตี้ display: list-item ตัวอย่างหนึ่งของการใช้ display: list-item คือการใช้สัญลักษณ์หัวข้อย่อยที่แขวนอยู่บนส่วนหัว เพื่อให้คุณเปลี่ยนเป็นชื่ออื่นได้โดยใช้ ::marker ตัวอย่างต่อไปนี้แสดงส่วนหัวโดยใช้ display: list-item เพื่อจุดประสงค์ด้านการจัดรูปแบบ โดยมีลิสต์ที่ใช้มาร์กอัปลิสต์ที่ถูกต้อง

แม้ว่าคุณจะเปลี่ยนทุกอย่างให้เป็นมุมมองรายการด้วย display ได้ แต่คุณไม่ควรใช้มาร์กอัปรายการที่ถูกต้องหากเนื้อหาที่คุณจัดรูปแบบเป็นรายการจริงๆ การเปลี่ยนลักษณะที่ปรากฏของรายการเป็นลิสต์รายการจะไม่เปลี่ยนแปลงวิธีที่บริการการช่วยเหลือพิเศษอ่านและจดจำรายการดังกล่าว ดังนั้น ระบบจะไม่อ่านรายการนั้นเป็นรายการสำหรับโปรแกรมอ่านหน้าจอหรือเปลี่ยนอุปกรณ์ คุณควรใช้มาร์กอัปที่สื่อความหมายและสร้างรายการด้วย <li> เสมอหากเป็นไปได้

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับรายการ

แหล่งข้อมูล

• คู่มือ MDN เกี่ยวกับรายการการจัดรูปแบบ
• หัวข้อย่อยที่กําหนดเองด้วย CSS ::marker
• Smashing Magazine: รายการ CSS, เครื่องหมาย และตัวนับ
• MDN การใช้ตัวนับ CSS
• โมดูลรายการ CSS และตัวนับระดับ 3
• กลเม็ด CSS: การนับด้วยตัวนับ CSS และตารางกริด CSS