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 หลายหลากรูป..... คับ

หาโค้ดส่วนลด , ส่วนลด 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)

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