สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS)

ถ้าคุณยังไม่ทราบว่า 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 สามารถ เข้าใจและสืบค้นได้ง่ายมากขึ้น เข้าถึงข้อมูลได้รวดเร็วมากขึ้น และ ไม่ว่าจะใช้อุปกรณ์ หรือ เทคโนโลยีใดใด ก็สามารถดู และ แสดงผลออกมาในลักษณะเดียวกันได้ และ ที่สำคัญ ผู้อ่าน หรือ ผู้ใช้นั้นสามารถเข้าใจ และ เข้าถึงข้อมูลของเราได้อย่าสะดวกและรวดเร็ว (ไม่เว้นแม้แต่ คนพิการทางสายตานะครับ)

สิ่งที่ CSS นั้นมีแตกต่างจาก cross-browser DHTML, Javascript และ เทคโนโลยีเสริมต่าง ๆ ที่มันมีประดาประดังกันเข้ามาตอนนี้ คือ CSS นั้นง่ายที่จะเรียนรู้ และ นำไปใช้ได้ง่ายกว่าเยอะ

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

ความกลัวเกิดจากอะไร?

เราจะแบ่งความกลัว ออกเป็น 2 ระดับ ระดับแรก เป็นความกลัวที่เกิดขึ้นจากลูกค้า และ ระดับต่อมา คือ ความกลัวที่จะต้องรับมือกับเทคโนโลยีใหม่ๆ ของ Designer เอง เรามาวิเคราะห์กันเป็นระดับ ๆ

Part 1: กำแพงกั้นทางความคิดของลูกค้า และ ตัวคุณเอง (มองให้เห็นทั้งสองแง่มุม)

หลาย ๆ ครั้ง ที่เราพยายามอยากยิบหยื่นเทคโนโลยีที่ดีดีใหม่ ๆ ให้กับลูกค้าของเรา เป็นต้องได้เรื่องไปเสียทุก ๆ ทีสิ เช่น “อย่าใช้ CSS เลยนะผมไม่เห็นมันจะแตกต่างไปจากเดิมตรงไหน มันก็แสดงผลเหมือน ๆ กัน อีกอย่างลูกค้าของบริษัทผมส่วนใหญ่ก็ยังใช้ IE6 และได้ยินมาอีกว่ามันสนับสนุนแต่ Web browser ใหม่ ๆ มันจะทำให้ Website ของผมดีขึ้นกว่าเดิมตรงไหนเหรอ ระยะห่าง การวาง layout มันจะสมบูรณ์เหมือนกับใช้ table แบบเก่าเหรอ”

ใช่ครับลูกค้าที่ดี ต้องรู้จักตลาดของเขา และ เราอาจจะผิดก็ได้ที่เราจะไปต่อล้อต่อเถียงกับความคิดของพวกเขา แต่รู้บ้างหรือไม่ว่า มีวิธีแก้ปํญหาหลายวิธีที่จะทำให้มันแสดงผลเหมือนกันในทุก ๆ browser หรือแม้กระทั่ง browser ที่ไม่รองรับ Style Sheets เลยเราก็สามารถเพิ่ม Style Sheets เพื่อให้ใช้ร่วมกับมันได้ ยกตัวอย่างเช่น Netscape 3

ไม่ใช่ความผิดอะไรของ CSS

อย่างที่ผมบอกไว้แล้วว่าเราไม่ได้ใช้น้ำมันแก๊สโซฮอล ล้อเล่นครับ ถ้าคุณลองเปิด website นี้ www.alistapart.com ด้วย Netscape Navigator 3.x คุณจะได้เห็นถึงข้อพิสูจน์ website ที่ผมกล่าวถึงนี้ออกแบบด้วย CSS ร่วมกับ เทคนิค HTML แบบเก่า ๆมันทำงานได้ใน Netscape 3 ไม่ว่าจะเป็นระยะห่าง, สี, ตัวอักษร ที่ยังสามารถอ่านได้ link และ script ต่าง ๆ ทำงานได้ดีอย่างที่เจ้าของ website ได้คาดหวังไว้ และ เมื่อนำไปเปิดใน Version 4.0 ขึ้นไป design element แบบใหม่ ๆ ที่เพิ่มมากับการเปลี่ยนแปลงทางเทคโนโลยี ก็จะเพิ่มตามเข้ามาเป็นลำดับหวังไว้ว่าคงไม่ทำให้คุณคิดว่ามันดูไม่จืด จนไม่น่าอ่านน่าใช้นะครับ พวกผู้พัฒนา website นี้เขาทำได้อย่างไร ง่าย ๆ เลย ก็คือทำตามขั้นตอนง่าย ๆ ที่เหมือนกับที่ Designer ทั่วไปเขาทำกัน: อันดับแรก รวบรวม (ความรู้) และ ส่งเสริม

