Stylesheet yang Dapat Dibangun

Gaya yang dapat digunakan kembali dan lancar.

Jason Miller

Stylesheet yang Dapat Dibangun adalah cara membuat dan mendistribusikan gaya yang dapat digunakan kembali saat menggunakan Shadow DOM.

Membuat stylesheet menggunakan JavaScript dapat dilakukan kapan saja. Namun, sebelumnya adalah membuat elemen <style> menggunakan document.createElement('style'), lalu akses properti sheetnya untuk mendapatkan referensi ke layanan dasar CSSStyleSheet di instance Compute Engine. Metode ini dapat menghasilkan kode CSS duplikat dan bloat yang menyertainya, dan tindakan melampirkan menyebabkan flash konten tanpa gaya, baik ada bloat maupun tidak. Antarmuka CSSStyleSheet adalah root dari kumpulan CSS antarmuka representasi yang disebut sebagai CSSOM, menawarkan cara terprogram untuk memanipulasi stylesheet serta menghilangkan masalah yang terkait dengan metode lama.

Stylesheet yang dapat disusun memungkinkan untuk menentukan dan menyiapkan CSS bersama gaya, lalu menerapkan gaya itu ke beberapa Akar Bayangan atau Dokumen dengan mudah dan tanpa duplikasi. Pembaruan pada CSSStyleSheet bersama diterapkan ke yang menjadi dasar penerapannya, dan mengadopsi spreadsheet gaya cepat dan sinkron setelah {i>sheet<i} dimuat.

Asosiasi yang disiapkan oleh Constructable Stylesheet sangat cocok untuk sejumlah aplikasi yang berbeda. Alat ini dapat digunakan untuk menyediakan tema terpusat digunakan oleh banyak komponen: tema dapat berupa instance CSSStyleSheet yang diteruskan ke komponen, dengan pembaruan pada tema yang disebarkan ke komponen secara otomatis. Dapat digunakan untuk mendistribusikan CSS Kustom Nilai properti yang akan subtree DOM tertentu tanpa bergantung pada jenjang. Bahkan bisa digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan melakukan pramuat stylesheet tanpa memasukkannya ke dalam DOM.

Membuat stylesheet

Daripada memperkenalkan API baru untuk mencapai hal ini, model Constructable StyleSheets spesifikasi memungkinkan pembuatan stylesheet imperatif dengan memanggil konstruktor CSSStyleSheet(). Objek CSSStyleSheet yang dihasilkan memiliki dua metode baru yang lebih aman ketika menambahkan dan memperbarui aturan stylesheet tanpa memicu Flash Tanpa Gaya Konten (FOUC). Tujuan replace() dan replaceSync() keduanya akan mengganti stylesheet dengan string CSS, dan replace() menampilkan Promise. Dalam kedua kasus tersebut, referensi stylesheet eksternal tidak didukung—aturan @import apa pun akan diabaikan dan akan menghasilkan peringatan.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Menggunakan stylesheet yang dikonstruksi

Fitur baru kedua yang diperkenalkan oleh Constructable StyleSheets adalah adoptedStyleSheets properti tersedia di Shadow Root dan Dokumen. Ini memungkinkan kita secara eksplisit menerapkan gaya yang ditentukan oleh CSSStyleSheet ke DOM tertentu sub hierarki. Untuk melakukannya, kita tetapkan properti ke sebuah array dari satu atau beberapa stylesheet untuk diterapkan pada elemen tersebut.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Menggabungkan semuanya

Dengan Constructable StyleSheets, developer web kini memiliki solusi yang jelas untuk membuat CSS StyleSheets dan menerapkannya ke hierarki DOM. Kami memiliki API berbasis Promise baru untuk memuat StyleSheet dari string sumber CSS yang menggunakan parser bawaan browser dan semantik pemuatan. Akhirnya, kami memiliki mekanisme untuk menerapkan pembaruan gaya tampilan pada semua penggunaan {i>StyleSheet<i}, menyederhanakan hal-hal seperti perubahan tema dan preferensi warna.

Lihat Demo

Rencana ke depan

Versi awal Constructable Stylesheet yang dikirimkan bersama API dijelaskan di sini, tetapi masih ada upaya yang sedang dilakukan untuk membuat semuanya lebih mudah digunakan. Ada proposal untuk memperluas FrozenArray adoptedStyleSheets dengan metode khusus untuk menyisipkan dan menghapus stylesheet, yang akan menghilangkan kebutuhan kloning {i>array<i} dan menghindari referensi stylesheet duplikasi yang potensial.

Informasi selengkapnya

• Status Platform Chrome
• Contoh
• API
• Penjelasan
• Rencana Penerapan
• Rencana Pengiriman
• Discourse