จุดประสงค์ของคลาส“ no-js” HTML คืออะไร?

510

ฉันสังเกตเห็นว่าในเทมเพลตเอ็นจิ้นจำนวนมากในHTML5 Boilerplateในเฟรมเวิร์กต่าง ๆ และในไซต์ php ธรรมดามีno-jsคลาสที่เพิ่มลงใน<HTML>แท็ก

ทำไมถึงทำเช่นนี้? มีพฤติกรรมเบราว์เซอร์เริ่มต้นบางประเภทที่ตอบสนองต่อคลาสนี้ ทำไมรวมถึงมันเสมอ? ที่ไม่ทำให้ชั้นเรียนของตัวเองล้าสมัยถ้าไม่มีกรณี "no-js" และ html สามารถแก้ไขได้โดยตรง?

นี่คือตัวอย่างจาก HTML5 Boilerplate index.html:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

อย่างที่คุณเห็น<html>องค์ประกอบจะมีคลาสนี้เสมอ บางคนสามารถอธิบายได้ว่าทำไมสิ่งนี้ถึงเกิดขึ้นบ่อยครั้ง

— Swader
แหล่งที่มา

493

เมื่อ Modernizr ทำงานจะเป็นการลบคลาส "no-js" และแทนที่ด้วย "js" นี่เป็นวิธีการใช้กฎ CSS ที่แตกต่างกันขึ้นอยู่กับว่ารองรับจาวาสคริปต์หรือไม่

ดูรหัสที่มาปฏิรูปของ

— เกรกอรี่ Pakosz
แหล่งที่มา

5

มีอีกดีเขียนขึ้นบนมันนี่: alistapart.com/articles/...

— Hannele

47

เนื่องจาก Modernizr แทนที่ "no-js" ด้วย "js" คุณสามารถใช้สิ่งนี้เป็นวิธีในการทำคำสั่ง if / else ใน CSS code ของคุณ ตัวอย่างเช่น.myclass { /* CSS code for all versions of your page goes here */ }, และ.js .myclass { /* This CSS code will only show up if JS is enabled */ } .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }หวังว่านี่จะช่วยได้ -Nick

— skcin7

33

@Ringo: HTML 5 ระบุว่าองค์ประกอบใด ๆอาจมีclassแอตทริบิวต์ ถึงแม้ว่าในทางเทคนิคแล้ว HTML 4 จะไม่เกิดขึ้น แม้แต่อันที่ไม่สนับสนุนก็แค่เพิกเฉยและฉันก็ไม่ได้เห็นเบราว์เซอร์ตัวใดตัวหนึ่งในปีที่ผ่านมา

— cHao

4

@ZachL ฉันรู้ว่าฉันจะต้องสูบบุหรี่ที่นี่ แต่ดูเหมือนว่าฉัน.js { padding: ...}จะไม่เป็นไรเพราะคุณรู้ว่าเป็นคนที่นำมันมาใช้ร่างกาย = .js ตรงไปยังจุดของคุณดูเหมือนว่าคุณกำลังอ้างว่าbody.jsเลวร้ายยิ่งกว่า.js bodyที่ฉันไม่ได้ติดตาม ...

— wired_in

4

มันคุ้มค่าที่จะกล่าวถึง html5-boilerplate <html>และไม่เคยมีรายงานว่ามีปัญหา อย่างใดการใส่ไว้ใน<html>ได้กลายเป็นแบบฝึกหัดที่จัดตั้งขึ้นและผู้คนทันทีรู้ว่ามันคืออะไรและมันทำอะไร ในท้ายที่สุดการเบี่ยงเบนจากการฝึกฝนเพียงแค่ตั้งคำถามเพิ่มเติม

— Gregory Pakosz

109

no-jsระดับจะถูกใช้โดยModernizrคุณลักษณะห้องสมุดการตรวจสอบ เมื่อโหลด Modernizr จะแทนที่ด้วยno-js jsหากปิดใช้งาน JavaScript คลาสจะยังคงอยู่ สิ่งนี้ช่วยให้คุณสามารถเขียน CSS ซึ่งง่ายต่อการกำหนดเงื่อนไขอย่างใดอย่างหนึ่ง

จากAnizated 'Modernizrs' Source (ไม่มีการดูแลอีกต่อไป) :

ลบคลาส "no-js" ออกจากองค์ประกอบหากมีอยู่: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

นี่คือบล็อกโพสต์โดย Paul Irish อธิบายวิธีการนี้: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

ฉันชอบทำสิ่งเดียวกัน แต่ไม่มี Modernizr ฉันใส่สิ่งต่อไปนี้<script>ใน<head>เพื่อเปลี่ยนคลาสเป็นjsหากเปิดใช้งาน JavaScript ฉันชอบที่จะใช้.replace("no-js","js")มากกว่ารุ่น regex เพราะมันเป็นความลับน้อยลงและเหมาะสมกับความต้องการของฉัน

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

