Bu sayfa, Cloud Translation API ile çevrilmiştir.

Yazar tanımlı CSS adları ve gölge DOM: Spesifikasyonda ve uygulamada

Noam Rosenthal

Yazar olarak tanımlanmış CSS adları ve gölge DOM'nin birlikte çalışması gerekir. Ancak, tarayıcılar spesifikasyon ile tutarlı değildir. Bazen diğeridir. Her CSS adı arasında küçük farklar bulunur.

Bu makalede, yazar tarafından tanımlanan CSS adlarının davranışına ilişkin mevcut durum açıklanmaktadır. gölge kapsamlarında daha iyi hale getirmemize yardımcı olacağını umuyoruz. birlikte çalışabilirlik kabiliyetini artırır.

Yazar tarafından tanımlanan CSS adları nedir?

Yazar tanımlı CSS adları nispeten eski bir CSS söz dizimi mekanizmasıdır; <keyframe-name> öğesini şu şekilde tanımlayan @keyframes kuralı için kullanıma sunuldu: özel kimlik veya dize olabilir. Bu kavramın amacı, bir bölümünde bir şeye bakmayı gerektirir ve başka bir bölümde buna başvuruda bulunur.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

CSS adlarını kullanan diğer CSS özellikleri; yazı tipleri, özellik bildirimleri, görüntüleme geçişlerini, sabitleme konumlandırmasını ve son görüntüleme kaydırmaya dayalı animasyonlar. Aşağıdaki kapsamlı olmayan tabloda adlar yer alır kontrol eder.

Özellik	Ad beyanı	Ad referansı
Animasyon kareleri	`@keyframes`	`animation-name`
Yazı Tipleri	`@font-face { }` `@font-palette-values`	`font-family` `font-palette`
Gayrimenkul Beyanları	`@property`	Herhangi bir özel nitelik
Geçişi görüntüle	`view-transition-name` `view-transition-class`	`::view-transition-group()`
Çapa Konumlandırma	`anchor-name`	`position-anchor`
Kaydırma odaklı animasyon	`animation-timeline`	`view-timeline-name` `scroll-timeline-name`
Sayaç stili	`@counter-style` `Counter-reset` `counter-set` `counter-increment`	`list-style`
Kapsayıcı sorguları	`container-name`	`@container`
CSS değişkeni	`--something`	`var(--something)`
Sayfa	`@page`

Tabloda görebileceğiniz gibi, bir CSS adı genellikle karşılık gelen bir CSS'ye sahiptir referans: Örneğin animation-name, @keyframes için bir referanstır dokunun. CSS adları, DOM'de tanımlanan adlardan (ör. özellikler) farklıdır ve etiket isimlerini, bunların bağlamını açıkça belirtmek için oluşturabilirsiniz.

Adların gölge DOM ile ilişkisi

CSS adları, bir CSS'nin farklı bölümleri arasında ilişki oluşturmak için Gölge DOM, sağlayacak şekilde geliştirilmiştir. İlişkileri içine alarak sızıntı yaşanmaması için arasında geçiş yapacaktır.

CSS adları ile gölge DOM'yi bir araya getirdiğimizde, Web bileşenleri esnek ama kısıtlı olacak kadar etkileyici istikrarlı olmak için yeterli.

Bu teoride iyi. Pratikte, tarayıcılar CSS ile CSS arasındaki adları gölge DOM ile birlikte çalışır; her ikisi de aynı farklı tarayıcılarda da, özellikler ile spesifikasyonlar arasında.

Adlar ve gölge DOM'nin birlikte çalışma şekli

Sorunu anlamak için CSS'nin bu bölümlerinin nasıl performans gösterdiğini anlamak teoride birlikte çalışması gerekir.

Genel kural

CSS adlarının gölge ağaçları genelinde nasıl davrandığına ilişkin genel kural CSS Kapsam Oluşturma Düzeyi 1 spesifikasyonu. Özetlemek gerekirse: CSS adı, tanımlandığı kapsam dahilinde geneldir. gölge ağaçlarından erişilebilir ancak alt gölge ağaçlarından erişilebilir. gölge ağaçlarından ibaret değildir. Bunun, web platformundaki öğe kimlikleri belirlenir.

Kuralla ilgili istisna: `@property`

Diğer CSS adlarından farklı olarak CSS özellikleri gölge DOM tarafından kapsanmaz. Daha ziyade, parametreleri farklı gölgeler üzerinden aktarmak için kullanılan yaygın yöntemlerdir ağaçlar. Bu da @property açıklayıcı özel: normal bir doküman-global tür bildirimi gibi , belirli bir adlandırılmış özelliğin nasıl çalıştığını tanımlar. Tesislerin özellik açıklamalarının uyuşmaması beklenmedik bir durum yaratır. sonuçları, dolayısıyla @property bildirimlerinin birleştirilmek ve çözümlenmesi için belirtilir belge sırasına göre düzenleyebilirsiniz.

Kuralın `::part` ile çalışma şekli

Gölge bölümleri gölge ağacındaki bir öğeyi üst ağacına maruz bırakır. Böylece, üst ağaç, bu öğeye erişebilir ve ::part öğesine dokunun.

