Créer une règle css pour qu'elle s'applique à une élément donné (une balise / noeud (x)html)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 490 fois - Téléchargée 16 fois

Contenu du snippet

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 / Exemple :


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

A voir également

Ajouter un commentaire

Commentaires

coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30 -
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...
FREMYCOMPANY
Messages postés
278
Date d'inscription
jeudi 12 janvier 2006
Statut
Membre
Dernière intervention
22 décembre 2008
-
@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 !
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30 -
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...)
cs_depression
Messages postés
100
Date d'inscription
mardi 7 novembre 2000
Statut
Membre
Dernière intervention
13 juillet 2009
-
"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...
FREMYCOMPANY
Messages postés
278
Date d'inscription
jeudi 12 janvier 2006
Statut
Membre
Dernière intervention
22 décembre 2008
-
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 ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.