10 ปี CSS: และ สิ่งที่กำลังจะเกิดที่ควรรู้

CSS จะมีอายุครบ 10 ขวบในปีนี้ (17 ธันวาคม 2550) น่าจะเฉลิมฉลอง พร้อมกับมาลองมองย้อนกลับไปในอดีต และ มาร่วมคิดวางแผน มองไปในอนาคตเพื่อพร้อมที่จะก้าวไปข้างหน้า ผมถือว่า CSS เป็นจุดผกผันของวงการ Web Design และ CSS เป็นต้นกำเนิดแห่งรากฐานที่จะแยก Style ออกจากภาษาโครงสร้าง อำนวยความสะดวกสบายให้เหล่า Designer ทำงานได้สะดวกขึ้น และ สวยงามมากขึ้น ด้วย properties อันหลากหลายของมัน และ CSS3 ที่กำลังจะเปิดตัวในวันเกิดของ CSS ในปีนี้จะอุดมไปด้วย properties ที่ถูกร้องขอจากเหล่า Designer ทั่วโลก (W3C จะฉลอง 10 ขวบให้ CSS ในปีนี้ด้วยการ update เวอร์ชั่นใหม่ของ Online CSS Validator และ จัดทำ CSS10Gallery โดยคัดเลือกงานของสุดยอด Designer ระดับโลกมาโชว์ไว้ใน Gallery นี้: CSS: Happy tenth birthday โดย Michael(tm) Smith)

หลาย ๆ properties ของ CSS ทั้งใน version เก่า และ ปัจจุบัน นั้นถูกรังสรรค์ขึ้นมาเพื่อปรุงแต่งหน้าตาของ text ทั้งหลาย ไม่ว่าจะเป็น สี, ตำแหน่ง, ลักษณะการแสดงผล (ตัวหนา ตัวเอียง ฯลฯ) และ ทิศทางของมัน เหล่านี้นับว่าเป็นสิ่งที่ดี หากมองย้อนกลับไปในอดีตที่ผ่านมา แต่ถ้าอยากเห็นคำสั่ง และ เห็นการทำงานที่ทรงประสิทธิภาพของ CSS แล้วล่ะก็ สิ่งนั้นคือ มันสามารถทำให้เรากำหนดหรือเลือก font ที่เหมาะสมแก่การแสดงผลของ web page ได้ ซึ่งในอดีตปัญหาในเรื่องการเลือก font มาแสดงผลนั้นถือว่าเป็น บาดแผลสาหัสของเหล่า Designer เลยทีเดียว

พิจารณาจาก design ต่าง ๆ ของ CSS Zen Garden อะไรที่ทำให้มันน่าหลงไหล ส่วนหนึ่งคือการจัดวางและ รูปแบบต่าง ๆ ของ font เราจะมองเห็นว่า font เหล่านั้น design ให้ข้อความเหล่านั้นเกิดความน่าสนใจ ดึงดูดใจ (แล้วแต่คนชอบนะ) มาลองมองไปทางด้าน print design บ้างมี font มากมายก่ายโขให้เราเลือกใช้ แต่ว่ากับ Web นี่สิช่างเป็นสิ่งที่น่าหดหู่ใจ เพราะ font มีให้ใช้น้อยเสียเหลือเกิน Designer ทั้งหลายไม่ว่าใครต่อใคร ต่างใช้ font ตระกูล Verdana และ Arial กันเป็นส่วนใหญ่สืบทอดกันมารุ่นต่อรุ่น แต่ใน CSS Zen Garden นั้น หลาย ๆ คนก็ได้หยิบยก font ที่ตนเองชอบขึ้นมาใช้แสดงผลโดยทำให้ font เหล่านั้นมาเป็น background-image

background-image !!!

