CSS

ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล

ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง

ตัวอย่างแสดงผลออกมาแบบนี้

ถ้าคุณยังไม่ทราบว่า Cascading Style Sheets (CSS) จะเอื้อประโยชน์อะไรต่อคุณ และ ลูกค้า หรือ กลุ่มเป้าหมายของคุณนั้น คุณสามารถศึกษา เกี่ยวกับตัวมันได้อย่างละเอียดตาม spec online นี้ เราจะยังอยู่ที่นี่เมื่อคุณ เข้าใจในตัวมัน และ กลับมาอ่านอีกครั้งหนึ่ง

ก่อนอื่นผมขอสาธยาย และกล่าวแนะนำเล็ก ๆ น้อย ๆ เกี่ยวกับตัวของมันก่อน CSS จะช่วยลด bandwidth ช่วยลดขนาดของไฟล์ (X)HTML ของคุณไปอย่างเหลือเชื่อ ไม่เหมือนกับการต้องมานั่งพิมพ์สั่งคำสั่งแสดงผลแบบเดิม ๆ ใน tag html การตกแต่ง layout ของคุณด้วย CSS จะทำให้เวลาในการโหลดนั้นลดลงอย่างเหลือเชื่อ เรื่องภาระในการแก้ไขก็จะไม่ยุ่งยากอีกต่อไป เพราะไฟล์ CSS เพียงไฟล์เดียวนั้นเราสามารถใช้ได้ทั้ง Website เมื่อต้องการแก้ไขเราก็ทำได้ง่าย ๆ ภายในเวลาอันสั้น

Style Sheets นำเราเข้าไปสู่ยุคสมัยใหม่ในการออกแบบ website ไม่ว่าจะเป็นการจัดแจงกับ media รูปแบบต่าง ๆ ที่เราต้องการนำเสนออย่างง่ายดาย ให้เราจัดการกับพื้นที่ในการแสดงผลต่าง ๆ ได้ดีเยี่ยม มีประสิทธิภาพ และ ได้ประสิทธิผลมากขึ้นกว่าเมื่อก่อนที่ user จะต้องมานั่งปวดหัวในการหาข้อมูลของเรา ต้องมานั่งเบื่อหน่ายเมื่อ การแสดงผลมันไม่ตรงกับตอนที่ออกแบบมา ตั้งแต่แรกแล้วมันพลาดมันแตกเมื่อไหร่เราก็ไม่รู้ user ใช้ browser ต่างกันอีกก็ต้องมานั่งปวดหัวเข้าไปอีก CSS ให้เราในสิ่งที่เราไม่คาดคิดว่ามันจะทำได้ เช่น absolute position ที่ทำให้เราเล่นกลได้อีกเยอะ (ให้ดีนะ ไม่งั้นงง ทั้งคนทำ ทั้งคนดู), ทำให้รูปภาพและตัวอักษร ทำงานได้ในแบบที่เราไม่เคยคาดฝันมาก่อน หรือ ที่ฝรั่งเรียกกันว่า Interactive Manipulation และ มันยังทำให้เราสามารถจัดเรียง layout ของเราให้เป็นโครงสร้างเอกสารที่เป็นประโยชน์ และ เป็นอันหนึ่งอันเดียวได้ คือ Search Engine สามารถ เข้าใจและสืบค้นได้ง่ายมากขึ้น เข้าถึงข้อมูลได้รวดเร็วมากขึ้น และ ไม่ว่าจะใช้อุปกรณ์ หรือ เทคโนโลยีใดใด ก็สามารถดู และ แสดงผลออกมาในลักษณะเดียวกันได้ และ ที่สำคัญ ผู้อ่าน หรือ ผู้ใช้นั้นสามารถเข้าใจ และ เข้าถึงข้อมูลของเราได้อย่าสะดวกและรวดเร็ว (ไม่เว้นแม้แต่ คนพิการทางสายตานะครับ)

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

หัวใจสำคัญของการวางเลเอาท์หน้าเว็บด้วย CSS อีกอย่างที่ถือว่าสำคัญ อันดับต้นๆ คือ การสั่ง positioning ของ วัตถุ ที่ลอยๆ อยู่บนหน้าเว็บ

หลักๆ คือ tag div(s) ของ xhtml นั่นเอง

จะเลือกใช้อันไหนระหว่าง static, relative, absolute

1. Static

สำหรับค่า ดีฟอลท์ หรือค่าพื้นฐานของ position คือ static ครับ หมายถึง ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และ ข้อสำคัญของการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่

2.relative

หลายคนยังคิดไม่ออกว่ามันคืออะไร การเขียน css สำหรับเครื่องปริ้นท์ หรือการกำหนด print media ให้กับหน้าเว็บเพจ เราสามารถเขียน css ควบคุมหน้าเอกสารในเว็บของเราได้ ว่าจะให้แสดงผลต่างไปอย่างไร ใน User Agents แบบอื่นๆ ไม่ใช่แค่บราวเซอร์อย่างเดียว

ตอนนี้มาลองดูรูปแบบง่ายๆ กับการสั่งแสดงผลบน ปริ้นเตอร์กันครับ

สำหรับหน้าเว็บไทยซีเอสเอส หน้านี้ผมได้เขียน css รองรับปริ้นเตอร์ ไว้แล้ว สามารถสั่งปริ้นท์ หน้าเว็บออกไปได้เลยโดยที่แสดงผลไม่ผิดเพี้ยน ยังกะเอกสารจากไมโครซอฟเวิร์ด สามารถทดสอบได้โดย ไปที่เมนู Files -> Print Preview แล้วคุณจะเห็นความแตกต่างระหว่างหน้าเว็บ

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

ทำยังไงที่เราจะพอดี พอเพียงกับชีวิตและพัฒนาตัวเองตามเทคโนโลยีได้อย่างพอเหมาะ และปรับตัวเข้ากับระบบกลไกการตลาดได้อย่างดีพอ (อันหลังนี้ไปหาทางกันเอาเองครับ)

ดีไซน์ที่คุณเห็นอยู่นี้ สำหรับแฟนเดนตายของ ไทยซีเอสเอสคงคุยเคยกันดี เพราะมันเป็นดีไซน์เก่า ของเว็บไทยซีเอสเอส ผมถอดทิ้งไปประมาณ เดือนพฤศจิกายน 2549 ที่นำกลับมาใช้ ก็เพื่อเป็นการลำลึกถึงความงี่เง่าและห่วยแตกของตัวเองและไทยซีเอสเอสจะครบ 1 ปี ในเดือนกรกฎาคมนี้แล้ว

เริ่มกันเลยกรุณาดูโค้ด หรือวิวซอสตามไปด้วยนะครับ