/ / Prevent FOUC dans le contexte d’un site Web Kentico 10 - zurb-foundation, kentico

Prevent FOUC dans le contexte d'un site Web Kentico 10 - zurb-foundation, kentico

La Fondation Zurb recommande ajout de class = "no-js" à la balise HTML de la page pour prévenir contre Flash of Unstyled Content (FOUC).

Nous utilisons Kentico CMS. Je cherche la "manière Kentico" d’ajouter une classe à la html balise d'élément dans la page maître. Nous utilisons le moteur de portail CMS.

Ce que nous allons faire <html class="no-js"

Vouloir retomber dans ASP.NET s’il n’ya pas de méthode plus accessible en utilisant les macros de Kentico ou son API.

Réponses:

3 pour la réponse № 1

Sur votre modèle de portail de pages maîtres, vous pouvez ajouter du code comme celui-ci pour effectuer cette modification:

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (CurrentDocument != null)
{
CMS.UIControls.ContentPage page= this.Page as CMS.UIControls.ContentPage;
if (page != null)
{
page.XmlNamespace += " class="no-js"";
}
}
}
</script>

Vous pouvez également modifier la page CMSPagesPortalTemplate.aspx mais cela n’est ni pris en charge ni recommandé par Kentico, car elle coupe généralement le chemin de la mise à niveau.


1 pour la réponse № 2

Le moyen le plus rapide que je connaisse est de modifier CMSPagesPortalTemplate.aspx d'ajouter votre classe là-bas.

<%@ Page Language="C#" AutoEventWireup="true" Inherits="CMSPages_PortalTemplate" ValidateRequest="false" MaintainScrollPositionOnPostback="true" EnableEventValidation="false" Codebehind="PortalTemplate.aspx.cs" %>

<%=DocType%>
<html <%=XHtmlNameSpace%> <%=XmlNamespace%> class="no-js">
<head id="head" runat="server" enableviewstate="false">
...

0 pour la réponse № 3

Le «non-js» est une valeur par défaut. Si, en effet, votre navigateur supporte JavaScript, la classe «non-is» sera supprimée par le moteur Modernizr.

Modernizr est une bibliothèque JavaScript qui vérifie les capacités du navigateur et met à jour la mention html class = "”.

Par exemple, si votre navigateur prend en charge la technologie flexbox, la classe flexbox sera ajoutée à la liste des classes html. Sinon, la classe no-flexbox sera ajoutée.

Plus tard, lors de l'utilisation de l'infrastructure CSS (Bootstrap ou Foundation), certaines stratégies pourraient être utilisées pour émuler une fonctionnalité manquante.


questions connexes


Commentaires (0)

Ajouter un commentaire