Sitthiphorn Anthawonksa

CSS3 เริ่มเขียนเริ่มใช้กันได้แล้ว หาซื้อได้ตามร้านโชวห่วยทั่วไป แต่ อะไรกันแค่เพียง CSS1 กับ CSS2-2.1 ยังเขียนไม่หวาดไม่ไหว จะจู่โจมสู่ไตรภาคกันแล้วหรือ ค่อยๆ เขียนค่อยๆ เพิ่มกันไป จะให้ผมมาเขียนเชียร์แบบบ้าพลัง

กลับมาหา CSS

ถือได้ว่าเราห่างหายจากการเขียนบทความที่เกี่ยวข้องกับ CSS อย่างเดียวโดยตรงไปนาน เพราะทั้งผม (พร อันทะ) และ รดิส (radiz) ต่างพยายามเบี่ยงเบนความสนใจของทุกๆ ท่านไปที่เรื่อง Semantic web, Web Standards และเรื่อง XHTML นานพอสมควร ไม่ใช่ว่าพวกเราจะเลิกสนับสนุนหรือแนะนำเรื่องราวเกี่ยวกับ CSS กันแล้ว แต่เพียงแค่หันไปบอกเล่าเรื่องที่มันสำคัญมากยิ่งกว่า CSS แค่ชั่วคราวแค่นั้นเองครับ เพียงเพราะแค่อยากให้เข้าใจเรื่องราวของการเขียนเว็บตรงและเป็นอันหนึ่งอันเดียวกัน กระนั้นก็ยังหวั่นๆ ว่ามันจะไปทางเดียวกันได้หรือไม่ ต้องรอดู

มาถึงตอนนี้ ผมคงเริ่มที่จะกลับเข้ามาหาเรื่องราวที่เกี่ยวข้องกับ CSS มากยิ่งขึ้น ตามการเปลี่ยนแปลงของเวลา แต่คงเป็นอะไรที่ซับซ้อนมากกว่าเมื่อก่อนมาก เพราะต้องเขียน CSS ให้รองรับในฉบับของ Semantic Web

สงครามบราวเซอร์ จุดเริ่มต้นของจุดจบ

1. ถ้าคุณเขียนโค้ดถูก แต่บราวเซอร์แสดงผลเพี้ยน แสดงว่าบราวเซอร์ มีปัญหา
2. ถ้าคุณเขียนโค้ดผิด แต่บราวเซอร์ยังแสดงผลถูกต้อง นั่นแสดงว่า ทั้งตัวคุณ ทั้งบราวเซอร์ ต่างก็มีปัญหา

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

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

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

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

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

เคยลองเขียนหน้าเว็บแบบ XHTML 1.1 แล้วเกิดข้อผิดพลาดจนหน้าเว็บไม่แสดงผลบ้างไหมครับ หรือ แสดงผล แต่ผิดเพี้ยน ความหงุดหงิด งุ่นง่านเกิดขึ้นกับผมทุกครั้งที่คิดอยากจะเขียนเว็บแบบ XHTML 1.1 แต่ในชีวิตจริง ถ้าหากคุณยังทำงานกับโปรแกรมเมอร์ที่ยังไม่เข้าใจว่า XHTML 1.1 กับ HTML 4.01 มันต่างกันอย่างไรหละก็ บอกคำเดียวครับ ว่าคุณ ไม่ต้องไปแสดงกล้ามดากอะไรกับเขาเหล่านั้นอีกแล้ว หยิบยื่น XHTML 1.0 Transitional ให้เขาเหล่านั้นก็พอ โลกแห่งความฝันแตกต่างกับความเป็นจริงฉันใด ก็ฉันนั้น โลกแห่งธุรกิจและความสามารถในการพัฒนาตัวตน ของคนทำงานมักไม่เท่ากันเสมอ คำแนะนำคือ เก็บความขมขื่นเอาไว้คนเดียว แล้วไปเขียนระบายความรู้ กู้ความเครียดใน Web Log ของตัวเองซะ

ในขั้นต้นของการคิดวิเคราะห์ข้อมูลที่จะนำมาทำเป็น list ในรูปแบบต่างๆ ความเข้าใจในพื้นฐานของความเป็น list คือสิ่งสำคัญ เราจะรู้ได้อย่างไรว่าอันไหนคือ list ที่ต้องเรียงลำดับ (ol) อันไหนคือ list ที่ไม่ต้องเรียงลำดับ (ul)

การเขียน CSS สำหรับ XHTML attribute ใน css ไฟล์นั้นเหมาะกับการใช้ในกรณีที่เราต้องการ ควบคุมการแสดงผลร่วมกันในหลายๆ หน้าของเว็บเช่น การสั่ง body หรือ การสั่ง IMG การเขียน css แบบ External ที่สำคัญเราควรกำหนดค่า body, img, Pseudo-classes, table,td และอื่นๆ ที่เราต้องการไว้ก่อน

เช่น ถ้าเราเขียน

body { 
background-color: #000000;
} 
img {
border: 0;
}

เมื่อเรานำ ไฟล์ css ไปใช้กับหน้าเว็บใดๆ แล้ว จะได้ค่า พื้นหลังของทุกหน้าเป็นสี #000000 และภาพทุกภาพที่มีอยู่ในแต่ละหน้า จะไม่มี เส้นขอบ และเมื่อเราไปใช้ tag <img src="" alt=""> เราไม่ต้องกำหนด border="0" ในแทกอีกที เพราะ css จัดการให้เรียบร้อยแล้ว และวิธีการกำหนด IMG ให้ border: 0; ใน css ไฟล์ลักษณะนี้ นอกจากจะช่วยไม่ให้ต้องเขียน border="0" ใน html แล้ว เวลาที่เราทำลิงค์จากภาพ ใน IE ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