Skip to content
Newer
Older
100644 228 lines (138 sloc) 9.49 KB
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored Jun 2, 2012
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Making "Pure CSS3" demos better | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="I appreciate the effort that goes into creating a pure CSS3/HTML5 demo, but unfortunately many beginners consider these demos as representation of &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/making-pure-css3-demos-better.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
35 </nav>
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
5dc1495 Site updated at 2012-06-26 03:50:17 UTC
Divya Manian authored Jun 25, 2012
47 <a class="previous" href="/book-reviews-for-january-and-february-2011.html" title="Book Reviews for January & February 2011">&#x276C;</a>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored Jun 2, 2012
48
49
5dc1495 Site updated at 2012-06-26 03:50:17 UTC
Divya Manian authored Jun 26, 2012
50 <a class="next" href="/bokeh-with-css3-gradients.html" title="Bokeh with CSS3 Gradients">&#x276D;</a>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored Jun 2, 2012
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2011-02-17T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>17</span> <span class='year'>2011</span></time>
64
65 <h1 class="entry-title"><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p>I appreciate the effort that goes into creating a pure CSS3/HTML5 demo, but unfortunately many beginners consider these demos as representation of the best practices in Web Development (many aren&#8217;t). Here is one that got my goat today: A <a href="http://designmadeingermany.de/slideshow/">Pure CSS3 Slideshow</a>.</p>
72
73
74
75
76 <p>Here are some reasons why this is not a great example of best practices:</p>
77
78
79 <ul>
80 <li>Uses a table for navigation when the semantic nav element (or a simple list) would do.</li>
81 <li>Implements features using <code>-moz</code>, <code>-webkit</code> only prefix. Why not add the standard that they are temporary demonstrations for (and while at it, also support <a href="http://opera.com">other</a> <a href="http://ie.microsoft.com/testdrive/">browsers</a>?)</li>
82 <li><p>This is how it degrades on browsers that do not support CSS3 transitions, and transforms:</p>
83 <p><img src="http://nimbupani.com/files/79e91b32f7713c3a03a5650e476ade27.png" alt="79e91b32f7713c3a03a5650e476ade27.png" border="0" width="600" height="348" /></p>
84 </li>
85 </ul>
86
87
88 <p>So, lets fix it! Here is the final result:</p>
89
90
91 <p></p>
92
93 <iframe style="width: 100%; height: 400px" src="http://jsfiddle.net/nimbu/KEqSF/embedded/result,html,css"></iframe>
94
95
96 <h3>Changes:</h3>
97
98
99 <ul>
100 <li><p>No translateX functions. All we need to do is to animate the <code>left</code> property. So:</p>
101 <pre><code>#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
102 #a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
103 #a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }</code></pre>
104 <p>becomes:</p>
105 <pre><code>#a1:target .pages { left: 0%; }
106 #a2:target .pages { left: -100%; }
107 #a3:target .pages { left: -200%; }</code></pre>
108 </li>
109 <li>
110 I added a parent <code>div</code> element for all the pages so we just need to animate that element and not each of the 3 page elements.
111 </li>
112 <li><p>No tables for nav! Just use the <code>nav</code> element with a set of links:</p>
113 <pre>
114 <code>&lt;table&gt;
115 &lt;tr&gt;
116 &lt;td&gt;&lt;a href=&quot;#a1&quot; id=&quot;p1&quot;&gt;1&lt;/a&gt;&lt;/td&gt;
117 &lt;td&gt;&lt;a href=&quot;#a2&quot; id=&quot;p2&quot;&gt;2&lt;/a&gt;&lt;/td&gt;
118 &lt;td&gt;&lt;a href=&quot;#a3&quot; id=&quot;p3&quot;&gt;3&lt;/a&gt;&lt;/td&gt;
119 &lt;/tr&gt;
120 &lt;/table&gt;</code>
121 </pre>
122 <p>becomes: </p>
123 <pre><code>&lt;nav&gt;&lt;a href=&quot;#a1&quot;&gt;1&lt;/a&gt;&lt;a href=&quot;#a2&quot;&gt;2&lt;/a&gt;&lt;a href=&quot;#a3&quot;&gt;3&lt;/a&gt;&lt;/nav&gt;</code></pre>
124 </li>
125 <li>
126 <p>In the default view, the first page is positioned outside the viewport:</p>
127 <pre><code>/* Page Positioning */
128 #i1 { left: 100%; }
129 #i2 { left: 200%; }
130 #i3 { left: 300%; }</code></pre>
131 <p>This means browsers that do not support transitions effectively see a blank page. We fix this but setting the default position as <code>left: 0</code>, and only adjust the positions for the next 2 slides:</p>
132 <pre><code>/* Pages */
133 #i2 { left: 100%; }
134 #i3 { left: 200%; } </code></pre>
135 </li>
136 </ul>
137
138
139 <p>There, now we have a neat little slideshow, that doesn&#8217;t degrade too badly on browsers that do not support the target element (accessible via the horizontal scrollbar for IE6, 7). If there are ways to improve this, please fork the fiddle and link in the comments!</p>
140
141
142 <p></body></p>
143 </div>
144
145 <footer>
146 <p class="meta">This post was posted by
147
148
149 <a href="/about.html">Divya Manian</a>
150 on
151
152
153
154
155
156
157 <time datetime="2011-02-17T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>17</span> <span class='year'>2011</span></time> in
158
159 <span class="categories">
160
161 <a class='category' href='/categories/web-development/'>Web Development</a>
162
163 </span>
164
165 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2011-02-17-making-pure-css3-demos-better.md">please send a pull request</a>.
166 </p>
167 </footer>
168 </article>
169
170 <section>
171 <h1>Comments</h1>
172 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
173 </div>
174 </section>
175
176
177 </div>
178 </div>
179 <aside id="articles">
180 <p><img class="avatar"
181 src="http://a2.twimg.com/profile_images/1696865113/me_normal"
182 height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
183 <h2>Posts on Web Development</h2>
2db5cff Site updated at 2012-06-18 17:59:15 UTC
Divya Manian authored Jun 18, 2012
184 <ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
601f25c Site updated at 2012-06-02 22:06:16 UTC
Divya Manian authored Jun 2, 2012
185 </aside>
186 <footer role="contentinfo"><p>
187 Copy to your heart’s content 2012 - Divya Manian -
188 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
189 </p>
190
191
192 </footer>
193
194
195 <script type="text/javascript">
196 var disqus_shortname = 'nimbublog';
197 var disqus_developer = 1;
198
199
200 var disqus_url = 'http://nimbupani.com/making-pure-css3-demos-better.html';
201 var disqus_identifier = 'http://nimbupani.com/making-pure-css3-demos-better.html';
202
203
204
205
206 (function () {
207 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
208 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
209 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
210 }());
211 </script>
212
213
214 <script src="/javascripts/octopress.js"></script>
215
216 <script>
217 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
218 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
219 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
220 s.parentNode.insertBefore(g,s)}(document,'script'));
221 </script>
222
223
224
225
226 </body>
227 </html>
Something went wrong with that request. Please try again.