CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 09:26:14

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs Amusants

> CRÉER UNE RÈGLE CSS POUR QU'ELLE S'APPLIQUE À UNE ÉLÉMENT DONNÉ (UNE BALISE / NOEUD (X)HTML)

CRÉER UNE RÈGLE CSS POUR QU'ELLE S'APPLIQUE À UNE ÉLÉMENT DONNÉ (UNE BALISE / NOEUD (X)HTML)

Information sur la source

Note :
Aucune note

Catégorie :Trucs Amusants Classé sous :creer, ajouter, css, dynamiquement, element Niveau :Débutant Date de création :18/08/2007 Vu :7 540

Auteur : FREMYCOMPANY

Ecrire un message privé

Site perso

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Voici un simple petit code JavaScript sans prétention mais qui peut se révéler utile dans certaines occasions

Comme vous pouvez le constater le but ici est de simuler une publicité et de trouver une règle CSS qui permettra de la supprimer avec le moins d'effet collatéraux possibles (et si possible aucun !)

Je ne vous cache pas que le choix de la publicité est loin d'être anodin vu que c'est précisément ce code (ou sa retranscription en C++) qui sera utilisé pour les CSS Filters du filtre anti-pub d'IE7Pro, si ils voient le jour.

Le code prévoit plusieurs mode de fonctionnement :
- IE6 (et IE7-BackCompat) ou IE7
- Normal ou Safe

La distinction entre IE6 et IE7 se fait dans les sélecteurs CSS, beaucoup plus nombreuse sous IE7 qui permettent de limiter fortement le risque de dégâts collatéraux

Le mode Safe ne considère plus comme suffisant une simple classe CSS ou un nom (attribut name) pour terminer la règle, alors que le monde Normal s'en contente.

Voici déjà un aperçu de ce que le code peut générer :
- IE 6 (normal) : DIV.adctner TABLE
- IE 6 (safe) : DIV#content DIV.adctner TABLE
- IE 7 (normal) : TABLE[name="table"]
- IE 7 (safe) : DIV#content > DIV.adctner > TABLE[name="table"]

Source

<!Doctype XHTML 1.1 dtd!>
<html>
<head>
<title>Catch by CSS</title>
<style>
pre { cursor: hand; display:inline; }
b { float: left; width: 100px; }
div.content { border: 1px; padding: 5px; }
div.adctner { float:left; }
a img { border-style: none }
</style>
<script type="text/javascript">
function catchByCss(el, ie7, times, safe) {
var isCatched = {value: false};
safe = !(safe);
ie7=(ie7 && document.compatMode!="BackCompat");
function isNullOrEmpty(o) {
return (
typeof (o) == "undefined" ||
o==null ||
o=="" ||
o==0
);
}
function catchBy(el, key) {
if (isNullOrEmpty(el[key])) {
return "";
}
switch (key) {
case "tagName":
if (el.tagName=="BODY" || el.tagName=="HTML" || isNullOrEmpty(el.parentNode) || el.parentNode==document) {
isCatched.value=true;
}
return el.tagName;
case "id":
if(el.id.indexOf(" ")==(-1)) {
isCatched.value=true;
return "#"+el.id;
}
if (ie7) {
isCatched.value=true;
return '[id="' + el.id + '"]';
}
return "";
case "className":
if (isCatched.value && String(el.id).indexOf(" ")!=(-1)) { return ""; }
if(el.className.indexOf(" ")==(-1)) {
isCatched.value=(safe && true);
return "."+el.className;
}
return "."+(el.className).replace(/(\s)+/g, ".")
case "name":
if (ie7) {
isCatched.value=(safe && true);
return '[name="' + el.name + '"]';
}
return "";
default: return "";
}
}
var css = "";
while (times > -1 || isNullOrEmpty(el)) {
while (!isCatched.value) {
try {
var tmp = "";
tmp += catchBy(el, "tagName");
tmp += catchBy(el, "id");
tmp += catchBy(el, "className");
tmp += catchBy(el, "name");
css = tmp + (css==""?"":(ie7?" > ":" ")) + css;
el=el.parentNode;
} catch (ex) {
return css;
}
}
times--;
isCatched.value=false;
}
return css;
}
function addStyle(css) {
alert(css);
var s = document.createStyleSheet();
s.cssText=css;
}
window.onload = function tryCatch() {
var el = document.getElementById("catch")
el.id="";
document.getElementById( "result_IE7" ).innerText = catchByCss( el, true , 0 )
document.getElementById( "result_IE6" ).innerText = catchByCss( el, false , 0 )
document.getElementById( "result_IE7_safe" ).innerText = catchByCss( el, true , 0, true )
document.getElementById( "result_IE6_safe" ).innerText = catchByCss( el, false , 0, true )
}
</script>
</head>
<body>
<b>IE 6 (normal)</b> : <pre id="result_IE6" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 6 (safe)</b> : <pre id="result_IE6_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 7 (normal)</b> : <pre id="result_IE7" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 7 (safe)</b> : <pre id="result_IE7_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<div id="content">
<div class="adctner">
<table name="table" id="catch">
<tr>
<td>
<a href="#">
<img width="200" height="200px" src="http://ads.mulhouse.free.fr/Images/logo%20ADS.JPG" />
</a>
</td>
</tr>
<tr><td style="font-size: 10px; text-align: right;">Ads by google</td></tr>
</table>
</div>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu
</div>
</body>
</html>

