CSS hack IE


200920 May

ตามปกติแล้ว css จะถูกอ่านตามลำดับ ถึงแม้ว่าจะเป็นคำสั่งที่เหมือนกัน แต่คำสั่งสุดท้ายเท่านั้นที่ ถูกใช้งาน ดังตัวอย่างข้างต้นสีพื้นหลังจะเป็นสี #000000 เท่านั้น สี #ff0000 จะไม่มีผล

 
div{ background: #ff0000; }
div{ background: #000000; }

แบบที่ 1 : คำสั่ง !important ทำงานที่บรรทัดนี้เป็น Priorty แรก

div{ background: #ff0000 !important;}        
div{ background: #000000; }  

ไม่ว่าคำสั่ง background: #ff0000 !important; จะอยู่ส่วนไหนของเอกสาร(ลำดับการเขียนไม่เป็นผล) คำสั่งนี้เท่านั้นที่จะถูกทำงานเป็น First priority แต่คำสั่งนี้ใช้ได้กับ IE7 และ versionที่ต่ำกว่า IE6,IE5.5

แบบที่ 2 _property: value and -property: value

เนื่องจาก CSS specification ได้สงวนการขึ้นต้นคำสั่ง(property)ด้วย ขีดล่าง(_) or ขีดกลาง(-) ไว้ใช้กับ vendor-specific property name จึงทำให้คำสั่งที่ขึ้นต้นด้วย _,- ไม่ถูกอ่านจาก browser สมัยใหม่ ยกเว้น ie6 เท่านั้น ที่ยังอ่านคำสั่งนี้ได้อยู่

 
p{ color: black; _color: blue; // IE6 only  }

จากตัวอย่าง ie6 จะอ่านทั้งสองคำสั่ง แต่จะสั่งให้ทำงานได้เฉพาะคำสั่งสุดท้าย (วิธีนี้ลำดับการเขียน มีความสำคัญ) แต่ browser อื่นอ่านคำสั่งแรกเท่านั้น

แบบที่ 3 *property: value

 
p{
color: black;
*color:blue; // All below IE7
 }

จะใช้ได้กับ IE7 และ versionที่ต่ำกว่าแต่ Firefox และอื่น ๆ จะไม่อ่าน *property: value applies the property value in IE 7 and below.

แบบสุดท้าย Conditional comments as a CSS hack

การสร้างเงือนไขเพื่อแยกการแสดงผล IE แต่ล่ะ version โดยแยกไฟล์แต่ล่ะ version IE

<html lang="en">
        <head>
                <title>Test</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>
        <body>
                <p>Test</p>
        </body>
</html>

เำพิ่มเติมน่ะคับน่ะคับลองนำไปใช้กันดูผมว่าวิธีแยก condition เนี้ยน่าจะเข้าใจง่ายสุดและมีระเบียบดี ส่วนตัวผมชอบวิธีนี้แต่ถ้าใครชอบวิธีอื่นๆ ก้อลองนำไปใช้กันดู

IE 6 and below
* html {}
 
IE 7 and below    
*:first-child+html {} * html {}
 IE 7 only
*:first-child+html {}
IE 7 and modern browsers only    
html > body {}
Modern browsers only (not IE 7)    
html > /**/body {}
 
Recent Opera versions 9 and below    
html:first-child {}  

คุณสามารถอ่านเพิ่มเติมได้จากที่นี้ขอจบแต่เพียงเท่านี้ไปอ่านกันน่ะคับ http://www.webdevout.net/css-hacks#in_css-import_media

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด ส่วนลด lazada true

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด

Finger Style Guitar
(2)

รวม DVD แนวเพลง Finger Style Guitar ต่างๆ

fingerstyle
(1)

DVD และ VCD เพลงแนว Finger Style Guitar

pair bluetooth
(1)

วิธีการ Pair อุปกรณ์ Bluetooth ต่าง ๆ

บทความและความรู้ด้านการพัฒนาเว็บไซต์

css
(11)

บทความเกี่ยวกับ CSS, เทคนิคต่าง ๆในการใช้ CSS เรียนรู้การแก้ไขต่าง ๆ

css hack
(4)

บทความเกี่ยวกับ CSS, เทคนิคในการปัญหา cross browser ในการแสดงผลของ browser ที่แตกต่าง ๆ กัน

drupal
(12)

บทความเกี่ยว Drupal แนะนำการใช้งาน Drupal และเทคนิคต่างๆในการใช้งาน

javascript
(13)

บทความเกี่ยว Javascript แนะนำการใช้งานวิธีแก้ไขต่างๆ

JSON
(1)
php
(4)
SEO
(3)
Web Tools
(3)

แนะนำเครื่องมือสำหรับพัฒนาเวบไซต์