วิธี Debug CSS ในแต่ละเบราว์เซอร์

browser-wars

เกริ่นนำ

ในแต่ละเบราว์เซอร์นั้นจะทำการแสดงผล CSS ต่างกัน จีงทำให้ในบางครั้งเราเขียนโค้ดใน Chrome สวยงาม แต่อาจจะแสดงผลในเบราว์เซอร์อื่นๆไม่สวยงามได้ ในบทความนี้จะมาแนะนำวิธีการแก้บักในส่วนนี้กัน

Internet Explorer

@media screen and (min-width:0\0) {
     Your Code for Internet Explorer
}

เริ่มต้นตด้วย IE ซึ่งถือว่าเป็นเบราว์เซอร์ในตำนานถึงปัจจุบันได้หยุดพัฒนาไปแล้วแต่ก็ยังมีคนใช้อยู่พอสมควร เพียงใส่โค้ดตามด้านบนในไฟล์ style.css ก็สามารถปรับการแสดงผลได้เลย

Firefox

@-moz-document url-prefix() {
      Your Code for Firefox    
}

เป็นอีกหนึ่งเบราว์เซอร์ที่มีคนใช้เป็นอันดับต้นๆ ก็ว่าได้ เพียงใส่โค้ดตามด้านบนในไฟล์ style.css ก็สามารถปรับการแสดงผลได้เลย

Chrome

ส่วน Chrome จะต้องใช้ javascript ในการช่วยเช็คด้วยซึ่งจะขอแยกตัวอย่างแยกเป็น Chrome on PC และ Chrome on Mac ตามตัวอย่างด้านล่างนี้

Chrome on PC ใน footer.php

<script type="text/javascript">
     jQuery(document).ready(function() { 
          var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
          var is_mac = navigator.userAgent.indexOf('Mac') > 0;
          if ((is_chrome)&&(!is_mac)) {jQuery('body').addClass('chrome-on-pc');}
     }); 
</script>

Chrome on PC ใน style.css

body.chrome-on-pc {
     Your Code for Chrome on PC
}

Chrome on Mac ใน footer.php

<script type="text/javascript">
     jQuery(document).ready(function() { 
          var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
          var is_mac = navigator.userAgent.indexOf('Mac') > 0;
          if ((is_chrome)&&(is_mac)) {jQuery('body').addClass('chrome-on-mac');}
     }); 
</script>

Chrome on Mac ใน style.css

body.chrome-on-mac {
     Your Code for Chrome on Mac
}

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย