ThaiCSS Direct วันนี้ขอเสนอ Tips เล็กๆ น้อยๆ เท่าหำแมงสาบ เอาไว้ให้นักเลงคีย์บอร์ด CSS ได้เก็บไว้ใช้งานเมื่อยามจำเป็น เรื่องพื้นๆ กาก กากส์ ในวันนี้ไม่ใช่เรื่องใหญ่อะไรเป็นเพียงแค่เทคนิคการสังเกตกระบวนการ render css ของบราวเซอร์ที่เราสามารถช่วยบราวเซอร์ประหยัดพลังงานและเพิ่มความเร็วในการแสดงผลหน้าเว็บขึ้นไปอีก 0.0046 มิลลิเซคคั่น
CSS3 มี Values and Units Module แยกย่อยออกมาเพื่อกำหนด “หน่วย” ของค่าต่างๆ มากมาย “หน่วย” ในที่นี้ก็เช่น px, em, %, cm, gr, fr, deg, rem, vh และอื่นๆ อีกมากมาย โดยที่ความเก๋าและเฉพาะทางของ CSS3 ที่ Module นี้แถมมาด้วยก็คือ การนำเอา “หน่วย” ที่ต่างๆ กันนั้นมา “ทำการคำนวณ” (calc();) เพื่อหาค่าที่ลงตัวใหม่ได้
พูดง่ายๆ ก็เช่น สมมุติว่าเรามีกล่องในอุปกรณ์เครื่องเขียน ซึ่งมีความยาว 100% ของที่มีอยู่ข้างในเราต้องการกำหนดความยาวให้เป็นดังนี้ ดินสอยาว 3cm ยางลบยาว 40px ปากกายาว 100% – 3cm – 40px จากโค้ดตัวอย่าง อันบ้าบิ่นและไม่สมเหตุสมผลนี้ ความยาวของปากกา ก็จะมีค่าเท่ากับ 100% – 3cm – 40px = ? ก็ช่างมัน
เร่เข้ามาครับ พ่อ แม่ พี่น้อง ลุง ป้า น้า อา มาก่อนได้นั่งหน้า มาช้าได้นั่งหลัง มาทีหลังอาจได้ยืน มาดึก ดึก ดื่น ดื่น อาจได้ขี่คอกันดู วันนี้ ThaiCSS เมียงูและผม (เชี่ยแบงค์) จะแนะนำโมดูลตัวหนึ่ง ที่จะช่วยให้เราสามารถจัดการกับเนื้อหาให้อยู่ในรูปแบบของคอลัมน์ โดยใช้ CSS ซึ่งเราสามารถกำหนดจำนวน หรือความกว้างของคอลัมน์ได้ เดิมทีเราจะเห็นการจัดหน้าแบบคอลัมน์ ได้จากสื่อสิ่งพิมพ์กันซะส่วนมาก และในปัจจุบันเราก็อาจจะเห็นกันมากขึ้นกับสื่อที่เป็นดิจิตอลในรูปแบบของ หนังสือ นิตยสารและหนังสือพิมพ์ออนไลน์ ที่แสดงผ่านเว็บไซต์ หรืออุปกรณ์ยอดนิยมในปัจจุบันอย่าง แท็บเล็ต
หากถามว่าการจัดหน้าแบบคอลัมน์ นั้นมีประโยชน์อย่างไร ประโยชน์ของมันคือ เพื่อความสวยงาม สะดวกในการอ่าน และมีความยืดหยุ่นของเนื้อหา จากอดีตจนถึงตอนนี้ที่ผมนั่งบทความนี้อยู่ การจัดหน้าแบบคอลัมน์ บนเว็บไซต์ยังไม่เป็นที่นิยมซึ่งอาจจะเป็นเพราะมันยังยุ่งยากในการจัดหน้าอยู่ (เป็นความเห็นส่วนตัวนะครับ) เราจะทำทีนึงก็ต้องมานั่งเขียน HTML+CSS กันวุ่นวายเพื่อจะให้เนื้อหาแสดงเป็นแบบคอลัมน์
CSS Pseudo-classes ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ
Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน
ปัญหาจะตามมาตรงนี้ เพราะ คนทำงานมันยังไม่รู้ว่า Simple Selectors มันคืออะไรกันวะ หน้าตาเป็นยังไง ถ้าอย่างนั้น เอาอย่างนี้ ผมจะขอไกด์ไลน์ ให้พอเป็นอีโนให้ เช่น สมมุติว่าเรามีกลุ่ม HTML กลุ่มหนึ่ง เราจะเขียน CSS จัดการ ให้เริ่มลำดับการเลือกที่
เคยคิดหนักเรื่องการแบ่งหน้าเว็บออกเป็นหลายๆ สดมภ์กันไหมครับ ไม่ว่าจะ สอง สาม สี่ หรือห้า เมื่อเราต้องการแบ่งหน้าเว็บทีไร ต้องมาเขียน CSS
ใหม่ทุกที แต่วิธีที่ผมจะแนะนำต่อไปนี้ มันต้องมีข้อแม้ และไม่ต้องไป ค้นหาว่า มี ”ฝรั่ง” ที่ไหนเคยทำ หรือ พาทำ หรือไม่ ถึงมีจริง ผมก็ไม่รู้ว่าอยู่ตรงไหน
การตั้งค่าการการแบ่ง สดมภ์ อย่างเป็นมาตรฐาน เราสามารถเขียน CSS แค่ไม่กี่บรรทัด ก็ทำได้แล้ว แต่สิ่งที่เราจำเป็นต้องรู้คือ การเขียน CSS Selector ในหมวดหมู่ Attribute
Selector โดยเฉพาะ อย่างยิ่ง CSS Substring matching attribute Selector ถ้าใครยังไม่รู้ว่าเขียนยังไง ก็ลองค้นๆ หาเอาใน ThaiCSS นี่แหละครับ ผมเขียนไว้หลายแบบอยู่และนานมาแล้ว
Selectors ที่ต้องใช้ในการนี้มีทั้ง Child Selector และ Attribute Selector
วันนี้ มาพูดอะไรกันสั้น สั้น ง่าย ง่าย อีกสักรอบ เกี่ยวกับประโยชน์ของ CSS ที่ใคร ใคร ก็รู้กัน นั่นคือสามารถจัดการแสดงผล HTML ที่เขียนไว้ในโครงสร้างเดียว ให้แสดงผลได้หลายแบบ โดยมีหลักการในเรื่องของ Web Accessibility เข้ามาเกี่ยวข้องด้วย นั่นคือ การเรียงลำดับ HTML อย่างถูกวิธี