begin process at 2012 05 28 13:28:33
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > DÉTECTER SI CSS EST ACTIVÉ

DÉTECTER SI CSS EST ACTIVÉ


 Description

Bon, voilà encore un petit bout de code que j'ai construit pour résoudre un problème.

De plus en plus de navigateur offrent la fonctionnalité de désactiver CSS. À quel but ? Mais bon... là n'est pas le sujet

Il existe déjà la balise <noscript> si JavaScript n'est pas activé. Mais si CSS ne l'est pas que faire ? Voilà un petit bout de code (bien que non propre, puisqu'il ajoute puis supprime des éléments à la page) qui permet de détecter si CSS est activé.

Source

  • <html>
  • <head>
  • <title>Désactiver CSS</title>
  • <script type="text/javascript">
  • function isCssActivate(){
  • var tn= document.createElement('div');
  • tn.innerHTML="<div id='_iscss_1'>aaa</div><div id='_iscss_2' style='width:100px;'>aaa</div>";
  • document.body.appendChild(tn);
  • ty=document.getElementById('_iscss_1').offsetWidth!=document.getElementById('_iscss_2').offsetWidth;
  • document.body.removeChild(tn);
  • return ty;
  • }
  • navigator.isCssActive=isCssActivate;
  • </script>
  • </head>
  • <body onload="if(!navigator.isCssActive())document.body.innerHTML+='<b>CSS NON ACTIVÉ</b>';"><div>TEST</div></body></html>
<html>
<head>
<title>Désactiver CSS</title>
<script type="text/javascript">
function isCssActivate(){
var tn= document.createElement('div');
tn.innerHTML="<div id='_iscss_1'>aaa</div><div id='_iscss_2' style='width:100px;'>aaa</div>";

document.body.appendChild(tn);
ty=document.getElementById('_iscss_1').offsetWidth!=document.getElementById('_iscss_2').offsetWidth;
document.body.removeChild(tn);
return ty;
}
navigator.isCssActive=isCssActivate;
</script>
</head>
<body onload="if(!navigator.isCssActive())document.body.innerHTML+='<b>CSS NON ACTIVÉ</b>';"><div>TEST</div></body></html>

 Conclusion

à celui à qui ce sera utile !


 Sources du même auteur

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE
PARSER LES CARACTÈRES HTML D'UNE STRING
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS
RÉPÉTER UN VIDÉO YOUTUBE EN JAVASCRIPT À L'AIDE D'UN MARQUE-...
Source avec Zip 20 ASTUCES POUR PROGRAMMEURS JAVASCRIPT AVANCÉS

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill
Source avec Zip XSTYLE : STYLE ETENDU par foxz
Source avec Zip Source avec une capture TRAITEMENT IMMÉDIAT DU CSS [TIC] par bultez

Commentaires et avis

Commentaire de Arto_8000 le 01/11/2009 18:51:48

"De plus en plus de navigateur offrent la fonctionnalité de désactiver CSS"

Disant que j'aimerais bien voir tes références sur ce sujet ...

Pour le reste, la méthode de détection a peu de chance de fonctionner, car je doutes fortement quelqu'un qui a vraiment envie de désactiver le CSS va laisser le Javascript activé.

La meilleur façon aurait de tout simplement faire ceci :

<div style="display: none">Le CSS est désactivé</div>

Commentaire de jdmcreator le 01/11/2009 20:33:25

Oui mais ensuite comment rediriger la personne ?

Des plugins pour IE et FireFox existe et Safari offre cette fonction déjà intégrer. Quant à Opéra, je n'en ai aucune idée ;)

Commentaire de Arto_8000 le 01/11/2009 22:07:32

Très honnêtement, ce genre de fonction a aucune utilité sur le net et je vois difficilement pourquoi quelqu'un voudrait désactiver le CSS. Contrairement au Javascript, le CSS ne représente aucune source de vulnérabilité, ce qui est l'unique raison pour laquelle il existe des extensions pour encadrer le Javascript.

Rediriger ? Rediriger vers quoi ? La plupart des sites sont lisibles sans CSS. Et rediriger comment ? Je te rappelle qui si tu tombes sur un navigateur sans CSS, tu es à peu près sûr qu'il n'y aura pas de Javascript non plus.

Si tu tiens quand même à rediriger tu peux toujours faire ceci :

<div style="display: none"><center><h1>Veuillez activer vos CSS ou <a href="noCSS.html">visiter notre version sans CSS</a>.</h1></center></div>

Aussi rien ne t'empêche d'ajouter en plus du javascript. Au moins tu es sûr que le message va s'afficher pour ceux qui n'ont pas de JS et CSS.

Commentaire de McPeter le 30/03/2010 16:26:31

A noter que certaines personnes désactive le css simplement pour des raisons de lisibilité. C'est là qu'on en revient à : dissocier le contenu du contenant. Un site bien fait ne devrait pas avoir besoin de CSS pour être fonctionnel et diffuser l'information qui s'y trouve. Le CSS n'étant là à la base que pour un aspect esthétique. Donc le problème devrait être analysé dans le bon sens; soit un site correctement présenté sans css _puis_ le CSS :)

Commentaire de jdmcreator le 30/03/2010 23:40:31

Merci pour votre commentaire =)

