Yapılandırılabilir Stil Sayfaları

Yeniden kullanılabilir kesintisiz stiller.

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

Tarayıcı Desteği

  • 73
  • 79
  • 101
  • 16,4

Kaynak

JavaScript kullanarak stil sayfaları oluşturmak şimdiye kadar mümkün olmuştur. Bununla birlikte, bu işlem geçmişten beri document.createElement('style') kullanarak bir <style> öğesi oluşturmak, ardından temel CSSStyleSheet örneğine referans almak için ilgili sayfa özelliğine erişmek olmuştur. Bu yöntem, yinelenen CSS kodu ve bu kodun operatör şişmesine neden olabilir. Ekleme işlemi ise şişkinlik olsun ya da olmasın, stilsiz içeriğin yanıp sönmesine yol açar. CSSStyleSheet arayüzü, CSSOM olarak adlandırılan bir dizi CSS temsil arayüzü koleksiyonunun kökünü oluşturur. Bu arayüz, stil sayfalarını değiştirmek ve eski yöntemle ilişkili sorunları ortadan kaldırmak için programatik bir yol sunar.

CSS&#39;nin hazırlanmasını ve uygulanmasını gösteren şema.

Oluşturulabilir Stil Sayfaları, paylaşılan CSS stillerini tanımlayıp hazırlamayı ve ardından bu stilleri birden fazla Gölge Köke veya Belgeye kolaylıkla ve yinelemeden uygulamayı mümkün kılar. Paylaşılan bir CSSStyleSheet'te yapılan güncellemeler, uyarlandığı tüm köklere uygulanır ve stil sayfası benimsendiğinde sayfa yüklendikten sonra hızlı ve eşzamanlı yapılır.

Yapılabilir Stil Sayfaları tarafından oluşturulan ilişkilendirme, bir dizi farklı uygulama için uygundur. Birçok bileşen tarafından kullanılan merkezi bir tema sağlamak için kullanılabilir: Tema, bileşenlere geçirilen bir CSSStyleSheet örneği olabilir. Tema güncellemeleri, bileşenlere otomatik olarak uygulanır. CSS Özel Mülk değerlerini, basamak temeline dayanarak 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 yönelik doğrudan bir arayüz olarak da kullanılabilir. Böylece, stil sayfalarını DOM'ye eklemeden önceden yüklemeyi kolaylaştırır.

Stil sayfası oluşturma

Bunun için yeni bir API'yi kullanıma sunmak yerine Constructable Stylesheets özelliği CSSStyleSheet() oluşturucusunu çağırarak stil sayfalarını zorunlu olarak oluşturmayı mümkün kılar. Ortaya çıkan CSSStyleSheet nesnesinin iki yeni yöntemi vardır. Bu yöntemler, Stilsiz İçeriklerin Flash'ını (FOUC) tetiklemeden stil sayfası kuralları eklemeyi ve güncellemeyi daha güvenli hale getirir. replace() ve replaceSync() yöntemleri, 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. Tüm @import kuralları yok sayı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 @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 bulunan bir adoptedStyleSheets özelliğidir. Bu işlem, CSSStyleSheet ile tanımlanan stilleri belirli bir DOM alt ağacına açık bir şekilde uygulamamızı sağlar. Bunu yapmak için özelliği, söz konusu öğeye uygulanacak bir veya daha fazla stil sayfası dizisine 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);

Putting it all together

With Constructable StyleSheets, web developers now have an explicit solution for creating CSS StyleSheets and applying them to DOM trees. We have a new Promise-based API for loading StyleSheets from a string of CSS source that uses the browser's built-in parser and loading semantics. Finally, we have a mechanism for applying stylesheet updates to all usages of a StyleSheet, simplifying things like theme changes and color preferences.

View Demo

Looking ahead

The initial version of Constructable Stylesheets shipped with the API described here, but there's work underway to make things easier to use. There's a proposal to extend the adoptedStyleSheets FrozenArray with dedicated methods for inserting and removing stylesheets, which would obviate the need for array cloning and avoid potential duplicate stylesheet references.

More information