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.
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.
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.
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