HTML “no-js” sınıfının amacı nedir?

510

Çok sayıda şablon motorunda, HTML5 Boilerplate'te , çeşitli çerçevelerde ve düz php sitelerinde etikete no-jseklenen sınıfın olduğunu fark ettim <HTML>.

Bu neden yapılır? Bu sınıfa tepki veren bir tür varsayılan tarayıcı davranışı var mı? Neden hep dahil etmeliyim? "No-js" durumu yoksa ve html doğrudan adreslenebiliyorsa, bu sınıfın kendisini geçersiz kılmaz mı?

HTML5 Boilerplate index.html'den bir örnek:

<!--[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]-->

Gördüğünüz gibi, <html>eleman her zaman bu sınıfa sahip olacaktır. Birisi bunun neden bu kadar sık yapıldığını açıklayabilir mi?

— Swader
kaynak

493

Modernizr çalıştığında, "no-js" sınıfını kaldırır ve "js" ile değiştirir. Bu, Javascript desteğinin etkin olup olmamasına bağlı olarak farklı CSS kuralları uygulamanın bir yoludur.

Bkz. Modernizer kaynak kodu .

— Gregory Pakosz
kaynak

5

Burada başka bir harika yazı var: alistapart.com/articles/…

— Hannele

47

Modernizr, "no-js" ifadesini "js" ile değiştirdiğinden, bunu CSS kodunuzda bir if / else ifadesinin eşdeğerini yapmanın bir yolu olarak kullanabilirsiniz. Örneğin .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }ve .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Bu yardımcı olur umarım. Nick

— skcin7

33

@Ringo: HTML 5, herhangi bir öğenin bir classniteliğe sahip olabileceğini belirtir . HTML 4 teknik olarak yapmasa da, hiçbir tarayıcı boğulmuyor; desteklemeyenler bile onu görmezden geliyor ve ben yıllardır bu tarayıcılardan birini görmedim.

— cHao

4

@ZachL Ben burada çatlak sigara olması gerektiğini fark, ama bana öyle geliyor ki .js { padding: ...}o vücut = .js uygulayan olarak bildiğiniz için iyi. Daha doğrudan sizin açınızdan, body.js.js body

— izlemediğimden

4

Html5-boilerplate'den bahsetmeye değer <html>ve buna karşı herhangi bir sorun bildirilmedi. Bir şekilde ortaya koymak <html>yerleşik bir uygulama haline geldi ve insanlar ne olduğunu ve ne yaptığını hemen biliyorlar. Sonunda, bu uygulamadan sapmak daha fazla soru ortaya çıkarır.

— Gregory Pakosz

109

no-jsSınıf tarafından kullanılan Modernizr özelliği algılama kitaplığı. Ne zaman Modernizr yükler, yerini aldığı no-jsile js. JavaScript devre dışı bırakılırsa, sınıf kalır. Bu, her iki durumu da kolayca hedefleyen CSS yazmanıza olanak tanır.

Gönderen Modernizrs' Anotated Kaynak (artık tutulan) :

Varsa, "no-js" sınıfını öğeden kaldırın: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Paul Irish'ın bu yaklaşımı anlatan bir blog yazısı: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Aynı şeyi yapmayı seviyorum, ama Modernizr olmadan. Ben aşağıdaki koymak <script>içinde <head>hiç sınıfını değiştirmek için jsJavaScript etkinse. Ben .replace("no-js","js")regex sürümü üzerinde kullanmayı tercih çünkü biraz daha az şifreli ve benim ihtiyaçlarına uygun.

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

Bu teknikten önce, genellikle js bağımlı stilleri doğrudan JavaScript ile uygularım. Örneğin:

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

İle no-jshile, bu Şimdi ile yapılabilir css:

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

Bu tercih edilir çünkü:

FOUC (huzursuz içeriğin parlaması) olmadan daha hızlı yüklenir
Endişelerin ayrılması, vb ...

— Zach Lysobey
kaynak

1

RegExp kullanan Modernizr sürümü daha güvenli (ve muhtemelen daha hızlı).

— AndrewF

@AndrewF - belki biraz daha genişletebilir misin? Tam olarak ne kadar güvenli?

— Zach Lysobey

12

@ZachL Normal ifade sürümü (ile \b) benzer bir şeyle eşleşmiyor anno-jsus, diğeri bunu değiştiriyor anjsus. no-jsherhangi bir sınıf adının tipik bir alt dizesi değildir, ancak yine de bu açıdan \bs ile "daha güvenlidir" .

— Cucu

40

Modernizr.js no-js sınıfı .

Bu, .no-js somethingyalnızca Javascript devre dışı bırakılmışsa bunları uygulamak için CSS kuralları belirlemenizi sağlar.

— SLaks
kaynak

17

no-jsJs engelli olup olmadığını / ekran / gizleme şeyler kullanarak css değiştirebilir böylece sınıf, bir javascript komut dosyası tarafından kaldırılır.

— üzüm posası
kaynak

"No-js sınıfı bir javascript betiği tarafından kaldırılır" dediniz. Yani Javascript nasıl çalışır ('no-js' sınıfını kaldırabilir) devre dışı bırakılmışsa. Bana açıklık getirebilir misin?

— Aralık'ta

2

Haklısınız ve asıl mesele şu: JavaScript devre dışı bırakılmışsa, sınıf kalacak ve örneğin kullanıcıyı bu konuda uyarmak için CSS kullanarak bazı html bölümlerini gösterebilirsiniz. .no-js #js-warning {display: block;}

— marc

Modernizr bunu yaptıktan sonra JS hataları oluşabilir, bu yüzden JS'nin kusursuz bir test yöntemi çalışmıyor

— htmlr

11

Bu sadece Modernizer'de geçerli değildir. Javascript desteğine sahip olup olmadığını kontrol etmek için aşağıdaki gibi bazı site uygulamaları görüyorum.

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

Javascript desteği varsa, no-jssınıfı kaldıracaktır . Aksi takdirde no-jsgövde etiketinde kalacaktır. Daha sonra herhangi bir javascript desteği olmadığında css'deki stilleri kontrol ederler.

.no-js .some-class-name {

}

— Fizer Han
kaynak

4

Modernizer'deki kaynak koduna bakın, bu bölüm:

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

Temelde classPrefix + no-jssınıfını arar ve classPrefix + ile değiştirir js.

Ve bunun kullanımı, JavaScript tarayıcıda çalışmıyorsa farklı şekilleniyor.

— Alireza
kaynak

1

No-js sınıfı, kullanıcının tarayıcıda JS'nin devre dışı bırakılmış veya etkinleştirilmiş olmasına bağlı olarak bir web sayfasını biçimlendirmek için kullanılır.

Gereğince Modernizr docs :

no-js

Varsayılan olarak, Modernizr yeniden yazacaktır <html class="no-js"> to <html class="js">. Bu, yalnızca JavaScript çalıştıran ortamlarda gösterilmesi gereken belirli öğeleri gizlemenizi sağlar. Bu değişikliği devre dışı bırakmak istiyorsanız, configJSClass öğesini config değerinde false olarak ayarlayabilirsiniz.

— JSON C11
kaynak