/ / ป้องกัน FOUC ในบริบทของเว็บไซต์ Kentico 10 - zurb-foundation, kentico

ป้องกัน FOUC ในบริบทของเว็บไซต์ Kentico 10 - zurb-foundation, kentico

มูลนิธิ Zurb แนะนำ เพิ่ม class = "no-js" ลงในแท็ก html ของเพจ เพื่อป้องกันไม่ให้ Flash ของ Unstyled Content (FOUC)

เราใช้ Kentico CMS ฉันกำลังมองหา "Kentico way" ในการเพิ่มชั้นเรียนให้กับ html แท็กองค์ประกอบในหน้าหลัก เรากำลังใช้เครื่องมือพอร์ทัล CMS

สิ่งที่เรากำลังทำอยู่ <html class="no-js"

ยินดีที่จะถอยกลับเข้าสู่ ASP.NET ถ้ามี "ไม่ใช่วิธีเข้าถึงได้มากขึ้นโดยใช้มาโคร Kentico หรือ API

คำตอบ:

3 สำหรับคำตอบ№ 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>

นอกจากนี้คุณยังสามารถปรับเปลี่ยนหน้า CMSPagesPortalTemplate.aspx ด้วย แต่ไม่ได้รับการสนับสนุนหรือแนะนำโดย Kentico เนื่องจากมักจะแบ่งเส้นทางการอัปเกรด


1 สำหรับคำตอบ№ 2

วิธีที่เร็วที่สุดที่ฉันรู้จักคือการแก้ไข CMSPagesPortalTemplate.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">
...

0 สำหรับคำตอบ№ 3

ค่าเริ่มต้นคือ "no-js" หากเบราว์เซอร์ของคุณไม่มี SUPPORT JavaScript จะไม่มีการยกเลิกคลาส "no-is" โดยใช้ Modernizr engine

Modernizr เป็นไลบรารี JavaScript และจะตรวจสอบความสามารถของเบราเซอร์และอัปเดตการอ้างอิง html class = ""

ตัวอย่างเช่นหากเบราว์เซอร์ของคุณรองรับเทคโนโลยี flexbox ชั้น flexbox จะถูกเพิ่มลงในรายการคลาส html มิเช่นนั้นจะไม่มีการเพิ่มคลาสที่ไม่มี flexbox

ต่อมาเมื่อใช้กรอบ CSS (Bootstrap หรือ Foundation) กลยุทธ์บางอย่างอาจใช้เพื่อเลียนแบบคุณลักษณะที่ขาดหายไป


คำถามที่เกี่ยวข้อง


ความคิดเห็น (0)

เพิ่มความคิดเห็น