เรียนรู้การใช้งาน CSS Generated Content

สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง

เราคงอาจจะเคยหงุดหงิดเวลาที่ต้องการให้หัวข้อในลิสต์ ที่เราทำขึ้นมานั้นมันวิ่งต่อเนื่องกันไป เช่น เราตั้ง h1 เป็นหัวข้อที่ 1 ใน h2 ที่ติดกับ h1 ก่อนหน้า เราอยากให้มันแสดงเลข 1.1 ออกมาก่อนขึ้นตัวหนังสือ เราก็สามารถใช้เรื่อง Generated Content นี่แหละครับในการจัดการ (แต่ว่าตอนนี้ การนับเพิ่มจุดทศนิยมนั้นมีเพียงแค่ Opera เท่านั้นที่ใช้งานได้)

คุณสมมัติต่างๆ มีดังนี้

  1. <string>หมายถึง การกำหนด Text ที่เราต้องการแสดง
  2. <uri>หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
  3. <counter>หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
  4. open-quote and close-quoteหมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
  5. no-open-quote and no-close-quoteหมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
  6. attr(X)หมายถึง การดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ

รูปแบบและการใช้งาน

Properties Content เป็นคำสั่งที่มีการทำงานในรูปแบบ Generated Content โดยเราสามารถสร้างเนื้อหาหรือเรียกไฟล์ต่างๆขึ้นมาแสดงโดยไม่สร้าง tag html ขึ้นมาในหน้านั้นๆ โดยตัวคำสั่งจะทำงานก็ต่อเมื่อมีการระบุ CSS เป็น pseudo-elements เช่น :before หรือ :after ก่อนจึงจะแสดงผล นอกจากนี้ยังมี Properties อีกสองตัวที่จะใช้งานร่วมกันคือ Counter-reset และ Counter-increment ซึ่งจะช่วยให้เราสามารถนับจำนวนและสร้างตัวเลขกำกับเนื้อหาโดยอัตโนมัติ ถามว่าแล้วทำไมไม่ใช้พวก tag ที่ระบุเป็นรูปแบบ list เอาฟระจะมาเขียน CSS เพิ่มให้ยุ่งยากทำไม

ก็แหม…เนื้อหาในเว็บของเรามันไม่ได้มีแค่รูปแบบของ list อย่างเดียวซะหน่อยเราสามารถนำไปใช้ได้หลากหลายรูปแบบแล้วแต่เราจะเอาไปประยุกต์ใช้ ลองมาดูความหมายของ Counter-reset และ Counter-increment กันนะครับ

ความหมายของ Counter-reset และ Counter-increment

counter-reset: หมายถึงการเริ่มนับค่า เนื้อหาที่เราต้องการให้มีการนับจำนวน โดยการสร้างชื่อใดๆก็ได้แต่จะต้องตรงกับชื่อที่เรานับจำนวน โดยมีค่าเริ่มต้นที่ 0
counter-increment: หมายถึงการนับจำนวนเพิ่มของเนื้อหาที่ต้องการแสดง โดยมีค่าเริ่มต้นที่ 1

จากนี้ไปจะเป็นตัวอย่างการใช้งานในรูปแบบต่างๆของการ Generated Content ด้วย CSS นะครับ โดยผมจะแยกให้ดูเป็นส่วนๆ ว่ามีการเรียกใช้งานยังไงนะครับ

ตัวอย่างการเขียน

ตัวอย่างการใช้งาน CSS Generated Content

ตัวอย่างการเขียน CSS สร้าง Quote อัตโนมัติ

ส่วนนี้ผมจะอธิบายตรงส่วนของ Class open-quote กับ close-quote นะครับคือผมเขียนคำสั่งว่า ก่อนที่จะเริ่ม tag p ที่ใช้ class open-quote ให้เปิด qoute ไว้และหลังจากปิด tag p ที่ใช้ Class close-quote จึงค่อยทำการปิด quote

ตัวอย่างการเขียน CSS สร้าง เนื้อหาอัตโนมัติ

ส่วนนี้หมายถึงการสร้างเนื้อหาว่า นี่คือผลจากการสร้างเนื้อหาอัตโนมัติ หลังจาก tag p ที่ใช้ class automatic-content

ตัวอย่างการเขียน CSS สร้าง ดึงไฟล์มาแสดงผลอัตโนมัติ

ส่วนนี้หมายถึงการดึงรูปที่ชื่อว่า sample-01.jpg ขึ้นมาแสดงก่อนหน้า tag span (:before) ที่อยู่ใน p ที่ใช้ class resource-image

ตัวอย่างการเขียน CSS สร้าง ดึงข้อความจาก Attribute มาแสดงผลอัตโนมัติ

ส่วนนี้หมายถึง การดึงเนื้อหามาจาก Attribute title หลังจาก tag p ที่ใช้ class attr-content

ตัวอย่างการเขียน CSS แสดงผลการนับจำนวนอัตโนมัติ ร่วมกับ Properties Counter-reset และ Counter-increment

ส่วนนี้หมาถึงใน div ที่ใช้ class content-index ผมสร้างตัวแปลขึ้นชื่อ index มาโดยใช้ Properties Counter-reset เพื่อเป็นการเริ่มนับจำนวน หลังจากนั้นได้ใช้ Properties content แสดงผลการนับจำนวนเมื่อครู่ด้วยคำสั่ง counter(index) และได้สั่งให้เพิ่มจำนวนขึ้นทีละ 1 ที่มีการใช้ class content-index ด้วย Properties Counter-increment และหลังจากนี้ด้วยวิธีเดียวกันผมได้สร้างตัวแปลเพิ่มอีกหนึ่งตัวชื่อ subindex เพื่อนับหน่วยย่อยของเนื้อหา

