/ / Prevenire il FOUC nel contesto di un sito Web di Kentico 10 - zurb-foundation, kentico

Prevenire il FOUC nel contesto di un sito Web di Kentico 10 - zurb-foundation, kentico

Fondazione Zurb raccomanda aggiungendo class = "no-js" al tag html della pagina prevenire contro Flash of Unstyled Content (FOUC).

Stiamo utilizzando Kentico CMS. Sto cercando il "modo Kentico" di aggiungere una classe al html tag elemento nella pagina principale. Stiamo utilizzando il motore del portale CMS.

Cosa stiamo andando <html class="no-js"

Disposto a rientrare in ASP.NET se non esiste un modo più accessibile utilizzando le macro di Kentico o la sua API.

risposte:

3 per risposta № 1

Sul modello di portale della pagina principale è possibile aggiungere del codice come questo per apportare tale modifica:

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

È anche possibile modificare la pagina CMSPagesPortalTemplate.aspx ma questa non è supportata o consigliata da Kentico poiché in genere interrompe il percorso di aggiornamento.


1 per risposta № 2

Il modo più veloce che conosco è quello di modificare CMSPagesPortalTemplate.aspx per aggiungere la tua classe lì.

<%@ 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 per risposta № 3

Il "no-js" è un valore predefinito. Se, in effetti, il tuo browser SUPPORTA JavaScript, la classe "no-is" verrà rimossa dal motore Modernizr.

Modernizr è una libreria JavaScript e controllerà le funzionalità del browser e aggiornerà la menzione html class = "".

Ad esempio, se il browser supporta la tecnologia flexbox, la classe flexbox verrà aggiunta all'elenco di classi html. Altrimenti, verrà aggiunta la classe no-flexbox.

Successivamente, quando si utilizza il framework CSS (Bootstrap o Foundation), alcune strategie potrebbero essere utilizzate per emulare una funzionalità mancante.


domande correlate


Commenti (0)

Aggiungi un commento