Incorporare stili extra con noscript

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

  •  03-07-2019
  •  | 
  •  

Domanda

Ho una pagina XHTML rigorosa che ha un div invisibile che è controllato da Javascript. Il div è impostato su trasparente e visibile dallo script e da un evento del mouseover per rendere opaco il div al passaggio del mouse.

Quando qualcuno usa un browser (o firefox con noscript) senza javascript, il div rimane semplicemente invisibile. Il problema è che non voglio che il contenuto sia inaccessibile. Inoltre, non voglio lasciare il div visibile, quindi utilizzare lo script per renderlo trasparente poiché il div si trova nella parte inferiore del documento e provoca uno sfarfallio evidente ogni volta che viene caricata una pagina.

Ho provato a usare i tag noscript per incorporare un foglio di stile aggiuntivo che viene caricato solo per le persone senza il lusso di Javascript, ma ciò non riesce alla convalida XHTML. Esiste un altro modo per includere informazioni extra sullo stile all'interno di un blocco noscript valido per XHTML?

Ed:

Con un semplice test case ricevo un errore di validazione di: il tipo di documento non consente l'elemento " style " qui. Questo è con un documento XHTML Strict vuoto con un elemento di stile all'interno di un elemento noscript. Il noscript è all'interno del corpo.

È stato utile?

Soluzione

Per chiarire il problema di convalida: noscript è consentito solo nell'elemento body, style è consentito solo in head. Pertanto, il secondo non è consentito all'interno del primo.

Sul problema generale: ti consigliamo di rendere visibile l'elemento div per impostazione predefinita, quindi nasconderlo tramite CSS + javascript. Questo è il modello di "miglioramento progressivo". Ho notato che dici & Quot; non voglio farlo a causa dello sfarfallio & Quot ;, ma non sono sicuro di cosa stia causando questo - è probabile che tu possa risolverlo, quindi forse dovresti pubblicare che come domanda.

Altri suggerimenti

noscript in head è HTML5 valido. Non era valido prima. L'ho appena testato, funziona con Firefox, Safari, Chrome, Opera e IE attuali. 

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

Usa un blocco script in head per aggiungere un style elemento con document.write: 

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

Nota sulla mia risposta

Ho scritto questo post dopo aver realizzato che risale al 2008

Dato che ho avuto un problema simile, ho pensato di continuare a rispondere con una risposta attuale.

La mia risposta effettiva

Come ha detto Boby Jack, il tag style non è consentito nel corpo. Io stesso ho fatto esattamente come te (Giosuè) al riguardo. Ma & Quot di Jack; miglioramento progressivo & Quot; mi ha fatto senza una soluzione non astratta ma poi ho realizzato una soluzione che non ho trovato risposte su questo thread.

Tutto dipende dalla tua struttura stilistica.

Il mio suggerimento è di usare chiaramente qualcosa come modernizr all'inizio della testa e usare i consigli di Paul Irish HTML5Boilerplate.

Per farla breve

  1. Il tag HTML ha un class attributi con no-js
  2. Il tag head include un primo javascript modernizr come il primo
  3. CSS ha l'elemento (.hide-me) con display:none nella sua posizione corretta
  4. Quindi .no-js .hide-me { display:block }

In dettaglio

Vedi la HTML5boilerplate di Paul Irish e adattala a XHTML se vuoi :)

1. HTML ha attributi di classe con .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]-->

quotazione da html5boilerplate.com

2. Il tag head include un primo javascript modernizr come il primo

L'esecuzione di Modernizr costruirà html attributi con ciò che è supportato.

Costruirà qualcosa di simile a questo: 

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

Nota proviene da Google Chrome js test.

Il primo è <=> ma se Modernizr non viene eseguito (senza javascript) <=> rimarrebbe lì.

3. CSS ha l'elemento (<=>) con <=> nella sua posizione corretta

... conosci il resto :)

Che errore di convalida ricevi? <noscript> dovrebbe essere consentito in XHTML ma è a livello di blocco, quindi assicurati che non sia in <p>, <span>, ecc.

AGGIORNAMENTO per 2016 :

Da w3school :

  

Differenze tra HTML 4.01 e HTML5

     

In HTML 4.01, il tag <noscript> può essere utilizzato solo all'interno di <body>   elemento.

     

In HTML5, il tag <head> può essere utilizzato sia all'interno di x_no_script.css che in   <=>.

     

Differenze tra HTML e XHTML

     

In XHTML, il tag <=> non è supportato.

La mia soluzione per ampliare i menu (elenchi, ecc.)

Ho inserito l'intestazione in questo modo 

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

Nel <=> ho impostato i selettori che volevo 

max-height: 9999px;
overflow: visible;

In questo modo, ho espanso i menu quando JavaScript è disabilitato o non esiste.

Nel caso in cui venga utilizzato XHTML, il trucco è utilizzare due file CSS. Uno globale e uno js-one che ottimizzano quello globale per i browser abilitati per 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>

Idea principale di tutorials.de . Suggerimento di validità XHTML di Blog di Estelle Weyl . createElementNS punta di CodingForums .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top