ลองคิดดูว่าความหมายของสิ่งที่ผมจะบอกต่อไปนี้ คืออะไร ใช้ Style ทำงานเท่าที่ Style จะทำได้ โดยพวกเขาเอาเทคนิคที่เรารู้จักโดยทั่วกันเหล่านี้ (CSS) มาใช้กับสิ่งที่เป็นพื้นฐาน ยกตัวอย่างเช่น โดยทั่วไปเราใช้ style เพื่อกำหนดหน้าตาของ font ที่จะใช้ในการแสดงผลหลัก ๆ ของ website แต่เราใช้ <TABLE> ในการกำหนดระยะห่าง หรือ แยกแยะ layout เค้าโครงหน้าออกจากกัน นี่เป็นเหตุผลในการตัดสินว่าเป็นความผิดของ CSS อย่างนั้นหรือ ถ้าเกิดการแสดงผลเพี๊ยนขึ้นมาอย่าง ที่พวกเรานั้นเคยได้พบเห็นกันบ่อย ๆ เช่น Layout ไม่เป็นไปตามที่ออกแบบไว้ตั้งแต่แรกก็ต้องโทษ CSS ว่าเป็นตัวที่ทำให้เกิดข้อผิดพลาดเหล่านี้หรือ?

จาก website ที่ผมกล่าวไปข้างต้น ผู้ใช้ Netscape 3.x ของ website ดังกล่าว จะไม่เห็น font ที่ Designer ที่ออกแบบ website นั้นเลือกใช้ แต่จะเห็นเป็น default font ของ Netscape 3.x เอง และ มันก็ไม่ได้ทำให้เกิดความเสียหายอย่างไรกับ layout และ ให้สังเกตใน source code ของ web page ของ website ดังกล่าวไม่ได้มีการใช้ TABLE แต่อย่างใดทำไม Layout และ ระยะห่างระหว่าง Layout มันไม่เปลี่ยนหรือเพี๊ยนไป ให้ลองไปคิดดูว่า เป็นความผิดของ CSS หรือไม่ หรือเป็นข้ออ้าง หรือ เป็นการอุปมาอุปมัยของคุณ หรือ ลูกค้าเอง

ทำไมถึงไม่เลือกใช้ตาราง

คุณพร อันทะ อาจเคยได้กล่าวเอาไว้ก่อนหน้านี้แล้ว ว่าเหตุใดถึงไม่ใช้ TABLE เพราะ TABLE มันเล่นกลกับเราได้เสมอให้ลองเขียน Style บังคับให้ font ตัวใหญ่เกินกว่าความกว้างที่กำหนดไว้ให้กับ column ของ TABLE ดูสิครับ แล้วสังเกตว่าเกิดอะไรขึ้น ตารางมันไม่ได้มีขนาดเป็นไปตามที่กำหนดไว้ตั้งแต่ทีแรก แล้วทำไมมันถึงเป็นเช่นนั้น โดยหลักจริง ๆ แล้ว TABLE นั้นถูก ออกแบบมาให้เป็นตัวเก็บข้อมูลอย่างหนึ่ง ซึ่งก็คือข้อมูลที่เป็นแบบตารางจริง ๆ ไม่ใช่ tools สำหรับ design แต่มันกลับถูกใช้ประหนึ่งเป็น design tool โดยผู้ที่เคร่งครัด คลั่งไคล้ Pure HTML ทั้งหลายแหล่ ทั้ง ๆ ที่ Style ก็ถูกพัฒนาขึ้นมาพร้อมกับยุคที่เริ่มมีการนำรูปภาพ และ multimedia อื่น ๆ เข้ามาใช้ในการออกแบบและ/หรือพัฒนา website ซึ่งผมเองก็เคยเป็นหนึ่งในนั้นที่กลัวที่จะลองใช้ CSS ในการนำมาช่วยตกแต่ง design ของผม กลัวที่จะต้องมานั่งเรียนรู้ XHTML กลัวว่ามันจะยุ่งยากที่จะต้องมานั่งศึกษาใหม่ว่าใช้ element อย่างไรให้ถูกต้อง แต่พอได้ลองแล้วก็หลงรักมันไปเลยอีกอย่างมัน เอื้อประโยชน์ให้เราทั้งทางตรง และ ทางอ้อมหลายอย่างอีกด้วย (โปรดเอื้อเฟื้อ ต่อคนพิการ)