ก่อนหน้าเทคนิคนี้ฉันมักจะใช้สไตล์ js-dependent โดยตรงกับ JavaScript ตัวอย่างเช่น:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

ด้วยno-jsเคล็ดลับตอนนี้สามารถทำได้ด้วยcss:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

สิ่งนี้ดีกว่าเพราะ:

มันโหลดเร็วขึ้นโดยไม่มี FOUC (แฟลชของเนื้อหาที่ไม่มีการจัดรูปแบบ)
การแยกข้อกังวล ฯลฯ ...

— Zach Lysobey
แหล่งที่มา

1

เวอร์ชัน Modernizr ที่ใช้ RegExp นั้นปลอดภัยกว่า (และน่าจะเร็วกว่า)

— AndrewF

@AndrewF - คุณอาจจะขยายตัวเล็กน้อย มันปลอดภัยแค่ไหน?

— Zach Lysobey

12

@ZachL รุ่น regexp (กับ\b) ไม่ตรงกับสิ่งที่ต้องการanno-jsusการเปลี่ยนแปลงอื่น ๆ anjsusก็จะ no-jsไม่ใช่สตริงย่อยทั่วไปของชื่อคลาสใด ๆ แต่ยังคงอยู่ในส่วนนี้ว่า "ปลอดภัย" กับ\bs

— Cucu

40

Modernizr.js จะลบno-jsคลาสออก

สิ่งนี้ช่วยให้คุณสร้างกฎ CSS สำหรับ.no-js somethingใช้กับมันเฉพาะเมื่อปิดการใช้งาน Javascript

— SLaks
แหล่งที่มา

17

no-jsระดับได้รับการลบออกโดยสคริปต์จาวาสคริปต์เพื่อให้คุณสามารถแก้ไข / แสดง / ซ่อนสิ่งที่ใช้ CSS ถ้า js ถูกปิดใช้งาน

— รายการ MARC
แหล่งที่มา

คุณพูดว่า "คลาส no-js ถูกลบโดยสคริปต์ javascript" ดังนั้นวิธีการทำงานของ Javascript (สามารถลบคลาส 'no-js') ได้หากปิดใช้งานอยู่ คุณช่วยบอกล้างฉันได้ไหม

— haind

2

คุณพูดถูกและนี่คือประเด็น: หากปิดการใช้งาน JavaScript คลาสจะยังคงอยู่และคุณสามารถแสดงส่วน html โดยใช้ CSS เพื่อเตือนผู้ใช้เกี่ยวกับเรื่องนี้ .no-js #js-warning {display: block;}

— marc

ระวังข้อผิดพลาดของ JS อาจเกิดขึ้นหลังจาก Modernizr ทำเช่นนี้ดังนั้นวิธีการทดสอบ JS ที่ใช้การไม่ได้จะผิดพลาด

— htmlr

11

สิ่งนี้ไม่เพียงใช้ใน Modernizer ฉันเห็นบางเว็บไซต์ใช้งานด้านล่างเพื่อตรวจสอบว่ามีการสนับสนุนจาวาสคริปต์หรือไม่

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

หากมีการรองรับจาวาสคริปต์จะมีการลบno-jsคลาสออก มิฉะนั้นno-jsจะยังคงอยู่ในแท็กเนื้อหา จากนั้นพวกเขาควบคุมสไตล์ใน css เมื่อไม่รองรับจาวาสคริปต์

.no-js .some-class-name {

}

— Fizer Khan
แหล่งที่มา

4

ดูซอร์สโค้ดใน Modernizer ส่วนนี้:

// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

ดังนั้นโดยทั่วไปมันค้นหา classPrefix + no-jsชั้นและแทนที่ด้วย classPrefix js+

และการใช้งานนั้นก็มีสไตล์ที่แตกต่างกันหาก JavaScript ไม่ทำงานในเบราว์เซอร์

— Alireza
แหล่งที่มา

1

คลาส no-js ใช้เพื่อจัดรูปแบบหน้าเว็บขึ้นอยู่กับว่าผู้ใช้ปิดใช้งาน JS หรือเปิดใช้งานในเบราว์เซอร์

ตามเอกสาร Modernizr :

ไม่มี js

โดยค่าเริ่มต้น Modernizr <html class="no-js"> to <html class="js">จะเขียน สิ่งนี้ช่วยให้ซ่อนองค์ประกอบบางอย่างที่ควรเปิดเผยในสภาพแวดล้อมที่เรียกใช้ JavaScript หากคุณต้องการปิดการใช้งานการเปลี่ยนแปลงนี้คุณสามารถตั้ง enableJSClass เป็น false ในการกำหนดค่าของคุณ

— JSON C11
แหล่งที่มา