วิธีใช้ Autoprefixer เขียน CSS โดยไม่ต้องใส่ Vendor Prefixes

เชื่อว่า Front-end Engineer ทุกคนคงจะเคยเจอปัญหาเกี่ยวกับการใช้ Vendor Prefixes กันมาบ้าง แทนที่เราจะเขียนโค้ดแค่สั้นๆ แต่เรากลับต้องมาใส่ Vendor Prefixes เพิ่ม เพื่อให้โค้ดที่เราเขียนสามารถใช้ได้ในทุกๆ Web Browser และเพื่อให้การพัฒนาเว็บไซต์เป็นไปอย่างราบรื่นมากขึ้น บทความนี้จึงจะมาพูดถึง Tool ที่จะทำให้ปัญหานี้หมดไปอย่าง Autoprefixer

ทำไมต้องใส่ Vendor Prefixes ?

การใส่ vendor prefixes นั้นคือกลไกของ web browser ที่เอาไว้ใช้ทดลอง feature ใหม่ที่อาจยังไม่ได้ถูกรับรองให้เป็นมาตรฐานในขณะนั้น  ซึ่งหมายความว่าเมื่อ feature นั้นๆ ผ่านการรับรองจนเป็นมาตรฐานแล้ว และเมื่อ web browser ได้ทดสอบ feature นั้นๆ จนเป็นที่น่าพอใจแล้ว ผู้พัฒนา web browser ก็จะตัด vendor prefixes นี้ออกไป

ตัวอย่างที่เห็นได้ชัดๆ เลยก็คือการใช้ border-radius ในสมัยก่อน เราอาจจะต้องเขียนโค้ดแบบนี้

แต่ในปัจจุบัน เราไม่จำเป็นต้องใส่ vendor prefixes อีกต่อไป เพราะ web browser ในปัจจุบันได้ตัดออกหมดแล้ว เว้นเสียแต่ว่าเราต้องการจะรองรับ web browser เก่าๆ อย่าง Firefox 3.6 หรือ Chrome 4

แล้ว Autoprefixer คืออะไร ?

​Autoprefixer เป็น tool ในการทำเว็บไซต์ที่น่าสนใจมากๆ อีกตัวหนึ่งที่เขียนขึ้นด้วย Node.js ประโยชน์ของ Autoprefixer ก็คือเราสามารถใช้มันร่วมกับตัวรัน task อัตโนมัติอย่าง gulp.js เพื่อที่จะใส่ vendor prefixes ต่างๆ ให้กับไฟล์ css ของเราโดยอัตโนมัติได้ นั่นหมายความว่าหลังจากนี้ไป เราไม่จำเป็นต้องใส่ vendor prefixes ใดๆ เองอีกแล้ว

  • Node.jsอ่านพื้นฐานการใช้ Node.js
  • gulp.jsอ่านพื้นฐานการใช้ gulp.js

วิธีใช้ Autoprefixer กับ gulp.js

หากเราใช้ gulp.js  อยู่แล้ว การใช้ Autoprefixer นั้นก็ไม่ยากเลย เริ่มด้วยการติดตั้ง gulp-autoprefixer ซึ่งเป็น plugin ของ gulp.js ที่จะทำให้เราใช้ Autoprefixer ได้

จากนั้นให้เราเข้าไปที่ gulpfile.js เพื่อที่จะสร้าง task ชื่อ “autoprefixer” ขึ้นมา ลองดูโค้ดต่อไปนี้

จากนี้ไป เวลาเขียนโค้ด css ก็ให้เราเขียนโดยที่ไม่ต้องใส่ vendor prefixes ใดๆ แล้วพอจะเทสหรือจะนำไปใช้จริง ก็ให้รันคำสั่ง gulp autoprefixer แทน แต่สำหรับคนที่ใช้ Sass อยู่แล้ว เราก็อาจรวม Autoprefixer เข้าไปใน task ที่เอาไว้คอมไพล์ Sass ไปเลยก็ได้ แบบนี้

เพียงเท่านี้ ทุกครั้งที่เรารันคำสั่ง gulp sass Autoprefixer ก็จะเติม vendor prefixes ให้กับโค้ด css ของเราด้วย

บทสรุปการใช้ Autoprefixer

Autoprefixer เป็น tool ที่ทำให้เราไม่ต้องไปกังวลกับการใส่ vendor prefixes อีกต่อไป เดิมเราอาจจะจัดการกับปัญหาเหล่านี้โดยใช้ Mixins ของ Sass หรือ Compass แต่วิธีเหล่านั้นจะมีข้อเสียตรงโค้ดที่ได้มานั้นอาจเกินความจำเป็น เพราะบางงานเราอาจไม่ได้ต้องการจะรองรับ web browser รุ่นเก่าๆ แล้วก็ได้ การใช้ Autoprefixer จึงเป็นการแก้ปัญหาที่ตรงจุดมากกว่า เพราะเราสามารถกำหนดได้เองเลยว่าต้องการจะรองรับ web browser รุ่นไหนบ้าง และหากมีการเปลี่ยนแปลงในอนาคต เช่น ลูกค้าอยากให้เว็บรองรับ IE8 ด้วย สิ่งที่เราต้องทำก็แค่แก้ตัวแปร browser_support แค่นั้นเอง

(Visited 4,292 times, 1 visits today)

Leave a Reply