สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง
เราคงอาจจะเคยหงุดหงิดเวลาที่ต้องการให้หัวข้อในลิสต์ ที่เราทำขึ้นมานั้นมันวิ่งต่อเนื่องกันไป เช่น เราตั้ง h1 เป็นหัวข้อที่ 1 ใน h2 ที่ติดกับ h1 ก่อนหน้า เราอยากให้มันแสดงเลข 1.1 ออกมาก่อนขึ้นตัวหนังสือ เราก็สามารถใช้เรื่อง Generated Content นี่แหละครับในการจัดการ (แต่ว่าตอนนี้ การนับเพิ่มจุดทศนิยมนั้นมีเพียงแค่ Opera เท่านั้นที่ใช้งานได้)
คุณสมมัติต่างๆ มีดังนี้
- <string>หมายถึง การกำหนด Text ที่เราต้องการแสดง
- <uri>หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
- <counter>หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
- open-quote and close-quoteหมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
- no-open-quote and no-close-quoteหมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
- 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
<h1>ทดสอบการสร้าง Quote จาก CSS</h1>
<p class="quotes">อยากจะสร้าง Quote จาก CSS ทำยังไงดี</p>
<p class="open-quotes">อยากจะสร้าง Quote อีก</p>
<p class="close-quotes">แต่มีข้อความหลายบรรทัด</p>
<h1>ทดสอบการเรียกเนื้อหาภาพอัตโนมัติ</h1>
<p class="resource-image">ภาพนี้โดนเรียกมาใช้งานอัตโนมัติจาก CSS<span>ใน Span ไม่มีรูปจ๊ะ</span></p>
<h1>ทดสอบการเรียกเนื้อหาจาก attribute ต่างๆ</h1>
<p class="attr-content" title=" ตรงนี้ถูกดึงมาแสดงจาก title แหละ">ไหนลองทดสอบ</p>
<h1>ทดสอบการนับจำนวนเนื้อหา</h1>
<div class="content-index">
<h3>ทดสอบการนับจำนวน</h3>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h3>ทดสอบการนับจำนวน</h3>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h3>ทดสอบการนับจำนวน</h3>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
<h4>ทดสอบการนับจำนวนหัวข้อย่อย</h4>
</div>
ตัวอย่างการเขียน CSS สร้าง Quote อัตโนมัติ
p[class="quotes"]:before {
content: open-quote;
font: bold 30px Georgia;
color: #F00;
}
p[class="quotes"]:after {
content: close-quote;
font: bold 30px Georgia;
color: #F00;
}
p[class="open-quotes"]:before {
content: open-quote;
font: bold 30px Georgia;
color: #F00;
}
p[class="open-quotes"]:after {
content: not-close-quote;
font: bold 30px Georgia;
color: #F00;
}
p[class="close-quotes"]:before {
content: not-open-quote;
font: bold 30px Georgia;
color: #F00;
}
p[class="close-quotes"]:after {
content: close-quote;
font: bold 30px Georgia;
color: #F00;
}
ส่วนนี้ผมจะอธิบายตรงส่วนของ Class open-quote กับ close-quote นะครับคือผมเขียนคำสั่งว่า ก่อนที่จะเริ่ม tag p ที่ใช้ class open-quote ให้เปิด qoute ไว้และหลังจากปิด tag p ที่ใช้ Class close-quote จึงค่อยทำการปิด quote
ตัวอย่างการเขียน CSS สร้าง เนื้อหาอัตโนมัติ
p[class="automatic-content"]:after {
content: " นี่คือผลจากการสร้างเนื้อหาอัตโนมัติ";
}
ส่วนนี้หมายถึงการสร้างเนื้อหาว่า นี่คือผลจากการสร้างเนื้อหาอัตโนมัติ หลังจาก tag p ที่ใช้ class automatic-content
ตัวอย่างการเขียน CSS สร้าง ดึงไฟล์มาแสดงผลอัตโนมัติ
p[class="resource-image"] {
text-align: center;
}
p[class="resource-image"]>span:before {
content:url(images/sample-photo/sample-01.jpg);
display: block;
width: 150px;
height: 150px;
margin: 20px auto;
overflow: hidden;
text-align: center;
}
ส่วนนี้หมายถึงการดึงรูปที่ชื่อว่า sample-01.jpg ขึ้นมาแสดงก่อนหน้า tag span (:before) ที่อยู่ใน p ที่ใช้ class resource-image
ตัวอย่างการเขียน CSS สร้าง ดึงข้อความจาก Attribute มาแสดงผลอัตโนมัติ
p[class="attr-content"]:after {
content: attr(title);
background: #FFF;
color: #666;
}
ส่วนนี้หมายถึง การดึงเนื้อหามาจาก Attribute title หลังจาก tag p ที่ใช้ class attr-content
ตัวอย่างการเขียน CSS แสดงผลการนับจำนวนอัตโนมัติ ร่วมกับ Properties Counter-reset และ Counter-increment
div[class="content-index"] {
counter-reset: index;
}
div[class="content-index"]>h3:after {
content: " - นับครั้งที่ " counter(index) ".";
counter-increment: index; counter-reset: subindex;
}
div[class="content-index"]>h4:after {
content: " - นับหัวข้อย่อยครั้งที่ " counter(index) "." counter(subindex);
counter-increment: subindex;
}
ส่วนนี้หมาถึงใน 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
ปล.นี้เป็นบทความแรกของผมอาจจะมีอะไรขาดตกบกพร่องไปแน่ๆ หละ แต่ยังไงจะพยายามปรับปรุงและแก้ไขให้ดีกว่าเดิมนะครับ จะพยายามมีบทความให้บ่อยขึ้นช่วยแบ่งเบาภาระของพร ฮ่าๆๆ แล้วเจอกันใหม่บทความหน้าครับ
ขยันมาก
เจ๋งมากเลยครับ ขอบคุณมากครับ
ลองทำแล้วไม่ได้ค่ะ ต้องมีอะไรเพิ่มเติมจากข้างบนที่กล่าวมาหรือเปล่าคะ
รวบกวนบอก รายละเอียดหน่อยครับว่าใช้บราวเซอร์อะไร หรือติดตรงขั้นตอนไหนที่ไม่แสดงผล ขอบคุณครับ
ซักวันจะมาเก็บบทเรียนในนี้ให้หมด ;)
คือสงสัยว่าทำไมต้องเขียน.. CSS แบบนี้อ่ะครับ
div[class="content-index"]
เราไม่สามารถเขียน div.content-index เพื่อให้ได้ค่าออกมาเหมือนกันได้หรอครับ?
การเขียนลักษณะนี้เรียกว่าการเขียน 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 มาช่วยตอบอีกทีครับ เพราะผม อาจจะไม่เก่งพอ
ประเด็นที่แบงค์ได้ตอบนั้นค่อนข้างจะละเอียดและกระจ่างนะครับ ผมขอรอให้คุณนน อ่านสิ่งที่แบงค์ตอบก่อนละกันนะครับว่ายังไม่กระจ่างในประเด็นไหน สำหรับการนำการเขียนในลักษณะนี้มาใช้ กับโครงสร้าง HTML ในเชิงการนำไปใช้งานกับเว็บไซต์ที่มีความ “ใหญ่” และ “ซับซ้อน” นั้นเป็นประโยชน์มากๆ ครับ
ขอบคุณครับ
คิดว่าพอเข้าใจแล้วครับ.. ขอบคุณคร๊าบบ
มี css ที่ไม่ต้องเขียนเองมั้ย แบบชี้นิ้ว ๆ เอาแบบนี้ ๆ อิอิ