แต่ก็มีหลายเหตุผลที่ทำไม ถึงไม่ใช้ background-image ในลักษณะนี้ทั้งหมด เพราะการทำแบบนั้นมันจะยากมากทั้งในเรื่องการแปลภาษา และ การสร้างสรรค์ ลองคิดดูว่าถ้าเราจะทำ website ที่ต้องสนับสนุนภาษา 15 ภาษา แล้วเราก็อยากจะใช้ font ที่เราอยากจะใช้ด้วยล่ะ มันคงเป็นเรื่องยุ่งยาก และ เสียเวลามากพอสมควรเลยใช่ไหมครับแถมถ้าลอง print กับ printer ออกมาล่ะก็จะลำบากมากเข้าไปอีก เพราะเราไม่สามารถไปกำหนดขนาด หรือ รายละเอียดต่าง ๆ ให้กับมันได้มากนัก เพราะ printer รุ่นใหม่ ๆ นั้น จะทำการย่อขนาดรูปภาพให้เหมาะสมกับลักษณะการพิมพ์ของมันให้เลย อย่างไรก็ตามแม้ว่าการทำ background-image จะเป็นทางออกที่ดีของ Web Designer แต่ก็ยังมีอีกวิธีที่ CSS สามารถช่วย Web Designer ที่ต้องการจะใช้ font ที่ตัวเองชื่นชอบกับ web ของตนได้ก็คือ การใช้เรียกใช้ Web font ด้วย CSS (แต่ Web Designer ก็เลือกใช้ font ได้จำกัดอยู่ดีถ้ามองด้วยเรื่องกฏหมายลิขสิทธิ์ เพราะฉะนั้นการ design อะไรบางอย่างก็ยังคงมีข้อจำกัดอยู่) โดยเราสามารถ upload font ที่ต้องการจะใช้ไปไว้บน hosting ของ web ได้เลยแล้วเรียกใช้มันด้วย CSS กรณีนี้ก็ไม่จำเป็นต้องทำเป็น background-image แถมยังสามารถกำหนดการ print ออกมาได้สะดวกกว่าด้วย แต่คุณต้องแน่ใจว่าคุณได้รับอนุญาติในการใช้ลิขสิทธิ์อย่างถูกต้อง หรือ เป็น font ที่คุณออกแบบมันขึ้นมาด้วยตัวเอง

ประวัติคร่าว ๆ ของ Web Fonts

ไอเดียนี้ไม่ใช่ไอเดียใหม่ไปเสียทีเดียว มีการคิดหาวิธีแก้มานานนม กระทั่งในปี 1998 CSS2 ได้ถูกพัฒนาให้สามารถ link ไปยัง font ได้จาก style sheets และ Microsoft กับ Netscape ต่างก็ได้เพิ่ม function ที่สนับสนุนเทคนิคนี้เข้าไปใน browser ของตนเอง โดยเริ่มจากการสนับสนุน font ในประเภท TrueType ก่อน จากนั้นก็เริ่มเพิ่ม function ที่สนับสนุน font ประเภทอื่น ๆ เข้าไปบ้างเล็ก ๆ น้อย ๆ เช่น EOT และ TrueDoc แต่จากนั้นมา web font ก็ค่อย ๆ เงียบหายไปไม่ได้ปรากฏอยู่ใน designer’s toolbox อีกเลย

ข่าวดี ที่ Web font กลับมา

และแล้ว web font ก็กลับมาอีกครั้ง และ ยังสามารถแสดงผลได้ดี ใน modern browser ต่าง ๆ อีกทั้งยังสามารถใช้ร่วมกับ Prince ซึ่งเป็นโปรแกรมเพียงโปรแกรมเดียวที่ สนับสนุน properties ของ CSS ในส่วนนี้ มันสนับสนุน TrueType Web font และ มันสามารถแปลง web site ให้เป็น .PDF โดยอ่านค่า คำสั่งการแสดงผลของ CSS

ตัวอย่าง CSS code ในการเรียกใช้ web font

@font-face {

font-family: “Kimberley”;

src: url(http://www.princexml.com/fonts/larabie/

kimberle.ttf) format(“truetype”);

}

h1 {font-family: “Kimberley”, sans-serif}

ความสับสนวุ่นวายในภายภาคหน้า (อิอิ)

