Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

488 lines (431 sloc) 23.379 kB
<!DOCTYPE html>
<html>
<head>
<script src="js/modernizr.js"></script>
<title>CSS3: Possibilities, Best Practices and Pitfalls</title>
<link rel="stylesheet" href="css/html5-reset.css">
<link rel="stylesheet" href="css/css3.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="icon" href="images/favicon.png" type="image/png">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=960" id="meta-viewport">
<script>
if (screen.availWidth && screen.availWidth < 1025) {
var mvp = document.getElementById('meta-viewport');
mvp.setAttribute('content','width=min-device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
}
</script>
<link rel="apple-touch-icon-precomposed" href="images/touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch-icon-144x144.png">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<section id="intro">
<header>
<h1>CSS3: Possibilities, Best Practices and Pitfalls</h1>
<a href="#modules" title="Modules" rel="next">Modules</a>
</header>
<div class="entry-content">
<p>By <a href="http://dryan.com/" title="dryan.com" rel="me external">Daniel Ryan</a></p>
<p><a href="http://devchatt.org" title="DevChatt 2011" rel="external">DevChatt 2011</a></p>
</div>
</section>
<section id="modules">
<header>
<a href="#intro" title="CSS3: Possibilities, Best Practices and Pitfalls" rel="prev">CSS3: Possibilities, Best Practices and Pitfalls</a>
<h1>CSS3 Modules Available Today</h1>
<a href="#selectors" title="Advanced Selectors">Advanced Selectors</a>
</header>
<div class="entry-content">
<ul>
<li><a href="#selectors" title="Selectors">Selectors</a></li>
<li><a href="#color" title="Color">Color</a></li>
<li><a href="#backgrounds-borders" title="Backgrounds &amp; Borders">Backgrounds <span class="amp">&#x26;</span> Borders</a></li>
<li><a href="#multi-column" title="Multi-column Layouts">Multi-column Layouts</a></li>
<li><a href="#media-queries" title="Media Queries">Media Queries</a></li>
</ul>
</div>
<footer>
<p>For the complete list see <a href="http://css3.info/modules" title="CSS3.info Modules List" rel="external">CSS3 Info Modules List</a></p>
</footer>
</section>
<section id="selectors">
<header>
<a href="#modules" title="Modules" rel="prev">Modules</a>
<h1>Advanced Selectors</h1>
<a href="#color" title="Color" rel="next">Color</a>
</header>
<div class="entry-content">
<h2>Positional Selectors <a href="http://jsfiddle.net/dryan/2XqxV/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code title="Selects a child element of a specified parent element">element &gt; element</code></li>
<li><code title="Selects a sibling element of a specified element">element + element</code></li>
<li><code title="Selects a general sibling element of a specified element">element ~ element</code></li>
<li><code title="Selects an element that is the first child of its parent">element:first-child</code></li>
<li><code title="Selects an element that is the last child of its parent">element:last-child</code></li>
<li><code title="Selects an element that is the only child of its parent">element:only-child</code></li>
<li><code title="Selects an element that is the nth child of its parent">element:nth-child(expression)</code></li>
<li><code title="Selects an element that is the first child of its parent of this element type">element:first-of-type</code></li>
<li><code title="Selects an element that is the last child of its parent of this element type">element:last-of-type</code></li>
<li><code title="Selects an element that is the nth child of its parent of this element type">element:nth-of-type(expression)</code></li>
<li><code title="Selects an element that is the only child of its parent of this element type">element:only-of-type</code></li>
<li><code title="Selects an psuedo-element that is the first line of its parent">element:first-line</code></li>
<li><code title="Selects an psuedo-element that is the first letter of its parent">element:first-letter</code></li>
</ul>
<h2>Multiple Classes <a href="http://jsfiddle.net/dryan/Lmr82/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code title="Selects an element with all of the specified class names">element.class1.class2</code></li>
</ul>
<h2>Attribute Selectors <a href="http://jsfiddle.net/dryan/HK8uD/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code title="Selects an element with the specified attribute">element[attr]</code></li>
<li><code title="Selects an element with the specified attribute that equals value">element[attr=value]</code></li>
<li><code title="Selects an element with the specified attribute that starts with value">element[attr^=value]</code></li>
<li><code title="Selects an element with the specified attribute that ends with value">element[attr$=value]</code></li>
<li><code title="Selects an element with the specified attribute that contains value">element[attr*=value]</code></li>
</ul>
<h2>Psuedo Selectors <a href="http://jsfiddle.net/dryan/HK8uD/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code title="Creates generated content for the element at the specified position">element:before, element:after</code></li>
<li><code title="Selects an element in the specified state">element:hover, element:active</code></li>
<li><code title="Selects an element that's id attribute matches the current URI hash">element:active</code></li>
<li><code title="Selects an element with no content">element:empty</code></li>
<li><code title="Selects an element that does not match the specified selector">element:not(selector)</code></li>
<li><code title="Selects a psuedo-element of user selected text or elements">element::selection</code></li>
</ul>
<h2>Form Input Selectors <a href="http://jsfiddle.net/dryan/YKNKa/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code title="Selects an input element which has user focus">element:focus</code></li>
<li><code title="Selects an input element which is enabled">element:enabled</code></li>
<li><code title="Selects an input element which is disabled">element:disabled</code></li>
<li><code title="Selects an input element which is checked">element:checked</code></li>
<li><code title="Selects an input element which is required">element:required</code></li>
<li><code title="Selects an input element which is optional">element:optional</code></li>
<li><code title="Selects an input element which is valid">element:valid</code></li>
<li><code title="Selects an input element which is invalid">element:invalid</code></li>
<li><code title="Selects an input element which is in range">element:in-range</code></li>
<li><code title="Selects an input element which is out of range">element:out-of-range</code></li>
<li><code title="Selects an input element which is read-only">element:read-only</code></li>
<li><code title="Selects an input element which is read-write">element:read-write</code></li>
</ul>
</div>
<footer>
<p>For browser support information see <a href="http://quirksmode.org/css/contents.html" title="Quirksmode.org Selectors Chart" rel="external">Quirksmode.org</a></p>
</footer>
</section>
<section id="color">
<header>
<a href="#selectors" title="Advanced Selectors" rel="prev">Advanced Selectors</a>
<h1>Color</h1>
<a href="#hsl-in-action" title="HSL in Action" rel="next">HSL in Action</a>
</header>
<div class="entry-content">
<h2>Properties Covered</h2>
<ul>
<li><code>color (background-color, border-color, outline-color)</code></li>
<li><code>opacity</code></li>
</ul>
<h2>New Color Values</h2>
<p>In addition to the older keyword and hex colors, we now have:</p>
<ul rel="example">
<li><code>rgb(250, 42, 0)</code></li>
<li><code>rgba(250, 42, 0, 0.75)</code></li>
<li><code>hsl(10, 100%, 49%)</code></li>
<li><code>hsla(10, 100%, 49%, 0.75)</code></li>
</ul>
</div>
</section>
<section id="hsl-in-action">
<header>
<a href="#color" title="Color" rel="prev">Color</a>
<h1>HSL in Action</h1>
<a href="#backgrounds-borders" title="Backgrounds &amp; Borders" rel="next">Backgrounds <span class="amp">&amp;</span> Borders</a>
</header>
<div class="entry-content">
<ul>
<li>
<div style="background: hsl(10, 100%, 49%)"><code>hsl(10, 100%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(10, 80%, 49%)"><code>hsl(10, 80%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(10, 60%, 49%)"><code>hsl(10, 60%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(10, 40%, 49%)"><code>hsl(10, 40%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(30, 100%, 49%)"><code>hsl(30, 100%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(30, 80%, 49%)"><code>hsl(30, 80%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(30, 60%, 49%)"><code>hsl(30, 60%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(30, 40%, 49%)"><code>hsl(30, 40%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(50, 100%, 49%)"><code>hsl(50, 100%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(50, 80%, 49%)"><code>hsl(50, 80%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(50, 60%, 49%)"><code>hsl(50, 60%, 49%)</code></div>
</li>
<li>
<div style="background: hsl(50, 40%, 49%)"><code>hsl(50, 40%, 49%)</code></div>
</li>
</ul>
</div>
</section>
<section id="backgrounds-borders">
<header>
<a href="#hsl-in-action" title="HSL in Action" rel="prev">HSL in Action</a>
<h1>Backgrounds <span class="amp">&amp;</span> Borders</h1>
<a href="#multi-column" title="Multi-column Layouts" rel="next">Multi-column Layouts</a>
</header>
<div class="entry-content">
<h2>New Border Properties</h2>
<ul>
<li><a href="http://www.css3.info/preview/rounded-border/" title="border-radius Examples" rel="external"><code>border-radius</code></a></li>
<li><a href="http://www.css3.info/preview/border-image/" title="border-image Examples" rel="external"><code>border-image</code></a></li>
<li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break" title="box-decoration-break Example" rel="external"><code>box-decoration-break</code></a></li>
</ul>
<h2>New Background Properties</h2>
<ul>
<li><a href="http://www.css3.info/preview/multiple-backgrounds/" title="Multiple Backgrounds Examples" rel="external">Multiple Backgrounds</a> <br><code>element { background: url('foo.gif'), url('bar.png'); }</code></li>
<li><a href="http://www.css3.info/preview/background-origin-and-background-clip/" title="background-clip and background-origin Examples" rel="external"><code>background-clip, background-origin</code></a></li>
<li><a href="http://www.css3.info/preview/background-size/" title="background-size Examples" rel="external"><code>background-size</code></a></li>
</ul>
</div>
</section>
<section id="multi-column">
<header>
<a href="#backgrounds-borders" title="Backgrounds &amp; Borders" rel="prev">Backgrounds <span class="amp">&amp;</span> Borders</a>
<h1>Multi-column Layouts</h1>
<a href="#media-queries" title="Media Queries" rel="next">Media Queries</a>
</header>
<div class="entry-content">
<h2>New Properties <a href="http://jsfiddle.net/dryan/njTDT/" title="View Demo" rel="external">Demo</a></h2>
<ul>
<li><code>column-width</code></li>
<li><code>column-count</code></li>
<li><code>column-gap</code></li>
<li><code>column-rule</code></li>
<li><code>column-span</code></li>
<li><code>column-fill</code></li>
</ul>
<h2>Problems</h2>
<p>Only <code>-width</code>, <code>-count</code>, <code>-gap</code>, and <code>-rule</code> are properly supported at this time. Items are often balanced incorrectly.</p>
</div>
</section>
<section id="media-queries">
<header>
<a href="#multi-column" title="Multi-column Layouts" rel="prev">Multi-column Layouts</a>
<h1>Media Queries</h1>
<a href="#css-transitions" title="CSS Transitions" rel="next">CSS Transitions</a>
</header>
<div class="entry-content">
<ul class="no-columns">
<li>The key to “responsive layouts”</li>
<li>Builds on older media queries like <code>@media print { … }</code></li>
<li>Better than browser sniffing for supporting multiple resolutions (ie, mobile devices)</li>
<li>Supports larger displays while still providing a good user experience for smaller resolutions</li>
<li>Experimental support for high density displays (ie, iPhone 4) <code>@media screen and (-webkit-min-device-pixel-ratio:2) { … }</code></li>
</ul>
<h2>Two Ways to Implement</h2>
<ol>
<li>Inline: <code>@media print { … }</code></li>
<li>Separate Files: <code>&#x3C;link href=&#x22;print.css&#x22; rel=&#x22;stylesheet&#x22; media=&#x22;print&#x22;&#x3E;</code></li>
</ol>
</div>
<footer>
<p>For great examples of responsive layouts see <a href="http://mediaqueri.es/" title="MediaQueri.es" rel="external">MediaQueri.es</a></p>
</footer>
</section>
<section id="css-transitions">
<header>
<a href="#media-queries" title="Media Queries" rel="prev">Media Queries</a>
<h1>CSS Transitions</h1>
<a href="#css-animations" title="CSS Animations" rel="next">CSS Animations</a>
</header>
<div class="entry-content">
<p>This presentation is built solely using CSS transitions. <a href="http://modernizr.com/" title="Modernizr" rel="external">Modernizr</a> provides feature-detection for progressive enhancement.</p>
<pre><code>.js section { display: none; }
.targetselector section, .js section { position: absolute; top: 0; right: 0; bottom: auto; left: 0; z-index: 1; min-height: 100%; min-width: 320px; }
.targetselector section { display: block; }
.opacity section { opacity: 0; }
.no-opacity section { display: none; }
.csstransitions section { transition: opacity 1s linear, z-index 1s; }
.targetselector section:target, .js section.target { opacity: 1; display: block; z-index: 2; }
section footer { position: absolute; top: auto; right: 0; bottom: 0; left: 0; padding: 1.15em; background: #333; text-align: center; }
.csstransitions.csstransforms3d.targetselector section footer { transform: translateY(4em); transform-style: preserve3d; transition: transform 1s; }
.csstransitions.csstransforms3d.targetselector section:target footer { transform: translateY(0); }</code></pre>
<h2>Best Practices</h2>
<ul class="no-columns">
<li>Inline (<code>style="…"</code>) transitions do not animate as smoothly as those based in a stylesheet or <code>&lt;style&gt;</code> tag</li>
<li>If the transition is informative and not just decorative, provide a <code>jQuery.animate</code> fallback</li>
</ul>
</div>
<footer>
<p>Check out the <a href="http://apps.wikihow.com/survivalkit/" title="WikiHow Survival Kit" rel="external">WikiHow “Chrome App”</a> for a complex example</p>
</footer>
</section>
<section id="css-animations">
<header>
<a href="#css-transitions" title="CSS Transitions" rel="prev">CSS Transitions</a>
<h1>CSS Animations</h1>
<a href="#css-transforms" title="CSS Transforms" rel="next">CSS Transforms</a>
</header>
<div class="entry-content">
<ul class="no-columns">
<li>When simple transitions between states aren't enough</li>
<li>CSS3’s attempt to be a Flash killer</li>
<li>Works with keyframes, like all standard animation software</li>
</ul>
<h2>Highlighting an Element</h2>
<pre><code>@keyframes highlight {
0% {
background: transparent;
}
50% {
background: #ff8;
}
100% {
background: transparent;
}
}</code></pre>
</div>
<footer>
<p><a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html" title="Poster Circle" rel="external">The Spinning Wheel of Awesome</a></p>
</footer>
</section>
<section id="css-transforms">
<header>
<a href="#css-animations" title="CSS Animations" rel="prev">CSS Animations</a>
<h1>CSS Transforms</h1>
<a href="#css-transforms-continued" title="CSS Transforms (continued)" rel="next">CSS Transforms (continued)</a>
</header>
<div class="entry-content">
<ul class="no-columns">
<li>Arguably the most powerful addition in CSS3</li>
<li>Allows 2D and 3D manipulation</li>
</ul>
<h2>Transform Functions <small>* denotes 3D transform</small></h2>
<ul>
<li><code>matrix(num, num, num, num, num, num)</code></li>
<li><code>matrix3d(num, num, num, num, num, num, num, num, num, num, num, num, num, num, num, num)</code>*</li>
</ul>
<ul>
<li><code>perspective(num)</code>*</li>
</ul>
<ul>
<li><code>rotate(degree)</code></li>
<li><code>rotate3d(x, y, z, degree)</code>*</li>
<li><code>rotateX(num)</code>*</li>
<li><code>rotateY(num)</code>*</li>
<li><code>rotateZ(num)</code>*</li>
</ul>
<ul>
<li><code>scale(x[, y])</code></li>
<li><code>scaleX(num)</code></li>
<li><code>scaleY(num)</code></li>
<li><code>scale3d(x, y, z)</code>*</li>
<li><code>scaleZ(num)</code>*</li>
</ul>
<ul>
<li><code>skew(x[, y])</code></li>
<li><code>skewX(degree)</code></li>
<li><code>skewY(degree)</code></li>
</ul>
<ul>
<li><code>translate(x[, y])</code></li>
<li><code>translateX(num)</code></li>
<li><code>translateY(num)</code></li>
<li><code>translate3d(x, y, z)</code>*</li>
<li><code>translateZ(num)</code>*</li>
</ul>
</div>
</section>
<section id="css-transforms-continued">
<header>
<a href="#css-transforms" title="CSS Transforms" rel="prev">CSS Transforms</a>
<h1>CSS Transforms (continued)</h1>
<a href="#conclusion" title="In Conclusion" rel="next">In Conclusion</a>
</header>
<div class="entry-content">
<h2>Best Practices</h2>
<ul class="no-columns">
<li>Even if you're using a 2D function, trigger 3D rendering with <code>transform-style: preserve-3d</code></li>
<li>Most browsers that support 3D transforms use hardware acceleration in 3D mode <em>only</em></li>
</ul>
<h2>Pitfalls</h2>
<ul class="no-columns">
<li>Mixing multiple transforms requires overly complex CSS</li>
<li>Reading the <code>transform</code> value in JavaScript returns a matrix of 6 values for 2D or <em>16 values</em> for 3D</li>
<li>Positioning an element that has been transformed can be challenging; make use of <code>transform-origin</code> to tame the beast</li>
</ul>
</div>
<footer>
<p><a href="http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/" title="The CSS3 matrix() Transform for the Mathematically Challenged">The CSS3 matrix() Transform for the Mathematically Challenged</a></p>
</footer>
</section>
<section id="conclusion">
<header>
<a href="#css-transforms-continued" title="CSS Transforms (continued)" rel="prev">CSS Transforms (continued)</a>
<h1>In Conclusion</h1>
</header>
<div class="entry-content">
<h2>Further Reading</h2>
<ul>
<li><a href="http://easy-reader.net/archives/2010/12/15/the-challenges-and-freedoms-of-creating-a-chrome-app/" title="The Challenges and Freedoms of Creating a Chrome App" rel="external">The Challenges and Freedoms of Creating a Chrome App</a></li>
<li><a href="http://css3.info/" title="CSS3 Info" rel="external">CSS3 Info</a></li>
<li><a href="http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/" title="The CSS3 matrix() Transform for the Mathematically Challenged" rel="external">The CSS3 matrix() Transform for the Mathematically Challenged</a></li>
<li><a href="http://quirksmode.org" title="Quirks Mode" rel="external">Quirks Mode</a></li>
<li><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" title="Understanding CSS3 Transitions" rel="external">Understanding CSS3 Transitions</a></li>
<li><a href="http://24ways.org/" title="24 Ways" rel="external">24 Ways</a></li>
</ul>
<h2>Demos to Make Your <code>&lt;head&gt;</code> Spin</h2>
<ul>
<li><a href="http://mediaqueri.es/" title="Media Queri.es">Media Queri.es</a></li>
<li><a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html" title="Poster Circle" rel="external">The Spinning Wheel of Awesome</a></li>
<li><a href="https://github.com/dryan/css3/" title="View it on Github">This Presentation on Github</a></li>
<li><a href="http://apps.wikihow.com/survivalkit" title="WikiHow Survival Kit" rel="external">WikiHow Survival Kit</a></li>
</ul>
<h2>Automate the Vendor Prefixes</h2>
<ul>
<li><a href="http://cssprefixer.appspot.com/" title="CSS Prefixer" rel="external">CSS Prefixer</a></li>
<li><a href="http://ecsstender.org/" title="eCSStender" rel="external">eCSStender</a></li>
</ul>
<h2>Get in Touch</h2>
<ul>
<li><a href="http://dryan.com/" title="My Website" rel="external">dryan.com</a></li>
<li><a href="mailto:dryan@dryan.com" title="Email Me" rel="external">dryan@dryan.com</a></li>
<li><a href="http://twitter.com/dryan" title="@dryan" rel="external">@dryan</a></li>
</ul>
<p><small>If you friend me on Facebook, I might say yes. If you add me on LinkedIn, I will laugh. A lot.</small></p>
</div>
<footer>
<p>&copy;2011 dryan. All Rights Reserved. Suitable for iframing.</p>
</footer>
</section>
<script charset="utf-8">
if(!window.location.hash.length) {
var sections = document.getElementsByTagName('section');
if(sections.length) {
window.location.hash = sections[0].id;
}
}
</script>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="js/jquery.plugins.js"></script>
<script src="js/css3.js"></script>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-3625251-4");pageTracker._trackPageview();} catch(err) {}</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.