CSS Modules

รูปแบบของอะไรก็ตามที่เกิดขึ้นแบบ “กล่อง” คงเป็นการง่ายสำหรับการอธิบายคำว่า Box Model จากการที่ 2 ภาษา เกิดมาแยกกัน HTML มีค่าพื้นฐานมาก่อน แต่ CSS สามารถเข้าไปแก้ไขปรับแต่ง HTML ได้ในภายหลัง

Element ของ HTML ที่มีค่าพื้นฐานนี้ก็เหมือนกันเกือบ หรือ ทุกๆ Elements ของ HTML สามารถสั่งงานด้วย Box model module ได้ อยู่ที่ว่าเราจะสั่งงานให้มันเป็นอะไรและมีความหมายในเชิง “Semantics” และการสื่อสารของข้อมูลในโลก WWW ยังไง ในเมื่อทุกอย่างต้องผ่านการตีความ เช่น

• อยากจะสั่ง <span> ให้แสดงผลเป็น Block ก็ย่อมทำได้ แต่ต้องดูว่าในโครงสร้าง HTML นั้นมันเหมาะสมหรือไม่
• อยากจะให้ <section> ให้แสดงเป็น inline ก็ย่อมทำได้ แต่ต้องดูว่า ทำไปเพื่ออะไร

ประเภทการแสดงผลของ กล่อง

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 กันไปก่อนนะขอรับ โดยเป็นบทความจาก เชี่ยแบงค์ก่อน เพราะผมยังบ้าแต่งเพลงอยู่ เชิญแซ่บ…

Pseudo-elements ถูกสร้างขึ้นมาเพื่อเข้าถึงภาษาโครงสร้าง (xhtml, html, xml ฯลฯ) ที่ CSS Selectors อื่นๆ เข้าไม่ถึง ซึ่งใช้ในรูปแบบ การหลอกว่ามี element นั้นๆ อยู่ ซึ่งก่อนหน้านี้ “แบงค์” ได้เขียนอธิบายเรื่อง “เรียนรู้การใช้งาน CSS Generated Content” เอาไว้ โดยรูปแบบของ Selectors นั้นใช้ CSS2 และเน้นไปที่ :before และ :after ซึ่งทำงานได้เหมือนกัน

Pseudo-elements

1. ::first-line คือ แถวแรก
2. ::first-letter คือ ตัวแรก
3. ::before คือ ก่อน (x)
4. ::after คือ หลัง (x)

ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้คือการจัดการหน้าเอกสารในรูปแบบ นิตยสารออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับสื่อสิ่งพิมพ์ หรือจัดหน้าให้กับ Printer

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

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

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

เข้าเรื่องกันครับ บทความนี้จะมาแนะนำ เรื่องเกี่ยวกับ การใช้ประโยชน์จาก Pseudo-Elements เพื่อที่จะทำ
ให้เกิดการแสดงผลที่เป็น Graphic ด้วย CSS อย่างที่ได้เกริ่นมาในหัวข้อ

แรกเริ่มเดิมทีนั้น ผมตั้งใจเขียนบทความเรื่อง CSS Basic box model แต่บังเอิญดันไปติดเรื่องความยากในการอธิบายในเรื่องของ Margins ซึ่งอาจจะทำให้บทความยาวไปถึง เบตง ได้ จึงตัดตอนเอาเรื่อง margins ออกมาก่อน แล้วค่อยเขียนเรื่อง box model คงทำให้หนุ่มสาวทั้งหลายเข้าใจง่ายยิ่งขึ้น

อะไรเอ่ย ที่ทำให้เราเกิดการ “งุนงง” ในชีวิตเป็นอย่างมาก เมื่อการเขียน CSS สั่งงาน HTML แล้วมันไม่ทำตาม เฉกเช่นเดียวกับการใส่ margin ให้กับ element ที่เราต้องการแต่ดันไม่แสดงผล

เราไม่ได้เขียน CSS ผิดแต่ประการใด ไม่เลย เราไม่ได้เขียนผิด แต่เป็นแค่เพียงเราไม่เข้าใจ กฎ บางข้อของ CSS เท่านั้นเอง ถ้าใครเข้าใจแล้วก็ ข้ามไปเลยนะขอรับ

หรืออาจเป็นเพราะเราเสพดราม่า มากจนเกินไป (ผมก็ติด)

หนุ่มสาวเอย จงมาเสพ margins ให้กระจ่างโดยพลัน

การยุบรวมกันของ Margins มันคืออะไรวะ มันยุบรวมกัน หรือมันรวมตัวกันได้ด้วยหรือ การรวมกันมันเหมือนที่ พธม. หรือ นปช. รวมกันไหม โอ้ว ช่างหลายหลากคำถามเหลือเกิน