ASP.NET Core Blazor CSS yalıtımı

Dave Brock tarafından

Bu makalede CSS yalıtımının CSS'yi Razor bileşenlerine nasıl sınırlandırdığı açıklanır. Bu, CSS'yi basitleştirebilir ve diğer bileşenler veya kitaplıklarla çakışmaları önleyebilir.

Aşağıdakileri azaltmak veya önlemek için CSS stillerini tek tek sayfalara, görünümlere ve bileşenlere yalıtın:

• Bakımı zor olabilen genel stillere bağımlılıklar.
• İç içe yerleştirilmiş içerikte stil çakışmaları.

CSS yalıtımını etkinleştir

Bileşene özgü stilleri tanımlamak için, aynı klasörde bileşenin .razor dosyasının adıyla eşleşen bir .razor.css dosyası oluşturun. .razor.css dosyası bir kapsamı sınırlı CSS dosyasıdır.

Bir Example.razor dosyasındaki Example bileşeni için, bileşenin yanında Example.razor.css adlı bir dosya oluşturun. Example.razor.css dosyası, Example bileşeniyle (Example.razor) aynı klasörde bulunmalıdır. Dosyanın "Example" temel adı büyük/küçük harfe duyarlı değildir.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

h1 { 
    color: brown;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

Example.razor.css içinde tanımlanan stiller yalnızca Example bileşeninin işlenmiş çıktısına uygulanır. CSS yalıtımı eşleşen Razor dosyadaki HTML öğelerine uygulanır. Uygulamanın başka bir yerinde tanımlanan h1 CSS bildirimleri, Example bileşenin stilleriyle çakışmaz.

Not

Paketleme sırasında stil yalıtımını garanti etmek için Razor kod bloklarında CSS içe aktarma desteklenmez.

CSS yalıtımı paketleme

CSS yalıtımı derleme zamanında gerçekleşir. Blazor CSS seçicilerini, bileşen tarafından işlenen işaretlemeyle eşleşecek şekilde yeniden yazar. Yeniden yazılan CSS stilleri, statik varlık olarak paketlenir ve oluşturulur. Stil sayfasına <head> etiketi içinde başvurulur (<head> içeriğinin konumu). Blazor proje şablonlarından oluşturulan bir uygulamaya aşağıdaki <link> öğe eklenir:

Blazor Web Appsaniye:

<link href="@Assets["{PACKAGE ID/ASSEMBLY NAME}.styles.css"]" rel="stylesheet">

Tek başına Blazor WebAssembly uygulamaları:

<link href="{PACKAGE ID/ASSEMBLY NAME}.styles.css" rel="stylesheet">

Yer {PACKAGE ID/ASSEMBLY NAME} tutucu, bir uygulamanın kitaplık veya derleme adı için projenin paket kimliğidir (<PackageId> proje dosyasında).

Paketlenmiş dosyada, her bileşen bir kapsam tanımlayıcısıyla ilişkilendirilir. Her stillendirilmiş bileşen için, b-{STRING} biçiminde bir HTML özniteliği eklenir; burada {STRING} yer tutucusu, çerçeve tarafından oluşturulan on karakterli bir dizedir. Tanımlayıcı her uygulama için benzersizdir. İşlenen Counter bileşende, Blazor, h1 öğesine bir kapsam tanımlayıcısı ekler:

<h1 b-3xxtam6d07>

{PACKAGE ID/ASSEMBLY NAME}.styles.css dosya, bir stil bildirimini bileşeniyle gruplandırmak için kapsam tanımlayıcısını kullanır. Aşağıdaki örnek, önceki <h1> öğesi için stili gösterir:

/* /Components/Pages/Counter.razor.rz.scp.css */
h1[b-3xxtam6d07] {
    color: brown;
}

Derleme zamanında, bir proje paketi obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{PACKAGE ID/ASSEMBLY NAME}.bundle.scp.css kuralına göre oluşturulur; yer tutucular şunlardır:

• {CONFIGURATION}: Uygulamanın derleme yapılandırması (örneğin, Debug, Release).
• {TARGET FRAMEWORK}: Hedef çerçeve (örneğin, net6.0).
• {PACKAGE ID/ASSEMBLY NAME}: Bir uygulamanın kitaplık veya derleme adı (örneğin, <PackageId>) için projenin paket kimliği (BlazorSampleproje dosyasında).

Alt bileşen desteği

CSS yalıtımı yalnızca {COMPONENT NAME}.razor.css biçimiyle ilişkilendirdiğiniz bileşen için geçerlidir; burada {COMPONENT NAME} yer tutucu genellikle bileşen adıdır. Değişiklikleri bir alt bileşene uygulamak için, üst bileşenin .razor.css dosyasındaki herhangi bir alt öğeye ::deepsözde öğeyi kullanın. ::deep sözde öğesi, bir öğenin oluşturulan kapsam tanımlayıcısının soyundan gelen öğelerini seçer.

Aşağıdaki örnekte, Parent adlı bir üst bileşen ile Child adlı bir alt bileşen gösterilmektedir.

Parent.razor:

@page "/parent"

<div>
    <h1>Parent component</h1>

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

h1 stil bildiriminin üst bileşene ve alt öğelerine uygulanması gerektiğini belirtmek için, Parent.razor.css içindeki h1 bildirimini ::deep sözde öğesiyle güncelleştirin.

Parent.razor.css:

::deep h1 { 
    color: red;
}

h1 stili artık, alt bileşen için ayrı bir kapsamlı CSS dosyası oluşturmaya gerek kalmadan Parent ve Child bileşenlerine uygulanır.

::deep sözde öğe yalnızca alt öğelerle çalışır. Aşağıdaki biçimlendirme, h1 stillerini beklendiği gibi bileşenlere uygular. Üst bileşenin kapsam tanımlayıcısı div öğesine uygulanır, böylece tarayıcı stillerin üst bileşenden devralınması gerektiğini bilir.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Ancak, div öğesinin dışlanması alt öğe ilişkisini kaldırır. Aşağıdaki örnekte, stil alt bileşene uygulanmaz.

Parent.razor:

<h1>Parent</h1>

<Child />

::deep sahte öğesi, scope özniteliğinin kurala nerede uygulandığını etkiler. Kapsamlı bir CSS dosyasında CSS kuralı tanımladığınızda, kapsam en sağdaki öğeye uygulanır. Örneğin: div > a, div > a[b-{STRING}] olarak dönüştürülür; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir (örneğin, b-3xxtam6d07). Bunun yerine kuralın farklı bir seçiciye uygulanmasını istiyorsanız, ::deep sahte öğe bunu yapmanıza izin verir. Örneğin, div ::deep > a, div[b-{STRING}] > a biçimine dönüştürülür (örneğin, div[b-3xxtam6d07] > a).

::deep sözde öğesini herhangi bir HTML öğesine ekleme özelliği, işlenen HTML etiketlerinin yapısını belirleyebildiğiniz zaman diğer bileşenler tarafından işlenen öğeleri etkileyen kapsamı belirli CSS stilleri oluşturmanıza olanak tanır. Başka bir bileşenin içinde köprü etiketi (<a>) işleyen bir bileşen için, bileşenin bir div (veya başka bir öğe) içinde sarmalandığından emin olun ve kuralı ::deep > a kullanarak yalnızca üst bileşen işlendiğinde bu bileşene uygulanan bir stil oluşturun.

Önemli

Kapsamlandırılmış CSS, yalnızca HTML öğelerine uygulanır; Razor bileşenlere veya Tag Helper’lara, bunlara gibi Tag Helper uygulanmış öğeler de dahil, uygulanmaz.

CSS ön işlemci desteği

CSS ön işlemcileri değişken, iç içe yerleştirme, modül, mixin ve devralma gibi özellikleri kullanarak CSS geliştirmeyi iyileştirmek için kullanışlıdır. CSS yalıtımı Sass veya Less gibi CSS ön işlemcilerini yerel olarak desteklemese de, ön işlemci derlemesi derleme işlemi sırasında Blazor CSS seçicilerini yeniden yazmadan önce gerçekleştiği sürece CSS ön işlemcilerinin tümleştirilmesi sorunsuz olur. Örneğin, Visual Studio'da mevcut ön işlemci derlemesini Visual Studio Görev Çalıştırıcı Gezgini'nde bir Derleme Öncesi görevi olarak yapılandırın.

Birçok üçüncü taraf NuGet paketi, örneğin AspNetCore.SassCompiler, CSS yalıtımı gerçekleşmeden önce derleme işleminin başında SASS/SCSS dosyalarını derleyebilir.

CSS yalıtımı yapılandırması

CSS yalıtımı hazır çalışacak şekilde tasarlanmıştır, ancak mevcut araçlara veya iş akışlarına bağımlılık olduğunda gibi bazı gelişmiş senaryolar için yapılandırma sağlar.

Kapsam tanımlayıcısının biçimini özelleştirme

Kapsam tanımlayıcıları b-{STRING} biçimini kullanır; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir. Kapsam tanımlayıcısının biçimini özelleştirmek için proje dosyasını istenen desene güncelleştirin:

<ItemGroup>
  <None Update="Components/Pages/Example.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Yukarıdaki örnekte Example.razor.css için oluşturulan CSS, b-{STRING} olan kapsam tanımlayıcısını custom-scope-identifier olarak değiştirir.

Kapsam belirteçli CSS dosyalarıyla devralma özelliği elde etmek için kapsam tanımlayıcılarını kullanın. Aşağıdaki proje dosyası örneğinde, bir BaseComponent.razor.css dosya bileşenler arasında ortak stiller içerir. DerivedComponent.razor.css dosyası bu stilleri devralır.

<ItemGroup>
  <None Update="Components/Pages/BaseComponent.razor.css" CssScope="custom-scope-identifier" />
  <None Update="Components/Pages/DerivedComponent.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Kapsam tanımlayıcılarını birden çok dosyada paylaşmak için joker karakter (*) işlecini kullanın:

<ItemGroup>
  <None Update="Components/Pages/*.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Statik web varlıkları için temel yolu değiştirme

scoped.styles.css dosyası uygulamanın kök dizininde oluşturulur. Proje dosyasında, varsayılan yolu değiştirmek için <StaticWebAssetBasePath> özelliğini kullanın. Aşağıdaki örnek, scoped.styles.css dosyasını ve uygulamanın kalan varlıklarını _content yoluna yerleştirir:

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

Otomatik paketlemeyi devre dışı bırak

Blazor kapsamlı dosyaları çalışma zamanında yayımlayıp yükleme davranışını devre dışı bırakmak için DisableScopedCssBundling özelliğini kullanın. Bu özelliği kullanırken, diğer araçlar veya işlemler yalıtılmış CSS dosyalarını obj dizininden alıp çalışma zamanında yayımlamak ve yüklemekten sorumludur:

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

CSS yalıtımını devre dışı bırak

Bir proje için CSS yalıtımını devre dışı bırakmak üzere, uygulamanın proje dosyasında <ScopedCssEnabled> özelliğini false olarak ayarlayın:

<ScopedCssEnabled>false</ScopedCssEnabled>

Razor sınıf kitaplığı (RCL) desteği

NuGet paketindeki veya Razor Razor sınıf kitaplığındaki (RCL) bileşenler için yalıtılmış stiller otomatik olarak paketlenir:

• Uygulama, RCL'nin paketlenmiş stillerine başvurmak için CSS içeri aktarmalarını kullanır. ClassLib adlı sınıf kitaplığı ve BlazorSample.styles.css stil sayfasına sahip bir Blazor uygulama için, RCL'nin stil sayfası uygulamanın stil sayfasının en üstünde içeri aktarılır:

  @import '_content/ClassLib/ClassLib.bundle.scp.css';
  

• RCL'nin paketlenmiş stilleri, stilleri kullanan uygulamanın statik web varlığı olarak yayımlanmaz.

RCL'ler hakkında daha fazla bilgi için aşağıdaki makaleleri inceleyin:

• ASP.NET Core Razor bileşenlerini bir Razor sınıf kitaplığından (RCL) kullanma
• ASP.NET Core ile sınıf kitaplıklarında yeniden kullanılabilir Razor kullanıcı arabirimi

İlgili içerik

• Razor Sayfalar CSS yalıtımı
• MVC CSS yalıtımı