Conditional stylesheets and CSS hacks

200924 May

จากที่เคยนำเสนอเกี่ยวกับเรื่อง CSS ก่อนหน้านี้เรื่องการใช้ Conditional stylesheets ในการใช้ CSS กับ IE version ที่แตกต่างกันและคุณก้อคงเคยเห็นตัวอย่างก่อนหน้านี้สำหรับการใช้ Conditional stylesheets ด้านตัวอย่างด้านล่างนี

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

  <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  />< ![endif]-->

  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  />< ![endif]-->

มีการวิธีการ hack css ได้หลากหลายหรือบ้างที่คุณอาจะใช้วิธีแบบนี้ก้อได้สำหรับให้ IE "_padding-right: 5px;" } หรือ "*padding-right: 5px;" } อีกสาระพัดวิธีสำหรับ IE

div.infoBox { float: left; padding-right: 10px; _padding-right: 5px; }

แต่นั้นยังไม่จบการคิดไอเดียแปลกในการใช้ valid css browser ie ทำให้เกิดแนวคิดอีกแบบทำไมเรา ใช้วิธี Conditional stylesheets ในการแยกการเรียก class ออกจากกันล่ะอืม idea นี้ดูมีเหตุผล และเราก้อสามารถเขียน class แยกต่างหากแยกออกเป็น IE แต่ละ version นั้นซิแต่เราจะมาแยกที่ตัว tag HTML ในส่วน body หรือส่วนอื่น ๆ ที่คุณต้องการใช้ จากตัวอย่างด้านล่างนี้เราก้อมีการเรียก css class ที่แตกต่างกันในแต่ละ IE version นำมาแสดงผลและ css ทั้งหมดอยู่ใน File เดียวกัน จะสรุปข้อดี

1) Conditional stylesheets ไม่ว่าจะ 1 or 2 จะมีการเพิ่ม HTTP requests to download file
2) ปรกติเราวางไว้ที่ HEAD ทั้งหมดการแยกไฟล์นั้นจะทำให้แสดงผลของ page ช้าลงซึ่งมันจะทำให้เราต้อง Load มาทั้งหมดก่อนจึงจะแสดงผล
3) การแยก css rule ให้เป็นไฟล์ออกเป็นหลายไฟล์มันทำให้เพิ่มเวลาในการ load แต่ละครั้งในการ load page

  <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 

  <!--[if IE 7 ]> <body class="ie7"> <![endif]--> 

  <!--[if IE 8 ]> <body class="ie8"> <![endif]--> 

  <!--[if !IE]>--> <body> <!--<![endif]-->

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