CSS

CSS Pseudo-classes ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ
Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน

ปัญหาจะตามมาตรงนี้ เพราะ คนทำงานมันยังไม่รู้ว่า Simple Selectors มันคืออะไรกันวะ หน้าตาเป็นยังไง ถ้าอย่างนั้น เอาอย่างนี้ ผมจะขอไกด์ไลน์ ให้พอเป็นอีโนให้ เช่น สมมุติว่าเรามีกลุ่ม HTML กลุ่มหนึ่ง เราจะเขียน CSS จัดการ ให้เริ่มลำดับการเลือกที่

1. Type Selector
2. Universal Selector
3. Attribute Selectors
4. Class selectors (อันนี้ได้ข่าวว่า ชาวไทยผู้คลั่งชาติ ชอบใช้กันมาก)
5. ID Selectors (อันนี้ หลายคนก็ยังไม่รู้ว่ามันต่างจาก อันด้านบนยังไง และเลือกใช้งานยังไงอีก)
6. พอมาถึงตรงนี้ ถ้ายังเลือกหา Selectors ที่เหมาะสมเพื่อจะจัดการกับ HTML ของเรายังไม่ได้ ให้ข้ามไปที่ Combinators Selectors โดยเริ่มที่การเลือก Descendant Combinator ก่อน ถ้ายังไม่ได้ ให้ไป
7. Child combinators
8. Sibling combinators โดยในนี้ มี 2 อันให้เลือกใช้คือ Adjacent sibling และ General sibling
9. ถ้าลูกค้าเร่งงานมาด่วนมาก คิดไม่พบ ว่าอะไร เป็นยังไง ให้ทำงานหาเงินก่อน อย่าเพิ่งคำนึงถึง 8 ข้อด้านบนมาก เดี๋ยวจะไม่มีเงินกินข้าว

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

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

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

เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที
คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก

จากข่าวสองมาตรฐานเรื่องล่าสุดที่ Apple ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3 อย่างเต็มที่ พร้อมๆ กับทำ Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วย

แม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน

จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$ เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน

ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ "อย่าหลงประเด็น" ในขณะที่คนอื่นต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล

ย้อนกลับไปเมื่อ 3-4 ปีที่ผ่านมา นับจากปีปัจจุบัน (2553) คำว่า CSS Designer เพิ่งถือกำเนิดขึ้นใจเมืองไทย เวลาผ่านล่วงไป สาม สี่ปี ก็จริง เป็น สาม สี่ปีที่ไม่ค่อยได้เดินไปไหนกัน อย่างไรก็ตาม เท่าที่ผมสังเกต บ้านเราถือว่าเดินตามเรื่อง CSS มาไกลกันอักโข แต่ก็ยังไม่ถึงขั้นที่เรียกว่าตามทัน

ในระดับบริษัท ห้างร้าน เริ่มมี แผนกเขียน CSS HTML แยกออกจาก Interface Design อื่นๆ แต่สำหรับบางบริษัท ยังทำแบบ All-in-one ก็เป็นอันเข้าใจว่า อาจจะด้วยความเบี้ยน้อยแต่หอยใหญ่ ก็ว่ากันไป

มองย้อนกลับไปข้างหลังแล้ว เรามามองโค้งแบบลูกยิงไกลของ โรนัลโด้ บ้าง ว่า ในอนาคตอันใกล้ ใกล้ นี้ ในเรื่องราวของการเขียน CSS HTML มันจะแปลกแปร่งออกไปจากเผ่าพันธุ์เดิมดั้ง ดั่งเคยเป็นมายังไงบ้าง

วันนี้ผมจะมาพูดเกี่ยวกับการใช้ CSS มาช่วยในการทำให้ User Interface ของหน้าแบบฟอร์มทำงานตอบโต้กับผู้ใช้งานได้ดีขึ้น

การใช้ pseudo-classes ของ CSS เข้ามาช่วยในการตบแต่งหน้าแบบฟอร์มนั้นอาจจะช่วยให้แบบฟอร์มดูน่าใช้งานมากขึ้น และ ช่วยให้ผู้ใช้งานได้รู้ว่าตัวเองกำลังกรอกแบบฟอร์มตรงไหนอยู่ พร้อมทั้งมีคำแนะนำในการกรอกข้อมูลลงไปในแบบฟอร์มนั้นได้ด้วย

ตัวอย่างที่ผมจะนำเสนอนี้ใช้เทคนิคการทำงานของ pseudo-classes ใน CSS3 เข้ามาประกอบกับโครงสร้างของ XTHML เพื่อให้แบบฟอร์มในเว็บไซต์นั้น ทำงานตอบโต้กับผู้ใช้งานได้อย่างเป็นประโยชน์สูงสุดครับ

• :active ในที่นี้ จะทำงานในขณะที่ click mouse (ตอนที่กดลงไปนั่นเอง)
• :focus จะทำหน้าที่บอกตำแหน่งของตัวรับข้อมูลของแบบฟอร์มที่ cursor ของผู้ใช้งานทำงานอยู่ และ สถานะที่พร้อมใช้งาน (พร้อมรับข้อมูลที่จะกรอก)
• :checked เป็น pseudo-classes ที่ทำการเช็คค่าความเป็นจริงของ input[type=’checkbox’], input[type=’radio’] ว่าได้ทำการเลือกไปแล้ว