L'incorporation d'autres styles avec noscript

J'ai un XHTML strict de la page qui a un invisible div qui est contrôlée par Javascript. La div est transparent et visible par le script et un événement mouseover pour faire de la div opaque sur le vol stationnaire.

Quand quelqu'un l'aide d'un navigateur (ou firefox avec noscript) sans javascript la div reste simplement invisible. Le problème c'est que je ne veux pas le contenu inaccessible. J'ai aussi ne veux pas laisser la div visible alors utiliser le script pour le rendre transparent comme le div est situé au bas du document, et provoque un scintillement notable à chaque fois qu'une page se charge.

J'ai essayé d'utiliser les balises noscript pour intégrer un supplément de feuille de style qui n'est chargé que pour les gens sans le luxe de Javascript, mais il échoue le XHTML strict de validation. Est-il un autre moyen de comprendre des informations sur le style à l'intérieur d'un noscript bloc qui est du XHTML valide?

Ed:

Avec un simple test cas, je reçois une erreur de validation de: type de document ne permet pas l'élément "style" ici.
C'est avec un vide XHTML Strict document avec un élément de style à l'intérieur d'un élément noscript. Les noscript est à l'intérieur du corps.

  • Toute personne confrontée au même problème doit probablement avoir un coup d'oeil à question.
InformationsquelleAutor Joshua | 2008-10-20
  1. 12

    Pour éclaircir la question de la validation: noscript n'est autorisé que dans le body élément, style admis uniquement dans la head. Par conséquent, ce dernier n'est pas autorisé au sein de l'ancien.

    Sur la question générale: vous aurez envie de faire la div élément visible par défaut, puis se cacher via CSS + javascript. C'est le "amélioration progressive" modèle. J'ai remarqué que vous dites que vous "ne voulez pas faire cela, parce que le scintillement", mais je ne sais pas exactement ce qui cause cela - les chances sont que vous pouvez résoudre le problème, alors peut-être vous devriez poster que comme une question.

    • Mise à jour pour 2015: validator.w3.org va permettre noscript dans le head.
    • Oui, HTML5 autorise explicitement l' noscript dans head.
    • Un avertissement pour les personnes à l'aide de Formulaires web, même si noscript peut être utilisé avec style dans la tête maintenant. Toute publication de updatepanel (si la réponse contient cette balise) s'appliquent dit styles, peu importe si le JS est autorisé ou pas. Une solution de contournement n'est pas rendu dans le chef de la publication.
    InformationsquelleAutor Bobby Jack
  2. 63

    noscript dans la tête est valide HTML5. Il n'était pas valide avant. Je viens de tester, il fonctionne en courant Firefox, Safari, Chrome, Opera et 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>
    • De loin la meilleure solution.
    InformationsquelleAutor
  3. 11

    Utiliser un script bloc dans la head pour ajouter un style élément avec document.write:

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

    Remarque à propos de ma réponse

    J'ai écrit ce post après avoir réalisé que c'était datant de 2008

    Depuis que j'ai eu un problème similaire, j'ai pensé continue de répondre avec une réponse actuelle.

    Ma réponse réelle

    Comme Boby Jack a dit, style balise n'est pas admis dans le corps. Je me suis fait exactement la chose que vous (Josué) à ce sujet. Mais Jack "amélioration progressive" m'a fait l'absence d'une solution abstraite, mais ensuite j'ai réalisé une solution que je n'ai pas trouvé de réponses sur ce fil.

    Tout dépend de votre style de structure.

    Ma suggestion est de simplement utiliser quelque chose comme modernizr dans le début de la tête et de l'utilisation Paul Irlandais du HTML5Boilerplate recommandations.

    Longue histoire courte

    1. Balise Html a un class attributs avec no-js
    2. Balise Head comprend un premier modernizr javascript comme la première
    3. CSS a l'élément (.hide-me) avec display:none sur sa place
    4. Puis .no-js .hide-me { display:block }

    En détail

    Voir Paul Irlandais du HTML5boilerplate, et de l'adapter en XHTML si vous voulez 🙂

    1. Html est un des attributs de classe avec .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]-->

    citant html5boilerplate.com

    2. Balise Head comprend un premier modernizr javascript comme la première

    Modernizr d'exécution est de construire html attributs avec ce qui est pris en charge.

    Volonté de construire quelque chose de similaire à ceci:

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

    Note c'est à partir de Google Chrome modernizr tests.

    La première est js mais si Modernizr ne pas exécuter (pas de javascript) le no-js voudrais y rester.

    3. CSS a l'élément (.hide-me) avec display:none sur sa place

    ... vous savez le reste 🙂

    • Ne fonctionne pas avec XHTML 1.0 (ni Transitoire, ni Strict). La raison: "classe" n'est pas autorisé attribut dans <html> tag. Je veux dire qu'il va être montré OK dans le navigateur, MAIS vous ne passerez pas XHTML validation (par ex. validator.w3.org).
    • En effet, il n'est pas XHTML 1.0 valide. Mais si vous n'envoyez pas d'en-tête de contenu sans préciser application/xhtml+xml voir le W3C, aussi rend invalide. N'est-ce pas 🙂 Mais. Je continue de penser que disgressing que la règle pour le <html/> tag est un prix bon marché de façons de le passé.
    InformationsquelleAutor renoirb
  5. 0

    Ce que la validation d'erreur que vous obtenez? <noscript> devrait être autorisé en XHTML, mais c'est au niveau du bloc, donc assurez-vous qu'il n'est pas dans un <p>, <span>, etc

    • XHTML 1.0: <noscript> n'est autorisé que dans le corps, <script> seulement dans la tête.
    InformationsquelleAutor Greg
  6. 0

    Mise à JOUR pour 2016:

    De w3school:

    Différences Entre HTML 4.01 et HTML5

    En HTML 4.01, <noscript> balise peut être utilisée uniquement à l'intérieur de la <body>
    élément.

    En HTML5, le <noscript> tag peut être utilisé à la fois à l'intérieur de <head> et
    <body>.

    Différences Entre HTML et XHTML

    Dans le XHTML, le <noscript> balise n'est pas pris en charge.

    Ma solution pour avoir étendu les menus (listes, etc..)

    J'ai mis dans l'en-tête comme ce

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

    Dans le x_no_script.css - je régler les sélecteurs que je voulais 

    max-height: 9999px;
overflow: visible;

    De cette façon, j'ai élargi des menus lors de la JavaScript est désactivé ou n'existe pas.

    InformationsquelleAutor mtb
  7. 0

    En cas XHTML est utilisé, l'astuce consiste à utiliser deux fichiers CSS. Un mondial et un js-un peaufiner le programme mondial pour l'activé JavaScript dans les navigateurs.

    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>

    Idée principale par tutorials.de. XHTML validité de la pointe par Estelle de Weyl du Blog. createElementNS astuce par CodingForums.

    • document.écrire n'est pas valide XHTML
    • Merci pour l'astuce. J'ai amélioré le code. Heureusement pour nous, il est valable aujourd'hui. Malheureusement, le Validateur HTML (les utilisateurs.skynet.être/mgueury/mozilla) ne vérifie pas le code JavaScript.
    InformationsquelleAutor koppor