HTML "no-js" 클래스의 목적은 무엇입니까?
많은 템플릿엔진, HTML5 보일러 플레이트, 다양한 프레임워크 및 플레인 php 사이트에는no-js에 추가된 클래스<HTML>태그를 붙입니다.
왜 이런 일이 일어날까요?이 클래스에 반응하는 기본 브라우저 동작이 있습니까?왜 항상 포함시키죠?no-"no-js" 대소문자가 없고 html을 직접 수신처로 지정할 수 있는 경우 클래스 자체가 쓸모 없게 되지 않습니까?
다음은 HTML5 Boilplate 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>요소에는 항상 이 클래스가 있습니다.왜 이런 일이 자주 일어나는지 누가 설명 좀 해줄래?
Modernizr가 실행되면 "no-js" 클래스가 제거되고 "js"로 대체됩니다.Javascript 지원 여부에 따라 다른 CSS 규칙을 적용하는 방법입니다.
그no-js클래스는 Modernizr 기능 검출 라이브러리에서 사용됩니다.Modernizr가 로드되면 대체됩니다.no-js와 함께jsJavaScript가 비활성화되어 있는 경우 클래스는 유지됩니다.이를 통해 어느 하나의 조건을 쉽게 대상으로 하는 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/
나도 같은 일을 하고 싶지만, 모데니즈르 없이.다음과 같이 기재합니다.<script>에서<head>반을 바꾸다jsJavaScript가 활성화되어 있는 경우.사용하는 것을 선호합니다..replace("no-js","js")regex 버전보다 훨씬 더 정확하고 제 요구에 잘 맞기 때문입니다.
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
이 기술 이전에는 js-dependent style을 JavaScript에서 직접 적용했습니다.예를 들어 다음과 같습니다.
$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});
를 사용하여no-jstrick, 이것은 이제 할 수 있다css:
.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }
이는 다음과 같은 이유로 권장됩니다.
- FOUC(무스타일 콘텐츠 플래시) 없이 로딩이 고속화
- 관심사 분리 등...
Modernizr.js는 다음 명령어를 삭제합니다.no-js학급.
이를 통해 CSS 규칙을 작성할 수 있습니다..no-js somethingJavascript가 비활성화된 경우에만 적용합니다.
그no-jsjs가 비활성화된 경우 css를 사용하여 내용을 수정/표시/숨길 수 있습니다.
이는 Modernizer에서만 적용되는 것은 아닙니다.javascript 지원 여부를 확인하기 위해 다음과 같은 사이트 구현을 보았습니다.
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>
javascript를 합니다.no-js 않으면 수업. 그렇지 않으면no-js본문 태그에 남습니다.자바스크립트
.no-js .some-class-name {
}
이 섹션은 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 + "classPrefix + "classPrefix" 를 합니다.no-js+ classPrefix + classPrefix+로 바꿉니다.js.
브라우저에서 JavaScript가 실행되지 않으면 그 사용법이 달라집니다.
no-js 클래스는 사용자가 브라우저에서 JS를 사용하지 않도록 설정했는지 또는 사용하도록 설정했는지에 따라 웹 페이지를 스타일링하는 데 사용됩니다.
Modernizr 문서에 따르면:
무료의
은 "Modernizr"을 다시 .
<html class="no-js"> to <html class="js">이를 통해 JavaScript를 실행하는 환경에서만 노출되어야 하는 특정 요소를 숨길 수 있습니다.enable J를 합니다.SCLASS를 사용하다
언급URL : https://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class
'programing' 카테고리의 다른 글
| Json Array를 일반 Java 목록으로 변환 (0) | 2022.09.29 |
|---|---|
| .view()는 PyTorch에서 무엇을 합니까? (0) | 2022.09.25 |
| 배열 목록을 알파벳 순으로 정렬(대문자와 소문자를 구분하지 않음) (0) | 2022.09.25 |
| JavaScript:파일 업로드 (0) | 2022.09.25 |
| 매개 변수를 사용하여 MariaDB 저장 프로시저 삽입 (0) | 2022.09.25 |