Prefix CSS with Autoprefixer

ໃນການຂຽນ css ອິກຢ່າງໜຶ່ງທີ່ໜ້າໜັກໃຈແມ່ນ Vendor Prefixes ທີ່ເຮົາຈຳເປັນຕ້ອງໃຊ້ເພື່ອເຮັດໃຫ້ css ຂອງເຮົາຮອງຮັບທຸກ browser.

Vendor Prefixes

Vendor Prefixes ຄືການກຳນົດ css ຂອງແຕ່ລະ browser ເພື່ອທົດສອບ feature ໄໝ່ຂອງ css ທີ່ຍັງບໍ່ທັນຖືກຮັບຮອງເປັນມາດຕະຖານເທື່ອ ເຊິ່ງເມື່ອຮັບຮອງແລ້ວຜູ້ຜະລິດ web browser ກໍ່ຈະຕັດ Vendor Prefixes ນັ້ນອອກໄປ.
ຕົວຢ່າງການກຳນົດ border-radius ທີ່ແຕ່ກ່ອນນັ້ນຕ້ອງກຳນົດແບບນີ້:

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

ເມື່ອມາເຖິງປັນຈຸບັນມັນກໍ່ຖືກຕັດ ​vendor prefix ອອກແລ້ວ

border-radius: 10px;

ໃຊ້ງານ Autoprefixer

ບັນຫາຂອງ vendor prefix ນັ້ນຈະໜົດໄປດ້ວຍ Autoprefixer ທີ່ເປັນ module ຂອງ nodejs ເຈົ້າເກົ່າເຈົ້າເດີມເຮົານີ້ເອງ.ສາມາດເຂົ້າໄປອ່ານເພີ່ມເຕີມ
ເລື່ອງ Autoprefixer ໄດ້ທີ່ Autoprefixer ເຊິ່ງມັນຈະເຮັດໃຫ້ເຮົາຂຽນ css ແບບທຳມະດາທີ່ເຄີຍຂຽນມາບໍ່ຕ້ອງເປັນຫ່ວງເລື່ອງການໃສ່ Vendor prefix ອີກຕໍ່ໄປເພາະ Autoprefixer ຈະເປັນຕົວໃຊ້ vendor prefix ໃຫ້ກັບເຮົາເອງ. ໃນການໃຊ້ງານເຮົາຈະໃຊ້ gulp-autoprefixer ຂອງ gulpjs ເປັນຕົວທຳງານໃນການໃສ່ vendor prefix ໃຫ້ກັບ css ຂອງເຮົາ.

ກ່ອນອື່ນຕິດຕັ້ງ module gulp-autoprefixer ໃນ project ຂອງເຮົາເສຍກ່ອນ

$ npm install --save-dev gulp-autoprefixer

ແລ້ວທຳການສ້າງ Task ຂອງ gulpjs ຂື້ນມາເພື່ອໃຊ້ໃຫ້ເຮັດວຽກແທນເຮົາ

var autoprefixer=require('gulp-autoprefixer');
gulp.task('autoprefixer',function () {
    return gulp.src('test.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        })) //ເອີ້ນໃຊ້ module autoprefixer
        .pipe(gulp.dest('dircss'));
});

ພາຍໃນ task ນິ້ເປັນການບອກ gulpjs ໃຫ້ໃສ່ vendor prefix ຂອງ css file ທີ່ຊື່test.css ແລະເກັບ file ທີ່ໃສ່ vendor prefix ແລ້ວນັ້ນໄວ້ທີ່ /dircss. ຈາກນັ້ນກໍ່ໃຫ້ສ້າງ file test.css ແລະກຳນົດ style css ລົງໄປ ແລະ run task ດ່ວຍຄຳສັ່ງ

$ gulp autoprefixer

ສາມາດກຳນົດ task ທຳງານທຸກຄັ້ງທີ່ file ມີການປ່ຽນແປງ

gulp.task('watchprefix',function () {
    gulp.watch('test.css',['autoprefixer']);
});

ນອກນີ້ກໍ່ຍັງສາມາດກຳນົດ version ຂອງ browser ທີ່ຈະໃຫ້ໃສ່ vendor prefix ອີກດ້ວຍ

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('autoprefix',function () {
    return gulp.src('test.css')
        .pipe(autoprefixer(browser_support))
        .pipe(gulp.dest('dircss'));
});

ເມື່ອ run task ເຮົາກໍ່ຈະໄດ້ file test.css ຢູ່ທີ່/dircss
ເມື່ອກຳນົດ css ລົງໃນ file test.css ແບບນີ້

div {
  border-radius: 10px;
  background: linear-gradient(#ccc, #666);
  background: linear-gradient(#ccc, #666);
  box-shadow: inset 0 0 5px black;
 transform: rotate(5deg);
 transform: rotate(5deg);
 transform: rotate(5deg); }

ແລ້ວເຮົາກໍ່ຈະໄດ້ຜົນການ run task ແບບນີ້

div {
  border-radius: 10px;
  background: -webkit-linear-gradient(#ccc, #666);
  background: linear-gradient(#ccc, #666);
  box-shadow: inset 0 0 5px black;
  -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg); }

ນອກຈາກນີ້ແລ້ວເຮົາຍັງສາມາດໃຊ້ກັບ sass ອີກດ້ວຍໂດຍການເພີ່ມ task
ນິ້ລົງໄປໃນ gulpfile

var sass=require('gulp-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('postscss',function () {
    return gulp.src('test.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(autoprefixer(browser_support))
        .pipe(gulp.dest('dircss'));
});

ແລ້ວກໍ່ run task ແລະຂຽນ sass ຕາມປົກກະຕິ ສາມາດອ່ານເລື່ອງຂອງ
sass ໄດ້ທີ່ What is Sass and getting start ແລະເບິ່ງວີທີໃຊ້ງານ gulpjs ໄດ້ທີ່ ການໃຊ້ງານ gulp.js.

ສະຫຼຸບ

ເປັນອັນວ່າການໃຊ້ autoprefix ເປັນອີກ tool ທີ່ດີໃນການຈັດການ vendor prefix ທີ່ເຮັດໃຫ້ເຮົາຂຽນ css ງ່າຍຂຶ້ນ ແລະໄວຂຶ້ນ ນີ້ເປັນພຽງ basic ເທົ່ານັ້ນສາມາດອ່ານເພີ່ມເຕີມໄດ້ທີ່ gulp-autoprefixerຖ້າມີຫຍັງຜິດພາດສາມາດບອກກັນໄດ້ທີ່ comment ດ້ານລຸ່ມ