Javascript ne prend pas le CSS en compte

Sujet résolu

24 mai 2017 à 16:57:15

Bonjour,

Je cherche via mon script d'afficher un message à l'utilisateur si il utilise un certain navigateur ( ici IE et safari ).
Le script marche, la partie qui m'a permis de faire les test est en bas ( partie en commentaire ).
Ce pendant j'aimerais pousser le truc un peu plus en jouant avec le css pour afficher le message de façon plus esthétique. Mais là ça bloque, le css n'a pas l'aire d'être pris en compte...

voici le code html :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link src="css/styleCompatibilite.css" rel="stylesheet"/>
<title>Document sans nom</title>
</head>
<body>
	<div id="safari" class="close">
		Safari ne supporte pas les technologies utilisées. Je vous recommande d'utiliser Google Chrome ou Mozilla Firefox ou Microsoft Edge.
	</div>
	<div id="IE" class="close">
		Internet Exeplorer ne supporte pas les technologies utilisées. Je vous recommande d'utiliser Google Chrome ou Mozilla Firefox ou Microsoft Edge.
	</div>
<script src="file:///C:/Users/nilsv/OneDrive/CV_web/html/test/js/comptabilite.js"></script>
</body>
</html>

mon css :

@charset "utf-8";
/* CSS Document */

#safari.close
{
	display: none;
	overflow: hidden;
	max-width: 0px;
}
#IE.close
{
	display: none;
	overflow: hidden;
	max-width: 0px;
}
#IE.open
{
	display:"initial";
	overflow:"initial";
	max-width: 1000px;
	background : blue;
}
#safari.open
{
	display:"initial";
	overflow:"initial";
	max-width: 1000px;
	background : red;
}

et mon script js :

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

	
if(isSafari){
	var safari=document.getElementById("safari");
	safari.className="open";
}
else if (isIE){
	var IE=document.getElementById("IE");
	IE.className="open";
}

// output += 'isFirefox: ' + isFirefox + '<br>';
// output += 'isChrome: ' + isChrome + '<br>';
// output += 'isSafari: ' + isSafari + '<br>';
// output += 'isOpera: ' + isOpera + '<br>';
// output += 'isIE: ' + isIE + '<br>';
// output += 'isEdge: ' + isEdge + '<br>';
// output += 'isBlink: ' + isBlink + '<br>';
// document.body.innerHTML = output;

Merci pour votre aide !
Bonne journée

n1col4s

25 mai 2017 à 9:25:03

Bonjour, une petite erreur au niveau d'un attribut dans la balise link :

<link src="css/styleCompatibilite.css" rel="stylesheet"/>

C'est href au lieu de src :

<link href="css/styleCompatibilite.css" rel="stylesheet"/>

Bonne journée

"In chess, it's called Zugzwang, when the only viable move is not to move."

Mon nom est God ; phil God

25 mai 2017 à 9:31:07

Salut Bonhomme,

Déjà y a un blème dans la détection du type de navigateur.
Je tourne en chrome et j'ai les 2 messages. Bizarre ?
Aussi déjà je te donne une fonction non destructrice :

window.browserId=window.browserId ||
    function (){
        var ua = navigator.userAgent,
        possibilities = [
            'Flock',
            'Navigator',
            'Epiphany',
            'Konqueror',
            'Firefox',
            'MSIE',
            'Chrome',
            'Opera',
            'Safari',
            'SeaMonkey',
            'Shiretoko',
            'Iceape',
            'Iceweasel',
            'Kazehakase',
            'Minefield'
        ],
        index,
        navigateur = null,
        version = null,
        match,
        p, i, l = possibilities.length;
        for(i=0;i<l;i++) {
            p = possibilities[i];
            if((index = ua.indexOf(p))>=0) {
                navigateur = p;
                match = ua.match(/Version\/(\w+(?:\.\w+)*)/) || ua.match(new RegExp(p+'[/ ](\\w+(?:\\.\\w+)*)'));
                if(match&&match[1]) {
                    version = match[1];
                }
                break;
            }
        }
        if (navigateur!=null && version!=null)return {navigator:navigateur.toUpperCase(), issue:parseInt(version)};
        return null;
    }

Elle retourne un objet avec 2 proprio :

Erreurs de développement :

HTML :

Pas de majuscules dans le nommage de fichier ressources :==> stylecompatibilité.css (tout en minuscules)
Les liens ressource "link" s’écrivent avec "HREF" pour l'identité emplacement de la ressource.

CSS :