::part, iki ağaç kapsamının aynı öğeyi biçimlendirmesine izin verdiğinden, aşağıdaki basamak sırası belirtildiğinde:

İlk olarak gölge bağlamındaki stili kontrol edin. Bu "varsayılan"tır olması gerekir.
Ardından, ::part bölümünde tanımlanan harici stili uygulayın. Bu, "Özelleştirilmiş" olması gerekir.
Ardından, !important ile birlikte tanımlanan dahili stilleri uygulayın. Bu, özel bir öğenin belirli bir özelliğin belirli bir özelliğinin bölümü ::part tarafından özelleştirilemez.

Bu, gölge DOM'sindeki adlara bir ::part, gölge kapsamlı bir stil yerine ana makine kapsamlı bir stil olduğundan ::part stiline sahip. Örneğin:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

Kuralın satır içi stillerle çalışma şekli

::part öğesinin aksine, style özelliğine sahip satır içi stiller veya stilinin komut dosyası kullanılarak programatik şekilde ayarlanması durumunda, olduğunu unutmayın. Bunun nedeni, erişime sahip olmanız gereken bir öğeye bir stil ve böylece gölge kökünün kendisine bağlamalıdır.

CSS adları ve gölge DOM'nin gerçekte birlikte işleyiş şekli

Önceki kurallar iyi tanımlanmış ve tutarlı olsa da, yansıtmayabilir. Pratikte @property, spesifikasyondan farklı ve tutarlı bir şekilde çalışır. bulunur ve diğer özelliklerin çoğunda açık hatalar vardır (bunlardan bazıları henüz yayınlanmadı, bu yüzden bunları düzeltmek için zamanınız var).

Bu özelliklerin pratikte nasıl çalıştığını test etmek ve göstermek için, sonraki sayfa: https://css-names-in-the-shadow.glitch.me/. Bu sayfada, her biri özelliklerden birine odaklanan ve altı tane test senaryolar:

Dış ada dış referans: Gölge DOM'u dahil değildir. Bu iş yeri.
İç ada dış referans: Bu yöntem işe yaramaz, gölge bağlamında tanımlanan adın sızdırıldığı anlamına gelir.
Dış ada iç referans: Bu, ağaç kapsamlı adlar olarak işe yarayacaktır gölge kökleri tarafından devralınır.
İç ada iç referans: Bu, hem referansları da aynı kapsamdadır.
Dış ada ::part referansı: Hem ::part hem de ve ad aynı kapsamda tanımlanır.
::part dahili ada referans: Dış kapsam olarak bu komut çalışmayacaktır gölge DOM'de tanımlanan adlar hakkında bilgi sahibi olmamalıdır.

`@keyframes`

Spesifikasyonda tanımlandığı gibi, animasyon karesi adlarına referans verebilmeniz gerekir. @keyframes kuralı bir üst öğede olduğu sürece, gölge kökünün içinden kaynaklanmaktadır. kapsam. Pratikte hiçbir tarayıcı bu davranışı uygulamaz ve animasyon karesi tanımlara yalnızca tanımlandıkları kapsam içinde referans verilebilir. Görüntüleyin sorun 10540

`@property`

Spesifikasyonda tanımlandığı gibi, tüm @property beyanı belge kapsamına dahil edilir. Ancak şu anda tüm tarayıcılarda yalnızca doküman kapsamında @property ve şu kapsamda @property beyanları belirtmelidir: Gölge kökleri yok sayılır.
. 10541 numaralı sorunu inceleyin.

Tarayıcıya özgü hatalar

Diğer özellikler, tarayıcılar arasında tutarlı bir davranış göstermez:

@font-face, Safari'de kök kapsama dahil edilecek.
Chromium, gölge kökünde @anchor-name kurallarının devralınmasına izin vermiyor
@scroll-timeline-name ve @view-timeline-name doğru kapsama dahil değil ::part üzerinde (yine Chromium'da)
Gölge köklerinde @font-palette-values tanımlanmasına hiçbir tarayıcı izin vermiyor.
view-transition-class, bir gölge kökü (geçiş reklamı) içinde tanımlanabilir gölge kökünün dışındadır).
Firefox, ::part tarayıcısının iç gölge adlarına (kapsayıcı sorguları, animasyon kareleri) içerebilir.
Firefox ve Safari, gölge kökünde @counter-style yönergesini dikkate almaz.

counter-reset, counter-set ve counter-increment için biraz çünkü bunlar örtülü adlar ve CSS özelliklerini açıklayan yerleşik ve test edilmiş kurallara sahip olması gerekir.

Sonuç

Ancak kötü haber şu ki mevcut birlikte çalışabilirlik durumunun anlık görüntüsünü incelerken CSS adları ve gölge DOM'si konusunda ise deneyim tutarsız ve buggydir. Burada incelediğimiz özelliklerin hiçbiri farklı platformlarda tutarlı bir şekilde davranmıyor. ve spesifikasyonlara göre çalışır. İyi haber şu ki, tutarlı bir deneyim sunan delta sınırlıdır. teknik sorun listesi oluşturacaksınız. Gelin bu sorunu çözelim. Bu süre zarfında, çözüm bulmakta zorlanıyorsanız bu genel bakışın yardımcı olabileceğini tutarsızlıkları görebilirsiniz.