<!Doctype XHTML 1.1 dtd!>
<html>
    <head>
        <title>Catch by CSS</title>
        <style>
            pre { cursor: hand; display:inline; }
            b { float: left; width: 100px;  }
            div.content { border: 1px; padding: 5px; }
            div.adctner { float:left; }
            a img { border-style: none }
        </style>
        <script type="text/javascript">
function catchByCss(el, ie7, times, safe) {
    var isCatched = {value: false};
    safe = !(safe);
    
    ie7=(ie7 && document.compatMode!="BackCompat");

    function isNullOrEmpty(o) {
        return (
            typeof (o) == "undefined" ||
            o==null ||
            o=="" ||
            o==0
        );
    }
    function catchBy(el, key) {
        if (isNullOrEmpty(el[key])) {
            return "";
        }
        switch (key) {
            case "tagName":
                if (el.tagName=="BODY" || el.tagName=="HTML" || isNullOrEmpty(el.parentNode) || el.parentNode==document) {
                    isCatched.value=true;
                }
                return el.tagName;
            case "id":
                if(el.id.indexOf(" ")==(-1)) {
                    isCatched.value=true;
                    return "#"+el.id;
                } 
                if (ie7) {
                    isCatched.value=true;
                    return '[id="' + el.id + '"]';
                }
                return "";
            case "className":
                if (isCatched.value && String(el.id).indexOf(" ")!=(-1)) { return ""; }
                if(el.className.indexOf(" ")==(-1)) {
                    isCatched.value=(safe && true);
                    return "."+el.className;
                }
                return "."+(el.className).replace(/(\s)+/g, ".")
            case "name":
                if (ie7) {
                    isCatched.value=(safe && true);
                    return '[name="' + el.name + '"]';
                }
                return "";
            default: return "";
        }
    }
    
    var css = "";
    while (times > -1 || isNullOrEmpty(el)) {
        while (!isCatched.value) {
            try {
                var tmp = "";
                tmp += catchBy(el, "tagName");
                tmp += catchBy(el, "id");
                tmp += catchBy(el, "className");
                tmp += catchBy(el, "name");
                css = tmp + (css==""?"":(ie7?" > ":" ")) + css;
                el=el.parentNode;
            } catch (ex) {
                return css;
            }
        }
        times--;
        isCatched.value=false;
    }
    return css;
}

function addStyle(css) {
    alert(css);
    var s = document.createStyleSheet();
    s.cssText=css;
}

window.onload = function tryCatch() {
    var el = document.getElementById("catch")
    el.id="";
    document.getElementById( "result_IE7" ).innerText = catchByCss( el,  true  ,  0 )
    document.getElementById( "result_IE6" ).innerText = catchByCss( el,  false ,  0 )
    document.getElementById( "result_IE7_safe" ).innerText = catchByCss( el,  true  ,  0,  true )
    document.getElementById( "result_IE6_safe" ).innerText = catchByCss( el,  false ,  0,  true )
}
        </script>
    </head>
    <body>
        <b>IE 6 (normal)</b> : <pre id="result_IE6" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
        <b>IE 6 (safe)</b>   : <pre id="result_IE6_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
        <b>IE 7 (normal)</b> : <pre id="result_IE7" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
        <b>IE 7 (safe)</b>   : <pre id="result_IE7_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
        <div id="content">
            <div class="adctner">
                <table name="table" id="catch">
                    <tr>
                        <td>
                            <a href="#">
                                <img width="200" height="200px" src="http://ads.mulhouse.free.fr/Images/logo%20ADS.JPG" />
                            </a>
                        </td>
                    </tr>
                    <tr><td style="font-size: 10px; text-align: right;">Ads by google</td></tr>
                </table>
            </div>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
            ContenuContenuContenuContenuContenuContenuContenuContenuContenu
        </div>
    </body>
</html>

Sources du même auteur

GETCOMPUTEDSTYLE POUR IE (GETCOMPUTEDCSSVALUE) [PT TO PX, EM...

AJAX INTER-SITE (CROSS-SITE) SOUS IE SANS TENIR COMPTE DES P...

POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...)...

DOCUMENT.SELECTION POUR FF (FIREFOX)

Toutes les sources de FREMYCOMPANY

Sources de la même categorie

IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol

IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol

IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol

IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol

IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol

Toutes les sources de la catégorie Trucs Amusants

Sources en rapport avec celle ci

UN MENU EN CSS par Julien39

PRÉSENTOIR PAGE/SUJET par tiranus

IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41

QUIZ HTML CSS ET JAVASCRIPT par lecurieux41

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill

Commentaires et avis

Commentaire de coucou747 le 19/08/2007 21:23:50 administrateur CS

Oh :) le trolleur MSIE :)

alors, pour information :
# <table name="table" id="catch">
...
# <img width="200" height="200px" src="http://ads.mulhouse.free.fr/Images/logo%20ADS.JPG" />
...
# </table>

utiliser une table pour mettre en forme ici, c'est pas forcement un joli choix... t'as qu'une colone, et c'est pas pour afficher vraiment un tableau... ensuite, une balise img demande alt si mes souvenirs sont bons...

http://blogs.codes-sources.com/fremycompany/archive/2007/07/10/Quel-navigateur-internet-a-le-meilleur-rendu-_3F00_.aspx
ici, tu dis que MSIE affiche bien mieux que firefox les pages qui ne sont pas valides... je tiens simplement a te faire remarquer qu'une page non valide aura (souvent) ete testee pour MSIE (sauf si les invalidites sont volontaires...), peut-etre meme aura t'elle ete cree avec un outil microsoftien...

Commentaire de FREMYCOMPANY le 20/08/2007 11:19:55

Oui, je sais, la TABLE est totalement unitile, c'est pour mes tests ;)

Au début je faisais le test sur l'image proprement dite et je voulais voir si le fait qu'IE ajoute le TBODY automatiquement influencait le fonctionnement de mon script. Mais il s'est révélé que celui-ci réagissait correctement, donc j'ai changé la cible de mon texte à la table, ce qui etait plus logique si on voulait virer la pub ;)
_______________________________________________
Peut-être qu'elle ont été testées pour IE mais elles sont mal-codées quand même ;)

Commentaire de FREMYCOMPANY le 20/08/2007 11:22:10

Et pour ce qui est de l'attribut alt, je m'en fiche un peu vu que l'image existe et que je veux pas qu'elle soit remplacée par du texte...

Le W3C fait ce qu'il veut, il ne m'obligera pas à alourdir mon HTML avec des alt="", juste pour passer ses validateurs ;)

Commentaire de depression le 20/08/2007 13:57:09

"Le W3C fait ce qu'il veut, il ne m'obligera pas à alourdir mon HTML avec des alt="", juste pour passer ses validateurs"

Je ne peux pas te laisser dire une pareille hérésie.

Le W3C est là pour nous offrir un parfait cadre de développement, accessible par tous, comme les malvoyants qui sont heureux quand "alt" apparaît avec tes images.

Le W3C n'est pas là pour t'embêter, mais pour éviter que tout le monde fasse n'importe quoi, comme ce fut le cas avec IE6.

C'est à cause d'une pareille attitude de guignol que l'intégration parfaite des règles des CSS et Dom n'est pas encore achevée dans les navigateurs web...

Commentaire de coucou747 le 20/08/2007 18:05:58 administrateur CS

depression, tu comprendras un jours que la norme est utilisee uniquement comme argument et non pour coder un navigateur... 1 : ms ou mozilla fondation programment des choses, 2 le w3c les valide... donc... la norme ne sert en theorie que pour normaliser... les sites ?

conclusion, plusieurs tests simples ou une validation, bah ce sont les tests qui seront les plus efficaces... c'est crade, mais c'est la vie...

