Intermédiaire

ASP.NET MVC – Web Design – Gestion du “noscript”

asp.netA l’heure où le JavaScript est utilisé sur les sites Internet de manière de plus en plus poussée, dans la mouvance du Web 2.0 et des librairies telles que jQuery, Knockout, Angular, il peut sembler étrange de penser au rendu d’un site en noscript. En fait, cette problématique se retrouve également lorsqu’une erreur JavaScript se produit et empêche l’exécution du reste des scripts. Le volume de code augmentant, la probabilité d’une telle erreur croît également. Cela ne gênera pas trop l’utilisateur au chargement de la page. Par contre, au beau milieu du remplissage d’un long formulaire, cela peut l’empêcher d’enregistrer les données si longuement saisies !

Cet article ne présente pas une méthode complète de gestion du noscript. Il s’agit d’astuces utiles et majoritairement inédites pour compléter ce qui existe. Les exemples de code sont basés sur technos ASP.NET MVC 5.2 avec Razor, Bootstrap, FontAwesome, LESS, jQuery et TypeScript.

Habillage du message dans la balise NOSCRIPT

En HTML 4.01, la balise NOSCRIPT n’est autorisée que dans BODY. Sa fonction initiale est en effet de présenter un message à l’utilisateur en cas de « noscript ». Dans cette optique, si l’on souhaite mettre en forme ce message, il faut savoir que le contenu de la balise NOSCRIPT est considéré comme du texte, à l’instar d’une balise PRE. Cela empêche toute mise en forme fine, comme mettre en gras une partie du texte. On a cependant la possibilité d’appliquer un habillage global de ce texte. Il suffit de procéder sur la balise NOSCRIPT comme on le ferait avec une balise SPAN.

Exemple avec Bootstrap

<noscript class="alert alert-danger">
  JavaScript doit être activé sur votre navigateur Internet pour
	vous permettre de disposer de toutes les fonctionnalités de ce site.
</noscript>

Ce qui donne :
Habillage d'un message noscript avec bootstrap

A noter que sous IE8, lorsque le JavaScript est activé, le texte est caché mais l’habillage reste ! Ainsi, dans notre exemple, il reste un bloc « alerte rouge » vide. Pour y remédier, on peut supprimer les balises NOSCRIPT en JavaScript, ici avec jQuery :

$("noscript").remove();

Ajout de styles CSS ‘NOSCRIPT’

En HTML 5, on peut mettre une balise NOSCRIPT dans le HEAD et y référencer des éléments LINK, META et STYLE. On peut donc définir des styles CSS pour la version « noscript », avec des styles inlines ou en référençant des fichiers CSS, ceci via une balise LINK ou via la directive CSS @import :

<head>
    <noscript>
        <link href='content/noscript.css' rel='stylesheet' type='text/css' />
        <style type="text/css">
            @import url(/styles/jquery.fileupload-noscript.css);
            /* Autres styles inlines... */
        </style>
    </noscript>
</head>

A noter que la directive CSS @import semble mieux supportée par les navigateurs que la balise LINK.

Bouton SUBMIT en dehors de la balise FORM

Lorsqu’on a un design de page avec un bouton déclenchant le submit du formulaire qui est en dehors de la balise FORM, typiquement dans une barre d’outils, il est commun d’utiliser du JavaScript, par exemple en capturant le clic sur le bouton pour déclencher le submit. Cela permet en outre de personnaliser et/ou compléter la validation côté client intégrée en ASP.NET MVC.

En ‘noscript’, on n’a pas de validation côté client. Par contre, il est possible d’avoir ce design. L’astuce consiste alors en la combinaison de :

  1. un bouton submit à l’intérieur du formulaire et non visible,
  2. un LABEL pour ce bouton submit et placé en dehors du formulaire.
    → Le LABEL permet de cliquer à distance sur le bouton submit.
  3. Parish

En détail cela donne :

Code

Formulaire

<form>
    <input type="submit" id="submitButton" class="hidden-offscreen" />
</form>

Barre d’outils

<div class="navbar-fixed-bottom">
    <label class="btn btn-primary" id="saveButton" for="submitButton">
        <i class="fa fa-save"></i> Enregistrer
    </label>
</div>

Styles LESS

.offscreen {
    position: absolute;
    left: -50px;
}
.hidden-offscreen {
    .offscreen();
    width: 0;
    outline: none; // this prevents IE8 from having the line around it even though it's invisible
}

Script TypeScript/ES6

$("#saveButton").click(e => {
    // Valide => clic non stoppé, ce qui doit produire le submit
    if ($("form").valid() && validateDeeper()) {
        return;
    }

    // Non valide => stoppe clic et submit
    bootbox.alert(...);
    e.preventDefault();
});

Explications

Le bouton SUBMIT :

  • est situé dans la balise FORM,
  • a un identifiant référencé dans l’attribut FOR du LABEL.
  • Sa classe CSS permet de le masquer en le plaçant en dehors de l’écran mais sans le cacher totalement comme on pourrait le faire avec “display: none”.
    → Le but est de supporter certains navigateurs qui empêchent le clic d’un élément HTML non affiché.

Côté JavaScript :

  • On capture le clic sur le LABEL et non pas sur le bouton SUBMIT.
  • Si l’on utilise le plugin jquery.validate[.unobtrusive], on peut explicitement déclencher la validation côté client avec “$(“form”.valid()” ou laisser le plugin le faire au moment de l’événement “submit”.

Eléments HTML à états inversés en noscript

Il s’agit d’afficher, masquer ou bloquer des éléments HTML selon que la page soit en « noscript » ou non. Par exemple, en « noscript », on peut masquer ou bloquer un bouton qui déclenche une fonction JavaScript.

Techniquement, le principe est de :

  • Côté HTML :
    • Mettre en forme les éléments HTML tels qu’ils doivent être en « noscript ».
    • Au moyen de l’attribut “data-noscript” pouvant contenir “disabled” et/ou “hidden” ou “visible”, indiquer les états “noscript” à inverser au chargement du JavaScript.
  • Côté JavaScript :
    • Parcourir les éléments avec un attribut “data-noscript” pour leur inverser leur état.

Codes exemples pour cacher un groupe de boutons en « noscript » :

Vue HTML

<div class="btn-group hidden" data-noscript="hidden">...</div>

Script TypeScript/ES6

function initNoScript() {
    $("[data-noscript~='disabled']").removeAttr("disabled")
                                    .removeClass("disabled");
    $("[data-noscript~='hidden']"  ).removeClass("hidden")
                                    .show();
    $("[data-noscript~='visible']" ).hide();

    $("noscript").remove();
}
 
$(() => {
    ...
    initNoScript();
});

Conclusion

J’espère que ces éléments vous auront éveillés à la gestion “noscript” et pourront vous servir par la suite, afin d’améliorer l’expérience utilisateur et la qualité de vos sites.

© SOAT
Toute reproduction interdite sans autorisation de la société SOAT

Nombre de vue : 716

AJOUTER UN COMMENTAIRE