เรียนรู้การใช้งาน 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

<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

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