Rilevare quando gli stili sono disabilitati

Qual è il modo migliore per rilevare, con JS, se l'utente ha disabilitato i fogli di stile? Esiste un modo affidabile anche?Rilevare quando gli stili sono disabilitati

fonte

2011-01-21 wheresrhys

si potrebbe verificare lo stile calcolato per alcuni elementi e vedere se non corrispondono voi dichiara nel tuo foglio di stile. – BoltClock

controlla se gli stili impostati nel tuo file sono validi? – Hannes

Qualcosa di facile sarebbe controllare il colore di sfondo del corpo, ad esempio.

Tuttavia, qual è la probabilità che qualcuno disabiliti CSS e non Javascript? (non so cosa lo usi ovviamente)

fonte

2011-01-21 12:44:54 plebksig

Non so neanche quanto sia probabile. Il sito che sto lavorando ha richieste di accessibilità molto alte, e per alcuni elementi (ad esempio carosello) con js senza css finisce con un'interfaccia confusa che non sembra fare nulla (poiché il carousel usa molti stili CSS) – wheresrhys

Anche se ci sono degli standard chiari per l'accessibilità, è un po 'difficile capire quali sono le cose da fare con un budget. Di solito ho un approccio che va con l'uso di titoli di link, una struttura adeguata sul sito in modo che possa essere facilmente tabellata, buon contrasto, pulsanti chiari, dividere il contenuto e lo stile ecc. Test via tastiera navigando te stesso. Un sito veramente ben fatto sarà accessibile da solo se l'autore seguirà il contenuto. Solo il 2-3% disabilita JS, meno disabiliterà il CSS, e gli screen reader più recenti non sono male come prima. – plebksig

Che ne dici di chiedere loro?

<div style="display:none">This site relies on CSS, please go to our <a href="noncss.html">CSS free version of this site</a></div>

fonte

2011-01-21 14:26:46 mplungjan

Pet peeve here at SO. Le persone votano senza commentare perché. – mplungjan

Certamente non sono stato io a svendere. Sembra una soluzione valida. Tuttavia, il 99% delle volte in cui un utente dovrebbe disabilitare il CSS e JS è abilitato per uno screen reader o qualche altro tipo di strumento di accessibilità. Forse l'uso della 'versione sfidata CSS 'non è la scelta o le parole migliori. – dennmat

Notato, ma ancora irritato – mplungjan

Avrei un div piccolo e vuoto sullo schermo. Quando viene caricata la pagina, utilizzare JS per verificare la proprietà 'display' di quel div. Se è "none", allora il tuo css è stato caricato con successo. In caso contrario, potrebbero dover disattivare/modificare i tuoi stili.

fonte

2011-01-21 14:29:08

Se hai il controllo del foglio di stile puoi avere uno stile di "calibrazione". Avere un nome di classe che applica alcune proprietà CSS a un elemento. Una buona proprietà di sicurezza cross-browser può essere di colore di sfondo.

Quando si carica il JS, provare a creare dinamicamente un elemento e applicarvi il nome della classe. Controlla se le proprietà corrispondono (quella dell'elemento con quella che ti aspetti).

Il commento di BoltClock si avvicina. È possibile utilizzare window.getComputedStyles(calibrationElement, null) ma ciò non funzionerà nelle versioni precedenti del browser IE.

vedere la documentazione per getComputedStyles

Sentitevi liberi di rimuovere il nodo "calibrazione" dopo aver controllato esso.

fonte

2011-01-21 14:34:59

Almeno in Safari, parte della difficoltà è che con il CSS disattivato gli elementi continuano a riportare gli attributi CSS. Ma se si verifica il rendering effettivo di una proprietà, allora si può dire. La larghezza è probabilmente la proprietà più semplice (e più comune) su cui eseguire il test.

Di seguito è riportato uno script di esempio (utilizza jQuery, ma potrebbe essere facilmente un-jQueryfied) che verificherà per CSS. Carichiamo solo un div vuoto nella pagina, gli diamo una larghezza di 3px usando CSS e quindi testiamo la sua larghezza. Se la larghezza non è 3, il CSS è disabilitato. Ovviamente devi assicurarti che questo non vada a buon fine con altri stili che potresti avere che potrebbero far sì che la larghezza sia diversa da 3. Ma dà l'idea generale.

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css">  
      #testCSS {width: 3px;} 
     </style> 
    </head> 
    <body> 
     <div id="testCSS"></div> 
     <div id="message"></div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function(){ 
       if (jQuery("#testCSS").width() != 3) jQuery("#message").html("CSS Disabled"); 
      }); 
     </script> 
    </body> 
</html>

Modifica: mi dispiace per l'esempio di codice disordinato. Non sembra gradire i miei tag di codice. Ecco un JSfiddle con il codice. Ovviamente non sarà in grado di disabilitare i CSS e testare lì, ma si può tirare il codice da esso: http://jsfiddle.net/3FvdL/1/

fonte

2013-03-27 15:51:40

Assumendo che il foglio di stile esterno o in linea primario viene caricato prima dello script, è possibile utilizzare questo:

if (document.styleSheets.length){} // stylesheets are disabled

https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets

E 'IE5 + compatibile secondo: http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html

l'avvertenza è che, se gli stili sono spenti dopo che la finestra è caricato (che provoca solo un rappresentante del browser aint), l'oggetto document.styleSheets non cambierà al volo.Inoltre, come indicato nei commenti seguenti, questo non funzionerà con Firefox quando si utilizza la funzione Visualizza -> Stile pagina -> Nessuno stile, per cui gli stili sono ancora caricati, ma non applicati alla vista.

per rilevare lo stato iniziale di tutti i browser, o modifiche su window.onresize, può essere fatto con un style reset sul corpo, con il seguente codice inserito dopo<body> o in un evento DOMContentLoaded:

if (document.body.clientWidth !== document.documentElement.clientWidth) { 
    // Styles are disabled or not applied 
}

Funziona se si utilizza body { margin: 0; } nei fogli di stile (senza alcuna larghezza personalizzata particolare), perché rende l'elemento body della stessa larghezza di documentElement (ovvero l'elemento <hmtl>) mentre gli stili sono attivi.

Quando gli stili sono spenti o disattivati, il body.clientWidth si torna alla larghezza del corpo di default del browser, che ha sempre un margine (8px by default in CSS 2.1 major browsers) e quindi diverso dal documentElement.clientWidth.

caso la struttura del sito utilizzare un margine specifica diversa 8px per il corpo, qui è un'opzione alternativa:

if (document.body.clientWidth === document.documentElement.clientWidth-16) { 
    // user styles are disabled or not applied (IE8+ default browser style applies) 
}

fonte

2013-04-03 05:43:32 hexalys

Ho disattivato gli stili in firefox 28.0 tramite Visualizza-> Stile di pagina-> Nessuno stile e ho provato entrambi gli approcci forniti, non funzionano. document.styleSheets.length è sempre maggiore di 0 e document.body.clientWidth! == document.width restituisce sempre true. – Stack0verflow

@ StackOverflow Grazie per il rapporto. Sembra che l'opzione "No Style" di Firefox non implichi che gli stili sono di fatto disabilitati (in quanto, è diverso dall'opzione "Disabilita stili" di Webkit). Gli stili sono appena tolti dalla vista ma sono sempre caricati. Cercherò una soluzione rivista. – hexalys

Grazie e sembra essere il caso. – Stack0verflow

Rilevare quando gli stili sono disabilitati

risposta

Problemi correlati