Stylesheet yang Dapat Dibangun

Gaya yang dapat digunakan kembali dan lancar.

Jason Miller

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

Dukungan Browser

  • 73
  • 79
  • 101
  • 16,4

Sumber

Membuat stylesheet menggunakan JavaScript selalu dapat dilakukan. Namun, sebenarnya, proses pembuatan elemen <style> menggunakan document.createElement('style'), lalu mengakses properti sheetnya untuk mendapatkan referensi ke instance CSSStyleSheet yang mendasarinya. Metode ini dapat menghasilkan kode CSS duplikat dan gelembung yang menyertainya, dan tindakan melampirkannya menyebabkan flash konten tanpa gaya, baik ada yang menggelembung maupun tidak. Antarmuka CSSStyleSheet adalah root dari kumpulan antarmuka representasi CSS yang disebut CSSOM, yang menawarkan cara terprogram untuk memanipulasi stylesheet serta menghilangkan masalah yang terkait dengan metode lama.

Diagram yang menunjukkan penyiapan dan penerapan CSS.

Stylesheet yang dapat dibangun memungkinkan penentuan dan penyiapan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Root Bayangan atau Dokumen dengan mudah dan tanpa duplikasi. Pembaruan pada CSSStyleSheet bersama diterapkan ke semua root yang diadopsinya, dan pengadopsian stylesheet dilakukan dengan cepat dan sinkron setelah sheet dimuat.

Pengaitan yang disiapkan oleh Constructable Stylesheet cocok untuk berbagai aplikasi. Atribut ini dapat digunakan untuk menyediakan tema terpusat yang digunakan oleh banyak komponen: tema dapat berupa instance CSSStyleSheet yang diteruskan ke komponen, dengan update pada tema yang diterapkan ke komponen secara otomatis. Fungsi ini dapat digunakan untuk mendistribusikan nilai Properti Kustom CSS ke subhierarki DOM tertentu tanpa mengandalkan jenjang. Class ini bahkan dapat digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan pramuat stylesheet tanpa memasukkannya ke dalam DOM.

Membuat stylesheet

Daripada memperkenalkan API baru untuk melakukannya, spesifikasi Constructable StyleSheets memungkinkan pembuatan stylesheet secara imperatif dengan memanggil konstruktor CSSStyleSheet(). Objek CSSStyleSheet yang dihasilkan memiliki dua metode baru yang membuatnya lebih aman untuk menambahkan dan memperbarui aturan stylesheet tanpa memicu Flash of Unstyled Content (FOUC). Metode replace() dan replaceSync() menggantikan 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 properti adoptedStyleSheets yang tersedia di Shadow Roots dan Documents. Hal ini memungkinkan kita secara eksplisit menerapkan gaya yang ditentukan oleh CSSStyleSheet ke subhierarki DOM tertentu. Untuk melakukannya, kita tetapkan properti ke array yang terdiri dari satu atau beberapa stylesheet yang akan diterapkan ke 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 eksplisit untuk membuat CSS StyleSheets dan menerapkannya ke hierarki DOM. Kami memiliki API berbasis Promise baru untuk memuat StyleSheets dari string sumber CSS yang menggunakan parser bawaan browser dan memuat semantik. Terakhir, kami memiliki mekanisme untuk menerapkan pembaruan stylesheet ke semua penggunaan StyleSheet, yang menyederhanakan hal-hal seperti perubahan tema dan preferensi warna.

Lihat Demo

Rencana ke depan

Versi awal Constructable Stylesheet yang dikirimkan dengan API yang dijelaskan di sini, tetapi masih dalam proses pengembangan agar semuanya lebih mudah digunakan. Ada proposal untuk memperluas FrozenArray adoptedStyleSheets dengan metode khusus untuk menyisipkan dan menghapus stylesheet, yang akan meniadakan kebutuhan cloning array dan menghindari potensi referensi stylesheet duplikat.

Informasi selengkapnya