Einbetten von zusätzlichen Arten mit noscript

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

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe eine XHTML strict-Seite, die einen unsichtbaren div hat, die von Javascript gesteuert wird. Die div eingestellt ist transparent und sichtbar durch das Skript und ein Mouseover-Ereignis das div undurchsichtig auf schweben zu machen.

Wenn jemand einen Browser (oder Firefox mit NoScript) verwenden, ohne Javascript, um die div einfach unsichtbar bleiben. Das Problem dabei ist, dass ich will nicht der Inhalt nicht zugänglich sein. Ich möchte auch nicht das div sichtbar verlassen dann das Skript verwenden, um sie transparent zu machen, wie die div am unteren Rande des Dokuments befindet, und es wird nur ein auffälliges Flackern, wenn eine Seite geladen wird.

Ich habe versucht, noscript-Tags mit einem zusätzlichen Stylesheet einzubetten, die nur für Menschen, ohne den Luxus von Javascript geladen wird, aber dies nicht gelingt, die XHTML strenge Validierung. Gibt es eine andere Möglichkeit, um zusätzliche Styling Informationen in einem noscript-Block enthält, ist XHTML gültig?

Ed:

Mit einem einfachen Testfall ich einen Fehler bei der Überprüfung erhalten von:. Dokumenttyp nicht erlaubt Element „Stil“ hier Dies ist mit einem leeren XHTML Strict-Dokument mit einem Stilelement in einem noscript-Elemente. Der noscript ist im Inneren des Körpers.

War es hilfreich?

Lösung

die Validierung Problem zu klären: noscript nur im body Elemente erlaubt ist, style nur im head erlaubt. Daher wird diese nicht innerhalb der ehemaligen erlaubt.

Auf der allgemeinen Frage: Sie werden das div Element standardmäßig sichtbar machen wollen, dann verstecken sie über CSS + JavaScript. Dies ist die ‚Progressive Enhancement‘ -Modell. Ich merke, Sie sagen, Sie „wollen nicht, dies zu tun, weil das Flimmerns“, aber ich bin nicht sicher, was genau das verursacht - die Chancen sind Sie das Problem beheben können, so sollten Sie vielleicht schreiben , die als eine Frage.

Andere Tipps

NoScript in Kopf gilt HTML5. Es war vorher nicht gültig. Getestet habe ich es ja, es funktioniert in der aktuellen Firefox, Safari, Chrome, Opera und Internet Explorer. 

<!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>

ein script Block im head Verwenden Sie ein style Element mit document.write hinzuzufügen: 

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

Hinweis über meine Antwort

Ich schrieb diesen Beitrag nach der Realisierung wurde von 2008 datiert

Da ich hatte ein ähnliches Problem, dachte ich weiterhin mit einer aktuellen Antwort zu beantworten.

Meine tatsächliche Antwort

Wie Boby Jack sagte style Tag wird in Körper nicht erlaubt. Ich selbst habe die genaue Sache, wie Sie (Joshua) darüber. Aber Jacks „Progressive Enhancement“ machte mich ohne nicht-abstrakte Lösung, aber dann merkte ich, eine Lösung, die ich nicht auf diesen Thread gefunden haben Antworten.

Es hängt alles von Ihrer Styling Struktur.

Mein Vorschlag ist klar etwas wie modernizr in dem sehr Anfang des Kopfes zu verwenden und Paul Irish des HTML5Boilerplate Empfehlung verwenden.

Lange Rede kurzer Sinn

  1. HTML-Tag hat eine class mit no-js Attribute
  2. Kopf-Tag enthält einen ersten modernizr javascript als erste
  3. CSS hat das Element (.hide-me) mit display:none auf seinem Platz
  4. Dann .no-js .hide-me { display:block }

Im Detail

Siehe Paul Irish des HTML5boilerplate und passen es an XHTML, wenn Sie wollen:)

1. Html hat eine Klasse-Attribute mit .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]-->

Zitat aus html5boilerplate.com

2. Head-Tag enthält einen ersten modernizr javascript als erste

Modernizr Ausführung wird html bauen Attribute mit dem, was unterstützt wird.

Wird etwas Ähnliches wie dieses bauen: 

<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">

Hinweis ist dies von Google Chrome modernizr Tests.

Die erste js ist, aber wenn Modernizr nicht (kein Javascript) lief die no-js würde dort bleiben.

3. CSS hat das Element (.hide-me) mit display:none auf seinem Platz

... Sie kennen den Rest:)

Was Validierungsfehler bekommen Sie? <noscript> sollte in XHTML erlaubt sein, aber es ist auf Blockebene, so stellen Sie sicher, dass es nicht in einem <p>, <span>, etc

UPDATE für 2016 :

w3school :

  

Unterschiede zwischen HTML 4.01 und HTML5

     

In HTML 4.01, <noscript> Tag kann nur innerhalb des <body> verwendet werden   Element.

     

In HTML5 kann der <noscript> Tag sowohl innerhalb als <head> verwendet werden und   <body>.

     

Unterschiede zwischen HTML und XHTML

     

In XHTML, das <noscript> Tag wird nicht unterstützt.

Meine Lösung für mit erweiterten Menüs (Listen, etc ..)

Ich habe in der Kopfzeile wie folgt setzen 

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

In der x_no_script.css stelle ich die Wähler, die ich

gesucht 
max-height: 9999px;
overflow: visible;

Auf diese Weise habe ich erweiterten Menüs, wenn JavaScript ist deaktiviert oder nicht vorhanden ist.

Bei XHTML verwendet wird, ist der Trick, zwei CSS-Dateien zu verwenden. Ein globaler und eine js-one die global für JavaScript-fähigen Browser zwicken.

style.css: 

.hidden {
  visibility:hidden;
}

style-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>

Hauptidee von tutorials.de . XHTML Gültigkeit Spitze von Estelle Weyl Blog . createElementNS Spitze von CodingForums .

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top