1. 홈
  2. 질의 응답
  3. 자바 스크립트가 비활성화되었을 때 CSS 대체 코드를 작성하는 방법

자바 스크립트가 비활성화되었을 때 CSS 대체 코드를 작성하는 방법

2014-03-05 4 views
3

아래 예에서 jQuery를 사용하고 있지만 javascript를 사용하지 않으면 자바 스크립트를 사용하여 놓친 내용을 표시하는 데 더 일반적으로 적용됩니다.자바 스크립트가 비활성화되었을 때 CSS 대체 코드를 작성하는 방법

이 
.fade-in { opacity:0; } 

<div class="fade-in">FOOBAR</div> 

$('.fade-in').fadeIn();

그러나 클라이언트가 자바 스크립트가 무엇을 활성화하지 않는 경우

는이 전 페이지가로드 될 때 텍스트 페이드하고 싶은 말은하자?

나는 텍스트를 보이지 않는 상태로 유지하고 싶지 않으므로 CSS를 대체로 끝 상태로 설정 한 다음 자바 스크립트로 애니메이션을 설정하기 전에 UN 설정을해야합니다. 이렇게하면 javascript가없는 사용자는 일반 텍스트 (fadeIn없이) 만 볼 수 있으며 JS를 사용하는 사용자는 페이드를 보게됩니다.

.fade-in { opacity:1; } 

<div class="fade-in">FOOBAR</div> 

$('.fade-in').css('opacity', 0); 
$('.fade-in').fadeIn();

이 작동하지만, 대부분의 경우는 자바 스크립트 설정을 해제 할 때 CSS 표시 속성이 설정 될 때 사이에 불쾌한 "깜박임"가 발생합니다. 위의 예에서 정상적으로 작동하는 자바 스크립트를 사용하는 사용자는 "뚜껑 표시"가 1 초 간격으로 표시되고 사라지고 사라지는 것을 볼 수 있습니다.

깜박임 현상이 발생하지 않는 것이 가장 좋습니다. 아무 JS 사용자를 희생?

위의 간단한 예에서는 문제를 해결하지 마십시오. 그것은 그 개념을 보여주기위한 것입니다. 나는이 사건을 다루기위한보다 폭 넓은 전략을 찾고있다. 또한 점진적 향상이라는 장점이나 JS 사용자를 지원할 필요가 있는지 여부는 논쟁하고 싶지 않습니다. 그것은 다른 스레드에 대한 질문입니다.

업데이트 : 나는 Modernizr을 사용하여 .no-js 클래스를 추가하는 데 사용할 수있는 도구를 알고 있지만 이러한 라이브러리에 의존하지 않는 솔루션을 선호합니다. 사용자가 JS가 활성화되어 그를 위해 스타일 시트를 작성하지 않는 경우

출처

2014-03-05 emersonthis

+0

준비 이벤트 핸들러로 값을 페이드하는 기능을 실행하고 있습니까? 그것은 깜박 거림을 피할만큼 충분히 빨라야합니다.정말 당신이 그것에 대해 생각 해야하는 방법은 먼저 페이지없이 자바 스크립트를 기능화하고, 그것을 향상시키기 위해 자바 스크립트를 사용하는 것입니다. –

+0

modernizr.js를 사용 하시겠습니까? –

+0

@DissidentRage 나는 보통'$ (document) .ready (...)'내부에서 애니메이션을 실행 중이다. 내 경험상, CSS는'ready()'안의 코드가 그것을 대체 할 기회를 갖기 전에 잠깐 * 종종 나타난다. – emersonthis

답변

3

사용 <noscript></noscript> 태그

출처

2014-03-05 16:13:18

9

을 : 궁금

<head> 
scripts 
<noscript><link href="no-js.css" /> </noscript> 
</head>

출처

2014-03-05 16:13:58 Vinz243

+0

오른쪽! 신뢰할 수있는 no-js 스타일 시트. 나는 같은 스타일 시트를 사용하는 해결책을 제시하고 있었지만 특별한 이유는 없었다. 이것은 아마도 최선의 방법 일 것입니다. – emersonthis

+0

'

0

,이 작품 하시겠습니까 뭔가?

<body> 

<noscript> 
<div class="no-js"> 
</noscript> 

... 

<noscript> 
</div> 
</noscript> 

</body>

아이디어는 조건부 모더 나이저없이 .no-js 클래스의 요소를 래핑하여 하나의 스타일 시트에있는 모든 CSS를 유지하는 것입니다. 당신의 html 요소에 no-js과 js 클래스를 사용 : 당신이 여기

출처

2014-03-05 16:27:14 emersonthis

0

내 가장 좋은 방법입니다

<html class="no-js"> 
<head> 
    <title>...</title> 
    <!-- Change "no-js" class to "js" in the html element --> 
    <!-- This must appear high in your page to avoid FOUC effect --> 
    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> 
</head> 
<body> 
    ... 
</body> 
</html>

이 방법, 당신의 CSS는 다음과 같이 수 :

/* The item first appears with opacity=1, then disappears when the no-js class is removed */ 
.no-js .fade-in { opacity: 1; } 
.fade-in { opacity: 0; }

이입니다 거의 Modernizr과 같은 도구가 있지만 여기서는 매우 단순합니다.

크레딧은 Paul Irish에게갑니다 : http://www.paulirish.com/2009/avoiding-the-fouc-v3/

출처

2014-08-25 11:42:19 pomeh

관련 문제

 관련 문제