Tag: selectors

Pseudo-elements ถูกสร้างขึ้นมาเพื่อเข้าถึงภาษาโครงสร้าง (xhtml, html, xml ฯลฯ) ที่ CSS Selectors อื่นๆ เข้าไม่ถึง ซึ่งใช้ในรูปแบบ การหลอกว่ามี element นั้นๆ อยู่ ซึ่งก่อนหน้านี้ “แบงค์” ได้เขียนอธิบายเรื่อง “เรียนรู้การใช้งาน CSS Generated Content” เอาไว้ โดยรูปแบบของ Selectors นั้นใช้ CSS2 และเน้นไปที่ :before และ :after ซึ่งทำงานได้เหมือนกัน

Pseudo-elements

1. ::first-line คือ แถวแรก
2. ::first-letter คือ ตัวแรก
3. ::before คือ ก่อน (x)
4. ::after คือ หลัง (x)

ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้คือการจัดการหน้าเอกสารในรูปแบบ นิตยสารออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับสื่อสิ่งพิมพ์ หรือจัดหน้าให้กับ Printer

ก่อนหน้านี้ผมได้เขียนบทความ เรื่อง “แนวคิดการตั้งชื่อ Class และ ID ใน HTML เพื่อ Web 4.0” เอาไว้ ซึ่งเวลาก็นานพอสมควร ส่วนใหญ่บทความที่ผมเขียน มันมักจะไม่จบในตอน ซึ่งจะมีการแนะนำให้รออ่านในตอนต่อไป แล้วตอนต่อไป มันก็ไม่ยอมเขียนสักที บทความนี้ก็เช่นกันครับ เป็นบทความตอนต่อ ที่ต้องใช้เวลาร่วม 1 ปี จนสามารถเกิดขึ้นได้

ถึงแม้ว่า ผ่านมา 1 ปีแล้ว ผมก็ยังเชื่อว่า เนื้อหานั้นก็ยังไม่สายเกินไปอยู่ดี เพราะส่วนใหญ่ ไทซีเอสเอส มักจะเขียนบทความในฝัน กว่าที่พวกผมจะตื่นจากฝันมาเขียนบทความนอกฝันก็หลายปี แต่ตั้งแต่นี้ไป พวกผมคงเขียนบทความที่อ่านกันแล้วเข้าใจง่ายยิ่งขึ้นให้เหมาะสมกับประเทศที่กำลังพัฒนา และจะกำลังพัฒนาต่อไปไม่มีที่สิ้นสุดอย่างเมืองไทยของเรา

วันนี้ ผมคิดอะไรออกบางอย่าง เป็นกรณีเส้นขนบังภูเขาไฟ ชนิดที่เรียกได้ว่า ผมน่าจะคิดพบตั้งนานแล้ว ได้แต่นั่ง งงๆ ในความโง่ของตัวเอง เลยเอามาเขียนไว้ตรงนี้อีกที

เหตุการณ์ที่ว่านี้คือ การสั่ง element ใดใด ที่เป็น child element ยกเว้น child ตัวที่ 1

เช่นว่า เราแบ่งเนื้อหาออกเป็น คอลัมน์ แล้วเราต้องการขีดเส้นกั้นเอาไว้ แต่ ถ้าเราสั่ง border เช่น border-left เข้าไปตรงๆ นั้น มันจะทำให้ เกิด เส้นขอบขึ้นที่ ด้านซ้ายสุดของกล่องข้อมูลด้วย เราจำเป็นต้องหาทางลบเส้นขอบมันออกไป โดยที่ยังคงความเป็น semantic ของ html เอาไว้ให้ได้มากที่สุด

เมื่อครั้งเก่าก่อน เราอาจจะเขียน class ขึ้นมา 1 class ซื่อว่า .none-border {border: none;} แล้วเอาไปใส่ ใน element ตัวแรกที่เกิดเส้นขอบขึ้น เพื่อลบเส้นขอบออกไปแทน แต่เกิดคำถามขึ้นว่า ทำไม เราต้องไปเพิ่ม ค่าให้กับ Attribute class นั้น โดยที่ชื่อ class ไม่ได้แสดงออกถึงการสื่อสารด้าน เนื้อหา ข่าวสารในความเป็น Semantic web ของภาษาเลย

ซึ่งหน้าที่เหล่านี้ โดยความรับผิดชอบแล้ว มันอยู่ที่ภาษา CSS ไม่ใช่ HTML

มาดูกันว่า เราจะลบเส้นขอบด้านซ้ายของ คอลัมน์แรกออกไปได้ยังไง โดยที่ไม่ใส่ class เพื่อสั่งลบเส้นขอบออกไป

