/ / FOUC im Kontext einer Kentico 10 Website verhindern - zurb-foundation, kentico

Verhindere FOUC im Kontext einer Kentico 10 Website - zurb-foundation, kentico

Zurb-Stiftung empfiehlt Hinzufügen von class = "no-js" zum HTML-Tag der Seite vor Flash of Unstyled Content (FOUC) zu verhindern.

Wir verwenden Kentico CMS. Ich bin auf der Suche nach dem "Kentico Weg", um eine Klasse hinzuzufügen html Element-Tag in der Masterseite. Wir verwenden die CMS-Portal-Engine.

Was wir anstreben <html class="no-js"

Bereit, auf ASP.NET zurückzugreifen, wenn es keine leichter zugängliche Möglichkeit gibt, Kentico-Makros oder seine API zu verwenden.

Antworten:

3 für die Antwort № 1

Auf Ihrer Masterseiten-Portalvorlage können Sie einen Code wie diesen hinzufügen, um diese Änderung vorzunehmen:

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

Sie können auch die Seite CMSPagesPortalTemplate.aspx ändern, aber diese wird von Kentico nicht unterstützt oder empfohlen, da sie den Aktualisierungspfad normalerweise unterbricht.


1 für die Antwort № 2

Der schnellste Weg, den ich kenne, ist das Ändern CMSPagesPortalTemplate.aspx um deine Klasse dort hinzuzufügen.

<%@ 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 die Antwort № 3

Das "no-js" ist ein Standardwert. Wenn Ihr Browser tatsächlich JavaScript unterstützt, wird die "no-is" -Klasse von der Modernizr-Engine entfernt.

Modernizr ist eine JavaScript-Bibliothek und es wird die Browser-Fähigkeiten überprüfen und die HTML-Klasse aktualisieren = "" erwähnen.

Wenn Ihr Browser beispielsweise die Flexbox-Technologie unterstützt, wird die Flexbox-Klasse zur html-Klassenliste hinzugefügt. Andernfalls wird die no-flexbox-Klasse hinzugefügt.

Wenn später ein CSS-Framework (Bootstrap oder Foundation) verwendet wird, könnten einige Strategien verwendet werden, um ein fehlendes Feature zu emulieren.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen