Noscript로 추가 스타일을 포함시킵니다

StackOverflow https://stackoverflow.com/questions/218162

  •  03-07-2019
  •  | 
  •  

문제

JavaScript에 의해 제어되는 보이지 않는 div가있는 XHTML Strict 페이지가 있습니다. DIV는 스크립트와 마우스 오버 이벤트에 의해 투명하고 볼 수 있도록 DIV를 호버에 불투명하게 만듭니다.

JavaScript가없는 브라우저 (또는 noscript가있는 Firefox)를 사용하는 경우 DIV는 단순히 보이지 않습니다. 이것의 문제는 컨텐츠가 접근 할 수없는 것을 원하지 않는다는 것입니다. 또한 DIV를 표시 한 다음 스크립트를 사용하여 DIV가 문서의 맨 아래에 있으며 페이지로드 될 때마다 눈에 띄는 깜박임을 유발합니다.

나는 noscript 태그를 사용하여 JavaScript의 사치가없는 사람들에게만로드 된 추가 스타일 시트를 포함 시키려고 시도했지만 XHTML 엄격한 유효성 검사에 실패했습니다. XHTML 유효한 노스 스크립트 블록 안에 추가 스타일 정보를 포함시키는 다른 방법이 있습니까?

ED :

간단한 테스트 케이스를 사용하면 다음의 유효성 검사 오류가 발생합니다. 문서 유형은 여기서 요소 "스타일"을 허용하지 않습니다.이것은 Noscript 요소 안에 스타일 요소가있는 빈 XHTML 엄격한 문서가 있습니다. noscript는 몸 안에 있습니다.

도움이 되었습니까?

해결책

유효성 검사 문제를 해결하려면 : noscript 만 허용됩니다 body 요소, style 만 허용됩니다 head. 따라서 후자는 전자 내에서 허용되지 않습니다.

일반적인 문제 : 당신은 div 기본적으로 표시된 요소는 CSS + javaScript를 통해 숨 깁니다. 이것이 '진보적 인 향상'모델입니다. 나는 당신이 "깜박임으로 인해 이것을하고 싶지 않다"고 말하는 것을 알았지 만, 이것을 일으키는 원인이 정확히 확실하지 않습니다. 가능성이 높아질 가능성이 있습니다. 저것 질문으로.

다른 팁

헤드의 noscript는 유효한 html5입니다. 이전에는 유효하지 않았습니다. 방금 테스트했는데 현재 Firefox, Safari, Chrome, Opera 및 IE에서 작동합니다.

<!doctype html>
<html>
    <head>
        <noscript>
            <style>body{background:red}</style>
        </noscript>
    </head>
    <body>
        <p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
    </body>
</html>

a script 블록 head 추가하려면 style 요소 document.write:

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>

내 대답에 대한 참고 사항

나는 2008 년부터 데이트하고 있다는 것을 깨달은 후이 게시물을 썼습니다.

비슷한 문제가 있었기 때문에 현재 답변으로 계속 대답하는 생각이있었습니다.

내 실제 대답

Boby Jack이 말했듯이 style 신체에는 태그가 허용되지 않습니다. 나는 당신 (여호수아)에 대해 정확한 일을했습니다. 그러나 Jack의 "Progressive Enhancement"는 비 임계 솔루션없이 나를 만들었지만이 스레드에서 답을 찾지 못한 솔루션을 깨달았습니다.

그것은 모두 당신의 스타일링 구조에 달려 있습니다.

내 제안은 분명히 같은 것을 사용하는 것입니다 modernizr 머리가 시작될 때 Paul Irish의 HTML5BoilerPlate 권장 사항을 사용하십시오.

짧은 이야기

  1. HTML 태그가 있습니다 class 속성 no-js
  2. 헤드 태그에는 첫 번째 Modernizr JavaScript가 포함되어 있습니다.
  3. CSS에는 요소가 있습니다..hide-me) 와 함께 display:none 적절한 장소에
  4. 그 다음에 .no-js .hide-me { display:block }

상세히

Paul Irish의 html5boilerplate을 참조하고 원하는 경우 xhtml에 적응하십시오 :)

1. HTML에는 클래스 속성이 있습니다 .no-js

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

인용 html5boilerplate.com

2. 헤드 태그에는 첫 번째 Modernizr JavaScript가 포함되어 있습니다.

Modernizr Execution이 구축됩니다 html 지원되는 내용의 속성.

이와 유사한 것을 구축합니다.

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

메모 이것은 Google 크롬에서 나온 것입니다 modernizr 테스트.

첫 번째는입니다 js 그러나 Modernizr가 실행되지 않았다면 (JavaScript 없음) no-js 거기에 머물 것입니다.

3. CSS에는 요소가 있습니다 (.hide-me) 와 함께 display:none 적절한 장소에

... 당신은 나머지를 알고 있습니다 :)

어떤 유효성 검사 오류를 얻습니까? <noscript> XHTML에서 허용되어야하지만 블록 레벨이므로 <p>, <span>, 등

업데이트 ~을 위한 2016:

에서 W3School:

HTML 4.01과 HTML5의 차이

HTML 4.01에서 <noscript> 태그는 내부에서만 사용할 수 있습니다 <body>요소.

html5에서 <noscript> 태그는 내부에서 모두 사용할 수 있습니다 <head> 그리고 <body>.

HTML과 XHTML의 차이점

xhtml에서 <noscript> 태그는 지원되지 않습니다.

확장 된 메뉴 (목록 등)를위한 내 솔루션

나는 이런 헤더에 넣었다

<header>
    <noscript>
        <link rel="stylesheet" href="assets/css/x_no_script.css">
    </noscript>
</header>

에서 x_no_script.css 내가 원하는 선택기를 설정했습니다 

max-height: 9999px;
overflow: visible;

이런 식으로, 나는 언제 메뉴를 확장시켰다 자바 스크립트 ~이다 장애가 있는 또는 존재하지 않습니다.

XHTML을 사용하는 경우 트릭은 두 개의 CSS 파일을 사용하는 것입니다. JavaScript 지원 브라우저를 위해 글로벌 하나를 조정하는 JS-One 중 하나입니다.

style.css :

.hidden {
  visibility:hidden;
}

스타일 -js.css :

.hidden {
  visibility:visible;
}

test.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>Test page</title>
  <link href='css/style.css' rel='stylesheet' type='text/css' />
  <script type="text/javascript">
  //<![CDATA[
    //document.write("<link href='css/style-js.css' rel='styleSheet' type='text/css' />"); 
    //is not legal in XHTML, we do the long way:
    var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
    l.setAttribute("rel", "stylesheet");
    l.setAttribute("type", "text/css");
    l.setAttribute("href", "/css/style-js.css");
    document.getElementsByTagName("head")[0].appendChild(l);
  //]]>
  </script>
</head>
<body>
  <div class="hidden">
    <p>Only displayed at JavaScript enabled browsers</p>
  </div>
</body>
</html>

주요 아이디어 Tutorials.de. XHTML 유효성 팁 Estelle Weyl의 블로그. CreateElementns 팁 코딩 포럼.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top