/ / Prevent FOUC no contexto de um site da Kentico 10 - zurb-foundation, kentico

Evitar FOUC no contexto de um site da Kentico 10 - zurb-foundation, kentico

Fundação Zurb recomenda adicionando class = "no-js" à tag html da página para prevenir contra Flash de Unstyled Content (FOUC).

Estamos usando o Kentico CMS. Eu estou procurando o "caminho Kentico" de adicionar uma classe ao html tag de elemento na página mestra. Estamos usando o mecanismo de portal do CMS.

O que nós estamos indo para <html class="no-js"

Disposto a voltar para o asp.net, se não há uma maneira mais acessível usando macros Kentico ou sua API.

Respostas:

3 para resposta № 1

Em seu modelo de portal da página mestra, você pode adicionar algum código como este para fazer essa modificação:

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

Você também pode modificar a página CMSPagesPortalTemplate.aspx, mas isso não é suportado ou recomendado pelo Kentico, pois normalmente ele interrompe o caminho de atualização.


1 para resposta № 2

A maneira mais rápida que conheço é modificar CMSPagesPortalTemplate.aspx para adicionar sua 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 para resposta № 3

O “no-js” é um valor padrão. Se, de fato, seu navegador SUPPORT JavaScript, a classe "no-is" será removida pelo mecanismo Modernizr.

O Modernizr é uma biblioteca JavaScript e verificará as capacidades do navegador e atualizará a menção html class = "".

Por exemplo, se o seu navegador suportar a tecnologia flexbox, a classe flexbox será adicionada à lista de classes html. Caso contrário, nenhuma classe flexbox será adicionada.

Posteriormente, ao usar o framework CSS (Bootstrap ou Foundation), algumas estratégias poderiam ser usadas para emular um recurso ausente.


Perguntas relacionadas


Comentários (0)

Adicione um comentário