Home > CSS hacks > CSS hack for Chrome

CSS hack for Chrome


ทุกวันนี้ Browser Google Chrome ได้ถูกใช้งานอย่างแพร่หลายในประเทศไทยแล้ว จากการที่ทางกูเกิลเองได้ทำการโปรโมทอย่างต่อเนื่อง และเพราะข้อดีของตัวเบราเซอร์เองที่มีความเร็วในการโหลดรูปได้เร็วกว่าเบราเซอร์หลักอื่นๆ ซึ่งตัวผมเองก็มักจะใช้ กูเกิลโครม ในการเข้าหน้าเว็บที่มีการโหลดรูปเยอะๆ เช่น เว็บอ่านการ์ตูนออนไลน์ เว็บขายสินค้า

แต่หลักๆแล้วก็ยังคงใช้ Firefox อยู่เพราะจำเป็นต้องใช้ Add-ons หลายอัน เมื่อกูเกิลโครมถูกใช้มากมายเช่นนี้แล้ว การจะละเลยโดยทำหน้าเว็บให้ดูได้สมบูรณ์ที่ firefox และ IE เท่านั้นก็ดูจะไม่ใช่เรื่องที่ดีอีกแล้ว อย่างน้อยควรจะ support IE Firefox Chrome Safari

ใครที่กำลังจะจ้างคนทำ CSS ก็ระบุได้เลยครับว่าเอาเบราเซอร์ 4 อันนี้ และค่าจ้างก็ควรจะสมน้ำสมเนื้อด้วยนะครับ เพราะ CSS ไม่ใช่งานน้อยๆ ยิ่งถ้าหน้าเว็บมีความซับซ้อนมาก แทบจะต้อง Hack กันทุกเบราเซอร์เลยทีเดียว นี่ยังไม่นับรวมอุปกรณ์ อื่นๆ เช่น ipad ซึ่งถ้าเว็บถูกเปิดที่อุปกรณ์นี้ก็ควรจะดูดีเช่นกัน

Chrome และ Safari จะมีการแสดงผล font แตกต่างจาก Firefox และ IE ถ้าเป็นภาษาไทย จะทำให้คำๆเดียวกัน มีขนาดกว้างกว่าเดิม เช่น เมนู คำว่า ติดต่อเรา Chrome และ Safari จะใช้เนื้อที่กว้างกว่า ดังนั้นจะใช้ CSS ชุดเดิมไม่ได้แล้ว เราจึงต้อง Hack มันดังนี้

รูปแบบการ Hack

สมมติว่า HTML เป็นดังนี้

    <div id="nav"><ul><li>ติดต่อเรา</li></ul></div>

อันนี้คือ CSS สำหรับทั่วไป

#nav {padding:10px} 
#nav li{margin:5px}

อันนี้คือ CSS สำหรับ Chrome และ Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
#nav {padding:5px}
#nav li{margin:3px} 
}

***ทดสอบล่าสุดกับ Chrome 13.0.782.215 และ Safari 5.0.3

และเพื่อเวลา Hack แล้วจะได้ไม่ต้อง อัพโหลด รีเฟรช กันบ่อยๆ ใช้อันนี้เลย Firebug สำหรับ Chrome ติดตั้งกันได้เลย Firebug Lite for Google chrome

สถิติการใช้งาน Browser

จากเว็บผมเอง รูปภาพจาก statcounter


^ จาก www.divland.com


^ จาก www.toysmile.com


^ จาก www.wondercutie.com

ส่วนรูปภาพนี้ ผม capture ไว้ตั้งแต่ เดือน Feb 2011 ครับ เสิชเพื่อจะอัพเกรดจาก ie7 เป็น ie8 ดูแล้วตลกดี กูเกิลก็มีวิชามารเหมือนกัน หรืออาจจะเป็นเหตุผลว่า ทำไมประเทศไทยถึงใช้กูเกิลโครมกันเยอะนัก 555

Related Articles


Share
Categories: CSS hacks
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. August 29th, 2011 at 10:34 | #1

    ภาพสุดท้ายการค้นหาตรง google เอาไปลงเวป fail ได้เลยนะครับเนี่ย 555

  2. August 29th, 2011 at 12:46 | #2

    ^^ นานแล้วครับภาพนี้ เสิชตอนนี้ไม่มีแล้ว

  3. August 29th, 2011 at 14:33 | #3

    คือตรงส่วนนี้ถ้าใส่ไปใน css มีส่วนให้เว็บอ่านการ์ตูนมันโหลดเร็วขึ้นหรอครับ ถ้าใช่จะกลับไปแก้เลย อิอิ

  4. August 29th, 2011 at 14:43 | #4

    @อ่านการ์ตูนออนไลน์
    ไม่ใช่ครับ เข้าใจผิดแล้วครับ อันนี้เอาไว้เวลาทำเว็บครับ

  5. utto
    September 9th, 2011 at 10:59 | #5

    ขอบคุณครับ

  6. November 9th, 2011 at 12:18 | #6

    CSS hack ของ Chrome นี่ผมยังไม่เคยลองใช้ครับ เพราะปกติแล้วไม่มีปัญหากับ Chrome เท่าไหร่
    (จะมี ie นี่แหละ เจ้าปัญหา แสดงผลไม่เหมือนกับเพื่อน)

    ส่วนเรื่องโฆษณาของ Chrome เวลา search หา ie ใน Google ความจริงแล้วอันนี้เป็นนโยบายของ Google เองนะครับ ที่ต้องการให้คู่แข่งเข้ามาโฆษณาสินค้าของตัวเองในคีย์เวิร์ดของคู่แข่งได้ ซึ่งมันเป็นการสนับสนุนแนวคิดการแข่งขันเสรีของอเมริกาครับ

  7. February 2nd, 2012 at 03:34 | #7

    ขอบคุณครับ ปวดหัวกะ css มาก

  1. No trackbacks yet.