การแก้ปัญหา Browser ใช้ Selector ไม่ถูกต้อง

การใช้งาน CSS นั้นช่วยให้การจัดรูปแบบการแสดงเอกสาร ทำได้ง่ายมากขึ้น แต่การแสดงผลนั้นขึ้นอยู่กับ Browser ที่ทำการ render ผลออกมาด้วยว่าทำงานบนมาตรฐานเดียวกันหรือไม่ ซึ่งปัญหาที่พบบ่อยที่สุดก็คือ Internet Explorer นี่ล่ะ มักจะไม่ค่อยทำงานบนมาตรฐานเดียวกับชาวบ้านสักเท่าไร ดังนั้นการจัดรูปแบบการแสดงผลด้วยเอกสาร CSS ตัวเดียวอาจจะไม่ได้ผล

ในบางเว็บไซท์อาจจะแนะนำให้ใช้ Inline HTML comment ในการเลือกใช้เอกสาร CSS ที่ต้องการ เช่น

<head>
	<title>Site title</title>
	<link href="all_browsers.css" rel="stylesheet" type="text/css">
	<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
	<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

รูปแบบนี้ก็สามารถทำงานได้ดี แต่วันนี้มาลองจับทั้งหมดมาใส่ในเอกสารเดียวโดยการให้ Browser นั้นๆ ทำงานได้อย่างถูกต้องด้วย ย่อมดีกว่าการสร้างเอกสารเพื่อรองรับ Browser นั้นๆ แน่นอน

การใช้งาน Selector ของ Browser ที่มีปัญหานั้นเราสามารถเขียน selector สำหรับ Browser นั้นๆ ได้โดยไม่มีผลกับ Browser อื่นๆ ได้เรียกว่า CSS Hacks เช่น

* html DIV#heading {}

ตัวอย่างข้างบน จะมีผลกับเฉพาะ Internet Explorer เท่านั้นใน FireFox, Safari และ Opera จะไม่มีผล

html>body DIV#heading{}

ตัวอย่างข้างบนก็จะมีผลกับ Internet Explorer 7 ขึ้นไป, FireFox, Safari และ Opera

html>/**/body DIV#heading {}

ตัวอย่างข้างบนจะมีผลกับ FireFox, Safari และ Opera ไม่มีผลใน Internet Explorer ทุกเวอร์ชั่น

ซึ่งทั้งหมดนี้เราสามารถเลือกใช้ให้เหมาะสมกับการแสดงผลในแต่ละ Browser ได้ ตัวอย่างผมเคยเจอปัญหาการแสดงผลความกว้างเป็นเปอร์เซ็นต์ เพื่อให้ขยายตามขนาดหน้าจอของ Desktop แต่ละเครื่องก็จะมีปัญหากับ IE เจ้ากรรมที่ไม่สามารถทำได้เหมือนชาวบ้านเขา ด้วยการวัดขนาดความกว้าง Browser ของ Internet Explorer นั้นไม่เท่ากับ Browser อื่นๆ ดังนั้นจึงใช้ CSS Hacks นี่ล่ะในการเขียน selector สำหรับ IE ด้วยเช่น

DIV#heading {
	width: 20%;
	margin-left: 20%;
}

* html DIV#heading {
	width: 26%;
	margin-left: 26%;
}

จากตัวอย่างข้างบนใน Browser อื่นๆ จะเลือกใช้งาน Selector แรกเท่านั้นส่วน Selector ที่สองจะถูกมองข้ามไป และใน Internet Explorer นั้นจะมีการใช้งานทั้ง 2 Selectors โดย Selector ที่สองจะทำการ Override ค่าใน Selector แรกทำให้การแสดงผลออกมาได้อย่างที่ต้องการ

การใช้งาน Selector ก็ให้เรียงโดยจำไว้ว่า Selector ที่อยู่หลังจะทำการ Override ค่าใน Selector เดียวกันที่อยู่ก่อนหน้า จากนั้นก็เรียงลำดับการใช้งาน Selector ของแต่ละ Browser ให้ถูกต้องเท่านั้นครับ

การแก้ปัญหา Browser ใช้ Selector ไม่ถูกต้อง เขียนเมื่อ 2009.09.25 โดย Sheroku

บทความใกล้เคียง