CSS3

จากข่าวสองมาตรฐานเรื่องล่าสุดที่ 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’] ว่าได้ทำการเลือกไปแล้ว

ในตอนแรก ผมตั้งใจเขียนบทความในเรื่องการเขียน 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;
}


บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

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

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