CSS-Hacks/index.html at master · ginader/CSS-Hacks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS Hacks Collection</title>
    <!--
     * code: http://github.com/ginader/CSS-Hacks
     * please report issues at: http://github.com/ginader/CSS-Hacks/issues
     *
     * Copyright (c) 2010 Dirk Ginader (ginader.de)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     *
     * Version: 1.7
     *
     * History:
     * * 1.0 initial release
     * * 1.3 adding support for Firefox 3.5+
     * * 1.4 adding support for Internet Explorer 9+
     * * 1.4.1 added missing exclude for other modern Browsers who also read the CSS3 selector. IE9 Hack is now perfect.
     * * 1.4.2 changed the \9 hack to \0 as it appears to be more reliable in IE9
     * * 1.5 adding Support for Firefox 4 thanks to Estelle Weyl
     * * 1.5.1 changed \0 back to \9 as \0 was also triggering Opera while \9 does not
     * * 1.5.2 added an Opera-hack
     * * 1.6 added Hack for IE 10 (not working yet)
     * * * also added QUnit for automated testing of the results
     * * 1.7 new working hack for IE 10
    -->

    <link rel="stylesheet" type="text/css" href="tests/qunit-1.10.0.css">

    <style type="text/css">
        #more{
          display:block;
          padding-top:2em;
        }

        body p { display: none; }

        /*Firefox 2 and 3 */
        #firefox2, x:-moz-any-link {
          display: block;
          *display: none; /* overwrite for ie6 and ie7*/
        }

        /*Firefox 3*/
        #firefox3, x:-moz-any-link, x:default {
          display: block;
          *display: none; /* overwrite for ie6 and ie7*/
        }

        /* Firefox 3.5+ */
        BODY:nth-of-type(1) #firefox3_5, x:-moz-any-link, x:default {
            display: block;
        }

        /* Firefox 3.6+ */
        BODY:nth-of-type(1) #firefox3_6, x:-moz-any-link, x:default {
            display: block;
        }

        /* Firefox 3.6+ */
        @media screen and (-moz-images-in-menus) {
            #firefox3_6 {
                display: block;
            }
        }

        /* Firefox 4+ */
        @media screen and (min--moz-device-pixel-ratio:0) {
            #firefox4 {
                display: block;
            }
        }

        /* IE 7 */
        html > body #ie7 {
            *display: block;
        }

        /*IE 6 and IE 7 */
        #ie6andie7 {
             *display: block;
        }

        /* IE 6 */
        body #ie6 {
             _display: block;
        }

        /* IE6, IE 7, IE 8, IE 9 and IE 10 */
        body #ie6andie7andie8andie9andie10{
            display:block\9;
        }

        /* IE 8 */
        body #ie8{
            display:block \9;
            *display: none; /* overwrite for ie6 and ie7*/
        }
        body #ie8:nth-of-type(1n){ /* overwrite for ie9 which still also reads the \9 hack */
            display:none;
        }

        /* IE 9+ */
        body #ie9:nth-of-type(1n){ /* CSS3 Selector that is interpreted by many modern Browsers including IE()*/
            display:block \9; /* Hack to specify Internet Explorers including 9 so we exclude FF, webkit, etc */
        }

        /* IE 10+ */
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            #ie10{
                display:block
            }
        }

        /* IE 9, IE 10 */
        @media screen and (min-width:0\0) {
            #ie9andie10{
                display:block;
            }
        }


        /* Webkit (Safari and Chrome) */
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            #webkit {
                display: block;
            }
        }

        /* Opera - doesn't work in Opera 12 */
        @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
            head~body #opera {
                display: block;
            }
        }

        /* Opera again - works in Opera 12 */
        x:-o-prefocus, #opera2 {
            display: block;
            }
     </style>

</head>
<body>
    <p id="opera">Opera 7.2+</p>
    <p id="opera2">Opera (smaller rule)</p>
    <p id="webkit">Webkit (Safari and Chrome)</p>
    <p id="firefox2">Firefox 2 and 3</p>
    <p id="firefox3">Firefox 3+</p>
    <p id="firefox3_5">Firefox 3.5+</p>
    <p id="firefox3_6">Firefox 3.6+</p>
    <p id="firefox4">Firefox 4+</p>
    <p id="ie6">IE 6</p>
    <p id="ie7">IE 7</p>
    <p id="ie6andie7">IE 6 and IE7</p>
    <p id="ie6andie7andie8andie9andie10">IE6, IE 7, IE 8, IE 9, IE10</p>
    <p id="ie8">IE8</p>
    <p id="ie9">IE9+</p>
    <p id="ie9andie10">IE9 and IE10</p>
    <p id="ie10">IE10+</p>
    <pre>
        check the code to see how the CSS Hacks work or <a href="http://blog.ginader.de/archives/2009/02/01/CSS-Voodoo-The-dark-art-of-CSS-Hacks.php">Read more about the CSS Hacks used in this Demo here</a>
    </pre>

<!-- the following code is not needed for the hack.
  This is for Unit testing only -->

    <div id="qunit"></div>
    <script src="tests/jquery-1.8.2.min.js"></script>
    <script src="tests/qunit-1.10.0.js"></script>
    <script src="tests/tests.js"></script>
</body>
</html>