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?

— Swader
sumber

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