CSS Modules หน้า 3 |

CSS Modules

มาทำความรู้จัก Media Queries เมื่อโลกปัจจุบันอะไรก็ใช้อินเตอร์เน็ตได้

หายหัวไปนาน เหล่านักเขียนที่ไม่ค่อยมีเวลาเขียนทั้งหลาย ไม่ใช่ขี้เกียจนะครับ แต่เวลามันไม่ค่อยสะดวก บางคนอาจจะสงสัยว่ามันต้องใช้เวลาเขียนนานขนาดนั้นเลยหรือในแต่ละบทความ คำตอบก็คือใช่ครับ

เพราะบางบทความเราเขียนกันข้ามเดือนก็ยังมี ที่สำคัญการงานก็ยุ่งๆ ยากๆ ไหนจะเวลาเล่นเฟสบุ๊คของเราอีก

โดยทั่วไป บทความจะเริ่มจากความสงสัยว่า ถ้าอย่างนั้น แล้วมันจะเป็นยังไง หลังจากสงสัยก็ ค้นหาคำตอบโดยการ “ลองเขียนตัวอย่าง” ซึ่งแหล่งข้อมูลหลักของพวกเราก็คือ W3C ตรงนี้แหละครับที่มันกินเวลานาน บางบทความเขียนเมื่อ 6 เดือนที่ผ่านมาตอนนี้ ผม (พร อันทะ) ก็ยังปล่อยให้มันเป็น Draft อยู่ รอ IE10 ก่อนค่อยว่ากัน

เมื่อได้ตัวอย่างเป็นอันพึงพอใจ ก็มาถึงภาระอันหนักอึ้งซึ่งก็คือ เขียนยังไงให้คนอ่านรู้เรื่อง!! ซึ่งตอนนี้ก็ยังเป็นงานยากของเราอยู่ แม้ว่า ThaiCSS จะเกิดตั้งแต่ปี 2006 ก็ตาม (อายุมากใช่ว่าจะเก่งเสมอไป เห็นได้ตามออฟฟิศที่พวกแก่ๆ แต่แม่มชอบเกรียน ชิมิ๊ฮาาาาว์ฟ)

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

อาทิ เขียน CSS ให้ TV, Mobile, Printer, iPad, iPhone โดยเฉพาะเรื่องการเขียน CSS ให้กับโทรทัศน์นี่ หลังจากที่ผมเล่นมานานจะได้เอามาบอกต่อกันเสียที

ตอนนี้ก็เปิดด้วยเรื่อง Media Queries กันไปก่อนนะขอรับ โดยเป็นบทความจาก เชี่ยแบงค์ก่อน เพราะผมยังบ้าแต่งเพลงอยู่ เชิญแซ่บ…

CSS3 Pseudo-elements

ซุปเปอร์มาริโอ้ และผองเพื่อน

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

สร้างคอลัมน์บนเว็บไซต์ด้วย CSS Multi-column Layout Module ตอนที่ 1

ภาพตัวอย่าง การเขียน css multi column พื้นสีเทา ตัวหนังสือสีขาว

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

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

มาจัดการ Graphic บางอย่างด้วย CSS กันดีกว่า

ตัวอย่างจัดการ Graphic บางอย่างด้วย CSS

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

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

CSS Collapsing margins การยุบรวมกันของ margins ใน CSS

แมงมุมขยุ้มหยากไย่

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

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

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

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

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

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

เรียนรู้การใช้งาน CSS Generated Content

สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง

คุณสมมัติต่างๆ มีดังนี้

  1. <string>หมายถึง การกำหนด Text ที่เราต้องการแสดง
  2. <uri>หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
  3. <counter>หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
  4. open-quote and close-quoteหมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
  5. no-open-quote and no-close-quoteหมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
  6. attr(X)หมายถึง การดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ

Back to Top