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

แสดงผลได้เพียงแต่ table และ tr นอกนั้นไม่สามารถแสดงผลใดใดได้อีก เช่นเดียวกับ List ที่ไม่สามารถปรับแต่ง Padding และ Margin ให้กับมัน

ทางแก้มีอยู่สองทางสำหรับเจ้า Browser เจ้าปัญหานี้ คือ วิธีแรก ทำ Multiple Style Sheet อันหนึ่งเพื่อ Netscape 4 ส่วนอีกหนึ่งสำหรับ Browser ตัวอื่น ๆ อีกวิธี คือ ใช้ Style Sheet เดียวกันนี่แหละครับแล้ว ซ่อน properties ที่ใช้งานกับ Netscape 4 ไม่ได้ให้ Netscape 4 ไม่เห็น (เล่นซ่อนหากะมัน) รอบนี้ผมจะพูดถึง วิธีแรกก่อนครับ

Multiple Style Sheets: สำหรับ Netscape 4 เราจะใช้ช่องโหว่ของมันในการแก้ปัญหานี้ จากที่ผมบอกรายละเอียดในครั้งก่อนว่า Netscape 4 ไม่ Support คำสั่ง CSS ตัวใดบ้าง จำไม่ได้ก็กด link กลับไปอ่านดูไม่ก็เปิดมันใหม่อีกหน้าต่าง จะเห็นว่า Netscape 4 นั้นไม่ support คำสั่ง “@import” จะทำงานได้กับคำสั่งแบบ “link” เท่านั้น นี่ละครับความหวังของเรา เราก็ดำเนินการเลยครับเขียน Style Sheet แยกกันเลยตัวหนึ่งทำเพื่อสนับสนุน Netscape 4 โดยเฉพาะเลยให้แสดงผลเป็นไปตามที่เราต้อง ส่วนอีก 1 ไฟล์ทำเพื่อ Browser ตัวอื่น ๆ แล้วเรามาแก้ปัญหากับมันอย่างนี้

<link href=”mainstyleNS.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
<!–
@import url(“mainstyle.css”);
–>
</style>

เขียนตาม pattern นี้เลยนะครับจำให้ขึ้นใจเลยว่า คุณต้องเอาคำสั่ง “link” ขึ้นมาก่อนคำสั่ง “@import” เพราะอะไรเหรอครับ? เพราะว่า Browser ที่เราใช้กันในปัจจุบันจะพิจาณาคำสั่ง “@import” ก่อนแล้วตามด้วย “link” ถ้าคุณเอา “@import” ขึ้นก่อนแล้วตามด้วย “link” มันก็จะเป็นไปตามขั้นตอนเลย ก็คือ รับคำสั่งจาก “@import” แล้วมารับคำสั่งของ “link” ซ้ำทีนี้ คำสั่งที่จะใช้กับ Netscape 4 ก็จะถูกจำและดึงมาใช้ใน Browser รุ่นใหม่ที่เราใช้กันปัจจุบันหมด จบกันเลยครับทีนี้เพราะฉะนั้นอย่าลืมนะครับผม

Tips: สิ่งสำคัญอีกอย่างที่เราจะได้จากการไม่สนับสนุนคำสั่ง “@import” เราสามารถนำวิธีแก้ปัญหานี้ไปใช้กับ IE3 ได้เหมือนกันเพราะ IE3 นั้นก็สนับสนุนเฉพาะคำสั่ง “link” เหมือนกับ Netscape 4

คุณควรจะตรวจทานด้วยว่าการทำ Multiple Style Sheet ของคุณนั้นสำเร็จหรือไม่ วิธีการตรวจก็คือ คุณต้องกำหนดชื่อ Style สำหรับ Selectors เรียกใช้งานให้เหมือนกันทั้งหมดเลย จะแตกต่างกันก็ตรงที่เรากำหนดค่า attribute ต่างกัน ในแต่ละไฟล์ style sheet แล้วดูว่า ไฟล์ที่สั่ง “link” กับไฟล์ที่สั่ง “@import” นั้น ค่า attribute ของไฟล์ที่สั่ง “@import” นั้นไปแทนที่ attribute ของไฟล์ที่สั่ง “link” ทั้งหมดหรือไม่ เมื่อตรวจดูว่ามันโอเคเรามาถูกทางแล้วก็ ปรับแก้ให้แสดงผลเหมือนกันตามปกติครับผม

Note: อีกวิธีหนึ่งในการตรวจสอบว่า ไฟล์ที่สั่ง “link” นั้นได้ถูกแทนที่ด้วยไฟล์ที่สั่ง “@import” โดยสมบูรณ์แล้วนั้น สามารถตรวจสอบได้ด้วยการสังเกตการเกิดอาการงงของ Browser (reverse sequences) ที่จะเกิดขึ้นกับ IE ตัวหลัง ๆ ปรากฏการณ์นี้จะก่อให้เกิดการแสดงผลแบบไม่มี style sheet ครับ ก็คือมันจะมองเหมือนกับว่าไม่มี style sheet คุม เหมือนเราลบ style sheet ออกไปนั่นเอง ปรากฏการณ์นี้เราเรียกมันว่า “Flash of Unstyled Content” จะพูดถึงต่อไปครับ

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top