นั่นคือเหตุผลว่าเหตุใด เราจึงหลงรัก CSS/XHTML อาจจะมีปัญหากระท่อนกระแท่นบ้างแต่จากการได้ลองได้ทำ และ ได้ศึกษาแล้วมันไม่ใช่เป็นสิ่งที่ยุ่งยากหรือเกินที่จะจับต้อง หรือ ปรับปรุงแก้ไขแถมสนุกกับการได้ลองลำดับความคิดทั้งก่อน Design และ หลังจาก Design อีกด้วย

มั่นใจได้และจงกล้าที่จะบอกไปเลยว่า ใช่มันทำได้

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

เอ้ย !! คุณต้องทำนะ ไม่ทำไม่ได้นะ

เราเพียงแต่อยากปลูกฝังจรรยาบรรณ และ จิตสำนึกว่าเราควรจะเอื้อเฟื้อเผื่อแผ่ผลประโยชน์ หรือ ความสะดวกสบายให้แก่คนอื่นที่ไม่สะดวกสบายอย่างเราบ้าง ส่วนใครจะคิดว่าอย่างไรนั้นก็แล้วแต่ ถ้าอยากรู้ว่าทำไมผมถึงใช้คำว่า จรรยาบรรณ และ จิตสำนึก ลองศึกษาด้วยตัวเองดูว่า CSS/XHTML มีประโยชน์เบื้องลึก หรือ ตื้นอย่างไร

Part 2: จุดกำเนิดแห่งความกลัว (ต้นตอแห่งความกลัว, รากเหง้าแห่งความกลัว ฯลฯ)

เกิดจากความเข้าใจผิด และ การละเลยที่จะศึกษา เกิดจากพฤติกรรมส่วนตัวของทั้งผู้ใช้ และ ผู้พัฒนา ผมเคยเจอกับตัวเองนะที่บริษัทเก่าที่ลูกค้าโทรมาด่าว่า ทำไมเวปมันแสดงผลเพี๊ยนไป ทำไมเปิดใน browser ที่ต่างกันแล้วมันแสดงผลไม่เหมือนกัน ช่วยทำใหม่เป็น flash site ทั้งหมดได้ไหม ฉันไม่แคร์อะไรทั้งนั้นทำอย่างไรก็ ได้ให้มันแสดงผลออกมาเหมือนกันในทุก ๆ browser

นี่คือทำทั้งหมดโดย TABLE ไปก่อนหน้าแล้วนะครับ แต่ว่าพอการแสดงผลคลาดเคลื่อนก็ไม่มีใครสนใจเจ้า Style Sheet กลับไปสนใจ flash แทน หลังจากนั้นไม่นานก็มีโทรศัพท์เข้ามาว่า ทำเป็น flash แล้วทำไม search หายาก หาไม่เจอ ทำธุรกิจเกี่ยวกับ e-commerce ลูกค้าหาเจอยากแบบนี้ฉันก็แย่สิ รีบหาทางแก้ไขให้เสร็จทันก่อนเปิด website เลยนะ

ก็เป็นอันว่าต้องทำกลับมาทำเป็น HTML อีก แต่ทำไม๊ ทำไม จนแล้วจนรอดก็ไม่มีใครคิดว่าถ้าเราสร้างด้วย XHTML อย่างถูกต้องตามหลักการ กฏเกณฑ์แล้ว และ ตกแต่งควบคุมด้วย CSS แล้วจะได้ผลตามต้องการนั้นได้ไหม ปัญหาข้อนี้ฝากให้ลองไปคิดดูแล้วลองศึกษาด้วยตัวเอง

สิ่งใดที่กำลังจะเกิด

มันอาจเป็นความคุ้นชินของเราไปเสียแล้วที่ติดกับภาพลักษณ์ของ Style Sheet แต่เริ่มแรก แต่ ณ ตอนนี้โลกมันเปลี่ยนไป ทางผู้พัฒนา CSS และ XHTML นั้นได้พัฒนาให้เจ้าเทคโนโลยีสองตัวนี้เจริญเติบโตควบคู่กันไป ไม่ว่าจะเป็นความสะดวกสบายในการนำมาใช้ ความง่ายต่อการปรับแต่งแก้ไข ตอนนี้ CSS เองนั้นยังมีทั้ง bug ในตัวมันเอง และ bug ที่เกิดใน browser ต่าง ๆ ถ้า CSS พัฒนาจนเป็น Mark Up Language ได้เมื่อไหร่ ตอนนั้นคงได้สนุกกันยิ่งขึ้นมากกว่านี้แน่นอนครับ ถึงตอนนั้นความเสถียรต่าง ๆ คงมีมากขึ้นกว่านี้

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

ขอบพระคุณครับ

แปล เรียบเรียง และ เพิ่มเติม: radiz

โครงร่างหลักโดย: Jeffrey Zeldman 12 มีนาคม, 1999