Styliser les composants Blazor avec CSS

Aujourd’hui, nous apprenons comment fonctionne la prise en charge CSS dans Blazor et comment l’isolation CSS résout l’un des problèmes de développement Web les plus fréquents.

Comme nous l’avons appris dans le Introduction au développement BlazorBlazor utilise des technologies Web standards.

Lorsqu’il s’agit de styliser l’application Web et ses composants, Feuilles de style en cascade (CSS) est le standard Web, qui est également utilisé dans le développement de Blazor.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Comment fonctionne CSS dans Blazor ?

Blazor prend en charge toutes les propriétés CSS prises en charge par le navigateur. Il n’y a pas de propriétés CSS spécifiques à Blazor.

Semblable à d’autres technologies de développement Web, nous devons ajouter une référence à un fichier CSS externe ou utiliser un style CSS en ligne dans nos applications Blazor.

Définitions CSS en ligne peut être appliqué en utilisant la propriété style sur n’importe quel élément HTML :

<div style="background-color: cyan">Content</div>

Une autre option consiste à appliquer des Cours CSS aux éléments HTML :

<div class="bg-cyan">Content</div>

Cette approche nécessite que les classes CSS soient définies dans un fichier CSS distinct et référencées dans l’application. Dans une application Web Blazor .NET 8, le référencement se produit généralement dans le App.razor composant.

.bg-cyan {
  background-color: cyan;
}

<link rel="stylesheet" href="styles.css" />

Pouvez-vous utiliser des bibliothèques d’interface utilisateur CSS tierces ?

Puisque nous utilisons du CSS standard dans les applications Blazor, nous pouvons référencer et utiliser des bibliothèques d’interface utilisateur CSS tierces, telles que Bulma, Bootstrap, Tailwind CSS, etc.

Le modèle de projet d’application Web ASP.NET Core Blazor par défaut intègre Bootstrap CSS.

Si nous voulons utiliser un autre framework CSS, nous pouvons supprimer les fichiers dans le wwwroot dossier et supprimez également la référence du framework du App composant.

J’ai enregistré une vidéo où j’explique comment utiliser Tailwind CSS au lieu de Bootstrap dans Blazor.

Utilisation des classes CSS Bootstrap

Regardons la définition de la barre d’en-tête dans le NavMenu composant du modèle de projet d’application Web Blazor par défaut dans .NET 8.

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorCSSIsolation</a>
    </div>
</div>

Par exemple, le top-row et navbar cours au plus haut niveau div L’élément utilise les définitions Bootstrap pour définir la barre d’en-tête.

Comment Blazor accède-t-il au CSS Boostrap ?

Le dossier bootstrap dans le wwwroot le dossier contient un fichier de 160 Ko boostrap.min.css déposer.

Il contient toutes les classes CSS Bootstrap, y compris la top-row, navbar et container-fluid classes utilisées dans le NavMenu composant.

Dans le App.razor fichier, nous avons un lien vers le fichier de feuille de style externe bootstrap.min.css dans la section d’en-tête :

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

Isolement CSS

Lorsqu’il s’agit de développement d’applications Web modernes, nous avons l’opposition entre les frameworks Web orientés composants, tels que Blazor, et CSS, où les classes ont une portée globale et s’appliquent à tous les composants d’un projet.

Blazor fournit une solution à certains des défis que les définitions CSS globales apportent au développement Web moderne.

Souvent, les développeurs Web utilisent un système de noms pour éviter les conflits de noms. Par exemple, ils préfixer leurs classes CSS pour un composant spécifique avec le nom du composant ou une abréviation.

Par exemple, un InfoBanner Le composant a le préfixe de InfoBanner__ pour toutes les classes CSS.

L’un des inconvénients de l’utilisation d’un tel système de nommage est que tous les CSS les noms de classe ont tendance à être plus longs que nécessaire. Cela rend plus difficile la lecture et l’écriture de ces noms.

De plus, si vous n’utilisez pas l’optimisation CSS lors de votre build, la taille globale de l’application Web augmentera.

Avec Isolement CSSil est possible de définir des classes CSS qui ne s’appliquent qu’à un composant Blazor spécifique.

Considérez le composant d’avertissement suivant dans le Warning.razor déposer:

<div class="warning">@Text</div>

@code {
    [Parameter]
    public string Text { get; set; } = "";
}

Le Warning composant a un Text propriété fournie en paramètre par son composant parent.

Le HTML div l’élément a un warning classe appliquée. Regardons le Warning.razor.css déposer:

.warning {
    color: red;
    font-size: 12pt;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #FFCCCB;
    border: 2px solid red;
}

Le fichier contient un seul warning classe avec un ensemble de paires propriété-valeur CSS.

La classe d’avertissement n’est disponible que dans la Warning composant. Quand j’essaie d’appliquer la classe à un div dans un autre composant Blazor, cela n’aura aucun effet et les définitions CSS ne sont pas appliquées.

Les composants internes de l’isolation CSS : comment ça marche ?

Lorsque nous définissons une classe CSS dans un fichier CSS spécifique au composant Blazor, l’isolation CSS est déclenchée et un identification est généré et ajouté aux noms de classe CSS.

Considérons l’exemple suivant pour le Warning composant défini ci-dessus.

Nous voyons le warning la classe est définie dans le BlazorCSSIsolation.styles.css déposer. Nous allons en apprendre davantage sur ce fichier mais concentrons-nous d’abord sur la définition de la classe CSS.

Pendant que nous définissons le nom de la classe warning nous voyons maintenant un identifiant supplémentaire ajouté au nom de la classe. Le nom complet est maintenant .warning[b-tjvd9khfp8].

Cela signifie que nous avons toujours les noms de classe les plus longs dans le paquet de codes, mais que nous n’avons pas besoin de les écrire et de les lire lorsque nous travaillons dans la base de code.

Maintenant, inspectons le div élément sur la page d’accueil de l’application.

On voit que le div a encore le warning classe dans l’attribut de classe HTML. Cependant, nous voyons également l’ID généré sur le div élément après le class attribut. Sur le côté droit, on voit que les propriétés CSS sont appliquées à l’élément div.

Blazor utilise une fonctionnalité CSS standard appelée sélecteurs d’attributs. Les sélecteurs d’attributs offrent différentes options. Par exemple, vous pouvez rechercher une valeur spécifique. La notation utilisée par Blazor est la [foo] syntaxe qui vérifie l’existence d’un attribut.

Comme vous pouvez le voir dans la capture d’écran ci-dessus, l’ID généré est appliqué au HTML div élément en tant qu’attribut (sans valeur), et la classe CSS s’applique à tous les emplacements où la classe d’avertissement est appliquée et où un attribut avec l’ID généré existe.

Voyons maintenant comment le BlazorCSSIsolation.styles.css Le fichier est référencé dans l’application Blazor.

Dans le App.razor fichier, nous voyons la ligne suivante dans la section d’en-tête HTML :

<link rel="stylesheet" href="BlazorCSSIsolation.styles.css" />

Le modèle de projet Blazor par défaut génère cette référence de fichier CSS. Le nom du projet est utilisé comme nom de fichier.

Je pense que c’est une grande amélioration et j’utilise largement l’isolation CSS dans mes applications Web Blazor. J’utilise uniquement le site.css fichier dans le wwwroot dossier pour définir les classes que je souhaite rendre disponibles globalement.

Prise en charge du préprocesseur CSS (Sass/Less)

En tant que développeur Web expérimenté, vous souhaiterez peut-être utiliser Toupet ou Moins avec Blazor.

Bien que Blazor ne le prenne pas en charge par défaut, vous pouvez l’implémenter à l’aide d’une tâche de pré-construction ou d’un package tiers, tel que Délégué.SassBuilder.

Conclusion

Blazor est construit sur le moderne normes du Web et vous pouvez utiliser CSS comme vous l’utiliseriez dans d’autres applications Web.

Isolement CSS est un puissant outil intégré qui nous aide à isoler les composants. Nous pouvons définir des styles globaux dans le site.css fichier, ou un autre fichier dans le wwwroot dossier. Ou nous utilisons le fichier CSS code-behind et définissons des définitions CSS spécifiques aux composants.

Blazor ne vient pas avec Insolent/Moins soutien, mais il existe des solutions pour que cela fonctionne.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.