CSS Browser Hacks
200924 May
พอจะสรุปคราว ๆ ได้ประมาณนี้สำหรับ CSS Browser Hacks
การใช้งานให้เรียงลำดับการเรียกใช้ให้ถูกต้องด้วยน่ะคับ
ยกตัวอย่างถ้าเราจะให้
IE6 กำหนดความกว้างไว้ width:25px; แต่เราอยากให้ Firefox กว้าง 28px;
เราก้อควรเขียนการลำดับการเรียกไว้แบบนี้
<style>
width:28px; /* Firefox and Modern Browsers */
*width:25px; /* ie7 and below */
</style>
width:28px; /* Firefox and Modern Browsers */
*width:25px; /* ie7 and below */
</style>
แต่จะอ่านได้เฉพาะ width:28px;
ส่วน IE7 และ version ต่ำกว่าจะอ่าน css *width:25px; ได้
อันขออธิบายจากเรื่องก่อนๆ ที่เคยพูดไว้จะได้นำไปใช้ได้อย่างถูกต้องสำหรับตัวอย่างด้านล่างนี้เป็นสรุปแบบกว้าง ๆ ให้คุณได้นำไปเลือกใช้ได้อย่างง่าย จริง ๆ แล้วมันมีตาราง List บอกแต่ล่ะ Browser จะใช้ CSS format ไหน ตาม Link ด้านล่างนี้เลยคับ http://centricle.com/ref/css/filters/
/***** Selector Hacks ******/
/* IE 6 and below */
* html #uno { color: red }
/* IE 7 and below */
*:first-child+html #dos { color: red }
/* IE 7 and modern browsers */
html>body #tres { color: red }
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Attribute Hacks ******/
/* ie6 and below */
#once { _color:blue }
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */
/* IE 6 and below */
* html #uno { color: red }
/* IE 7 and below */
*:first-child+html #dos { color: red }
/* IE 7 and modern browsers */
html>body #tres { color: red }
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Attribute Hacks ******/
/* ie6 and below */
#once { _color:blue }
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */