Find file
Fetching contributors…
Cannot retrieve contributors at this time
226 lines (136 sloc) 9.61 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Making "Pure CSS3" demos better | Divya Manian</title>
<meta name="author" content="Divya Manian">
<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;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/book-reviews-for-january-and-february-2011.html" title="Book Reviews for January & February 2011">&#x276C;</a>
<a class="next" href="/bokeh-with-css3-gradients.html" title="Bokeh with CSS3 Gradients">&#x276D;</a>
<time datetime="2011-02-17T00:00:00+05:30" pubdate><span class='month'>Feb</span> <span class='day'>17</span> <span class='year'>2011</span></time>
<h1 class="entry-title"><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></h1>
<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="">Pure CSS3 Slideshow</a>.</p>
<p>Here are some reasons why this is not a great example of best practices:</p>
<li>Uses a table for navigation when the semantic nav element (or a simple list) would do.</li>
<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="">other</a> <a href="">browsers</a>?)</li>
<li><p>This is how it degrades on browsers that do not support CSS3 transitions, and transforms:</p>
<p><img src="" alt="79e91b32f7713c3a03a5650e476ade27.png" border="0" width="600" height="348" /></p>
<p>So, lets fix it! Here is the final result:</p>
<iframe style="width: 100%; height: 400px" src=",html,css"></iframe>
<li><p>No translateX functions. All we need to do is to animate the <code>left</code> property. So:</p>
<pre><code>#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }</code></pre>
<pre><code>#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }</code></pre>
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.
<li><p>No tables for nav! Just use the <code>nav</code> element with a set of links:</p>
&lt;td&gt;&lt;a href=&quot;#a1&quot; id=&quot;p1&quot;&gt;1&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href=&quot;#a2&quot; id=&quot;p2&quot;&gt;2&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href=&quot;#a3&quot; id=&quot;p3&quot;&gt;3&lt;/a&gt;&lt;/td&gt;
<p>becomes: </p>
<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>
<p>In the default view, the first page is positioned outside the viewport:</p>
<pre><code>/* Page Positioning */
#i1 { left: 100%; }
#i2 { left: 200%; }
#i3 { left: 300%; }</code></pre>
<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>
<pre><code>/* Pages */
#i2 { left: 100%; }
#i3 { left: 200%; } </code></pre>
<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>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2011-02-17T00:00:00+05:30" pubdate><span class='month'>Feb</span> <span class='day'>17</span> <span class='year'>2011</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];