Oluşturulabilir Stil Sayfaları

Oluşturulabilir Stil Sayfaları Shadow DOM kullanırken yeniden kullanılabilir stiller oluşturmanın ve dağıtmanın bir yoludur.

JavaScript kullanarak stil sayfaları oluşturmak her zaman mümkün olmuştur. Bununla birlikte, süreç tarihsel olarak bir &LTstyle> eleman kullanarak document.createElement('style')ve ardından temel öğeye bir başvuru elde etmek için sayfa özelliğine erişin. CSSStyleSheet misal. Bu yöntem, yinelenen CSS kodu ve bununla ilgili şişkinlik üretebilir ve ekleme eylemi, şişkinlik olsun ya da olmasın, stilsiz içeriğin parlamasına yol açar. bu CSSStyleSheet arabirim, CSS temsil arabirimleri koleksiyonunun köküdür. CSSOMstil sayfalarını işlemek için programlı bir yol sunmanın yanı sıra eski yöntemle ilişkili sorunları ortadan kaldırır.

Oluşturulabilir Stil Sayfaları, paylaşılan CSS stillerini tanımlamayı ve hazırlamayı ve ardından bu stilleri birden çok Gölge Köküne veya Belgeye kolayca ve yineleme olmadan uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet’te yapılan güncellemeler, benimsendiği tüm köklere uygulanır ve bir stil sayfası benimsemek sayfa yüklendikten sonra hızlı ve senkronizedir.

Constructable Stylesheets tarafından kurulan ilişkilendirme, bir dizi farklı uygulamaya iyi bir şekilde katkıda bulunur. Birçok bileşen tarafından kullanılan merkezi bir tema sağlamak için kullanılabilir: tema bir CSSStyleSheet örnek, bileşenlere otomatik olarak yayılan tema güncellemeleri ile bileşenlere aktarılır. dağıtmak için kullanılabilir CSS Özel Özelliği değerlere güvenmeden belirli DOM alt ağaçlarına Çağlayan. Hatta tarayıcının CSS ayrıştırıcısına doğrudan bir arayüz olarak kullanılabilir ve stil sayfalarını DOM’a enjekte etmeden önceden yüklemeyi kolaylaştırır.

Stil sayfası oluşturma #

Bunu başarmak için yeni bir API sunmak yerine, Yapılandırılabilir Stil Sayfaları belirtimi, zorunlu olarak stil sayfaları oluşturmayı mümkün kılar. CSSStyleSheet() yapıcı Ortaya çıkan CSSStyleSheet nesnesi, stil sayfası kurallarını tetiklemeden eklemeyi ve güncellemeyi daha güvenli hale getiren iki yeni yönteme sahiptir. Stilsiz İçerik Flaşı (FOUC). bu replace() Ve replaceSync() yöntemlerin her ikisi de stil sayfasını bir CSS dizesiyle değiştirir ve replace() bir Promise döndürür. Her iki durumda da harici stil sayfası referansları desteklenmez; ImportanterThings kurallar yoksayılır ve bir uyarı üretir.

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 ImportanterThings rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('ImportanterThings url("styles.css"); a { color: red; }');
sheet.replace('ImportanterThings url("styles.css"); a { color: red; }');
// Console warning: "ImportanterThings rules are not allowed here..."

Yapılandırılmış stil sayfalarını kullanma #

Constructable StyleSheets tarafından sunulan ikinci yeni özellik, benimsenmiş Stil Sayfaları üzerinde mevcut mülk Gölge Kökleri Ve Belgeler. Bu, bir tarafından tanımlanan stilleri açıkça uygulamamıza izin verir. CSSStyleSheet belirli bir DOM alt ağacına. Bunu yapmak için, özelliği o öğeye uygulanacak bir veya daha fazla stil sayfası dizisine ayarladık.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];

değerini geçersiz kıldığımıza dikkat edin adoptedStyleSheets diziyi yerinde değiştirmek yerine. Dizi donmuş olduğu için bu gereklidir; gibi yerinde mutasyonlar push() bir istisna atarsak, yeni bir dizi atamamız gerekir. Üzerinden eklenen mevcut Stil Sayfalarını korumak için adoptedStyleSheetseklenecek ek sayfaların yanı sıra mevcut sayfaları içeren yeni bir dizi oluşturmak için concat’i kullanabiliriz:

const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Combine existing sheets with our new one:
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

Hepsini bir araya koy #

Web geliştiricileri, Constructable StyleSheets ile artık CSS StyleSheets oluşturmak ve bunları DOM ağaçlarına uygulamak için açık bir çözüme sahip. Tarayıcının yerleşik ayrıştırıcısını ve yükleme anlamını kullanan bir dizi CSS kaynağından StyleSheet’leri yüklemek için Promise tabanlı yeni bir API’ye sahibiz. Son olarak, stil sayfası güncellemelerini bir StyleSheet’in tüm kullanımlarına uygulayan, tema değişiklikleri ve renk tercihleri ​​gibi şeyleri basitleştiren bir mekanizmamız var.

Demoyu Görüntüle

İleriye bakmak #

Oluşturulabilir Stil Sayfalarının ilk sürümü, burada açıklanan API ile birlikte gönderilir, ancak kullanımı daha kolay hale getirmek için çalışmalar devam etmektedir. Orada bir teklif uzatmak için adoptedStyleSheets FrozenArray, dizi klonlama ihtiyacını ortadan kaldıracak ve potansiyel yinelenen stil sayfası referanslarını önleyecek stil sayfalarını eklemek ve kaldırmak için özel yöntemlerle.

Daha fazla bilgi #