Inutile de mettre un charset en tête de fichier (sauvegarde le en utf8 avec sublime text ou NetBeans)
Blocs "OPEN" pas de guillemets entourant les valeur de proprio :==>(display et overflow)
(==> pour ne pas afficher un simple display:none suffit)

Erreur conception

Un message adapté pour chaque navigateur ça fait un peut beaucoup et sa complique le code css / JS

Résultat : (qui tourne sous Chrome au moins les autre j'sais pô)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/stylecompatibilite.css" rel="stylesheet"/>
<title>Document sans nom</title>
</head>
<body>
<!--
    <div id="safari" class="close">
        Safari ne supporte pas les technologies utilisées. Je vous recommande d'utiliser Google Chrome ou Mozilla Firefox ou Microsoft Edge.
    </div>
    <div id="IE" class="close">
        Internet Exeplorer ne supporte pas les technologies utilisées. Je vous recommande d'utiliser Google Chrome ou Mozilla Firefox ou Microsoft Edge.
    </div>
 -->
 	<div id='msg-compat-navigator' class="close">
	 	<p>Votre navigateur internet ne supporte pas les technologies utilisées.</p>
	 	<p>Je vous recommande d'utiliser Google Chrome ou Mozilla Firefox ou Microsoft Edge.</p>
	</div>
 	<script src="js/comptabilite.js"></script>
</body>
</html>

window.browserId=window.browserId ||
    function (){
        var ua = navigator.userAgent,
        possibilities = [
            'Flock',
            'Navigator',
            'Epiphany',
            'Konqueror',
            'Firefox',
            'MSIE',
            'Chrome',
            'Opera',
            'Safari',
            'SeaMonkey',
            'Shiretoko',
            'Iceape',
            'Iceweasel',
            'Kazehakase',
            'Minefield'
        ],
        index,
        navigateur = null,
        version = null,
        match,
        p, i, l = possibilities.length;
        for(i=0;i<l;i++) {
            p = possibilities[i];
            if((index = ua.indexOf(p))>=0) {
                navigateur = p;
                match = ua.match(/Version\/(\w+(?:\.\w+)*)/) || ua.match(new RegExp(p+'[/ ](\\w+(?:\\.\\w+)*)'));
                if(match&&match[1]) {
                    version = match[1];
                }
                break;
            }
        }
        if (navigateur!=null && version!=null)return {navigator:navigateur.toUpperCase(), issue:parseInt(version)};
        return null;
    }
    
    var navName=browserId().navigator;
    if (navName!='CHROME' && navName!='MSIE' && navName!='FIREFOX'){
        document.getElementById('msg-compat-navigator').classList.remove('close');
    }


    // Opera 8.0+
//    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
//    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]"
//    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
//    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
//    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
//    var isChrome = !!window.chrome && !!window.chrome.webstore;

/*
if(isSafari){
    var safari=document.getElementById("safari");
    safari.className="open";
}
else if (isIE){
    var IE=document.getElementById("IE");
    IE.className="open";
}
*/
// output += 'isFirefox: ' + isFirefox + '<br>';
// output += 'isChrome: ' + isChrome + '<br>';
// output += 'isSafari: ' + isSafari + '<br>';
// output += 'isOpera: ' + isOpera + '<br>';
// output += 'isIE: ' + isIE + '<br>';
// output += 'isEdge: ' + isEdge + '<br>';
// output += 'isBlink: ' + isBlink + '<br>';
// document.body.innerHTML = output;

/* CSS Document */

#msg-compat-navigator.close
{
    display: none;
    overflow: hidden;
    max-width: 0px;
}
/*
#IE.close
{
    display: none;
    overflow: hidden;
    max-width: 0px;
}
#IE.open
{
    display:initial;
    overflow:initial;
    max-width: 1000px;
    background : blue;
}
#safari.open
{
    display:initial;
    overflow:initial;
    max-width: 1000px;
    background : red;
}
*/

Après pour l'enjolivement utilise bootstrap pour faire une fenêtre modale par exemple.

J'échange des connaissances. Si je les donnais, je n'en aurais plus

nilsv

25 mai 2017 à 22:37:10

Bonsoir,

Merci pour vos réponses !

Mon script marche en corrigeant la balise link. Mais je vais quand même me pencher sur ton code Mon nom est God ; phil God

Bonne soirée

Mon nom est God ; phil God

26 mai 2017 à 7:24:51

Re-Salut,

De toute façon tout ça c'est parler pour ne rien dire.

En effet ce n'est pas au navigateur de formuler le contenu de la page mais au serveur dont la tache est justement de fabriquer la page (entre autre)

J'échange des connaissances. Si je les donnais, je n'en aurais plus