CSS3 ปฐมบท

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

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

สถานะ Last Call ของ CSS3 ในหมวดของ Selector แน่นิ่งมานาน แต่ผมก็ไม่รู้ว่าจะรีบไปใย โดยเฉพาะกับพี่ไทยทั้งหลาย เพราะ เอาแค่ CSS2 นี่ก็ยังเมากันอยู่ หรือดีมาหน่อยก็ CSS2.1 ก็ยังใช้กันไม่หวาดไม่ไหว สำหรับบางคนแล้ว มีแค่ Class Selector ก็คงถือว่ามากพอ แต่สำหรับคนบางกลุ่มแล้วมันคงไม่พอ

ผมอยากจะถามว่า กี่เปอร์เซ็นต์ของคนที่กำลังบอกว่าตัวเองเป็น CSS Designer นั้น เรียก Selector และการเขียน CSS ถูกต้องตามทฤษฎี อย่าเถียงผมว่ามันไม่สำคัญ มันสำคัญ คนที่ยังไม่รู้ ก็ให้นึกถึงสิ่งที่ตัวเองยังคิดไม่พบ ทำงานไม่ถึงมันเอาไว้ แต่สำหรับคนที่ตั้งใจจะศึกษามันอย่างจริงจัง ก็ดีใจด้วยที่ท่านมาถูกทาง ไม่ใช่กล่าวอ้างกันอย่างผิวเผิน

Class และ ID คือ คนละอย่าง คนละทาง ถ้าไม่เข้าใจ อย่าเพิ่งมั่ว โดยเฉพาะการเลือกและเรียกใช้ ID มันลึกซึ้งเกินกว่าคำบรรยาย อาจจะบอกได้ว่าลึกซึ้งเกินคำว่ารัก ของผู้ชายบางคนด้วยซ้ำไป อย่างไรนั่นหรือ มาดูกันทีละอย่าง

Class มีสิ่งสำคัญที่สุดอยู่อย่างเดียวคือ การตั้งชื่อให้สื่อความหมาย เช่น อย่าไปเอาคำเฉพาะที่ตัวเองเข้าใจคนเดียวมาตั้ง ควรตั้งตามระบบการเรียกชื่อ ให้คนอื่นเข้าใจได้ด้วย ด้านข้างๆ เขาเรียก Sidebar ก็ควรตั้งเป็น Sidebar ไม่ใช่ supper-x ใครจะไปรู้กับพ่อคุณหละนั่น (ที่พูดมาผมเคยมาแล้วทั้งนั้น และพบว่ามันไม่ได้สร้างนิสัยที่ดีในการทำงาน เมื่อคุณทำงานกับคนอื่นๆ) หรือการเรียกอะไรในทางกายภาพที่มันซ้ำๆ กัน ก็ควรหาความหมายมันออกมาแล้วค่อยตั้งชื่อ เช่น ข้อมูลที่เป็นสีแดง ก็อย่าไปตั้งเป็น .red1 หรือ .red2 มันไม่สื่อความหมาย เดี๋ยวตอนแก้ไขมาตามหากันอีก ถ้ามันเป็นตัวหนังสือเตือนสีแดงก็น่าจะเป็น .warning ก็ว่ากันไป หรือ .important หรือ .remark แน่นอนว่าคุณจำเป็นอย่างยิ่งที่ต้องเรียนรู้ภาษาอังกฤษ

ID พ่อคุณเอ๋ย ถ้าคุณไม่คิดว่าจะเอา ID ไปใช้งานทำอะไร ก็อย่าเสือกใส่เข้าไปให้มันวุ่นวายสับสน การที่จะใช้ ID ให้ถ่องแท้ ก็ควรศึกษาเรื่อง URI และอย่างอื่นที่เกี่ยวข้องซะก่อน มันพ่วงไปทั้งหมด ทั้ง Semantic Web และการทำงานควบคู่กับ ภาษาในตระกูล X- ทั้งหลาย และก็เหมือนกันกับคลาส คือตั้งชื่อให้มันเหมาะควร

ถ้าเป็นไปได้ ถ้าหากจะมีการตั้งชื่อที่สัมพันธ์กัน เพื่อการเขียน CSS ที่ซับซ้อนโดยใช้เครื่องหมาย (-) (บ้านผมเรียกไฮเฟ่น) คั่นกลาง ก็ควรนั่งวางแผนพัฒนาเศรษฐกิจแห่งชาติมาก่อน เพราะจะได้ประหยัดเนื้อที่ในการเขียนและบริหาร css ได้ง่ายขึ้น เพราะว่า CSS เขามีการเรียกสั่งงาน แบบนี้ด้วย ตัวอย่างข้างล่าง

เช่น

<p class="special-flowe">กุหลาบ</p>
<p class="special-fruit">มะม่วง</p>
<p class="special-tree">ประดู่</p>

ถ้าคุณอยากให้ทั้งสาม Class นั้นมีตัวหนังสือสีแดงเหมือนกันหมด คุณไม่จำเป็นต้องเขียน color: red ลงไปในแต่ละคลาส หรือไม่ต้องเขียนแบบ ไม่ต้องเอาคลาสซีเล็คเตอร์มารวมเป็น Group Selector แต่เลือกเขียนแบบ Attribute Selector แทน ดังนี้

p[class^="special"] { color: red}

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

ใช่ อย่างนี้แหละ เขาเรียกว่า Attribute Selector มีประโยชน์ในอนาคต สำหรับพวกที่มองอนาคตแค่ 15 เมตร คงยังนึกไม่ออกว่ามันจะมีประโยชน์ยังไง (ศึกษาต่อได้ที่ W3C University) แต่ก็อย่างว่านั่นคือ CSS3

ผมเริ่มนำเอามาใช้เมื่อหลายเดือนก่อน แต่ต้องหยุดการพัฒนาสมองไปเพราะต้องเปลี่ยนวิถีการทำงาน ยังเห็นตัวอย่างกันได้ใน ThaiCSS นี่แหละครับ แต่สำหรับคนที่ใช้ IE6 จะเป็นอีกรูปแบบหนึ่ง (ผู้ใช้ IE6 ไม่มี Link ไปแสดงความคิดเห็นต่อบทความ และ Theme เป็นสีเขียว ใช้รูปแบบของ CSS ใน Class Selector เป็นหลัก)

มีบางคนบอกว่าผมเป็นพวกบ้าเทคโนโลยี อะแฮ่ม… ผมเนี่ยนะ บ้าเทคโนโลยี ผมออกจะโลว์เทค นั่งเครื่องบินโลวคอส ทำหนังโลวบัดเจ็ด ฟังเพลงโลโซ จิตใจโลเล เอ้ย ไม่ขนาดนั้น! แค่ผมอยากทำอย่างอื่นที่มันแตกต่างออกไปนิดหน่อยเท่านั้นเอง แต่พอรู้เลาๆ แล้วว่า มันไม่เหมาะกับสังคมไทยและถูกมองว่าเป็น ผีบ้า ไปเสียฉิบ

คราวหน้ามีเวลา เดี๋ยวผมจะมาเขียนต่ออีกครับ ถ้ายังไม่เบื่อผมก่อน

มีความสุขกับการใช้ชีวิตครับ