Kapsamlandırılmış Stiller için @scope

@scope at-kuralı (Chrome 118+, Safari 17.4+), CSS kurallarını DOM'un belirli bir alt ağacıyla sınırlar. @scope içindeki kurallar yalnızca bildirilen kapsam kökü içindeki öğelere uygulanır ve stillerin bileşenler arasında sızmasını önler.

Bir kapsam kökü seçicisiyle kapsam bildirin. İçindeki tüm kurallar yalnızca eşleşen kapsam köklerinin alt öğelerine uygulanır; belgenin tamamına uygulanmaz.

Kapsam kökü (@scope (.card)), giriş noktasını tanımlar. Kapsam içindeki .title ile eşleşen öğeler biçimlendirilir. .card dışındaki, .title sınıfına sahip öğeler etkilenmez; böylece Shadow DOM olmadan gerçek stil yalıtımı sağlanır.

İsteğe bağlı olarak to ile bir kapsam sınırı tanımlayın: @scope (.card) to (.nested-card). Kurallar .card içinde uygulanır, ancak .nested-card alt öğelerinde durur; böylece stiller bileşen iç içe yerleştirmesinin tek düzeyiyle sınırlandırılır ve daha derindeki örnekler kapsam dışında bırakılır.

Bir @scope bloğunun içinde :scope, kapsam kökü öğesinin kendisini ifade eder. @scope (.card) { :scope { border-radius: 8px; } }, alt öğeleri değil doğrudan .card öğesini biçimlendirir.

@scope, yakınlığa dayalı özgüllük getirir: birden çok kapsam bir öğeyle eşleştiğinde seçici özgüllüğünden bağımsız olarak en yakın ata kapsam kökü kazanır. Bu, derin iç içe yerleştirilmiş bileşen stillerinin uzaktaki ata kapsamlarından gelen stiller tarafından geçersiz kılınmasını önler.

CSS Modülleri, derleme zamanında kapsam elde etmek için benzersiz karma değerli sınıf adları oluşturur — bu, JavaScript paketleyicisinin ilgi alanıdır. @scope ise derleme araçlarına, karma değerli adlara veya çerçeveye özgü söz dizimine gerek kalmadan tarayıcıda yerel olarak kapsam oluşturur — saf CSS.

Gölge DOM, eksiksiz stil yalıtımı oluşturur — dış stiller içeri nüfuz edemez. @scope ise kısmi yalıtım oluşturur — özgüllükleri yeterince yüksekse dışarıdaki stiller kapsam içindeki öğelere yine de ulaşabilir. @scope, tam yalıtım olmadan bileşen kapsamı oluşturmak için daha hafif bir alternatiftir.

İnce ayrıntılı basamaklandırma denetimi için @scope ile @layer'ı birleştirin: bileşen kapsamındaki stilleri bir bileşen katmanında tanımlayın. Böylece sınıf adlandırma cambazlığına gerek kalmadan hem basamaklandırma sırasını (katmanlar aracılığıyla) hem de stil kapsamını (@scope aracılığıyla) birleştirilebilir biçimde yönetebilirsiniz.

Tasarım sistemi bileşenleri: tüm düğme stillerini @scope (.button-group) kapsamına alın; böylece iç düğme stilleri dışarı sızmasın. Araç yalıtımı: üçüncü taraf bir aracın stillerini kapsayıcısıyla sınırlandırarak sayfanın genel stilleriyle çakışmasını önleyin.

@scope, Chrome 118+, Safari 17.4+ ve Firefox 128+ sürümlerinde desteklenir. Desteklenmeyen tarayıcılarda @scope içindeki stiller yok sayılır — basamaklandırma genel stillere geri döner. Bileşen kapsamının yararlı olduğu ancak kritik olmadığı durumlarda @scope'ı aşamalı geliştirme olarak kullanın.

Geleneksel CSS seçicileriyle tek başına ele alınması zor olan hangi sorunu @scope çözer?

@scope, CSS kuralı uygulamasını bildirilen bir DOM alt ağacıyla sınırlar ve Gölge DOM veya derleme aracıyla sınıf karma değerleri oluşturmaya gerek kalmadan yerel stil kapsüllemesi sağlar. Kapsam sınırları, yakınlık özgüllüğü ve @layer ile bütünleşmesi, onu saf CSS içindeki bileşen kapsamlı tasarım sistemleri için güçlü bir temel haline getirir.