Yeniden kullanılabilir stiller.
Oluşturulabilir Stil Sayfaları, Gölge DOM kullanılırken yeniden kullanılabilir stiller oluşturup dağıtmanın bir yoludur.
JavaScript kullanarak stil sayfaları oluşturmak her zaman mümkün olmuştur. Ancak bu süreç, geçmişte document.createElement('style') kullanarak bir <style> öğesi oluşturmak ve ardından temel CSSStyleSheet örneğine referans elde etmek için sayfa mülküne erişmekti. Bu yöntem, yinelenen CSS kodu ve operatör fazlalığı oluşturabilir. Ayrıca, URL'ler ekleme işlemi, şişlik olsun ya da olmasın, biçimlendirilmemiş içeriğin bir aniden parlamasına neden olabilir. CSSStyleSheet arayüzü, CSSOM olarak adlandırılan bir CSS temsil arayüzleri koleksiyonunun köküdür. Bu özellik, stil sayfalarını değiştirmek için programatik bir yol sunar ve 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 yineleme olmadan birden çok Gölge Köküne veya Dokümana uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet'teki güncellemeler, benimsendiği tüm köklere uygulanır. Ayrıca, bir stil sayfası benimseme, sayfa yüklendikten sonra hızlı ve eşzamanlı olur.
Oluşturulabilir Stil Sayfaları tarafından oluşturulan ilişkilendirme, birçok farklı uygulamaya uygundur. Birçok bileşen tarafından kullanılan merkezi bir tema sağlamak için kullanılabilir: Tema, bileşenlere iletilen bir CSSStyleSheet örneği olabilir ve temada yapılan güncellemeler bileşenlere otomatik olarak yayılır. CSS Özel Özelliği değerlerini basamak kullanmadan belirli DOM alt ağaçlarına dağıtmak için kullanılabilir. Hatta tarayıcının CSS ayrıştırıcısına doğrudan bir arayüz olarak bile kullanılabilir. Böylece, stil sayfalarını DOM'ye eklemeden
önceden kolayca yükleyebilirsiniz.
Stil sayfası oluşturma
Bunu başarmak için yeni bir API kullanıma sunmak yerine, ConstructableStyle Sheets spesifikasyonu, CSSStyleSheet() oluşturucusunu çağırarak stil sayfalarını zorunlu olarak oluşturmayı mümkün kılar. Ortaya çıkan CSSStyleSheet nesnesi, Stilsiz İçerik Flash'ı (FOUC) tetiklemeden stil sayfası kurallarının eklenmesini ve güncellenmesini daha güvenli hale getiren iki yeni yönteme sahiptir.
replace() ve replaceSync() yöntemlerinin 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ı başvuruları desteklenmez. Herhangi bir @import kuralı yok sayılır ve uyarı verir.
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..."
Oluşturulan stil sayfalarını kullanma
Constructable Stylesheets tarafından kullanıma sunulan ikinci yeni özellik, Shadow
Roots ve Documents'te kullanılabilen
adoptedStyleSheets özelliğidir. Bu, CSSStyleSheet tarafından tanımlanan stilleri belirli bir DOM alt ağacına açık bir şekilde uygulamamıza olanak tanır. Bunun için özelliği, söz konusu öğeye uygulanacak bir veya daha fazla stil sayfasından oluşan bir dizi olarak ayarlarız.
// 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);
Özet
Constructable Style Sheets sayesinde, web geliştiricileri artık CSS Style Sheets oluşturmak ve bunları DOM ağaçlarına uygulamak için açık bir çözüme sahiptir. Tarayıcının yerleşik ayrıştırıcısını ve yükleme semantiğini kullanan bir CSS kaynağı dizesinden Style Sheets'i yüklemek için Promise tabanlı yeni bir API'ye sahibiz. Son olarak, stil sayfası güncellemelerini bir Stil Sayfası'nın tüm kullanımlarına uygulayarak tema değişiklikleri ve renk tercihleri gibi işlemleri basitleştiren bir mekanizmamız vardır.
Geleceğe dönük olarak
Oluşturulabilir Stil Sayfaları'nın ilk sürümü burada açıklanan API ile gönderilir, ancak kullanımı kolaylaştırmak için çalışmalar devam etmektedir. adoptedStyleSheets FrozenArray'i stil sayfalarını eklemek ve kaldırmak için özel yöntemlerle genişletmek üzere bir teklif vardır. Bu, dizi klonlama ihtiyacını ortadan kaldırır ve yinelenen stil sayfası referanslarını önler.