많은 템플릿 엔진, 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>요소에는 항상이 클래스가 있습니다. 누군가 왜 이렇게 자주 그렇게 설명 할 수 있습니까?
답변
Modernizr은 “no-js”클래스를 제거하고 “js”로 대체합니다. 이것은 자바 스크립트 지원의 활성화 여부에 따라 다른 CSS 규칙을 적용하는 방법입니다.
Modernizer의 소스 코드를 참조하십시오 .
답변
그만큼 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 (스타일이 지정되지 않은 콘텐츠의 플래시)없이 빠르게로드
- 우려의 분리 등
답변
Modernizr.js가 no-js클래스 를 제거합니다 .
이를 통해 .no-js somethingJavascript가 비활성화 된 경우에만 CSS 규칙 을 적용 할 수 있습니다.
답변
no-jsJS이 비활성화 된 경우 / 표시 / 숨기기 것을 사용하여 CSS를 수정할 수 있도록 클래스는, 자바 스크립트 스크립트에 의해 제거됩니다.
답변
Modernizer에만 적용되는 것은 아닙니다. 자바 스크립트를 지원하는지 여부를 확인하기 위해 아래와 같은 사이트 구현이 있습니다.
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>자바 스크립트 지원이 있으면 no-js클래스 가 제거 됩니다. 그렇지 않으면 no-jsbody 태그에 남아 있습니다. 그런 다음 자바 스크립트가 지원되지 않을 때 CSS의 스타일을 제어합니다.
.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 + no-jsclass를 검색하여 classPrefix + 로 바꿉니다 js.
그리고 JavaScript를 브라우저에서 실행하지 않으면 스타일을 다르게 사용합니다.
답변
no-js 클래스는 사용자가 브라우저에서 JS를 사용 또는 사용하지 않도록 설정했는지에 따라 웹 페이지의 스타일을 지정하는 데 사용됩니다.
Modernizr 문서에 따르면 :
노 JS
기본적으로 Modernizr은을 다시 씁니다
<html class="no-js"> to <html. 이를 통해 JavaScript를 실행하는 환경에서만 노출되어야하는 특정 요소를 숨길 수 있습니다. 이 변경 사항을 사용하지 않으려면 구성에서 enableJSClass를 false로 설정할 수 있습니다.
class="js">