fremycompany, je voulais simplement te dire que tu expliquais simplement ce qui se passait, et non pourquoi... dans les articles de ton blog, tu ne vas pas assez loin (pour moi evidement), ca incite au troll... ca peut faire penser que tu es un gars disons... limite a une vision microsoftienne des choses... j'imagine que ca n'est pas le cas puisque tu prends le temps sur ton blog de faire des tests sous firefox, t'es donc un type un peu plus ouvert, t'as meme lance des navigateurs que je n'ai pas installe depuis en gros 4 ans... donc, tu peux faire un article complet, t'en as les capacites :) ne te limite pas aux faits, explique les... et ne te limite pas a une vue sous windows aussi (dans tes tests de vitesse, tu dis que IE bat FF car IE est optimise pour windows... t'as teste quel FF ? sous quel(s) os ? bref, on s'en fout un peu, firefox, lenteur et fuite de memoire, c'est connu, mais ca reste incomplet...)

Commentaire de FREMYCOMPANY le 21/08/2007 16:09:44

@coucou :

1.
En effet, tu as tout à fait juste en ce qui concerne le W3C ;)
Et en effet, une validation, ca ne veut rien dire. Le site de codes-sources ne passe pas du tout le test W3C, et ca avec des milliers d'erreurs, pourtant, il est testé sous IE et FF ;)

2.
Ben je n'ai jamais eu l'impression d'être pro-MS mais il est vrai que parfois mes posts incitent au troll ;) Pas toujours de manière volontaire, mais c'est vrai.
Expliquer les choses pourrait parfois être une solution, mais il faut pour cela être sur de ce qu'on dit. Or, si on a souvent des suppositions, il est difficile de les prouver, ce pourquoi je préfère laisser l'interprétation au libre choix du lecteur.
Quand à la raison de mon acharnement à rester sous Windows, c'est d'un simple, je n'ai que Windows installé et totalement fonctionnel sur mon PC. Je joue bien avec des LiveCD Linux mais ce n'est pas suffise ment fiable pour faire des test ;)

3.
En tout cas merci de ton point de vue éclairé, je tenterai de tenir compte de tes remarques lors de la conception de mes prochains articles !

Commentaire de coucou747 le 21/08/2007 18:23:50 administrateur CS

bah pour faire court... tu dis qu'un site mal concu sera mieux rendu sous msie, c'est vrai uniquement parce-que statistiquement, de nombreux sites sont faits par des outils ms ou testes pour les outils ms...

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Ajouter une image dynamiquement sour Firfooxe [ par Fildomen ] Salut !! encore un prob de compatibilité !!!j'ajoute des images a un iframe !! des smileys !! ca marche impec sous IE !! mais avec firefox !! il ajout creer des onglet sans utiliser css [ par amaila ] boujour à tous.je veux faire ajouter des onglets en javascript sans uitliser CSS.est il possible?si oui vous pouvez m'aider de trouver des exemples si largeur de chaque element d'un menu horizontal en css [ par stopworries ] Bonjour tlm!Voila g un menu horizontal en css et js qui fonctionne tres bien, le seul probleme, c que dans ma barre de menu, g par exple les titres "f ecrire et ajouter un element <link>www.mysyshop.com</link> [ par claudiusse ] Bonjour a tous j ai un serveur pour mon site j ai ecrit une page html je voudrai que mon utilisateur puisse en cliquant sur un bouton Ajouter un eleme pb ie : ajouter un <option> à un <select> à partir d'une popup [ par yosh ] Bon c assez compliqué mais je vai essayer d'être le plu clair possible J'ai une page dans laquel j'utilise la technologie AJAX couplé Creer une page CSS à partir d'une page html [ par karimfellah ] slt tous le monde, j'aimerai bien vous posez une question:j'ai besoin d'un code source qui permet de creer une page css à partir d'une page html je m' bouton avec le css et html [ par karl45 ] bonjour je voulai savoir si il et possible qu'un bouton (que le crée sur photoshop) puisse changer de couleur a passage de la sourie en utilisant le Problème codage css de mon thème wordpress [ par Wooa ] Bonjour, [b]Ma configuration WP actuelle[/b] [b]- Version de WordPress[/b] : dernière française [b]- Thème utilisé[/b] : WoaWorld [b]- Extensions en CSS/JS gestion d'images [ par Zestyr ] Salut, je voudrais créer un petit jeu Rayman en 2D plaqué (en JS), j'ai toutes les ressources qui me faut, mais je sait pas comment faire pour rendre Jquery validation formulaire [ par alphacrash ] Bonjour, j'ai un problème avec jQuery et une validation de formulaire qui marche sous FF et naturellement sous IE, erreur: Idenificateur, chaine ou no

Nos sponsors

Derniers Blogs

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System