Mvc: Créer un<link/> Tag Helper avec prise en charge des sources de secours

Créé le 18 nov. 2014 · 3Commentaires · Source: aspnet/Mvc

Ceci est l'équivalent de la feuille de style CSS de #1576

Un LinkTagHelper qui permet de spécifier une feuille de style de secours à charger en cas d'échec du chargement du primaire. L'échec est déterminé en injectant une balise factice <meta> avec un nom de classe spécifié (attribut asp-fallback-test-class ), puis en testant le style calculé de cet élément pour voir si une propriété CSS spécifiée ( asp-fallback-test-property attribut) est égal à une valeur spécifiée ( asp-fallback-test-value ).

Usage

<link href=""
      asp-fallback-href=""
      asp-fallback-test-class=""
      asp-fallback-test-property=""
      asp-fallback-test-value="" />

Tous les attributs doivent être présents et non nuls pour que le Tag Helper fonctionne. S'il en manque, il enregistrera un avertissement et une non-opération.

Arguments

| Nom de l'attribut | Type | Détails |
| --- | --- | --- |
| asp-fallback-href | string | L'URL vers laquelle se replier en cas d'échec de la principale (comme spécifié dans l'attribut href ) |
| asp-fallback-test-class | string | Le nom de classe défini dans la feuille de style à utiliser pour le test de secours |
| asp-fallback-test-propriété | string | Le nom de la propriété CSS à utiliser pour le test de secours |
| asp-fallback-test-value | string | La valeur de la propriété CSS à utiliser pour le test de secours |

Exemple

Source CSHTML

 <link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
       asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
       asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />

HTML de sortie

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<meta name="x-stylesheet-fallback-test" class="hidden" />
<script>
    (function (a, b, c) {
        var d = document,
            s = d.getElementsByTagName("SCRIPT"),
            meta = s[s.length-1].previousSibling;
        (d.defaultView.getComputedStyle(meta)[a] === b ||
            d.write('\u003clink rel="stylesheet" href="' + c + '" /\u003e'));
    })("visibility", "hidden", "/lib/bootstrap/css/bootstrap.min.css");
</script>

3 - Done enhancement feature-Tag-Helpers

Source

DamianEdwards

Commentaire le plus utile

Désolé de commenter un problème ancien/fermé. Y a-t-il déjà eu des discussions sur une option pour tester les fichiers .css qui n'ont pas de classes singulières ?

Deux exemples :

dataTables.bootstrap.css a au minimum deux sélecteurs enchaînés comme table.dataTable { ... } mais pas .dataTable classe
De même avec skin-red.css , il n'y a que des sélecteurs descendants comme .skin-red .main-header .navbar { ... } et encore une fois pas .skin-red classe autonome

kylef000 le 26 oct. 2017

👍3

Tous les 3 commentaires

Désolé de commenter un problème ancien/fermé. Y a-t-il déjà eu des discussions sur une option pour tester les fichiers .css qui n'ont pas de classes singulières ?

Deux exemples :

dataTables.bootstrap.css a au minimum deux sélecteurs enchaînés comme table.dataTable { ... } mais pas .dataTable classe
De même avec skin-red.css , il n'y a que des sélecteurs descendants comme .skin-red .main-header .navbar { ... } et encore une fois pas .skin-red classe autonome

kylef000 le 26 oct. 2017

👍3

@kylef000 c'est intéressant, je ne sais pas comment on pourrait même tester cela de manière générique comme nous le faisons en utilisant l'élément injecté <meta /> .

DamianEdwards le 26 oct. 2017

@DamianEdwards Ah, d'accord. Je n'ai pas vu beaucoup de questions à ce sujet dans ma recherche rapide sur le sujet, donc ce n'est peut-être pas quelque chose qui vaut la peine d'investir du temps. Le meilleur moyen de contourner ce problème est probablement de fork, d'ajouter une classe de test (comme .skin-red-fallback-test { ... } ) dans le fichier individuel, puis de créer un PR pour la bibliothèque particulière que l'on pourrait utiliser.

Merci pour votre réponse. J'apprécie vraiment votre travail sur tout ce qui concerne C# !

kylef000 le 27 oct. 2017

Cette page vous a été utile?

0 / 5 - 0 notes