CSS3 Attribute Selectors กับแนวคิดการทำ Floating Layouts

เคยคิดหนักเรื่องการแบ่งหน้าเว็บออกเป็นหลายๆ สดมภ์กันไหมครับ ไม่ว่าจะ สอง สาม สี่ หรือห้า เมื่อเราต้องการแบ่งหน้าเว็บทีไร ต้องมาเขียน CSS ใหม่ทุกที แต่วิธีที่ผมจะแนะนำต่อไปนี้ มันต้องมีข้อแม้ และไม่ต้องไป ค้นหาว่า มี “ฝรั่ง” ที่ไหนเคยทำ หรือ พาทำ หรือไม่ ถึงมีจริง ผมก็ไม่รู้ว่าอยู่ตรงไหน

การตั้งค่าการการแบ่ง สดมภ์ อย่างเป็นมาตรฐาน เราสามารถเขียน CSS แค่ไม่กี่บรรทัด ก็ทำได้แล้ว แต่สิ่งที่เราจำเป็นต้องรู้คือ การเขียน CSS Selector ในหมวดหมู่ Attribute
Selector โดยเฉพาะ อย่างยิ่ง CSS Substring matching attribute Selector ถ้าใครยังไม่รู้ว่าเขียนยังไง ก็ลองค้นๆ หาเอาใน ThaiCSS นี่แหละครับ ผมเขียนไว้หลายแบบอยู่และนานมาแล้ว

Selectors ที่ต้องใช้ในการนี้มีทั้ง Child Selector และ Attribute Selector

  
  *[class*="แบ่งหน้า-แบบ"] { /*Fixed IE7 Floating bug*/
	height: 1%;
}

*[class*="แบ่งหน้า-แบบ"]:after { /*Fixed Modern browsers floating bug*/
	content: " ";
	display: block;
	clear: both;
}

*[class*="แบ่งหน้า-แบบ"]>* {
	float: left;
}

*[class$="สองสดมภ์"]>* {
	width: 50%;
}
*[class$="สามสดมภ์"]>* {
	width: 33.33%;
}
*[class$="สี่สดมภ์"]>* {
	width: 25%;
}
*[class$="ห้าสดมภ์"]>* {
	width: 20%;
}

*[class*="แบ่งหน้า-แบบ"]>*>*:first-child {
	padding: 10px;
}
  

ดูตัวอย่างการเขียน CSS Columns โดยการใช้ Substring Matching Selectors

เมื่อเรามาเขียน HTML เราจะเขียนออกมาได้เป็น

2 สดมภ์

  
  <div class="แบ่งหน้า-แบบ-สองสดมภ์">
    <div> 1</div>
  <div>2 </div>

  </div>
  

3 สดมภ์

  
  <div class="แบ่งหน้า-แบบ-สามสดมภ์">

    <div> 1</div>
  <div>2 </div>
  <div>3</div>
  </div>
  

เรามาดูว่า CSS ที่ผมเขียนไว้ก่อนหน้านั้น มันหมายความว่ายังไง และมันทำอะไรกับ Code HTML

*[class*="แบ่งหน้า-แบบ"]>* {
	float: left;
}

Selector นี้ *[class*="แบ่งหน้า-แบบ"]>* ใช้คู่กับ html นี้ <div class="แบ่งหน้า-แบบ-xxx">

นั่นก็คือ อะไรก็ตามที่เป็น ลูกที่ถูกสั่ง โดย class ตัวแม่ให้กระทำการ float: left; และ แบ่งความกว้างให้เกือบเท่าๆ กัน

การที่ผมยกตัวอย่างแค่ <div> ขึ้นมานั้น ไม่ใช่ว่าเราขะจำกัดอยู่แค่เพียง <div> เพราะ CSS ที่เขียนเอาไว้นั้น ขึ้นต้นด้วย *
(ดอกจัน) นั่นหมายความว่า เราสามารถเขียน ol หรือ ul เช่น <ol class=”แบ่งหน้า-แบบ-xxx”> แล้วใส่ <li> ให้เท่ากับจำนวนที่เราต้องการได้

ตามตัวอย่าง class สุดท้ายที่ผมเขียนคือ

  
  *[class*="แบ่งหน้า-แบบ"]>*>*:first-child {
	padding: 10px;
}

*[class*=”แบ่งหน้า-แบบ”]>*>*:first-child ถ้าเราต้องการใส่ padding ให้กับกล่อง หรือแต่ละสดมภ์ ในเราเพิ่ม อะไรก็ตามเข้ามาครอบ เนื้อหาไว้ก่อน แล้วค่อยใส่ ค่า padding หรือ border หรือ margin เข้าไป ผมจะปล่อยให้คลุมเครือเอาไว้
ให้แต่ละคน ไปนับ elements ย้อนหลังกันเอาเองนะครับ

ดูตัวอย่างการเขียน CSS Columns โดยการใช้ Substring Matching Selectors

ข้อควรจำ

1. ห้ามใส่ border, padding หรือ margin ให้กับ Childs ของแม่แบบที่เรา นำมาทำ การแบ่งสดมภ์
2. ถ้าจะใส่ ให้ไปใส่ใน หลาน ของแม่แบบแทน
3. Class หลักเหล่านี้ ให้เขียนไว้ท้ายสุดเสมอ ห้ามเขียนอะไร ต่อท้ายอีก (ใน html)

มีความสุขกับศีลธรรมอันดีงามของสังคมไทยครับ