CSS hack for Chrome
Aug 28th
ทุกวันนี้ 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
ภาพสุดท้ายการค้นหาตรง google เอาไปลงเวป fail ได้เลยนะครับเนี่ย 555
^^ นานแล้วครับภาพนี้ เสิชตอนนี้ไม่มีแล้ว
คือตรงส่วนนี้ถ้าใส่ไปใน css มีส่วนให้เว็บอ่านการ์ตูนมันโหลดเร็วขึ้นหรอครับ ถ้าใช่จะกลับไปแก้เลย อิอิ
@อ่านการ์ตูนออนไลน์
ไม่ใช่ครับ เข้าใจผิดแล้วครับ อันนี้เอาไว้เวลาทำเว็บครับ
ขอบคุณครับ
CSS hack ของ Chrome นี่ผมยังไม่เคยลองใช้ครับ เพราะปกติแล้วไม่มีปัญหากับ Chrome เท่าไหร่
(จะมี ie นี่แหละ เจ้าปัญหา แสดงผลไม่เหมือนกับเพื่อน)
ส่วนเรื่องโฆษณาของ Chrome เวลา search หา ie ใน Google ความจริงแล้วอันนี้เป็นนโยบายของ Google เองนะครับ ที่ต้องการให้คู่แข่งเข้ามาโฆษณาสินค้าของตัวเองในคีย์เวิร์ดของคู่แข่งได้ ซึ่งมันเป็นการสนับสนุนแนวคิดการแข่งขันเสรีของอเมริกาครับ
ขอบคุณครับ ปวดหัวกะ css มาก