เมื่อ modern browser ต่าง ๆ สนับสนุนการแสดงผลเหล่านี้แล้ว และ font ที่เราสามารถนำมาใช้ได้มีเยอะขึ้นแล้ว Designer ก็ต้องมาวุ่นกับการปรับแต่งที่มากกว่าเดิม จากที่เคยทำแค่ font-family กำหนดสี แต่ต้องมองออกไปถึงเรื่อง line-height, letter-spacing และ word-spacing บางครั้งอาจเลยเถิดไปถึง absolute position ไปเลย แล้วยังต้องมองไปยัง browser ที่ไม่ support ด้วย (ถ้ามีอยู่ใน list ของ browser เป้าหมาย)

Web font กับ Media Query ของ W3C

การใช้ Media Query ที่ W3C นั้นกำหนด กับ Web font นั้นบางครั้งอาจใช้ไม่ได้เสมอไป ต้องขึ้นอยู่กับ font นั้น ๆ ด้วยนะครับว่าถูกออกแบบให้สนับสนุน Media Query ด้วยหรือไม่ อย่างไรก็ตามตอนนี้ยังไม่มีการกำหนดมาตรฐานอะไรให้กับ Web font ที่เป็น TrueType ซึ่งก็เป็นสิ่งที่คาดว่าจะเกิดขึ้นในภายภาคหน้า

สิ่งที่กำลังจะเกิดขึ้น

จะเห็นได้ว่าเมื่อ Prince ได้ถูกพัฒนาออกมาเป็น Tools ที่สามารถแปลง webpage ออกมาเป็น .PDF ได้ใกล้เคียงที่สุดโดยอ่านค่าการแสดงผลของ website ที่ไฟล์ CSS ด้วย เป็น concept ที่น่าสนใจแต่ทำไมหลาย ๆ บริษัท หรือ องค์กรที่เป็นผู้นำในการพัฒนา browser ยังไม่ให้การสนใจ หรือ สนับสนุนในส่วนนี้ ส่วนใหญ่เลยคือเรื่องของกฏหมายที่ผมได้กล่าวไว้ข้างต้น ซึ่งเป็นอุปสรรคสำคัญทั้ง designer และ ผู้พัฒนาบางกลุ่มเลยยังคิดว่ายังคงไม่สลักสำคัญอะไรมากในส่วนนี้ แต่ในอนาคตถ้าทุก ๆ อย่างมีการเปลี่ยนแปลง และ พัฒนาคาดว่า browser หลัก ๆ ทั้งหลายก็จะถูกพัฒนาตามไปด้วย

เราจะมีส่วนร่วมอย่างไร

สิ่งสำคัญสองอย่างที่จะต้องเกิดขึ้นก่อนที่ Web font นั้นจะสามารถเข้ามาเป็นส่วนหนึ่งในการที่จะทำให้แวดวงของ Web Design ขยับขึ้นไปอีกระดับหนึ่งก็คือ

สิ่งแรก คือ เราควรจะทำให้ Web font เป็นมาตรฐานหนึ่งที่ต้องเพิ่มเข้าไป (ไม่เกินเอื้อมไปใช่ไหมสำหรับ Web Designer หรือ Designer ในไทย) หรือ ทำ Web font ให้ตรงตามมาตรฐานที่ CSS2 ได้มีหรือกำหนดไว้? ผมเห็นว่าเรามาเริ่มที่จุดเล็ก ๆ กันดีกว่า คือ เราเริ่มพัฒนาจากการ สร้าง font ให้สนับสนุนสิ่งที่ CSS2 นั้นสร้างมาให้นำไปใช้งานได้อย่างสมบูรณ์ที่สุด

สิ่งที่สอง คือ ทำให้ browser ทุก browser นั้นสนับสนุน properties นี้ของ CSS ซึ่งอาจจะเป็นการยาก แต่เมื่อจุดเล็ก ๆ นั้นเริ่มเปลี่ยน และ เริ่มถูกใช้กันอย่างแพร่หลาย เชื่อว่าไม่ช้าก็เร็ว การเปลี่ยนแปลงครั้งใหญ่ในวงการ Web Design นี้ต้องเกิดขึ้นอย่างแน่นอนครับ

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

เรียบเรียงจากบทความของ: Håkon Wium Lie