HTML“no-js”클래스의 목적은 무엇입니까?

510

많은 템플릿 엔진, HTML5 Boilerplate , 다양한 프레임 워크 및 일반 PHP 사이트 no-js에 <HTML>태그에 클래스가 추가되어 있음을 알았습니다 .

왜 이렇게됩니까? 이 클래스에 반응하는 일종의 기본 브라우저 동작이 있습니까? 왜 항상 포함해야합니까? "no-js"사례가없고 html을 직접 처리 할 수있는 경우 클래스 자체가 더 이상 사용되지 않습니까?

다음은 HTML5 보일러 플레이트 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>요소에는 항상이 클래스가 있습니다. 누군가 왜 이렇게 자주 그렇게 설명 할 수 있습니까?

— 스 웨더
소스

493

Modernizr은 "no-js"클래스를 제거하고 "js"로 대체합니다. 이것은 자바 스크립트 지원의 활성화 여부에 따라 다른 CSS 규칙을 적용하는 방법입니다.

Modernizer의 소스 코드를 참조하십시오 .

— 그레고리 파 코스
소스

5

여기에 또 다른 훌륭한 글이 있습니다 : alistapart.com/articles/…

— Hannele

47

Modernizr은 "no-js"를 "js"로 대체하므로 CSS 코드에서 if / else 문과 동등한 방법으로이를 사용할 수 있습니다. 예를 들어 .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. */ }. 도움이 되었기를 바랍니다. 닉

— skcin7

33

@Ringo : HTML 5는 모든 요소가 class속성을 가질 수 있도록 지정 합니다. HTML 4는 기술적으로는 그렇지 않지만 브라우저에 질식하지 않습니다. 그것을 지원하지 않는 브라우저조차도 무시하고 몇 년 동안 그 브라우저 중 하나를 보지 못했습니다.

— cHao

4

@ ZachL 나는 여기서 흡연 균열을 깨달아야한다는 것을 알고 있지만, .js { padding: ...}그 몸 = .js를 구현 한 사람으로 알고 있기 때문에 나에게 괜찮은 것 같습니다 . 당신의 요점에 더 직접적으로, 당신이 내가 따르지 않는 body.js것보다 더 나쁘다고 주장하는 것 .js body같습니다 ...

— wired_in

4

html5-보일러 플레이트가 장착되어 <html>있으며 이에 대해 아무런 문제도보고되지 않았습니다. 어떻게 든 그것을 <html>확립 된 관행이되었고 사람들은 그것이 무엇인지 그리고 무엇을 즉시 알 수 있습니다. 결국, 그 관행에서 벗어나면 더 많은 질문이 제기됩니다.

— Gregory Pakosz

109

그만큼 no-js 클래스는 Modernizr 기능 감지 라이브러리 에서 사용됩니다 . 때 모더 나이저가로드, 그것은 대체 no-js와 함께 js. JavaScript가 비활성화되어 있으면 클래스가 그대로 유지됩니다. 이를 통해 두 조건 중 하나를 쉽게 대상으로하는 CSS를 작성할 수 있습니다.

에서 Modernizrs 'Anotated 소스 (더 이상 유지) :

존재하는 경우 "no-js"클래스를 요소에서 제거하십시오. docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

다음은 이러한 접근 방식을 설명하는 Paul Irish의 블로그 게시물입니다. http://www.paulirish.com/2009/avoiding-the-fouc-v3/

나는 Modernizr 없이이 같은 일을하고 싶습니다. JavaScript가 활성화 된 경우 클래스를 변경 하려면 다음 <script>을 입력하십시오 . 나는 정규식 버전보다 사용하기 를 선호 합니다.<head>js.replace("no-js","js")

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

이 기술 이전에는 일반적으로 JavaScript를 사용하여 js 종속 스타일을 직접 적용합니다. 예를 들면 다음과 같습니다.

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

no-js트릭을 사용하면 다음 과 같이 할 수 있습니다 css.

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

이것은 다음과 같은 이유로 바람직합니다.

FOUC (스타일이 지정되지 않은 콘텐츠의 플래시)없이 빠르게로드
우려의 분리 등

— 잭 리소 베이
소스

1

RegExp를 사용하는 Modernizr 버전은 안전하고 빠릅니다.

— AndrewF

@AndrewF-조금 확장해도 될까요? 정확히 어떻게 더 안전합니까?

— Zach Lysobey

12

@ZachL 정규 표현식 버전 (와 \b)이와 (과 ) 일치하지 않으면 anno-jsus다른 버전이로 변경됩니다 anjsus. no-js클래스 이름의 일반적인 하위 문자열은 아니지만 여전히 이와 관련하여 s의 "safer"입니다 \b.

— Cucu

40

Modernizr.js가 no-js클래스 를 제거합니다 .

이를 통해 .no-js somethingJavascript가 비활성화 된 경우에만 CSS 규칙 을 적용 할 수 있습니다.

— 슬랙
소스

17

no-jsJS이 비활성화 된 경우 / 표시 / 숨기기 것을 사용하여 CSS를 수정할 수 있도록 클래스는, 자바 스크립트 스크립트에 의해 제거됩니다.

— 마크
소스

"no-js 클래스는 자바 스크립트 스크립트에 의해 제거됩니다." 자바 스크립트가 비활성화 된 경우 어떻게 작동합니까 ( 'no-js'클래스를 제거 할 수 있음). 당신은 저에게 명확하게 줄 수 있습니까?

— 초에 haind

2

당신이 옳고 이것이 실제로 요점입니다 : JavaScript가 비활성화되어 있으면 클래스가 그대로 유지되며 예를 들어 CSS를 사용하여 HTML 부분을 표시하여 사용자에게 경고 할 수 있습니다. .no-js #js-warning {display: block;}

— marc

JS을 테스트이 아니 절대 안전한 방법이 작동되도록 모더 나이저이 작업을 완료 한 후 JS 오류가 발생할 수 있습니다,주의

— htmlr

11

Modernizer에만 적용되는 것은 아닙니다. 자바 스크립트를 지원하는지 여부를 확인하기 위해 아래와 같은 사이트 구현이 있습니다.

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

자바 스크립트 지원이 있으면 no-js클래스 가 제거 됩니다. 그렇지 않으면 no-jsbody 태그에 남아 있습니다. 그런 다음 자바 스크립트가 지원되지 않을 때 CSS의 스타일을 제어합니다.

.no-js .some-class-name {

}

— 화이자 칸
소스

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-jsclass를 검색하여 classPrefix + 로 바꿉니다 js.

그리고 JavaScript를 브라우저에서 실행하지 않으면 스타일을 다르게 사용합니다.

— 알리레자
소스

1

no-js 클래스는 사용자가 브라우저에서 JS를 사용 또는 사용하지 않도록 설정했는지에 따라 웹 페이지의 스타일을 지정하는 데 사용됩니다.

Modernizr 문서에 따르면 :

노 JS

기본적으로 Modernizr은을 다시 씁니다 <html class="no-js"> to <html class="js">. 이를 통해 JavaScript를 실행하는 환경에서만 노출되어야하는 특정 요소를 숨길 수 있습니다. 이 변경 사항을 사용하지 않으려면 구성에서 enableJSClass를 false로 설정할 수 있습니다.

— JSON C11
소스