Intégration de styles supplémentaires avec noscript

https://stackoverflow.com/questions/218162

css
xhtml

03-07-2019
|

Question

J'ai une page XHTML stricte qui comporte un div invisible contrôlé par Javascript.Le div est défini sur transparent et visible par le script et un événement de survol pour rendre le div opaque au survol.

Lorsque quelqu'un utilise un navigateur (ou Firefox avec noscript) sans javascript, le div reste simplement invisible.Le problème est que je ne veux pas que le contenu soit inaccessible.Je ne veux pas non plus laisser le div visible, puis utiliser le script pour le rendre transparent car le div est situé au bas du document et provoque un scintillement notable à chaque chargement d'une page.

J'ai essayé d'utiliser des balises noscript pour intégrer une feuille de style supplémentaire qui n'est chargée que pour les personnes n'ayant pas le luxe de Javascript, mais cela échoue à la validation stricte XHTML.Existe-t-il un autre moyen d'inclure des informations de style supplémentaires dans un bloc noscript valide en XHTML ?

Éd :

Avec un simple cas de test, j'obtiens une erreur de validation de : Le type de document n'autorise pas l'élément "style" ici.Il s'agit d'un document XHTML Strict vide avec un élément de style à l'intérieur d'un élément noscript.Le noscript est à l’intérieur du corps.

La solution

Pour résoudre le problème de validation: noscript n'est autorisé que dans l'élément body, style uniquement dans l'élément head. Par conséquent, le dernier n'est pas autorisé dans le premier.

Sur le problème général: vous voulez rendre l'élément div visible par défaut, puis le masquer via CSS + javascript. C'est le modèle de «l'amélioration progressive». Je remarque que vous dites que vous & "Vous ne voulez pas faire cela à cause du scintillement &"; Mais je ne sais pas exactement ce qui le cause - il y a de fortes chances que vous puissiez le réparer, alors vous devriez peut-être poster cela comme une question.

Autres conseils

Noscript en tête est valide en HTML5. Ce n'était pas valide avant. Je viens de le tester, cela fonctionne dans Firefox, Safari, Chrome, Opera et IE actuels.

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

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

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

Remarque sur ma réponse

J'ai écrit ce post après avoir réalisé qu'il datait de 2008

Comme j'avais un problème similaire, j'ai pensé continuer à répondre avec une réponse actuelle.

Ma vraie réponse

Comme Boby Jack l'a dit, style la balise n’est pas autorisée dans le corps.J'ai moi-même fait exactement la même chose que vous (Joshua) à ce sujet.Mais "l'amélioration progressive" de Jack m'a fait passer sans solution non abstraite mais j'ai ensuite réalisé une solution à laquelle je n'ai pas trouvé de réponses sur ce fil.

Tout dépend de votre structure de style.

Ma suggestion est d'utiliser clairement quelque chose comme modernizr au tout début de la tête et utilisez les recommandations HTML5Boilerplate de Paul Irish.

Longue histoire courte

La balise HTML a un class attributs avec no-js
La balise Head inclut un premier javascript modernisé comme premier
CSS a l'élément (.hide-me) avec display:none à sa juste place
Alors .no-js .hide-me { display:block }

En détail

Consultez le HTML5boilerplate de Paul Irish et adaptez-le en XHTML si vous le souhaitez :)

1.HTML a 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 de html5boilerplate.com

2.La balise Head inclut un premier javascript modernisé comme premier

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

Va 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 ça vient de Google Chrome modernizr essais.

Le premier est js mais si Modernizr ne s'exécutait pas (pas de javascript), le no-js y resterais.

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

...tu connais la suite :)

Quelle erreur de validation avez-vous? <noscript> devrait être autorisé dans XHTML mais son niveau de bloc, alors assurez-vous que ce n'est pas dans un <p>, <span>, etc.

MISE À JOUR pour 2016 :

De w3school :

Différences entre HTML 4.01 et HTML5

En HTML 4.01, les balises <noscript> ne peuvent être utilisées qu'à l'intérieur de <body>   élément.

En HTML5, la balise <head> peut être utilisée à la fois dans x_no_script.css et   <=>

Différences entre HTML et XHTML

En XHTML, la balise <=> n'est pas prise en charge.

Ma solution pour avoir des menus étendus (listes, etc.)

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

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

Dans le <=> je règle les sélecteurs que je voulais

max-height: 9999px;
overflow: visible;

De cette manière, j'ai développé les menus lorsque JavaScript est désactivé ou n'existe pas.

Si XHTML est utilisé, l’astuce consiste à utiliser deux fichiers CSS. Un global et un js-one peaufinant le global pour les navigateurs compatibles JavaScript.

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 de tutorials.de . Astuce de validité XHTML par le blog d'Estelle Weyl . Conseil createElementNS par CodingForums .

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow