รายการ

พอดแคสต์ 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>

ลักษณะของรายการ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

เมื่อทราบวิธีสร้างรายการแล้ว คุณก็สามารถกำหนดรูปแบบได้ พร็อพเพอร์ตี้ CSS รายการแรกที่ค้นพบคือพร็อพเพอร์ตี้ที่ใช้กับทั้งรายการ

พร็อพเพอร์ตี้รูปแบบรายการที่คุณใช้จัดรูปแบบตัวอย่างได้มีอยู่ 3 อย่าง ได้แก่ list-style-position, list-style-image และ list-style-type

list-style-position

list-style-position ช่วยให้คุณสามารถย้ายสัญลักษณ์หัวข้อย่อยไปยัง inside หรือ outside เนื้อหาของรายการได้ ค่าเริ่มต้น outside หมายความว่าหัวข้อย่อยจะไม่รวมอยู่ในเนื้อหารายการ ขณะที่ inside ย้ายองค์ประกอบแรกไปยังเนื้อหาของรายการ

รายการที่มีทั้งด้านนอกและด้านใน ::marker ซึ่งแสดงว่าด้านนอก (ค่าเริ่มต้น) ไม่อยู่ในรายการและอยู่ในช่องเนื้อหาของรายการ

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

รายการที่มี 3 รายการซึ่งแสดงว่าแต่ละหัวข้อย่อยเป็น ::marker องค์ประกอบเทียม

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

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

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

องค์ประกอบที่อยู่หน้ารายการจะเรียกว่า

::หัวข้อย่อย
โปรดลองอีกครั้ง
::ดินสอ
โปรดลองอีกครั้ง
::เครื่องหมาย
ถูกต้องแล้ว!
::counter
โปรดลองอีกครั้ง

รายการ HTML มีอยู่ 3 ประเภท ได้แก่

<dl>
ถูกต้องแล้ว!
<lo>
โปรดลองอีกครั้ง
<ol>
ถูกต้องแล้ว!
<li>
โปรดลองอีกครั้ง
<ul>
ถูกต้องแล้ว!
<list>
โปรดลองอีกครั้ง

รูปแบบ 2 ข้อใดในรายการนี้ที่จะนำรูปแบบไปใช้กับ ::marker

transition
ถูกต้องแล้ว!
background-color
โปรดลองอีกครั้ง
color
ถูกต้องแล้ว!
display
โปรดลองอีกครั้ง

แหล่งข้อมูล