และหลังผ่านขั้นตอนต่างๆ ผมได้นำมาประยุกต์ใช้สร้างโฟโต้แกลอรี่ขึ้นมาด้วยคำสั่งก่อนหน้านี้อยากให้ทุกคนได้ลองดูนะครับว่าผมใช้งานยังไง ผมว่า Properties ตัวนี้มีประโยชน์ค่อนข้างมากนะครับอยากให้ใช้กันดู เสียดายในเรื่องของ Counter-reset และ Counter-increment ที่ยังแสดงผลถูกต้องแค่ใน Opera เท่านั้นไม่งั้นคงได้ใช้งานกันสนุกสนานกว่านี้แน่ๆ

ตัวอย่างการใช้งาน CSS Generated Content

ปล.นี้เป็นบทความแรกของผมอาจจะมีอะไรขาดตกบกพร่องไปแน่ๆ หละ แต่ยังไงจะพยายามปรับปรุงและแก้ไขให้ดีกว่าเดิมนะครับ จะพยายามมีบทความให้บ่อยขึ้นช่วยแบ่งเบาภาระของพร ฮ่าๆๆ แล้วเจอกันใหม่บทความหน้าครับ

Back to Top

10 Responses to เรียนรู้การใช้งาน CSS Generated Content

  1. james

    เจ๋งมากเลยครับ ขอบคุณมากครับ

    Reply

  2. bsweet

    ลองทำแล้วไม่ได้ค่ะ ต้องมีอะไรเพิ่มเติมจากข้างบนที่กล่าวมาหรือเปล่าคะ

    Reply

    • Piyapong Thanawang
      Piyapong Thanawang

      รวบกวนบอก รายละเอียดหน่อยครับว่าใช้บราวเซอร์อะไร หรือติดตรงขั้นตอนไหนที่ไม่แสดงผล ขอบคุณครับ

      Reply

  3. finzaa

    ซักวันจะมาเก็บบทเรียนในนี้ให้หมด ;)

    Reply

  4. นนนี่

    คือสงสัยว่าทำไมต้องเขียน.. CSS แบบนี้อ่ะครับ

    div[class=”content-index”]

    เราไม่สามารถเขียน div.content-index เพื่อให้ได้ค่าออกมาเหมือนกันได้หรอครับ?

    Reply

    • Piyapong Thanawang
      Piyapong Thanawang

      การเขียนลักษณะนี้เรียกว่าการเขียน CSS แบบ Attribute Selectors จากตัวอย่างที่คุณนนนี่ถามมาหมายความว่า ให้ระบุแบบเจาะจงไปเลย ว่าเราต้องการให้ div คลาสที่มีชื่อเท่ากับ content-index เท่านั้น แต่ถ้าเมื่อใดก็ตาม หากเราทำการเพิ่ม class เข้ามายัง <div> นี้ เช่น <div class=”content-index love-you”> คำสั่ง div[class=”content-index”] จะใช้งานไม่ได้ทันที

      นั่นหมายความว่า การเขียนแบบด้านบนนั้น เขียนเพื่อ “จำกัด” การตั้งชื่อคลาสเอาไว้แบบ เจาะจง ไม่ให้มีการเพิ่มชื่อคลาสอย่างอื่นเข้ามานั่นเอง

      ประเด็นต่อมา การเขียน css แบบ class selector อย่างที่คุณนนนี่ ถามมาก็สามารถทำได้ แต่เราไม่สามารถระบุเจาะจงเฉพาะคลาสนี้เท่านั้น ดังนั้นวิธีการคือ เราจะเขียนชื่อคลาสที่เราต้องการสั่งงานโดยไม่ต้องเว้นว่าง แล้วเติมคลาสอื่นเข้ามาก็จะสามารถทำได้อย่างที่ Attribute selectors ทำได้

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

      โอเค ชิมิ๊ฮ๊าฟฟ

      ปล. ถ้าคำตอบนี้ไม่เคลียร์ เดี๋ยว Radiz มาช่วยตอบอีกทีครับ เพราะผม อาจจะไม่เก่งพอ

      Reply

    • Radiz Sutthisoontorn
      Radiz Sutthisoontorn

      ประเด็นที่แบงค์ได้ตอบนั้นค่อนข้างจะละเอียดและกระจ่างนะครับ ผมขอรอให้คุณนน อ่านสิ่งที่แบงค์ตอบก่อนละกันนะครับว่ายังไม่กระจ่างในประเด็นไหน สำหรับการนำการเขียนในลักษณะนี้มาใช้ กับโครงสร้าง HTML ในเชิงการนำไปใช้งานกับเว็บไซต์ที่มีความ “ใหญ่” และ “ซับซ้อน” นั้นเป็นประโยชน์มากๆ ครับ

      ขอบคุณครับ

      Reply

  5. นนนี่

    คิดว่าพอเข้าใจแล้วครับ.. ขอบคุณคร๊าบบ

    Reply

  6. Dome Wichanan

    มี css ที่ไม่ต้องเขียนเองมั้ย แบบชี้นิ้ว ๆ เอาแบบนี้ ๆ อิอิ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top