forked from jakearchibald/sass-ie
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (181 loc) · 6.29 KB
/
index.html
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
179
180
181
182
183
184
185
186
187
188
189
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>IE-friendly mobile-first CSS with Sass 3.2</title>
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/all-old-ie.css">
<script>'article|section'.replace(/\w+/g,function(t){document.createElement(t)})</script>
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/all.css">
<!--<![endif]-->
</head>
<body>
<div class="page">
<article class="primary">
<div class="content-margins">
<h1>What's going on here?</h1>
<p>
Building CSS mobile-first is the way forward, because blah
blah blah progressive enhancement blah.
Problem is, Internet Explorer prior to 9 ignores anything
within media query blocks, leaving those browsers with
mobile styles.
</p>
<p>
Not all of us can get away with that, but thankfully,
<a href="https://github.com/nex3/sass/issues/408#issuecomment-6086901">as Chris Eppstein points out</a>,
<a href="http://sass-lang.com/">Sass</a> 3.2 (not yet
released) can generate a separate stylesheet
with everything it needs to create a "desktop" look.
</p>
<p>
This page was built mobile-first where smaller width devices
get a single column layout, but IE8 and below still get a
two column layout.
<a href="https://github.com/jakearchibald/sass-ie">The code is on github</a>,
but read on for a brief explanation.
</p>
<section>
<h1>_layout.scss</h1>
<p>This file controls the page layout:</p>
<pre><code>.page {
max-width: 70em;
margin: 0 auto;
}
.content-margins {
margin: 10px;
@include respond-min(60em) {
margin: 20px;
}
@include respond-min(75em) {
margin: 40px;
}
}
.primary {
@include respond-min(45em) {
float: left;
width: 70%;
@include old-ie {
// These hacks won't appear in the normal stylesheet
display: inline;
zoom: 1;
whatever-ie-needs: le-sigh;
}
& .content-margins {
margin-right: 30px;
}
}
}
.secondary {
@include respond-min(45em) {
float: left;
width: 30%;
}
}</code></pre>
<p>
As you can see, there are some special
blocks for doing responsive stuff, along with
some IE specific stuff. These are user-defined
mixins, defined in...
</p>
<h1>_utils.scss</h1>
<pre><code>$fix-mqs: false !default;
@mixin respond-min($width) {
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $fix-mqs >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (min-width: $width) {
@content;
}
}
}
// I also have a respond-max mixin, that does what you might expect
$old-ie: false !default;
@mixin old-ie {
// Only use this content if we're dealing with old IE
@if $old-ie {
@content;
}
}</code></pre>
<h1>all.scss</h1>
<p>
This simply brings all the includes together.
</p>
<pre><code>@import 'utils';
@import 'global';
@import 'layout';</code></pre>
<h1>all-old-ie.scss</h1>
<p>This generates the IE<9 stylesheet:</p>
<pre><code>$old-ie: true;
$fix-mqs: 65em;
@import 'all';</code></pre>
<p>
Here we set the width we want our media queries
to be flattened for. In this case, we want to
act like the document is 65em wide. This means our
media queries for greater-than 45em & 60em apply,
but the one for 70em is simply discarded.
</p>
<h1>Including the CSS</h1>
<p>
To give the right CSS to the right browsers,
we use good old conditional comments:
</p>
<pre><code><!--[if lt IE 8]>
<link rel="stylesheet" href="css/all-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/all.css">
<!--<![endif]--></code></pre>
</section>
<section>
<h1>Other solutions</h1>
<p>
There are other ways to cater for IE that don't
depend on Sass, such as
<a href="http://adactio.com/journal/4494/">this method by Jeremy Keith</a>
and
<a href="https://github.com/scottjehl/Respond">respond.js</a>.
</p>
<p>
Jeremy's method works but depends on you putting your
responsive stuff in a separate file. Personally I find that
putting overwrites far away from the thing it's overwriting
makes it difficult to maintain, which is also why
I'm against separately-maintained CSS files for IE hacks.
</p>
<p>
respond.js is obviously JavaScript dependant, and requires you
to host the CSS on the same server as the page, meaning you
can't use a performance enhancing CDN. Also, I hear it's a little
slow, which JS-CSS crawlers generally are, but I don't any
evidence particular to respond.js.
</p>
<p>So, there you go. Roll on Sass 3.2!</p>
</section>
</div>
</article>
<section class="secondary">
<div class="content-margins">
<h1>Some dummy secondary content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis orci eget nisl luctus et luctus diam interdum. Etiam porttitor tincidunt erat, ac lacinia nibh lacinia sed.</p>
<p>Pellentesque tincidunt consectetur dolor, nec facilisis mi dapibus eu. Duis urna dui, fermentum dictum varius ut, ullamcorper eget augue.</p>
<p>Nulla laoreet lacinia lorem eu adipiscing. Sed commodo blandit sapien sit amet dictum. Sed suscipit, massa non ornare congue, nisl neque rhoncus turpis, facilisis elementum ligula lorem eget ligula.</p>
<p>Maecenas posuere mi eget justo ornare nec pretium velit consectetur. Mauris nec risus augue. Suspendisse sed libero eros, hendrerit dignissim magna. Quisque tortor neque, mollis congue aliquet vitae, pharetra non massa.</p>
<p>Praesent sed mauris ut sapien ultricies tincidunt a in turpis.</p>
</div>
</section>
</div>
</body>
</html>