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

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Tarafından Dave Brock

Bu makalede CSS yalıtımının CSS'yi bileşenlere Razor nasıl kapsamladığı 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ır:

  • 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ştirme

Bileşene özgü stilleri tanımlamak için, aynı klasördeki bileşenin .razor dosya adıyla eşleşen bir .razor.css dosya oluşturun. Dosya .razor.css kapsamlı bir CSS dosyasıdır.

Dosyadaki bir ExampleExample.razor bileşen için adlı Example.razor.cssbileşenle birlikte bir dosya oluşturun. DosyaExample.razor.css, bileşeniyle (Example.razor) aynı klasörde Example 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;
}

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

Not

Paketleme sırasında stil yalıtımını garanti etmek için kod bloklarında CSS'nin Razor içeri aktarılması 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 etiketin <head> içinde (içeriğin konumu) başvurulur<head>. Aşağıdaki <link> öğe varsayılan olarak proje şablonlarından Blazor oluşturulan bir uygulamaya eklenir ve burada yer tutucu {ASSEMBLY NAME} projenin derleme adıdır:

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

Aşağıdaki örnek, barındırılan Blazor WebAssemblyClient bir uygulamadan alınmıştı. Uygulamanın derleme adı olur BlazorSample.Clientve proje Barındırılan <link> seçeneğiyle oluşturulduğunda proje şablonu tarafından Blazor WebAssembly eklenir (-ho|--hosted Visual Studio kullanılarak .NET CLI veya ASP.NET Temel Barındırılan onay kutusunu kullanan seçenek):

<link href="BlazorSample.Client.styles.css" rel="stylesheet">

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

<h1 b-3xxtam6d07>

Dosya, {ASSEMBLY NAME}.styles.css bir stil bildirimini bileşeniyle gruplandırmak için kapsam tanımlayıcısını kullanır. Aşağıdaki örnek, önceki <h1> öğenin stilini sağlar:

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

Derleme zamanında, yer tutucuların bulunduğu kuralıyla obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.cssbir proje paketi oluşturulur:

  • {CONFIGURATION}: Uygulamanın derleme yapılandırması (örneğin, Debug, Release).
  • {TARGET FRAMEWORK}: Hedef çerçeve (örneğin, net6.0).
  • {ASSEMBLY NAME}: Uygulamanın derleme adı (örneğin, BlazorSample).

Alt bileşen desteği

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

Aşağıdaki örnekte adlı Parent bir üst bileşen ve adlı Childalt bileşen gösterilmektedir.

Parent.razor:

@page "/parent"

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

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

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

Parent.razor.css:

::deep h1 { 
    color: red;
}

Stil h1 artık alt bileşen için Parent ayrı bir kapsamlı CSS dosyası oluşturmaya gerek kalmadan ve Child bileşenleri için geçerlidir.

Sahte ::deep öğe yalnızca alt öğeyle çalışır. Aşağıdaki işaretleme, stilleri beklendiği gibi bileşenlere uygular h1 . Üst bileşenin kapsam tanımlayıcısı öğesine uygulanır div , böylece tarayıcı stilleri üst bileşenden devralmayı bilir.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Ancak, öğesinin div dışlanması alt ilişkiyi kaldırır. Aşağıdaki örnekte, stil alt bileşene uygulanmamıştır .

Parent.razor:

<h1>Parent</h1>

<Child />

Sahte öğe, ::deep kapsam özniteliğinin kurala uygulandığı yeri etkiler. Kapsamlı bir CSS dosyasında CSS kuralı tanımladığınızda, kapsam varsayılan olarak en doğru öğeye uygulanır. Örneğin: div > a olarak dönüştürülür div > a[b-{STRING}]; 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 sözde öğe bunu yapmanıza izin verir. Örneğin, div ::deep > a olarak dönüştürülür div[b-{STRING}] > a (örneğin, div[b-3xxtam6d07] > a).

Sahte öğeyi herhangi bir HTML öğesine ekleme özelliği, işlenen HTML etiketlerinin ::deep yapısını belirleyebildiğiniz zaman diğer bileşenler tarafından işlenen öğeleri etkileyen kapsamlı 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 (veya başka bir div öğ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

Kapsamlı CSS, etiket yardımcısı uygulanmış öğeler dahil olmak üzere bileşenler veya Etiket Yardımcıları için değilRazor, yalnızca HTML öğeleri için geçerlidir. Örneğin<input asp-for="..." />, .

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, derleme işlemi sırasında CSS seçicilerini yeniden yazmadan önce Blazor ön işlemci derlemesi gerçekleştiği sürece CSS ön işlemcilerinin tümleştirilmesi sorunsuz olur. Örneğin Visual Studio'yu kullanarak 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.

gibi AspNetCore.SassCompilerbirçok üçüncü taraf NuGet paketi, 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çlar veya iş akışlarında bağımlılıklar olması gibi bazı gelişmiş senaryolar için yapılandırma sağlar.

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

Varsayılan olarak kapsam tanımlayıcıları b-{STRING} biçimini kullanır; burada {STRING} yer tutucusu, ç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.

Kapsamlı 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>

Varsayılan olarak kapsam tanımlayıcıları b-{STRING} biçimini kullanır; burada {STRING} yer tutucusu, ç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="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.

Kapsamlı 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="Pages/BaseComponent.razor.css" CssScope="custom-scope-identifier" />
  <None Update="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="Pages/*.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

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

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

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

Otomatik paketlemeyi devre dışı bırakma

Çalışma zamanında kapsamı belirlenmiş dosyaları yayımlama ve yükleme işlemini geri çevirmek Blazor için özelliğini kullanın DisableScopedCssBundling . Bu özelliği kullanırken, diğer araçlar veya işlemler yalıtılmış CSS dosyalarını dizinden obj 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ırakma

Özelliğini false uygulamanın proje dosyasında olarak ayarlayarak <ScopedCssEnabled> proje için CSS yalıtımını devre dışı bırakın:

<ScopedCssEnabled>false</ScopedCssEnabled>

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

NuGet paketindeki veya 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. adlı ClassLib sınıf kitaplığı ve stil sayfası olan bir BlazorBlazorSample.styles.css 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: