Mục đích của lớp HTML không no-js là gì?

510

Tôi nhận thấy rằng trong rất nhiều công cụ mẫu, trong HTML5 Boilerplate , trong các khung khác nhau và trong các trang php đơn giản, có no-jslớp được thêm vào <HTML>thẻ.

Tại sao điều này được thực hiện? Có một số loại hành vi trình duyệt mặc định phản ứng với lớp này? Tại sao bao gồm nó luôn? Điều đó không làm cho chính lớp bị lỗi thời, nếu không có trường hợp không "không-js" và html có thể được giải quyết trực tiếp?

Dưới đây là một ví dụ từ chỉ mục Nồi hơi HTML5.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]-->

Như bạn có thể thấy, <html>phần tử sẽ luôn có lớp này. Ai đó có thể giải thích tại sao điều này được thực hiện thường xuyên như vậy?

— Swader
nguồn

493

Khi Modernizr chạy, nó loại bỏ lớp "no-js" và thay thế nó bằng "js". Đây là một cách để áp dụng các quy tắc CSS khác nhau tùy thuộc vào việc hỗ trợ Javascript có được bật hay không.

Xem mã nguồn của Modernizer .

— Gregory Pakosz
nguồn

5

Có một bài viết tuyệt vời khác về nó ở đây: alistapart.com/articles/ từ

— Hannele

47

Vì Modernizr thay thế "no-js" bằng "js", bạn có thể sử dụng điều này như một cách để thực hiện tương đương với câu lệnh if / other trong mã CSS của bạn. Ví dụ .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }và .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Hi vọng điêu nay co ich. -Nick

— skcin7

33

@Ringo: HTML 5 chỉ định rằng bất kỳ phần tử nào cũng có thể có classthuộc tính. Mặc dù về mặt kỹ thuật, HTML 4 không có, nhưng không có trình duyệt nào sử dụng nó; ngay cả những cái không hỗ trợ nó cũng bỏ qua nó và tôi đã không thấy một trong những trình duyệt đó trong nhiều năm.

— cHao

4

@ZachL Tôi nhận ra rằng tôi phải hút thuốc ở đây, nhưng đối với tôi điều đó .js { padding: ...}chỉ tốt vì bạn là người thực hiện nó mà cơ thể = .js. Trực tiếp hơn với quan điểm của bạn, có vẻ như bạn đang tuyên bố rằng điều đó body.jscòn tệ hơn cả .js bodyđiều mà tôi không theo dõi ...

— Wired_in

4

Điều đáng nói là html5-soạn sẵn nó <html>và không có vấn đề nào được báo cáo chống lại điều đó. Bằng cách nào đó, đưa nó vào <html>đã trở thành một thông lệ đã được thiết lập và mọi người ngay lập tức biết nó là gì và nó làm gì. Cuối cùng, đi chệch khỏi thực tiễn đó chỉ đặt ra nhiều câu hỏi hơn.

— Gregory Pakosz

109

Các no-jslớp học được sử dụng bởi Modernizr thư viện phát hiện tính năng. Khi Modernizr tải, nó thay thế no-jsbằng js. Nếu JavaScript bị vô hiệu hóa, lớp vẫn còn. Điều này cho phép bạn viết CSS dễ dàng nhắm mục tiêu một trong hai điều kiện.

Từ Nguồn Anotated của Modernizrs (không còn được duy trì) :

Xóa lớp "no-js" khỏi phần tử, nếu nó tồn tại: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Đây là một bài đăng trên blog của Paul Irish mô tả phương pháp này: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Tôi thích làm điều tương tự, nhưng không có Modernizr. Tôi đặt phần sau <script>vào <head>để thay đổi lớp thành jsnếu JavaScript được bật. Tôi thích sử dụng .replace("no-js","js")hơn phiên bản regex vì nó ít khó hiểu hơn và phù hợp với nhu cầu của tôi.

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

Trước kỹ thuật này, tôi thường chỉ áp dụng các kiểu phụ thuộc js trực tiếp với JavaScript. Ví dụ:

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

Với no-jsthủ thuật, điều này bây giờ có thể được thực hiện với css:

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

Điều này là thích hợp hơn bởi vì:

Nó tải nhanh hơn mà không có FOUC (flash nội dung không được lọc)
Phân tách các mối quan tâm, vv ...

— Zach Lysobey
nguồn

1

Phiên bản Modernizr sử dụng RegExp an toàn hơn (và có thể nhanh hơn).

— AndrewF

@AndrewF - bạn có thể mở rộng về điều đó một chút không? Làm thế nào chính xác là nó an toàn hơn?

— Zach Lysobey

12

@ZachL Phiên bản regrec (với \b) không khớp với cái gì đó anno-jsus, phiên bản khác thay đổi anjsus. no-jskhông phải là một chuỗi con điển hình của bất kỳ tên lớp nào, nhưng vẫn ở khía cạnh này, nó "an toàn" hơn với \bs.

— Cucu

40

Modernizr.js sẽ xóa no-jslớp.

Điều này cho phép bạn tạo các quy tắc CSS để .no-js somethingchỉ áp dụng chúng nếu Javascript bị tắt.

— SLaks
nguồn

17

Các no-jslớp học được gỡ bỏ bởi một kịch bản javascript, vì vậy bạn có thể sửa đổi / hiển thị / ẩn những thứ sử dụng css nếu js bị vô hiệu hóa.

— tháng ba
nguồn

Bạn đã nói "Lớp no-js bị xóa bởi tập lệnh javascript". Vì vậy, cách Javascript hoạt động (Có thể xóa lớp 'no-js') nếu nó bị vô hiệu hóa. Bạn có thể cho tôi một rõ ràng?

— haind

2

Bạn đúng và đây thực sự là vấn đề: Nếu JavaScript bị vô hiệu hóa, lớp sẽ ở lại và ví dụ bạn có thể hiển thị một số phần html bằng CSS để cảnh báo người dùng về nó. .no-js #js-warning {display: block;}

— marc

Xin lưu ý, lỗi JS có thể xảy ra sau khi Modernizr đã thực hiện việc này vì vậy đây không phải là cách kiểm tra JS hoàn hảo

— htmlr

11

Điều này không chỉ áp dụng trong Modernizer. Tôi thấy một số trang web triển khai như dưới đây để kiểm tra xem nó có hỗ trợ javascript hay không.

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

Nếu hỗ trợ javascript ở đó, thì nó sẽ xóa no-jslớp. Nếu không no-jssẽ vẫn còn trong thẻ cơ thể. Sau đó, họ kiểm soát các kiểu trong css khi không hỗ trợ javascript.

.no-js .some-class-name {

}

— Fizer Khan
nguồn

4

Nhìn vào mã nguồn trong Modernizer, phần này:

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

Vì vậy, về cơ bản, nó tìm kiếm classPrefix + no-jsclass và thay thế nó bằng classPrefix + js.

Và việc sử dụng đó, là kiểu dáng khác nhau nếu JavaScript không chạy trong trình duyệt.

— Alireza
nguồn

1

Lớp no-js được sử dụng để định kiểu trang web, tùy thuộc vào việc người dùng đã tắt hoặc bật JS trong trình duyệt.

Theo tài liệu Modernizr :

không-js

Theo mặc định, Modernizr sẽ viết lại <html class="no-js"> to <html class="js">. Điều này cho phép ẩn các yếu tố nhất định chỉ nên được phơi bày trong môi trường thực thi JavaScript. Nếu bạn muốn tắt thay đổi này, bạn có thể đặt enableJSClass thành false trong cấu hình của mình.

— JSON C11
nguồn