วิธีใช้ 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 ในสมัยก่อน เราอาจจะต้องเขียนโค้ดแบบนี้

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

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

border-radius: 10px;

แล้ว 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 ได้

npm install --save-dev gulp-autoprefixer

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

// โหลด package "gulp" มาใช้ (บรรทัดนี้ต้องใส่เสมอ)
var gulp = require('gulp');
// โหลด package "gulp-autoprefixer" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)
var autoprefixer = require('gulp-autoprefixer');
// กำหนดว่าจะให้ autoprefixer ใส่ vendor prefixes เพื่อรองรับ browser รุ่นไหนบ้าง
var browser_support = [
    'ie >= 9',
    'ie_mob >= 10',
    'ff >= 31',
    'chrome >= 36',
    'safari >= 6',
    'ios >= 6',
    'android >= 4'
];
// สร้าง task ชื่อว่า "autoprefixer" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('autoprefixer', function () {
    // ให้ไปไล่ดูไฟล์ .css ทุกไฟล์ที่อยู่ในโฟลเดอร์ css
    return gulp.src(['css/**/*.css'])
// ใช้ autoprefixer ใส่ vendor prefixes ให้ไฟล์เหล่านั้น โดยดูจากรายการที่ได้กำหนดไว้ในตัวแปร browser_support
        .pipe(autoprefixer(browser_support)) //
// เก็บไฟล์หลังใส่ vendor prefixes แล้ว ไว้ที่โฟลเดอร์ css
        .pipe(gulp.dest('css')) 
});
จากนี้ไป เวลาเขียนโค้ด css ก็ให้เราเขียนโดยที่ไม่ต้องใส่ vendor prefixes ใดๆ แล้วพอจะเทสหรือจะนำไปใช้จริง ก็ให้รันคำสั่ง gulp autoprefixer แทน แต่สำหรับคนที่ใช้ Sass อยู่แล้ว เราก็อาจรวม Autoprefixer เข้าไปใน task ที่เอาไว้คอมไพล์ Sass ไปเลยก็ได้ แบบนี้
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var browser_support = [
    'ie >= 9',
    'ie_mob >= 10',
    'ff >= 31',
    'chrome >= 36',
    'safari >= 6',
    'ios >= 6',
    'android >= 4'
];
gulp.task('sass', function () {
    return gulp.src(['scss/**/*.scss'])
        .pipe(sass({
            style: 'compressed'
        }))
        .on('error', console.error.bind(console))
// ใส่ vendor prefixes ให้ไฟล์เหล่านั้น โดยใช้ autoprefixer
        .pipe(autoprefixer(browser_support))
.pipe(gulp.dest('css'))
});
เพียงเท่านี้ ทุกครั้งที่เรารันคำสั่ง gulp sass Autoprefixer ก็จะเติม vendor prefixes ให้กับโค้ด css ของเราด้วย
บทสรุปการใช้ Autoprefixer
Autoprefixer เป็น tool ที่ทำให้เราไม่ต้องไปกังวลกับการใส่ vendor prefixes อีกต่อไป เดิมเราอาจจะจัดการกับปัญหาเหล่านี้โดยใช้ Mixins ของ Sass หรือ Compass แต่วิธีเหล่านั้นจะมีข้อเสียตรงโค้ดที่ได้มานั้นอาจเกินความจำเป็น เพราะบางงานเราอาจไม่ได้ต้องการจะรองรับ web browser รุ่นเก่าๆ แล้วก็ได้ การใช้ Autoprefixer จึงเป็นการแก้ปัญหาที่ตรงจุดมากกว่า เพราะเราสามารถกำหนดได้เองเลยว่าต้องการจะรองรับ web browser รุ่นไหนบ้าง และหากมีการเปลี่ยนแปลงในอนาคต เช่น ลูกค้าอยากให้เว็บรองรับ IE8 ด้วย สิ่งที่เราต้องทำก็แค่แก้ตัวแปร browser_support แค่นั้นเอง