Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. PostCSS
Webdesign

Menggunakan PostCSS untuk Kompatibilitas Lintas Browser

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called PostCSS Deep Dive.
PostCSS Quickstart Guide: Exploring Plugins
Using PostCSS for Minification and Optimization

Indonesian (Bahasa Indonesia) translation by Zadip (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:

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:

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

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:

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:

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

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:

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:

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:

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

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

Tautan Terkait

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:

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

Link terkait

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:

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

Link terkait

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:

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

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

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:

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

Link terkait

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:

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

Link terkait

Mari kita rekap

Untuk meringkas apa yang telah kita bahas di atas:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.