snipt

Ctrl+h for KB shortcuts

CSS

Targeting IE

1
2
3
4
5
<!--[if lte IE 9]> Special instructions for all IE browsers 9 and below <![endif]-->

<!--[if IE]> Special instructions for all IE browsers <![endif]-->

<!--[if !IE]> Special instructions for all browsers except any IE browser <![endif]-->
https://snipt.net/embed/50b3f47bf948fa569834701704a8567c/
/raw/50b3f47bf948fa569834701704a8567c/
50b3f47bf948fa569834701704a8567c
css
CSS
6
2019-05-15T19:07:11
True
False
False
/api/public/snipt/15560/
targeting-ie
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="o">&lt;!</span><span class="nt">--</span><span class="o">[</span><span class="nt">if</span> <span class="nt">lte</span> <span class="nt">IE</span> <span class="nt">9</span><span class="o">]&gt;</span> <span class="nt">Special</span> <span class="nt">instructions</span> <span class="nt">for</span> <span class="nt">all</span> <span class="nt">IE</span> <span class="nt">browsers</span> <span class="nt">9</span> <span class="nt">and</span> <span class="nt">below</span> <span class="o">&lt;![</span><span class="nt">endif</span><span class="o">]</span><span class="nt">--</span><span class="o">&gt;</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="o">&lt;!</span><span class="nt">--</span><span class="o">[</span><span class="nt">if</span> <span class="nt">IE</span><span class="o">]&gt;</span> <span class="nt">Special</span> <span class="nt">instructions</span> <span class="nt">for</span> <span class="nt">all</span> <span class="nt">IE</span> <span class="nt">browsers</span> <span class="o">&lt;![</span><span class="nt">endif</span><span class="o">]</span><span class="nt">--</span><span class="o">&gt;</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a><span class="o">&lt;!</span><span class="nt">--</span><span class="o">[</span><span class="nt">if</span> <span class="o">!</span><span class="nt">IE</span><span class="o">]&gt;</span> <span class="nt">Special</span> <span class="nt">instructions</span> <span class="nt">for</span> <span class="nt">all</span> <span class="nt">browsers</span> <span class="nt">except</span> <span class="nt">any</span> <span class="nt">IE</span> <span class="nt">browser</span> <span class="o">&lt;![</span><span class="nt">endif</span><span class="o">]</span><span class="nt">--</span><span class="o">&gt;</span> </span></pre></div> </td></tr></table>
"ie conditional statement", "targeting ie", html

CSS

IE hacks

1
2
3
4
5
6
div {
   color: black; /* works for all browsers */
   color: red\9; /* works for IE8 and below */
   *color: green; /* works for IE7 and below */
   _color: blue; /* works for IE6 and below */
} 
https://snipt.net/embed/c0def65d3fa96ea72732719d5850d387/
/raw/c0def65d3fa96ea72732719d5850d387/
c0def65d3fa96ea72732719d5850d387
css
CSS
6
2019-05-15T01:53:29
True
False
False
/api/public/snipt/15559/
ie-hacks-1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">div</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span> <span class="c">/* works for all browsers */</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="err">\</span><span class="m">9</span><span class="p">;</span> <span class="c">/* works for IE8 and below */</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">*</span><span class="nb">color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;</span> <span class="c">/* works for IE7 and below */</span> </span><span id="L-5"><a name="L-5"></a> <span class="n">_color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="c">/* works for IE6 and below */</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
"bug fix", "ie hack", css

CSS

No more page shift

html { overflow-y: scroll; }
https://snipt.net/embed/1c2b0462944b5f9cbe6e39b1d04898da/
/raw/1c2b0462944b5f9cbe6e39b1d04898da/
1c2b0462944b5f9cbe6e39b1d04898da
css
CSS
1
2019-05-15T07:15:55
True
False
False
/api/public/snipt/15557/
no-more-page-shift
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">html</span> <span class="p">{</span> <span class="nb">overflow-y</span><span class="o">:</span> <span class="nb">scroll</span><span class="p">;</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
"bug fix", "scroll bar", css