/ / Förhindra FOUC i samband med en Kentico 10 webbplats - zurb-foundation, kentico

Förhindra FOUC i samband med en Kentico 10 webbplats - zurb-foundation, kentico

Zurb Foundation rekommenderar lägger till class = "no-js" till sidan html-taggen för att förhindra Flash of Unstyled Content (FOUC).

Vi använder Kentico CMS. Jag letar efter "Kentico sättet" att lägga till en klass till html elementetikett på mastersidan. Vi använder CMS portal-motorn.

Vad vi ska åka till <html class="no-js"

Villig att falla tillbaka till ASP.NET om det inte finns ett mer tillvägagångssätt med Kentico-makron eller dess API.

svar:

3 för svaret № 1

På din mallsida portalsmall kan du lägga till en kod så här för att göra ändringen:

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

Du kan också ändra sidan CMSPagesPortalTemplate.aspx, men det stöds inte eller rekommenderas av Kentico eftersom det brukar bryta uppgraderingsvägen.


1 för svaret № 2

Det snabbaste sättet jag vet är att ändra CMSPagesPortalTemplate.aspx att lägga till din klass där inne

<%@ 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 för svaret № 3

"No-js" är ett standardvärde. Om din webbläsare verkligen stöder JavaScript, kommer "no-is" -klassan att tas bort av Modernizr-motorn.

Modernizr är ett JavaScript-bibliotek och det kommer att kontrollera webbläsarfunktionerna och uppdatera html class = "" mention.

Till exempel, om din webbläsare stöder flexbox-tekniken, läggs flexbox-klassen till html-klasslistan. I annat fall kommer ingen flexbox klass att läggas till.

Senare, när man använder CSS-ram (Bootstrap eller Foundation), kan vissa strategier användas för att emulera en saknad funktion.


Relaterade frågor


Kommentarer (0)

Lägg till en kommentar