Mais j'ai déjà lu un article sur le CSS (que j'ai perdu) où l'auteur relate son expérience de créer un site sans CSS (<table>...) et CSS pour le même rendu final... Et cela lui a pris 1h30 pour le CSS et 8h sans le CSS....

Certaines personnes ne peuvent se permettre autant de temps pour un long site ;)

Commentaire de McPeter le 31/03/2010 15:23:21

jdmcreator eu désolé ... mais y'a clairement un problème alors .... le gars en question est un boulet dans ce cas .... il a rien compris à "contenue/contenant" ...
on ne fait pas de la mise en page avec des tableaux (de un c'est une hérésie, de deux c'est inmaintenable) donc le gars à rien compris à la sémantique HTML/CSS

Commentaire de jdmcreator le 13/06/2010 02:10:15

Oh ce n'était que pour tester

Mais aucun site web nouveau ne fonctionne sans CSS. Essaye avec CodeS-SourceS, c'est illisible.

Commentaire de McPeter le 15/06/2010 08:39:36

Code-Sources n'est pas une référence en matière d'accessibilité :)
Et désolé . .mais tous mes "nouveaux" sites fonctionnent parfaitement sans css.
un bon truc .. colle toi dans un navigateur texte (type w3m / lynx / links2 / etc ..) et regarde le rendu :)
une autre approche : imagine que tu sois non voyant et que tu utilises un navigateur vocal ..
dans le cas d'une mise en page faite en tableau ... tu auras quitté le site avant d'avoir touché la moindre information ..( le lecteur lira : cellulue 1 : rien, cellule 2 image ... etc ..)
un site doit être présenter par une recherche, son contenue, un accès rapide vers un menu ou des sous sections de menus ou un menu simple, les fioritures
il faut conserver un peu près cet ordreune fois que tu as ça . .tu as un site fonctionnel .. vient ensuite "l'habbillage" et donc le css

Commentaire de jdmcreator le 16/06/2010 01:55:41

Tu as tout fait raison, seulement c'est plutôt compliqué à mettre en oeuvre et beaucoup e site à petit public s'en ***** et ne veulent pas y perdre de temps. C'est clair que l'accès aux non-voyants aux sites web devraient être une priorité et commence à l'être (voir CKEditor v.3.0) mais ici n'est pas l'objectif de la source. Même si cela peut rester lisible comme site, le rendu ne sera pas beau. On peut aussi conseiller à l'utilisateur d'activer le CSS ou de changer de navigateur.

Cela reste un important débat.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Changer de feuille de style CSS pour netscape [ par ericepbc ] Bonjour,Mon site tourne sous Ie mais sous netscape certains tableaux ne se positionnent pas au bon endroit.La position des tableaux est définie en abs iframe et css [ par kaskran ] Est ce que l'on peut inserer ( et donc utiliser) une feuille de style dans une IFrame ????car la j'ai un soucis explorer ne veut pas l'utiliser mon st Changer le style css [ par djagger ] Salut !J'ai cr&#233;&#233; un menu en javascript avec une feuille de style pour les menus, sous-menus etc ...en gros :&lt;table&gt;&lt;tr&gt;&nbsp;&nb feuille de style en Css et formulaires. Comment ça marche? exemples si possible.. merci. [ par maxpat ] Bonjour &#224; tous, Travaillant sous Nvu, j'ai cr&#233;&#233; une feuille de style en Css. Comment faire un formulaire avec une feuille de style? Me CSS dans une iframe [ par le_binr ] Bonjour,Je suis en train de créer un site internet dynamique avec un petit wysiwyg permettant de mieu gérer le texte pour un novice.Grâce à la command Feuille de style [ par crazycode ] bonjour à tous !!J'ai un probleme avec mes CSS.j'ai fais un tableau et j'ai utiliser des CSS pour faire des cadre. Tout va bien mais quand je veux imp Bouton en style CSS qui ne fonctionne pas sous ie [ par zemele ] Bonjour, Voil&#224; j'ai fait un bouton qui fait appel &#224; un style : Code css : a.bouton { &nbsp;&nbsp;&nbsp; color: #333333; &nbsp;&nbsp;&nb Feuille de style [ par Jossdoit ] Bonjour,Je developpe actuellement un site web et j'utilise du CSS. Je trouve ca bien sympas mais je voulais savoir si il etait possible d'utiliser le DHTML - Formulaire - Input File - Style CSS [ par asgarden ] Bonjour,Voilà cela fait un petit moment que je cherche comment modifier le style d'un champs de formulaire de type FILE ?J'ai beau essayer, rien n'y f Comment dans une menu en CSS désactiver le lien de la page active? [ par yukie_chan ] Bonjour à tous!Je ne sais pas si le titre de mon sujet est clair... j'ai eu du mal à le formuler!Pour que ce soit plus compréhensible le principe est


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,045 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales