Menggunakan PostCSS untuk Kompatibilitas Lintas Browser

() translation by (you can also view the original English article)

Dalam tutorial terakhir kami merangkum "Quick Start" bagian dari seri ini, dan sekarang kita siap untuk pindah ke menggunakan PostCSS untuk menghasilkan stylesheet, menggunakan jenis plugin untuk berbagai keperluan.

Dalam tutorial ini kita akan menggunakan PostCSS untuk membuat stylesheet yang dirancang untuk kompatibilitas lintas browser. Kita akan:

Mempunyai awalan penjual otomatis yang ditambahkan
Menambahkan serangkaian fallback untuk Internet Explorer versi 8, 9 dan 10
Menambahkan fallback untuk yang belum secara luas mendukung properti will-change

Mari kita mulai!

Setup proyek kalian

Hal pertama yang perlu kalian lakukan adalah menyiapkan proyek untuk menggunakan Gulp atau Grunt, tergantung pada preferensinya. Jika kalian belum memiliki preferensi untuk satu atau yang lain saya merekomendasikan menggunakan Gulp karena kalian akan memerlukan sedikit kode agar mencapai akhir yang sama.

Anda dapat membaca tentang bagaimana agar setup Gulp atau Grunt untuk proyek PostCSS dalam tutorial sebelumnya

masing-masing.

Jika Anda tidak ingin secara manual men-setup proyek kalian bahkan dari awal, kalian dapat men-download file sumber yang melekat pada tutorial ini, dan ekstrak baik disediakan starter Gulp atau Grunt proyek ke folder proyek yang kosong.

Kemudian, dengan terminal atau command prompt menunjuk pada folder, jalankan perintah npm install.

Menginstal plugin

Sekarang setelah kalian memiliki proyek Gulp atau Grunt + PostCSS yang kosong, kami perlu menginstal plugin yang akan Anda gunakan dalam tutorial ini.

Kita akan menginstal beberapa plugin, jadi, daripada menginstal mereka satu pada satu waktu seperti yang kita lakukan dalam "Panduan Quickstart" untuk Gulp dan Grunt, kita akan menginstal mereka sekaligus dengan satu perintah.

Apakah kalian menggunakan Gulp atau Grunt, menjalankan perintah berikut di dalam folder proyek untuk menginstal plugin kita akan menggunakan:

1	npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

Sekarang plugin diinstal, mari kita mulai dan memuatnya ke dalam proyek kalian.

Memuat plugin melalui Gulp

Jika Anda menggunakan Gulp, tambahkan variabel ini di bawah variabel di dalam file:

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

Sekarang tambahkan masing-masing nama variabel yang baru ke dalam array prosesor Anda:

    var processors = [
  	will_change,
		autoprefixer,
		color_rgba_fallback,
		opacity,
		pseudoelements,
		vmin,
		pixrem
	];

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah glup css kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek Anda "dest" folder.

Memuat plugin melalui Grunt

Jika Anda menggunakan Grunt, memperbarui objek prosesor, yang bersarang di bawah options objek, sebagai berikut:

        processors: [
          require('postcss-will-change')(),
          require('autoprefixer')(),
          require('postcss-color-rgba-fallback')(),
          require('postcss-opacity')(),
          require('postcss-pseudoelements')(),
          require('postcss-vmin')(),
          require('pixrem')()
        ]

Lakukan kompilasi uji cepat dengan menjalankan perintah grunt postcs kemudian periksa apakah folder "dest" proyek Anda sekarang berisi "style.css" baru File

Anda sekarang memiliki semua plugin yang terpasang yang diperlukan untuk tutorial ini, dan Anda siap untuk beralih ke cara menggunakannya untuk meningkatkan kompatibilitas browser lintas stylesheet Anda.

Secara otomatis Menambahkan Prefixing Vendor

Beberapa langkah untuk kompatibilitas browser lintas yang akan kami bahas hanya akan diperlukan untuk kasus penggunaan tertentu. Prefixing vendor otomatis, di sisi lain, adalah sesuatu yang saya sarankan harus dilakukan dengan setiap proyek, melalui plugin Autoprefixer yang dibuat oleh Andrey Sitnik.

Akan sulit untuk mengawasi properti mana yang memerlukan awalan vendor pada waktu tertentu, dan dengan menggunakan Autoprefixer kalian tidak perlu melakukannya. Menggunakan Autoprefixer sebagai bagian dari setiap proyek dan itu akan memeriksa kode kalian terhadap data dari CanIUse.com, kemudian tambahkan awalan Penjual yang diperlukan tanpa kalian harus berpikir tentang hal itu.

Mari kita lakukan tes kecil melihat Autoprefixer dalam tindakan. Tambahkan kode berikut animasi dan flexbox untuk proyek Anda "src/style.css" file:

@keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	animation: animationExample 2s;
	display: flex;
}

Menjalankan glup css atau grunt postcss untuk mengkompilasi file Anda, dan Anda "dest/style.css" Sekarang harus berisi kode Penjual bahasa ini:

@-webkit-keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes animationExample {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	-webkit-animation: animationExample 2s;
	        animation: animationExample 2s;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

Seperti yang Anda lihat, awalan Penjual telah secara otomatis ditambahkan, seperti yang ditentukan oleh data yang diberikan dari CanIUse.com animasi dan flexbox.

Menentukan tingkat dukungan Browser

Autoprefixer menggunakan Browserlist untuk menentukan versi browser yang akan menambah dukungan untuk. Di bawah setelan ini akan diterapkan vendor awalan yang diperlukan untuk:

> 1%: browser yang digunakan oleh lebih dari satu persen orang secara global
terakhir 2 versi: versi dua dari setiap browser dilacak oleh CanIUse.com
Firefox ESR: versi terbaru Firefox
Opera 12,1: Opera versi 12,1

Contohnya kita akan membahas hal di atas disusun di bawah pengaturan default Autoprefixer's. Ini berarti dukungan untuk IE10 dan Safari 8 adalah disertakan, sehingga -ms- dan -webkit- awalan yang mereka butuhkan untuk animasi dan flexbox yang secara otomatis disisipkan.

Namun, IE11 dan Safari 9 tidak memerlukan awalan tersebut, sehingga jika Anda mengatur konfigurasi browserlist untuk mendukung hanya IE11 + dan Safari 9 + awalan ini akan tidak lagi ditambahkan.

Coba ini melalui browser pengaturan melalui ke Autoprefixer di Gulpfile atau Gruntfile seperti:

// In the Gulpfile 'processors' array:
autoprefixer({browsers:'safari >= 9, ie >= 11'}),

// In the Gruntfile 'processors' array:
require('autoprefixer')({ browsers: ['safari >= 9, ie >= 11'] }),

Sekarang jika Anda mengkompilasi ulang CSS Anda Anda akan melihat tidak ada perbedaan antara kode dikompilasi dan asli. Hal ini karena, tanpa dukungan diminta untuk Safari 8 atau IE10, tidak ada awalan vendor yang telah ditambahkan sesuai dengan mereka.

Link terkait:

Autoprefixer: https://github.com/postcss/autoprefixer
Browserlist: https://github.com/ai/browserslist

Tambahkan fallback untuk properti "will-change"

Properti will-change akan digunakan untuk memberitahu browser tahu sebelumnya bahwa unsur-unsur tertentu dari design kalian yang akan dianimasikan. Hal ini memungkinkan browser untuk mengoptimalkan proses pengubahan dan mencegah delays dan flickers. Namun, saat ini tidak didukung oleh IE / Edge, Safari atau Opera Mini.

Plugin postcss-will-change, juga dibuat oleh Andrey Sitnik, menambahkan fallback yang akan membantu peramban ini melakukan pekerjaan yang lebih baik render, bahkan jika tidak dengan efisiensi mereka bisa jika mereka didukung will-change Ia melakukannya dengan menambahkan properti backface visibilitas, yang memicu pembentukan lapisan komposer yang akan ditangani oleh GPU.

Sebagai contoh, tambahkan kode ini untuk Anda "src/style.css" file:

1	.thisWillChange {
2	will-change: transform;
3	}

Kompilasi stylesheet Anda dan Anda harus melihat fallback yang muncul dalam "dest/style.css" file:

1	.thisWillChange {
2	backface-visibility: hidden;
3	will-change: transform;
4	}

Catatan: plugin ini harus diambil sebelum Autoprefixer di Gulpfile/Gruntfile. Hal ini memungkinkan Autoprefixer untuk menambahkan awalan penjual properti backface-visibility, seperti:

/* Fallback with vendor prefixes */
.thisWillChange {
    -webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	will-change: transform;
}

Tautan Terkait

postcss-will-change plugin: https://github.com/postcss/postcss-will-change
Semuanya Anda harus tahu tentang CSS akan-mengubah properti
Info yang Bisa di Gunakan http://caniuse.com/#feat=will-change

Tambahkan fallback untuk isu-isu IE lama

Berkat peramban yang ditingkatkan versi dari Microsoft, dan kelompok utama memimpin jalan dalam menjatuhkan dukungan untuk IE tua, kita sedang secara bertahap merayap lebih dekat untuk tidak harus selalu mempertimbangkan fallback dan workarounds untuk browser warisan yang bermasalah. Microsoft sendiri akan menjatuhkan dukungan untuk IE8 pada tahun 2016. Alpha bootstrap 4 baru saja dirilis dan juga telah menjatuhkan dukungan untuk IE8. Google berhenti mendukung IE8 pada tahun 2012 dan menjatuhkan dukungan IE9 pada tahun 2013.

Semua itu berkata, pada akhir hari setiap proyek harus dinilai pada kasus per kasus, dan jika kalian menargetkan demografis yang memiliki tingkat tinggi penggunaan warisan browser, kalian mungkin memiliki pilihan selain untuk melakukan yang terbaik untuk mendukung mereka. Jika itu terjadi, plugin berikut dapat membantu kalian membuat proses tersebut sedikit kurang menyakitkan.

Membuat `rgba()` warna fallback

IE8 tidak memiliki adanya dukungan untuk rgba() warna, sehingga plugin postcss-color-rgba-fallback oleh Guillaume Demesy menambahkan warna heksadesimal datar sebagai fallback.

Sebagai contoh, menambahkan kode ini untuk kalian "src/style.css" file:

1	.rgbaFallback {
2	background: rgba(0,0,0,0.5);
3	}

Kompilasi dan Anda harus melihat hexcode jatuh kembali ditambahkan ke "dest/style.css" file:

1	.rgbaFallback {
2	background: #000000;
3	background: rgba(0,0,0,0.5);
4	}

Link terkait

postcss-warna-rgba-fallback plugin: https://github.com/postcss/postcss-color-rgba-fallback
Info yang dapat digunakan: http://caniuse.com/#feat=css3-colors

Membuat `opacity` fallback

IE8 tidak dapat menangani properti opacity, sehingga plugin postcss-opacity oleh Vincent De Oliveira menambahkan filter tertentu IE untuk mencapai efek yang sama.

Tambahkan kode ini ke stylesheet sumber Anda:

1	.opacityFallback {
2	opacity: 0.5;
3	}

Setelah kompilasi, Anda harus melihat mundur sesuai -ms-filter yang ditambahkan:

1	.opacityFallback {
2	opacity: 0.5;
3	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
4	}

Link terkait

postcss-opacity plugin: https://github.com/iamvdo/postcss-opacity
Info yang bisa digunakan: http://caniuse.com/#feat=css-opacity

Mengkonversi `::` ke `:` pada pseudo elemen

Hal ini dianggap sebagai praktek terbaik ketika menghasilkan pseudo-elemen seperti .element::before menggunakan notasi usus ganda ::. Ini adalah untuk membantu membedakan mereka dari pseudo-Class seperti .element:hover yang harus menggunakan notasi usus tunggal:.

Namun, IE8 tidak mendukung notasi usus ganda:: untuk membuat elemen-elemen pseudo, hanya mendukung satu usus besar:. Dengan menggunakan postcss-pseudoelements plugin oleh Sven Tschui Anda dapat kode sesuai dengan praktek-praktek terbaik, dan memiliki notasi berubah secara otomatis.

Tambahkan ganda berikut::notasi kode:

1	.pseudo-element::before {
2	content: '';
3	}

Mengkompilasi file Anda dan Anda akan melihat ini telah dikurangi untuk single : notasi:

1	.pseudo-element:before {
2	content: '';
3	}

Dengan pengkodean untuk praktik terbaik dan menggunakan plugin ini, setelah IE8 benar-benar pensiun Anda bisa memproses ulang CSS Anda tanpa plugin dan memiliki sintaks yang tepat di tempat.

Link terkait

postcss-pseudoelements plugin: https://github.com/axa-ch/postcss-pseudoelements
Info yang dapat digunakan: http://caniuse.com/#feat=css-gencontent

Tambahkan `vm` fallback untuk `vmin`

Pada IE9 viewport relatif unit vmin tidak didukung, namun sebagai gantinya menggunakan vm setara unit. Jika kau melayani IE9, plugin postcss-vmin oleh Vincent De Oliveira akan menambahkan vm unit sebagai fallback

Tambahkan kode ini untuk "src/style.css" file:

1	.vmFallback {
2	width: 50vmin;
3	}

Mengkompilasi ulang, dan kode yang dihasilkan harus memiliki unit vm fallback ditambahkan:

1	.vmFallback {
2	width: 50vm;
3	width: 50vmin;
4	}

Link terkait

postcss-vmin plugin: https://github.com/iamvdo/postcss-vmin
Info yang dapat digunakan: http://caniuse.com/#feat=viewport-units

Tambahkan `px` Fallback untuk `rem` unit

IE8 tidak mendukung rem unit sama sekali, dan di kedua IE9 dan IE10 mereka yang tidak didukung di psuedo-elemen dan font singkatan Deklarasi. Dengan plugin node-pixrem oleh Vincent De Oliveira dan Rob Wierzbowski Anda dapat memiliki px berbasis fallback ditambahkan secara otomatis bilamana kalian menggunakan rem unit.

Tambahkan kode ini ke stylesheet sumber kalian:

.remFallback {
    height: 10rem;
	font: 2rem Arial;
}

.remFallback::before {
	content: '';
	line-height: 1rem;
}

Mengkompilasi ulang dan Anda akan melihat semua fallback px sesuai ditambahkan:

.remFallback {
    height: 160px;
    height: 10rem;
	font: 32px Arial;
	font: 2rem Arial;
}

.remFallback:before {
	content: '';
	line-height: 16px;
	line-height: 1rem;
}

Link terkait

plugin Node-pixrem: https://github.com/robwierzbowski/node-pixrem
Info yang dapat digunakan: http://caniuse.com/#feat=rem

Mari kita rekap

Untuk meringkas apa yang telah kita bahas di atas:

Autoprefixer adalah alat harus digunakan untuk setiap proyek
Autoprefixer dapat dikonfigurasi untuk menambahkan awalan Penjual yang didasarkan pada apa pun browser Anda harus mendukung
Jika menggunakan animasi dalam proyek Anda, pertimbangkan untuk menggunakan plugin postcss-will-change
Jika mendukung IE8, mempertimbangkan untuk menggunakan plugin postcss-color-rgba-fallback, postcss-opacity, postcss-pseudoelements dan postcss-vmin.
Jika mendukung IE8, IE9, IE10 mempertimbangkan menggunakan plugin node-pixrem

Dalam Tutorial berikutnya

Berikutnya dalam seri penyelaman dalam PostCSS kami adalah tutorial tentang cara menggunakan plugin untuk mengecilkan dan mengoptimalkan CSS kalian. Kita akan membahas inlining @import file, menggabungkan query media, pengupasan ruang putih dan beberapa metode lain untuk membuat stylesheet se-efisien mungkin. Sampai jumpa berikutnya!

Menggunakan PostCSS untuk Kompatibilitas Lintas Browser

Setup proyek kalian

Menginstal plugin

Memuat plugin melalui Gulp

Memuat plugin melalui Grunt

Secara otomatis Menambahkan Prefixing Vendor

Menentukan tingkat dukungan Browser

Link terkait:

Tambahkan fallback untuk properti "will-change"

Tautan Terkait

Tambahkan fallback untuk isu-isu IE lama

Membuat rgba() warna fallback

Link terkait

Membuat opacity fallback

Link terkait

Mengkonversi :: ke : pada pseudo elemen

Link terkait

Tambahkan vm fallback untuk vmin

Link terkait

Tambahkan px Fallback untuk rem unit

Link terkait

Mari kita rekap

Dalam Tutorial berikutnya

Membuat `rgba()` warna fallback

Membuat `opacity` fallback

Mengkonversi `::` ke `:` pada pseudo elemen

Tambahkan `vm` fallback untuk `vmin`

Tambahkan `px` Fallback untuk `rem` unit