Apa tujuan dari kelas "no-js" HTML?

510

Saya perhatikan bahwa di banyak mesin templat, di HTML5 Boilerplate , di berbagai kerangka kerja dan di situs php biasa ada no-jskelas yang ditambahkan ke <HTML>tag.

Mengapa ini dilakukan? Apakah ada semacam perilaku browser default yang bereaksi terhadap kelas ini? Mengapa memasukkannya selalu? Apakah itu tidak membuat kelas itu sendiri usang, jika tidak ada kasus no- "no-js" dan html dapat diatasi secara langsung?

Berikut ini adalah contoh dari 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]-->

Seperti yang Anda lihat, <html>elemen akan selalu memiliki kelas ini. Adakah yang bisa menjelaskan mengapa hal ini sering dilakukan?

javascript html modernizr html5boilerplate Swader
sumber

Jawaban:

493

Ketika Modernizr berjalan, ia menghapus kelas "no-js" dan menggantinya dengan "js". Ini adalah cara untuk menerapkan aturan CSS yang berbeda tergantung pada apakah dukungan Javascript diaktifkan atau tidak.

Lihat kode sumber Modernizer .

Gregory Pakosz
sumber
5
Ada tulisan bagus lainnya di sini: alistapart.com/articles/…
Hannele
47
Karena Modernizr menggantikan "no-js" dengan "js", Anda dapat menggunakan ini sebagai cara untuk melakukan yang setara dengan pernyataan if / else dalam kode CSS Anda. Misalnya .myclass { /* CSS code for all versions of your page goes here */ },, .js .myclass { /* This CSS code will only show up if JS is enabled */ }dan .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Semoga ini membantu. -Nick
skcin7
33
@Ringo: HTML 5 menetapkan bahwa elemen apa pun dapat memiliki classatribut. Meskipun HTML 4 secara teknis tidak, tidak ada browser yang mencekiknya; bahkan yang tidak mendukungnya, abaikan saja, dan saya belum pernah melihat salah satu browser itu selama bertahun-tahun.
cao
4
@ Zach Saya menyadari saya harus merokok retak di sini, tetapi bagi saya sepertinya itu .js { padding: ...}baik-baik saja karena Anda tahu sebagai orang yang menerapkannya tubuh itu = .js. Lebih langsung ke poin Anda, tampaknya Anda mengklaim itu body.jslebih buruk daripada .js bodyyang tidak saya ikuti ...
wired_in
4
Perlu disebutkan html5-boilerplate memakainya <html>dan tidak ada masalah yang pernah dilaporkan terhadap hal itu. Entah bagaimana memakainya <html>telah menjadi praktik yang mapan dan orang-orang segera tahu apa itu dan apa fungsinya. Pada akhirnya, menyimpang dari praktik itu hanya menimbulkan lebih banyak pertanyaan.
Gregory Pakosz
109

The no-jskelas digunakan oleh Modernizr perpustakaan fitur deteksi. Ketika Modernizr dimuat, itu akan diganti no-jsdenganjs . Jika JavaScript dinonaktifkan, kelas tetap ada. Ini memungkinkan Anda untuk menulis CSS yang dengan mudah menargetkan kondisi mana pun.

Dari Sumber Anotasi Modernizrs (tidak lagi dipertahankan) :

Hapus kelas "no-js" dari elemen, jika ada: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Berikut ini adalah posting blog oleh Paul Irish yang menggambarkan pendekatan ini: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Saya suka melakukan hal yang sama, tetapi tanpa Modernizr. Saya menempatkan berikut ini <script>di <head>untuk mengubah kelas jsjika JavaScript diaktifkan. Saya lebih suka menggunakan .replace("no-js","js")lebih dari versi regex karena agak kurang samar dan sesuai dengan kebutuhan saya.

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

Sebelum teknik ini, saya biasanya hanya menerapkan gaya js-dependent secara langsung dengan JavaScript. Sebagai contoh:

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

Dengan no-jstrik ini, sekarang dapat dilakukan dengan css:

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

Ini lebih disukai karena:

  • Ini memuat lebih cepat tanpa FOUC (flash konten tanpa gaya)
  • Pemisahan masalah, dll ...
Zach Lysobey
sumber
1
Versi Modernizr menggunakan RegExp lebih aman (dan mungkin lebih cepat).
AndrewF
@AndrewF - bisakah Anda sedikit mengembangkannya? Bagaimana tepatnya lebih aman?
Zach Lysobey
12
@ZachL Versi regexp (with \b) tidak cocok dengan sesuatu seperti anno-jsus, yang lain mengubahnya anjsus. no-jsbukan substring khas dari setiap nama kelas, tetapi masih dalam hal ini "lebih aman" dengan \bs.
Cucu
40

Modernizr.js akan menghapus no-js kelas.

Ini memungkinkan Anda membuat aturan CSS untuk .no-js somethingmenerapkannya hanya jika Javascript dinonaktifkan.

Slaks
sumber
17

The no-jskelas akan dihapus oleh script javascript, sehingga Anda dapat memodifikasi / display / menyembunyikan hal menggunakan css jika js dinonaktifkan.

marc
sumber
Anda berkata "Kelas no-js dihapus oleh skrip javascript". Jadi bagaimana Javascript bekerja (Mampu menghapus kelas 'no-js') jika dinonaktifkan. Bisakah Anda memberi saya jelas?
haind
2
Anda benar dan ini sebenarnya intinya: Jika JavaScript dinonaktifkan, kelas akan tetap ada dan Anda dapat misalnya menunjukkan beberapa bagian html menggunakan CSS untuk memperingatkan pengguna tentang hal itu. .no-js #js-warning {display: block;}
marc
Ketahuilah, kesalahan JS dapat terjadi setelah Modernizr melakukan ini sehingga ini bukan cara yang mudah untuk menguji JS berfungsi
htmlr
11

Ini tidak hanya berlaku di Modernizer. Saya melihat beberapa situs menerapkan seperti di bawah ini untuk memeriksa apakah ia memiliki dukungan javascript atau tidak.

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

Jika ada dukungan javascript, maka itu akan menghapus no-jskelas. Kalau tidak, no-jsakan tetap di tag tubuh. Kemudian mereka mengontrol gaya di css ketika tidak ada dukungan javascript.

.no-js .some-class-name {

}
Fizer Khan
sumber
4

Lihatlah kode sumber di Modernizer, bagian ini:

// 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');
}

Jadi pada dasarnya ia mencari classPrefix + no-jsclass dan menggantinya dengan classPrefix + js.

Dan penggunaan itu, adalah gaya berbeda jika JavaScript tidak berjalan di browser.

Alireza
sumber
1

Kelas no-js digunakan untuk menata halaman web, tergantung pada apakah pengguna menonaktifkan atau mengaktifkan JS di browser.

Sesuai dokumen Modernizr :

no-js

Secara default, Modernizr akan menulis ulang <html class="no-js"> to <html class="js">. Ini memungkinkan menyembunyikan elemen tertentu yang seharusnya hanya diekspos di lingkungan yang mengeksekusi JavaScript. Jika Anda ingin menonaktifkan perubahan ini, Anda bisa mengatur enableJSClass ke false di konfigurasi Anda.

JSON C11
sumber