在 Kentico 10 网站的上下文中防止 FOUC答案

【问题标题】：Prevent FOUC in context of a Kentico 10 website在 Kentico 10 网站的上下文中防止 FOUC
【发布时间】：2018-01-23 14:45:18
【问题描述】：

Zurb 基金会推荐 adding class="no-js" to the page html tag 以防止 Flash of Unstyled Content (FOUC)。

我们正在使用 Kentico CMS。我正在寻找将类添加到母版页中的html 元素标记的“Kentico 方式”。我们正在使用 CMS 门户引擎。

我们的目标 <html class="no-js"

如果没有更平易近人的方式使用 Kentico 宏或其 API，我愿意退回到 ASP.NET。

【问题讨论】：

标签： zurb-foundation kentico

【解决方案1】：

在您的母版页门户模板上，您可以添加一些类似这样的代码来进行修改：

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

您也可以修改 \CMSPages\PortalTemplate.aspx 页面，但 Kentico 不支持或不推荐这样做，因为它通常会破坏升级路径。

【讨论】：

感谢@Brenden，我在发布此问题时担心升级路径 - 感谢您指出这一点。

【解决方案2】：

据我所知，最快的方法是修改CMSPages\PortalTemplate.aspx 以在其中添加您的课程。

<%@ 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">
...

【讨论】：

我的一个担忧是破坏了升级路径，尽管这是一个很小的更改，以确保在升级发生时注意。谢谢。
公平点，@JohnK。肯定需要在解决方案文档中记录此类内容。 ?

【解决方案3】：

“no-js”是一个默认值。如果您的浏览器确实支持 JavaScript，则 Modernizr 引擎将删除“no-is”类。

Modernizr 是一个 JavaScript 库，它将检查浏览器功能并更新 html class="" 提及。

例如，如果您的浏览器支持 flexbox 技术，则 flexbox 类将被添加到 html 类列表中。否则，将添加 no-flexbox 类。

稍后，当使用 CSS 框架（Bootstrap 或 Foundation）时，可以使用一些策略来模拟缺失的功能。

【讨论】：