ระดับเนื้อหา : Beginner (ระดับต้น) & Intermediate (ระดับกลาง)
การใช้ CSS ในการกำหนด layout และตกแต่งเว็บไซต์แบบ Tableless ในบ้านเราถือว่ายังไม่แพร่หลายมากนัก ส่วนใหญ่ยังคงใช้คำสั่ง Table ในการกำหนด Layout ของเว็บ ถึงแม้จะนำ CSS มาใช้บ้างแต่ก็เป็นการผสมผสานกับการใช้ Table แต่ปัญหาที่ผมมาเมื่อครั้งยังใช้ table เป็นหลัก คือหากผมต้่องการปรับเปลี่ยน Layout หรือ หน้าตาเว็บโดยยังคงเนื้อหาเดิมไว้ ผมกลับต้องรื้อ layout ทั้งหมด และเมื่อเห็นหลายๆ เว็บของต่างประเทศที่นำ CSS มาใช้ในการทำเว็บและลองทำดูปัญหาที่เคยเจอก็หมดไป นอกจากข้อดีที่ว่าแล้ว CSS ยังมีข้อดีข้อเด่นอะไรอีกบ้าง เรามาลองดูกันครับ
จุดเ่่ด่น 5 ประการของ CSS ที่ Russ Weakley ผู้เขียนหนังสือ CSS in 10 Minute ซึ่งเป็นหนังสือเล่มแรกๆที่ผมซื้อมาเพื่อศึกษาการใช้ CSS ครับ
- สามารถควบคุม Typography ได้ดีกว่า นั่นก็หมายความว่า การใช้ CSS ทำให้คุณกำหนดรูปแบบการแสดงผลของ Font จากไฟล์ CSS ได้ดีขึ้นเพราะหากเว็บของคุณมีรูปแบบของ fontที่เหมือนกันในทุกเว็บเพจ คุณก็กำหนดรูปแบบการแสดงผลของ Font ทั้งหมดไว้ในไฟล์ CSS และเรียกใช้มันแทนการเขียน Tag ในแต่ละเว็บเพจ
- ขนาดของไฟล์เล็กลง เพราะเมื่อคุณใช้ CSS ในการกำหนดรูปแบบหน้าตาของเว็บ จากเดิมที่ใส่ tags อย่าง <font size=”+2″ , style=….color…> ,หรือ <table align=”center” bgcolor=”…”……. > ,ฯลฯ เต็มไปหมดในเอกสาร HTML คุณก็สามารถกำหนดรูปแบบการแสดงผลไว้ไฟล์ CSS ต่างหาก ซึ่งก็จะทำให้ ขนาดไฟล์ HTML เล็กลง
- ปรับเปลี่ยนง่าย เมื่อคุณกำหนดรูปแบบการแสดงผลของเว็บเพจ ไว้ในไฟล์ CSS คุณก็สามารถแก้ไขรูปแบบการแสดงผลได้จาก ไฟล์ CSS แทนที่จะแก้ไขในเอกสาร HTML หลายๆหน้าเหมือนการใช้ Table
- กำหนดรูปแบบการแสดงผลของสื่อหลากชนิด ด้วยการใช้ CSS คุณสามารถกำหนดให้การแสดงผลของเว็บแสดงออกมาในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่ว่าจะเป็น ให้เว็บเพจหนึ่งหน้าแสดงผลที่ Browserในรูปแบบเว็บเพจบนหน้าจอแต่แสดงผลใน Mobile Device อีกแบบหนึ่งเพืื่อให้เหมาะสมหน้าจอบน PDA ที่เล็กกว่าได้ ฯลฯ โดยที่ยังคงเนื้อหาเช่นเดิม
- เพิ่ม Accessibility ให้เว็บ Accessibility หรือการเข้าถึงข้อมูลเว็บนั้นเรามักจะนึกถึงการเข้าถึงข้อมูลเว็บของผู้มีปัญหาทางผิดปกติทางร่างกายเช่น คนตาบอด ผู้พิการอื่นๆ ฯลฯ ซึ่งคนเหล่านี้จะใช้ Software ช่วยเหลือเช่น Screen Readers(สามารถดาวน์โหลด trial screen readers software ได้ที่ http://www.freedomscientific.com/fs_downloads/jaws.asp เมื่อinstall แล้ว ให้ลองหลับตาหรือปิดมอนิเตอร์ เพื่อให้ Software อ่านให้เว็บให้เราฟัง) หลายจุดในเว็บเพจที่มีการใช้ Table ซ้อน Table อาจจะทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น ทำให้การอ่านผลของ Screen Readers อ่านตัวหนังสือได้ถูกต้องยิ่งขึ้นหากคุณอยากรู้ว่าเมื่อถอด CSS ออกแล้วเป็นอย่างไร ทำได้โดยหากคุณใช้ Firefox(download) ไปที่ Toolbar เลือก View > Page Style >No Style สำหรับ IE 7 ทำได้เพียง Ignore Font size ,color และ font style เท่านั้น จึงขอแนะนำให้ใช้ Firefox ดีกว่าสำหรับเว็บที่ใช้ Table ให้เข้าไปที่เว็บไซต์ที่ผมเคยทำไว้่คือ www.thinkandclick.com/old_index.html ครับ
นอกเหนือไปจาก ข้อดีของ CSS ที่กล่าวมาแล้วการนำ CSS ยังมีผลต่อการทำ Search Engine Optimazation ในเว็บไซต์ของคุณอีกด้วย ซึ่งคุณหาอ่านได้จากเรื่อง Cascading Style Sheets และ SEO ตอนที่ 1 และ ตอนที่ 2 จาก emarketeer.in.th
Tags: css, cascading style sheet, seo, css in 10 minutes, Russ Weakley, screen readers, สร้างเว็บ, เว็บไซต์
ธวัชชัย ศรีสุเทพ เอ่ยถึงชื่อนี้ไม่แน่ใจนักว่านักออกแบบเว็บรุ่นใหม่ๆจะรู้จักมั้ย เมื่อครั้งที่ผมเริ่มหัดใช้ Dreamweaver ออกแบบเว็บ ก็อาศัยหนังสือ “คัมภีร์ web design “ ของนักเขียนท่านนี้เป็นหนึ่งในตำรา web design หลาย ๆเล่มที่มีอยู่ แต่ที่สำคัญคือเป็นหนังสือด้านการออกแบบเว็บภาษาไทยที่เมื่อหลายปีก่อนหาได้ยากยิ่ง เพราะหนังสือเรื่องสอนทำเว็บส่วนใหญ่จะออกไปทางวิธีใช้โปรแกรมซะมากกว่า แม้ปัจจุบันเอง ผมยังใช้เล่มนี้ประกอบในการทำงานหลายๆครั้ง