ในตอนแรก ผมตั้งใจเขียนบทความในเรื่องการเขียน Floating Layout โดยใช้ Simple Selectors ผสมกับ Combinators ผลปรากฎว่า พอผมกลับมานั่งอ่านเองแล้ว ยังเห็นความยุ่งยากของการทำความเข้าใจกับการเรียกชื่อ Selectors แบบต่างๆ อยู่ อาจกล่าวได้ว่า ถ้าคนที่ไม่แตกฉานเรื่อง CSS Selectors แล้วมาอ่าน คง มึนงง กลับบ้านไม่ถูกกันเลยทีเดียว

ก่อนหน้านี้ผมเขียนบทความเรื่อง "อาชีพ เขียน CSS" เอาไว้ ตั้งปณิธาน เอาไว้ว่า จะพยายามอธิบายสิ่งที่มันยากๆ ให้เข้าใจง่าย และจะพยายามหาเรื่องใหม่ๆ มาให้คนที่สนใจได้รับรู้และศึกษา ตาม Title ของ ThaiCSS ที่เปลี่ยนไป เป็น CSS3 จึงต้องหันกลับมา เริ่มเขียนเรื่องใหม่ ค่อยๆ แนะนำกันให้เข้าใจกันก่อน

บางคนที่ทำมาหากินกับการเขียน CSS HTML แทบเรียกชื่อ Selectors ของ CSS ไม่ถูกด้วยซ้ำไป เพราะฉะนั้นแล้ว ถ้าผมไม่มีเนื้อหาเกี่ยวกับการสร้างความเข้าใจในเรื่อง Selectors ของ CSS แล้ว นั่นก็หมายความว่า "ผม บกพร่องในหน้าที่ ของการถ่ายทอดความรู้เรื่อง CSS"

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

1. E[foo] คือ Element ใดๆ ที่มี Attribute ชื่อ foo เช่น div id=”main-contents”> ถ้านำมาเขียน CSS ก็จะเป็น div[id]{} หมายถึง div ที่มี attribute id อยู่

   ตัวอย่างที่ 1

   CSS:

   
div[id] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}


10 มีนาคม 2552 คือวันที่ W3C เรียก Last Call: Selectors Level 3 นั่นก็แสดงว่า ความจริงที่เราจะต้องเจอมันขยับเข้ามาใกล้ตัวมากขึ้นทุกที

สิ่งหนึ่งที่ผมคิดว่า W3 มีความจำเป็นอย่างยิ่งที่ต้องปล่อย CSS3 ออกมาให้เร็วที่สุดเท่าที่จะทำได้ก็เพราะว่า Windows 7 จะออกลุยตลาดอย่างช้าที่สุดก็ภายในปลายปีนี้ นั่นก็เป็นนิมิตหมายอันเลวร้ายสำหรับเว็บที่ไม่ได้มาตรฐานทั้งหลาย เพราะ IE8 จะนอนมากับ Windows 7 ด้วย ยกเว้นผู้ใช้ Windows ในยุโรป เพราะ M$ อาจจะไม่แถม IE8 มากับ Windows 7 เพราะ Opera เคยยื่นหนังสือร้องเรียนการผูกขาดตลาดบราวเซอร์อย่างไม่เป็นธรรมกับ EU มาก่อนหน้านี้

ช่างมันเหอะ กับเรื่องราวด้านบน เรามาดูกันว่า เราจะเริ่มทำตัวให้คุ้นชินกับ CSS3 กันยังไงได้บ้างนั่นต่างหาก

สำหรับผม ผมเขียน CSS3 ไปนานแล้ว แต่ใครที่ใช้ IE6 ก็คงไม่รู้ว่าผมเขียนอะไรไปบ้าง เพราะผมจงใจที่จะไม่ใช้ กับ IE ที่หลายๆ คนเห็นเวลาเอา IEs เข้าชม ThaiCSS หน้าเว็บมันดูไม่ได้บ้าง มันโย้นั่นโย้นี่ ก็คือผมตั้งใจให้มันเป็นอย่างนั้นเอง คือ ไม่อยากไปสนใจกับมันมาก ผมไม่ได้ทำเว็บเพื่อคนทุกคน แต่ผมแค่ทำเว็บเพื่อคนบางกลุ่ม

เพราะกลุ่มเป้าหมายทางด้านการสื่อสารของผม ไม่ใช่ “คนทั่วไป” อย่างที่หลายๆ คนเคยได้ยิน

อย่างต่ำไม่น้อยกว่า 5 ปี หรือภายในปี 2557 ประเทศไทยถึงจะหันมาใช้ CSS3 แต่สำหรับเว็บบางประเภทแล้ว คงเริ่มใช้กันตั้งแต่วันนี้