จากความเดิมเมื่อสามปีที่ผ่านมา ผมได้เขียนบทความเรื่อง CSS Sticky เอาไว้ หลายคนอาจจะได้ลองเอาไปใช้ แต่บางคนอาจจะเจอว่าเอาไปใช้แล้วมันไม่ทำงาน หรือมันทำงานไม่ได้ มันอาจจะมีบางอย่างที่แอบซ่อนอยู่ในโค้ดของเรา นั่นก็คือ Overflow ถ้า parent หรือแม่ ปู่ ย่า ตา ยายของมันมี overflow เป็น hidden จะทำให้ sticky positioned ไม่ทำงานครับ จบ
บางทีเราไม่จำเป็นต้องเขียนโค้ด HTML ให้มันยาวเพื่อความสะดวกของการเขียน CSS วันนี้ผมขอมาไวเครมเร็ว เสนอบทความก้อมอันเนื่องมาจาก หงุดหงิดทุกครั้งเมื่อเห็นคนอื่นเขียน HTML Code ยาวเฟื้อยทั้งๆ ที่มันสามารถเขียนให้สั้นๆ กระชับ ดับโลกร้อนได้ ThaiCSS Direct วันนี้ขอเสนอ “การทำ Modal หรือ Pop up แบบกากๆ” หรือการเรียกใช้ :before และ :after (pseudo-element) ให้เกิดประโยชน์
ผมไม่ได้เขียน CSS HTML มานานมากกกกกแล้ว มันอาจจะทำใจได้ยากสักนิดในช่วงแรกที่ต้องอดกลั้นไม่ทำในสิ่งที่ตัวเองถนัด เพราะเอาเวลาไปทำอย่างอื่นที่น่าสนุกว่า ท้าทายกว่าเหมือนกับที่เขาว่าไว้ เราต้องเดินไปข้างหน้า เป็นเหตุให้ ThaiCSS ไม่มีบทความใหม่ออกมาเลยตั้งแต่ต้นปีที่ผ่านมา Kulachat Kena เองยังโผล่มาแค่บทความเดียวแล้วหายจ้อย เปล่าเลย เขาไม่ได้ตั้งใจหายไปไหน อาจเป็นเพราะผมให้งานเขาทำหนักเกินไป จนไม่มีกระจิตกระใจลงมาวาดลวดลายใน ThaiCSS เป็นคำรบที่สอง แต่อีกไม่นานเขาคงกลับมาพร้อมประสบการณ์ที่มากกว่า สุขขุมลุ่มลึกกว่า รวมไปถึงเขาอาจจะมีสามหำไปแล้วก็เป็นได้
รูปแบบของอะไรก็ตามที่เกิดขึ้นแบบ “กล่อง” คงเป็นการง่ายสำหรับการอธิบายคำว่า Box Model จากการที่ 2 ภาษา เกิดมาแยกกัน HTML มีค่าพื้นฐานมาก่อน แต่ CSS สามารถเข้าไปแก้ไขปรับแต่ง HTML ได้ในภายหลัง
Element ของ HTML ที่มีค่าพื้นฐานนี้ก็เหมือนกันเกือบ หรือ ทุกๆ Elements ของ HTML สามารถสั่งงานด้วย Box model module ได้ อยู่ที่ว่าเราจะสั่งงานให้มันเป็นอะไรและมีความหมายในเชิง “Semantics” และการสื่อสารของข้อมูลในโลก WWW ยังไง ในเมื่อทุกอย่างต้องผ่านการตีความ เช่น
CSS3 ทุกอย่างถือเป็น Box แต่การแสดงผลต่างกัน (CSS2 inline element ถือเป็น text level อันเดียวกันแต่อย่าสับสน)
อยากให้ กล่อง เป็นแบบไหน ให้สั่ง Display เอา และ display เป็น Property แรกที่จะขอพูดถึง แต่คงจะไม่ได้อธิบาย “ค่า” ที่เกิดขึ้นทั้งหมดในตอนนี้ โดยเฉพาะในหมวดหมู่การสั้งงานที่แสดงผลในกลุ่ม table และ ruby ผมขอพูดถึงเรื่องของ inline | block | inline-block | run-in และ none ก่อนนะครับ
หายหัวไปนาน เหล่านักเขียนที่ไม่ค่อยมีเวลาเขียนทั้งหลาย ไม่ใช่ขี้เกียจนะครับ แต่เวลามันไม่ค่อยสะดวก บางคนอาจจะสงสัยว่ามันต้องใช้เวลาเขียนนานขนาดนั้นเลยหรือในแต่ละบทความ คำตอบก็คือใช่ครับ
เพราะบางบทความเราเขียนกันข้ามเดือนก็ยังมี ที่สำคัญการงานก็ยุ่งๆ ยากๆ ไหนจะเวลาเล่นเฟสบุ๊คของเราอีก
โดยทั่วไป บทความจะเริ่มจากความสงสัยว่า ถ้าอย่างนั้น แล้วมันจะเป็นยังไง หลังจากสงสัยก็ ค้นหาคำตอบโดยการ “ลองเขียนตัวอย่าง” ซึ่งแหล่งข้อมูลหลักของพวกเราก็คือ W3C ตรงนี้แหละครับที่มันกินเวลานาน บางบทความเขียนเมื่อ 6 เดือนที่ผ่านมาตอนนี้ ผม (พร อันทะ) ก็ยังปล่อยให้มันเป็น Draft อยู่ รอ IE10 ก่อนค่อยว่ากัน
เมื่อได้ตัวอย่างเป็นอันพึงพอใจ ก็มาถึงภาระอันหนักอึ้งซึ่งก็คือ เขียนยังไงให้คนอ่านรู้เรื่อง!! ซึ่งตอนนี้ก็ยังเป็นงานยากของเราอยู่ แม้ว่า ThaiCSS จะเกิดตั้งแต่ปี 2006 ก็ตาม (อายุมากใช่ว่าจะเก่งเสมอไป เห็นได้ตามออฟฟิศที่พวกแก่ๆ แต่แม่มชอบเกรียน ชิมิ๊ฮาาาาว์ฟ)
ไม่มีอะไรใหม่ หลังสงกรานต์ นอกจากเสียดายที่ผม กับ แบงค์ไม่ได้ไปดูโชวเขย่าเต้าที่สีลมแล้ว เราก็ตกลงกันว่า จากนี้ไปอีก 10 บทความพวกเราจะเขียนเรื่อง Media (Queries) หรือ CSS สำหรับอุปกรณ์ประเภทต่างๆ กันไปก่อน
อาทิ เขียน CSS ให้ TV, Mobile, Printer, iPad, iPhone โดยเฉพาะเรื่องการเขียน CSS ให้กับโทรทัศน์นี่ หลังจากที่ผมเล่นมานานจะได้เอามาบอกต่อกันเสียที
ตอนนี้ก็เปิดด้วยเรื่อง Media Queries กันไปก่อนนะขอรับ โดยเป็นบทความจาก เชี่ยแบงค์ก่อน เพราะผมยังบ้าแต่งเพลงอยู่ เชิญแซ่บ…
เมื่อก่อนหรือแม้แต่ตอนนี้หลายคนที่เข้ามาอ่านบทความคงแปลกใจว่า ทำไมผมเขียนบทความที่เกี่ยวกับเรื่อง Selectors ของ CSS ทั้งนั้น สาเหตุหลักๆ ก็เพราะว่า Property และ Value ของ CSS นั้นมันตายตัวครับ จำง่าย ทำบ่อยๆ ก็จำได้ มันไม่เปลี่ยนไปไหนนอกจาก W3C ได้เปลี่ยนเวอร์ชั่นของ CSS ใหม่ เพิ่มหรือลดลง แต่ถ้าเป็น Selectors แล้วนั้น เราไม่ค่อยได้เขียนซ้ำกันสักเท่าไหร่ในแต่ละงาน เพราะงานแต่ละชิ้นที่ทำนั้นมันมีความต่างในตัวของมันเอง เราจึงไม่สามารถใช้ Selector เดิมๆ ในการจัดการได้ แต่ ทั้ง properties และ values นั้น มันเหมือนเดิม
นั่นคือสาเหตุหลักๆ ที่ผมพยายามเน้นให้ท่านทั้งหลายทำความเข้าใจและลองปรับเปลี่ยนรูปแบบการสั่งงานของ CSS ด้วย Selectors ไปเรื่อย เพื่อจะได้หาความเหมาะสมกับงานได้
ในบทความนี้ก็เช่นกัน ทุกท่านจะเห็นว่าผมเขียน Selectors ของ CSS แปลกๆ มีแค่ Heading Level (X) เท่านั้นที่ถูกร้องขอให้มี Class
ยังเหมือนเดิม Class ของ HTML ไม่ได้มีไว้เพื่อให้เขียนคำสั่งของ CSS เข้าไป แต่เป็นการอนุโลมให้ใช้ได้ เพราะ Class เป็น Global Attribute เหมือนการเป็นของสาธารณะ ภาษาอื่นใดอยากมาใช้ก็เอาไปใช้ ไม่ว่ากัน
เพราะฉะนั้น การลด ขยะ Classes จึงถือเป็นความจำเป็นและเป็นหนึ่งในนโยบาย ประชาวิวัฒน์ ในยุค พ.ศ. 2554 ของเรา
ภาษา CSS มีความสามารถมากมายมาให้ใช้แล้ว ก็จงใช้ อย่าไปขยันน้อย ดันทุรังใช้แต่ Class และ ID Selectors ในการทำงาน