JSFiddle - React, Tailwind, and code Playground

by End_i

HTML

<h1>Exemples de hacks CSS</h1>
<p>J'applique simplement le style <code>background-color:blue;</code> aux éléments pour tester le hack</p>

<div class="hack1">
    <p>Devrait être appliqué pour <strong>IE 6</strong> seulement.</p>
    <p>* html div.hack1 { background-color: blue; }</p>
</div>

<div class="hack2">
    <p>Devrait être appliqué pour <strong>IE 6</strong> seulement.</p>
    <p>div.hack2 { _background-color: blue; }</p>
</div>

<div class="hack3">
    <p>Devrait être appliqué pour <strong>IE 7</strong> seulement.</p>
    <p>*+html div.hack3 { background-color: blue; }</p>
</div>

<div class="hack4">
    <p>Devrait être appliqué pour <strong>IE 7</strong> seulement.</p>
    <p>*:first-child+html div.hack4 { background-color: blue; }</p>
</div>

<div class="hack5">
    <p>Devrait être appliqué pour <strong>IE 6 &amp; IE 7</strong>.</p>
    <p>div.hack5 { *background-color: blue; }</p>
</div>

<div class="hack6">
    <p>Devrait être appliqué pour <strong>IE 6, IE 7, IE 8 &amp; IE 9</strong>.</p>
    <p>div.hack6 { background-color: blue\9; }</p>
</div>

<div class="hack7">
    <p>Devrait être appliqué pour <strong>IE 8</strong>.</p>
    <p>div.hack7 { background-color: blue\0/; /* doit être le dernier style */ }</p>
</div>

CSS

/**************************/
/* Les hacks pour le test */
/* Ce qui est important   */
/**************************/

/* IE 6 seulement */
* html div.hack1 { background-color: blue; }
div.hack2 { _background-color: blue; }

/* IE 7 seulement */
*+html div.hack3 { background-color: blue; }
*:first-child+html div.hack4 { background-color: blue; }

/* IE 6 & IE 7 */
div.hack5 { *background-color: blue; }

/* IE 6, IE 7, IE 8 & IE 9 */
div.hack6 { background-color: blue\9; }

/* IE 8 */
div.hack7 { background-color: blue\0/; } /* doit être le dernier style */


/* Les styles de la page générale */
h1 { font-weight:bold; margin:15px 0; font-size:22px; }
p { margin:10px 0; }
div { border:1px solid #000; margin:15px 0; padding:0 5px; width:400px; }
div p { margin:5px 0; }
strong { font-weight:bold; }