Radiz Sutthisoontorn

Multiple Style Sheet จบปัญหาขั้นต้น กับ Netscape4

ปกติส่วนใหญ่การแสดงผลนั้นปกติหมดทุกอย่างเป็นไปตามที่อยากให้เป็นไปนะครับทีนี้ลองเอาไปเปิดใน Netscape 4 ดูสิคุณจะเห็นความหายนะ หลาย ๆ อย่างเลยล่ะ ที่เป็นประเด็นหลัก ๆ ที่พบเห็นกันบ่อย ๆ ก็คือ

– Fonts

Font Properties ไม่สามารถทำงานได้ตามปกติ การเพิ่มขนาด font ให้กับ heading ไม่สามารถกำหนด font-weight โดยใช้ bold กับ strong ได้ การเลือกใช้สีที่ไม่ถูกต้องตามอารมณ์ของมัน จะถูกแสดงผลออกมาเป็น สีเขียวสะท้อนแสง แทนที่จะเป็นสีจริง ๆ ที่เรากำหนด

– Margins และ Borders

Block elements ในส่วน top and bottom margins แสดงผลไม่ถูกต้อง ความสูงระหว่างบรรทัดทำให้ เหลื่อมล้ำ และ ซ่อนส่วนของภาพ ต้องมีการกำหนด border ที่ถูกต้อง การใช้ border กับ inline elements จะทำให้การแสดงผลใน browser พัง

– Background

สีพื้นใช้กับ Element and borderได้ไม่เต็ม ตำแหน่ง backgrounds ผิดเพี้ยนไป ชุดสีสำหรับ backgrounds ที่อยู่ใน anchor tags มองไม่เห็นภาพ background-image และ สีหายไปจาก elements ที่กำหนดไว้

– List

แสดงผลเฉพาะ bullet แต่ไม่แสดง text ออกมาให้เห็น list-style-type แสดงผลผิดไป การจัดวาง margin และ padding ไม่สามารถใช้ได้ในส่วนนี้

– Table

ตบตา Netscape 4 ด้วย ID Element

คราวที่แล้วพูดถึงการใช้ การเขียน Comment ของ CSS หลอกเจ้าลุง Browser ตัวนี้ไปแล้ว คราวนี้มาว่าต่อด้วยวิธีป่วน ลุง Browser ตัวนี้ต่อ เป็นวิธีที่เรียกว่า “วิธีง่าย ๆ” ก็ได้มั้ง ลุง Browser ตัวนี้เนี่ยแกจะไม่ทำงานกับ ID selector ใดใดที่มีการเขียนให้เรียกใช้แบบ จำเพาะเจาะจง งงมั้ยครับ ดูตัวอย่างข้างล่างนี้ละกัน

ประกาศสงคราม

หลาย ๆ คนคงปวดหัวปวดกบาลไปกะมันเพราะอะไร เพราะ Browser ที่ออกแบบมาไม่ตรงตามกำหนดกฎเกณฑ์มาตรฐานที่กำหนดไว้ พูดง่าย ๆ หาความเป็นอันหนึ่งอันเดียวกันลำบาก อีกทั้งยังต้องคำนึงถึง Browser ตัวเก่า ๆ ที่เราหลาย ๆ คนเลิกใช้กันแล้ว แต่ User บางคนยังใช้อยู่ ซึ่งเราก็ต้องทำให้มันแสดงผลได้สมบูรณ์ ใน Browser เหล่านั้นด้วย

กลุ่ม Designer ตอนนี้ก็ … ในความรู้สึกของผมเอง แบ่งได้ 2 กลุ่มใหญ่ ๆ ก็คือ

– พยายามที่จะทำ และ ศึกษา CSS ให้ออกมาใช้งานได้ดี และ แน่นอนต้องดูดีในทุก ๆ Browser

– ส่วนอีกกลุ่มก็ ฉันไม่สนใจ CSS ฉันจะใช้มันก็แค่กำหนด สีของ font ไม่ก็คุณลักษณะเล็ก ๆ น้อย ๆ ของฉันก็แค่นั้นเอง ผมถือว่าพวกเราทั้งหลายอยู่ในกลุ่มแรกละกันนะครับ

Intro to Radiz

ครั้งแรกนี้คงเกริ่นกันก่อน เกี่ยวกับสิ่งที่ผมจะเขียนและแบ่งปันให้

คนอื่น ๆ อาจจะรู้แล้ว หรือ ยังไม่รู้ ผมก็ต้องขออภัยไว้ด้วย และ ก็ขอให้มันเป็นประโยชน์เพื่อใช้ต่อไปด้วย

“Start a War” สิ่งที่ผมจะเขียน ก็คือ การทำสงครามระหว่าง CSS กับ Browser

ก็คือ ทำให้ CSS ของเราเป็นกลางในทุก ๆ Browser คือ พยายามให้ผิดเพี้ยนน้อยที่สุด แสดงผลได้สมดุลที่สุดไม่ว่าจะเปิด Browser ไหน

อย่างไรก็ตามในการทำงานจริง ๆ นั้น ผมก็ขอแนะนำให้ยืนพื้นโดยการเลือก Browser เป้าหมายของคุณ

บทเริ่มแห่งสงคราม (Netscape 4)

Netscape 4 Browser ตัวนี้หลาย ๆ คนใน ThaiCSS คงเลิกใช้ไปแล้วมั้งครับ แต่ผลการสำรวจทั่วโลกนั้นยังมีคนที่ยังใช้อยู่ ถึงแม้จะเป็นเพียงไม่ถึง 10% แต่ผู้ใช้เหล่านี้อยู่ในธุรกิจใหญ่ ๆ ที่เราไม่อาจมองข้ามไปได้เลยนะครับ

เช่น โรงงานอุตสาหกรรมใหญ่ ๆ ในหลาย ๆ ประเทศ, ห้องสมุดใหญ่ ๆ ตามมหาวิทยาลัยดัง ๆ ต่าง ๆ (รวมถึงมหาวิทยาลัยของผมด้วย) และ โรงพยาบาลดัง ๆ ในหลายประเทศ

ถึงตอนนี้คุณคงเกิดคำถามแล้วสิว่า “ทำไมวะ ทำไมมันยังใช้กันอยู่”

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

“ลูกค้า คือ พระเจ้า” ท่องเข้าไว้

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

ใช้ Comment ซ่อนคำสั่งจาก Modern Browser ยกเว้น Netscape 4

ผมเคยแนะนำไปแล้วว่าเราสามารถใช้ Comment ตบตา Netscape 4 แต่คราวนี้เรา จะมาใช้ Comment ตบตา Modern Browser ให้มองไม่เห็นคำสั่งบ้าง ให้คุณลุง Netscape 4 แกมองเห็นเพียงแต่คนเดียว

วิธีนี้ใช้ได้ผลชงัดแถม Valid กับ CSS Validator ด้วย เป็นเทคนิคที่ค้นพบโดย Fabrice Pascal วิธีนี้สามารถตบตาได้หมด ยกเว้น Browser ดังต่อไปนี้นะครับ

  1. Netscape 4
  2. Opera 4 และ 5 (Windows)
  3. Opera 5 (Mac)

คราวนี้ก็เป็นประโยชน์สำหรับพวกเราล่ะ ถ้าเราต้องการเขียน CSS ให้ทำงานกับ Browser 3 ตัวที่ผมพูดถึงข้างบน ก็เขียนง่าย ๆ ดังตัวอย่างข้างล่างนี้ครับ

Back to Top