Accueil > > > 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
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
Sources de la même categorie
Commentaires et avis
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
|
Derniers Blogs
SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
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
|