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

Commenter

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

S'inscrire maintenant

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.

Du même auteur (FREMYCOMPANY)