Indeterminate Checkboxes

Chris Coyier — Tue, 09 Aug 2011 04:44:12 +0000

Checkbox inputs can only have two values: checked or unchecked. The default is unchecked. You can control that in HTML like this:


//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:

Visually, there are actually three states a checkbox can be in: checked, unchecked, or indeterminate. They look like this:

Here are some things to know about indeterminate checkboxes:

You can't make a checkbox indeterminate through HTML. There is no indeterminate attribute. It is a property of checkboxes though, which you can change via JavaScript.

var checkbox = document.getElementById("some-checkbox");
//AN_Xml:checkbox.indeterminate = true;

or jQuery style:

$("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

The indeterminate state is visual only. The checkbox is still either checked or unchecked as a value and will submit that value to the form it is a part of. That means the visual indeterminate state masks the real value of the checkbox, so that better make sense in your UI!

Like the checkboxes themselves, indeterminate state looks different in different browsers. Here's Opera 11.50 on Mac:

Use Case?

The reason I'm writing this at all is because I just had a use case come up for this state: nested checkboxes. Each checkbox may have child checkboxes. If all those children are checked, it may be checked. If none are checked, it is unchecked. If some of them are checked, then it's in an indeterminate state (in this case symbolically meaning "partially" checked).

View Demo Download Files

This demo isn't perfect. It only checked one level "up" for determining indeterminate state. Ideally it would check up recursively until the top. If you wanna fix it to do that, I'll update the code and credit you.

Advertise here with BSA

Indeterminate Checkboxes is a post from CSS-Tricks

New Poll: Site Title Structure

Chris Coyier — Sat, 06 Aug 2011 04:42:00 +0000

The new poll is up in the sidebar of the site. This time it's about the structure of page titles. Literally, the </code> tag in the head of a site that gives the browser window/tab its title. I'm just asking for your "favorite", as in, personal preference. Take that how you will, we can discuss the reasonings in the comments and in the poll wrap-up post. <span //AN_Xml:id="more-13460"></span>The official question:</p><blockquote><p>Of these choices, what is your favorite page title structure for blog article in a specific category?</p></blockquote><p>So there are three bits of relevant information of this page that we'll be dealing with:</p><ul><li>Article title</li><li>Category</li><li>Site name</li></ul><p>The poll options are various configurations of those three things.</p><p>Maybe we can do a follow-up poll on favorite separators. I like the vertical bar. Wufoo uses the · a lot which I also like. I dislike the little arrows. Tangent alert.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13460&c=2063335745' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13460-new-poll-site-title-structure/">New Poll: Site Title Structure</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Prefixr</h1> <p>Chris Coyier — Thu, 04 Aug 2011 17:12:37 +0000</p> <p><p>Jeffrey Way has created an app which looks through your CSS and adds all the missing CSS3 vendor prefixes. It's smart enough to do it right no matter which ones you've added or forgotten. Cooler, it has an API which allows you to it without ever leaving your favorite text editor.</p><p><a //AN_Xml:href="http://prefixr.com/" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13453-prefixr/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13453&c=1220758855' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13453-prefixr/">Prefixr</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>What Makes For a Semantic Class Name?</h1> <p>Chris Coyier — Thu, 04 Aug 2011 15:37:19 +0000</p> <p>Semantics in HTML is always a hot topic. Some people strive for it at all times. Some people critisize a dogmatic adherence to it. Some people don't know what the heck it is. <span //AN_Xml:id="more-13423"></span></p><p>I'd describe semantics as it relates to HTML as tags, classes, IDs, and attributes <strong>describing but not specifying</strong> the content they enclose. Let's start with an example we can probably all agree on.</p><h4>Bad Semantics</h4><pre rel="HTML"><code><div class="article"> //AN_Xml: <div class="article_title">Smurf Movie Kinda Sucks</div> //AN_Xml: <div class="the_content">Not surprisingly, this weeks release of //AN_Xml: <div class="darkbold">The Smurfs</div> kinda sucks.</div> //AN_Xml:</div></code></pre><h4>Good Semantics</h4><pre rel="HTML"><code><article> //AN_Xml: <h1>Smurf Movie Kinda Sucks</h1> //AN_Xml: <p>Not surprisingly, this weeks release of //AN_Xml: <b>The Smurfs</b> kinda sucks.</p> //AN_Xml:</article></code></pre><p>Whether or not you think HTML5 is ready to use or not, I think you would agree that when you need an HTML element for an article, that the <code><article></code> tag is better than a generic <code><div></code> with a class name. The title of the article becomes a header, the content becomes a paragraph, the bold-but-not-emphasized title becomes a bold tag.</p><p>But not everything maps that cleanly to HTML tags. Let's look at a bunch of class names and I'll offer my opinion on if I think it's semantic or not.</p><pre><code><div class="column_1"></div></code></pre><p><strong>Unsemantic.</strong> This is a classic example. Every single CSS grid framework in the world uses some kind of class names to declare the grids. Whether it's "yui-b", "grid-4", or "spanHalf", all of these are closer to specifying than describing their contents. So while I maintain these are unsemantic class names, I also think they are largely unavoidable in float-based grid-system layouts.</p><pre><code><div class="footer"></div></code></pre><p><strong>Semantic.</strong> While a footer is an abstract concept, it has come to have meaning in web design. It's the bottom of a website the typically contains things like repeated navigation, copyright, author info, etc. This class name declares a group for all that stuff without describing it.</p><p>If you've made the leap to HTML5, the <code><footer></code> element would be better. And that goes for all the HTML5 elements. (Headers should be <code><header></code>, sidebars should be <code><aside></code>, etc.) If you aren't yet using HTML5 (you better have a really compelling reason), the equivalent class names I feel are fine.</p><pre><code><div class="largeText"></div></code></pre><p><strong>Unsemantic.</strong> This is specifying. Why should the text be larger? To stand out from other smaller text? "standOut" or <a //AN_Xml:href="https://twitter.com/norcross/status/98883914822717440">"callout_text"</a> might be better here, as in the Theoretical Redesign Future™, you may wish to choose a different style to make that text stand out that has nothing to do with the size of the text, and you won't be stuck with an awkward class name.</p><pre><code><div class="priority-2"></div></code></pre><p><strong>Semantic.</strong> I've talked with some folks from <a //AN_Xml:href="http://mailchimp.com/">MailChimp</a> (<a //AN_Xml:href="http://jasongraphix.com/">Jason Beaird</a> and <a //AN_Xml:href="http://aarronwalter.com/">Aarron Walter</a>) about this and this is how they declare the relative importance levels of buttons within the app (Although with class names more like "p1" .. "p5"). Higher priority buttons might have brighter colors or be larger, while lower priority buttons might blend in more with the content. By not being specific with what those styles are and abstracting to a priority level, you are staying semantic. It's like taking the idea of <code><h1></code>, <code><h2></code>, <code><h3></code>, etc. to buttons.</p><pre><code><div class="copyright"></div></code></pre><p><strong>Semantic.</strong> If only every class name was this easy! This goes for any section which contains content that is easy to describe with a word like <a //AN_Xml:href="https://twitter.com/darice/status/98880648688844800">"tweets"</a>, <a //AN_Xml:href="https://twitter.com/aaronwhitman/status/98888652402327552">"pagination"</a>, or <a //AN_Xml:href="https://twitter.com/adriano_rizzo/status/98880905032110080">"admin-bar"</a>. Although with that last one, you'd be better off calling it "admin-nav" as in the Theoretical Redesign Future™ this area might not be a "bar" anymore.</p><pre><code><p class="introp"></p></code></pre><p><strong>Unsemantic.</strong> I saw a presentation with <a //AN_Xml:href="http://daverupert.com/">Dave Rupert</a> one time where he joked around that this was his favorite class name. I can totally relate to that as it's such a common scenario to style the first paragraph of a page differently, like an attention-grabbing overview to get people into an article.</p><p>If you absolutely need super deep browser support, you might need some kind of class name, in which I'd say "intro" is better than "introp" (leave the element name out of it). But much better would just be to target the first paragraph like <code>article p:first-of-type</code> or <code>h1 + p</code>.</p><pre><code><div class="clearfix"></div></code></pre><p><strong>Unsemantic.</strong> This is an extremely common class name, which applies a bit of trickery to get the element to contain all of its decendant floats rather than collapse. But it has nothing to do with the content it contains, thus unavoidably unsemantic. <a //AN_Xml:href="http://simplebits.com/">Dan Cederholm</a> recommends a more feel-goody class name "group" for this purpose instead (in his book <a //AN_Xml:href="http://handcraftedcss.com/">Handcrafted CSS</a>), which, to me, just barely brings this into the realm of semantic, as certainly this wrapper contains multiple other elements and is thus a group (describing without specifying).</p><pre><code><div class="left"></div></code></pre><p><strong>Unsemantic.</strong> Perhaps in the Theoretical Redesign Future™ you'll want this stuff on the right instead. Too specific.</p><pre><code><div class="success"></div></code></pre><p><strong>Semantic.</strong> I think this one works best in conjunction with other class names so that one of them describes the content and one describes the status of that content. Like "<a //AN_Xml:href="https://twitter.com/snookca/status/98880868562644993">success</a> message" which could hold a message like "Your file has been uploaded!". If that message was "There was a problem uploading your file." the class names could be "fail message" instead and have appropriate styling.</p><pre><code><div class="plain-jane"></div></code></pre><p><strong>Unsemantic.</strong> This is trying to specify that the content inside should be styled a specific way. <a //AN_Xml:href="https://twitter.com/chrisnager/status/98881285321261056">"plain-jane"</a> is the same as something like "normal" or "regular". Ideally CSS should be written so that you don't need class names for "regular" styles, that just comes by default through the cascade, and anything that breaks that in unusual ways gets a class.</p><pre><code><div class="entry-unrelated"></div></code></pre><p><strong>Unsemantic.</strong> <a //AN_Xml:href="http://www.readability.com/">Readability</a>, the web app for reformatting and saving web pages for ease-of-reading later, has you use this class name to specify parts any elements of your site you don't want to be accidentally included in the conversation/saving of your article. The reason I'm going unsemnatic here is because it's describing what it's not, not what it is. I wish there was something other than a class name that could be used for this purpose. Sort of like <code>rel=nofollow</code> for links, but for content.</p><pre><code><div class="hyphenate"></div></code></pre><p><strong>Unsemantic.</strong> Trying to specify the behavior of the content inside, instead of describe what it actually is.</p><pre><code><a class="link" href="#"></a></code></pre><p><strong>Unsemantic.</strong> While link is descriptive without being specific, just the nature of an anchor link already makes it a link, thus not necessary. If the class name is trying to separate this link from other "normal" links, be more descriptive as to why, e.g. "book-link" or (debatable) "button".</p><h3>But...</h3><p>Let's say you have two types of articles on your site and you want to style them differently. Movie Reviews will have a blue background and Breaking News will have a red background and bigger text.</p><p>Here's one way to do that:</p><pre rel="HTML"><code><article class="movie-review"> //AN_Xml: ... //AN_Xml:</article> //AN_Xml: //AN_Xml:<article class="breaking-news"> //AN_Xml: ... //AN_Xml:</article></code></pre><p>and another:</p><pre rel="HTML"><code><article class="blueBg"> //AN_Xml: ... //AN_Xml:</article> //AN_Xml: //AN_Xml:<article class="redBg bigText"> //AN_Xml: ... //AN_Xml:</article></code></pre><p>I bet if we had a poll and asked people which example they thought was more semantic, the first would win. It fits the bill put forth in this article: describing without specifying. Whereas the second example specifies ("blueBg" is a class name that applies a blue background). Let's say the Theoretical Redesign Future™ stops being theoretical and is now in progress. The design for movie reviews now has a green background. The class name "blueBg" is rather awkward there. Whereas the class name "movie-review" is totally fine and you just change the properties/values to do the green background instead.</p><p>This isn't to say the first example is hands-down always better. Let's say that light blue color is used in a lot of places on the site. Perhaps it's the background color of a particular part of the footer and a particular sidebar box as well. You might end up with selectors like:</p><pre><code rel="CSS">.movie-review, //AN_Xml:footer > div:nth-of-type(2), //AN_Xml:aside > div:nth-of-type(4) { //AN_Xml: background: #c2fbff; //AN_Xml:}</code></pre><p>That's efficient because you are only declaring that color once. But it's also a rather complex, hard-to-scan, unwieldily selector. Not to mention those different selectors may need unique styling, so they'll have to be repeated later. Or you take another approach and just leave them separate:</p><pre rel="CSS"><code>.movie-review { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:} //AN_Xml: //AN_Xml:footer > div:nth-of-type(2) { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:} //AN_Xml: //AN_Xml:aside > div:nth-of-type(4) { //AN_Xml: background: #c2fbff; //AN_Xml: /* Plus other stuff */ //AN_Xml:}</code></pre><p>That might actually keep your CSS file more organized (keeping different areas of the site in different sections) but at the cost of repetitive declarations. In a presentation by <a //AN_Xml:href="http://www.stubbornella.org/content/">Nicole Sullivan</a> I recently saw at the <a //AN_Xml:href="http://environmentsforhumans.com/2011/css-summit/#.Tjq3pGYWXs0">CSS Summit</a>, she called out some big companies for declaring the exact same color in the CSS files literally <em>thousands</em> of times. I think we can all agree that's crazytown. There may be a variety of solutions to that, but one of them might be using a class name like "blueBg" to declare it once in the CSS and then put the burden on the HTML for applying that class name when you want that design. Still, you'd be better off calling it "mainBrandColor" or "secondaryFont" as to avoid specifying. As I understand it, that's OOCSS. Sacrificing a slight bit of semantics for the greater good (drastically smaller resources).</p><p>Would love to hear some of your opinions on all this. I'm sure plenty of you have other example, different opinions on what is or isn't semantic, and whether or not that matters.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13423&c=1409520471' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13423-semantic-class-names/">What Makes For a Semantic Class Name?</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>The Future of CSS Layouts</h1> <p>Chris Coyier — Thu, 04 Aug 2011 04:00:04 +0000</p> <p><p>Peter Gasston shows us: columns, flexbox, grid, template, positioned floats, exclusions, and regions. This stuff is going to be a big deal in a couple of years and it will be very interesting to see which of these get popular and which ones die off.</p><p><a //AN_Xml:href="http://www.netmagazine.com/features/future-css-layouts" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13444-the-future-of-css-layouts/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13444&c=60298964' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13444-the-future-of-css-layouts/">The Future of CSS Layouts</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Poll Results: Large file on major CDN or small file local</h1> <p>Chris Coyier — Sun, 31 Jul 2011 15:01:08 +0000</p> <p>I quite enjoyed this poll because the results were so neck and neck. It was only in the last week or so that a clear winner has emerged. <span //AN_Xml:id="more-13424"></span></p><p></p><p>Like all polls ever run in the history of this website, there is lots of things to consider and the poll was probably too simple for it's own good. Nonetheless, I consider just getting people thinking about this issue a success. At the very surface: 20k is smaller but the CDN is faster and more likely to be cached.</p><p>There is a bunch more too it though...</p><ul><li>The CDN is probably a different domain, so even if a user does need to load the file it doesn't count against the maximum concurrent connections for a single domain.</li><li>Loading the JS is one thing, but executing the JS is another. Executing 200k of JS will always be slower than 20k.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99474">Da_n reminds us</a> they aren't mutually exclusive. You could attempt to load from the CDN and fall back to local.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99476">Evert reminds us</a> that some IP address/ranges can be blocked in some countries, so the more different ones we pull from the higher the chances that some resources will be block and lead to problems loading the page.</li><li>In the case of the Google CDN (the most popular for this sort of thing), the only way the caching is in place is if you link to a very specific version of a library, like 1.8.14. If you link any less specifically (e.g. 1.8 will give you the latest version that is 1.8.something) it's not cached (or not cached very long).</li><li>CDN saves bandwidth, and those costs can be significant (e.g. The 100k image sprite on the current design of this site used 50+ GB of bandwidth in the last 30 days. That's one file.).</li><li>Locally, you have the option to merge the 20k into other JS files and load a single resource instead of many.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99524">Paul Irish</a> says we should A/B test for speed and pick the fastest.</li><li>Mobile is a very serious consideration. Mobile browsers have far less room for cache and (sometimes) have less bandwidth.</li><li><a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99990">Kent Davidson</a> reminds us that if we are super worried about privacy, the CDN may be out, as it gives referrer strings to the CDN for each person requesting the file.</li><li>Hosting that small custom file on your own CDN has big advantages. It may not have any chance of being cached coming in, but has the other advantages.</li></ul><p>There was another good point brought up in the comments by <a //AN_Xml:href="http://css-tricks.com/13261-large-file-on-cdn-or-small-local/#comment-99862">Jayphen</a>:</p><blockquote><p>Posts like this make me worry about the kind of misinformation spread by these kinds of polls…</p><p>If the majority of other developers do the wrong thing, that doesn’t make it right.</p></blockquote><p>Just because "local" won this poll, doesn't make it the right answer all the time (see considerations above).</p><p>New poll soonish. If you have an idea for a poll on CSS-Tricks, leave it as a comment below. I'd like to refill the reserves of poll ideas.</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13424&c=1103172240' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13424-poll-results-cdn-or-local/">Poll Results: Large file on major CDN or small file local</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Seriously, Just Make a JSFiddle</h1> <p>Chris Coyier — Fri, 29 Jul 2011 02:06:23 +0000</p> <p>Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the files into an email or forum post? It's super common, and so consider this an intervention. When you are having trouble figuring something out:<span //AN_Xml:id="more-13414"></span></p><ol><li>Go to <a //AN_Xml:href="http://jsfiddle.net/">JSFiddle</a>.</li><li>Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area</li><li>Press Run and see if the result is demonstrating the problem, adjust as needed to make the problem very clear.</li><li>Press Save to get a public URL.</li><li>Share that URL where you are trying to get the troubleshooting help.</li></ol><p>Also, if you can whittle it down to the bare minimum still showing the problem, that's ideal.</p><p>The key is being able to <strong>see the result</strong>. It's 100 times easier for your potential troubleshooter to play with that than trying to guess what is happening by looking at your code alone.</p><p>A lot of times, during the process of creating this (let's call it what it is: <a //AN_Xml:href="http://css-tricks.com/6263-reduced-test-cases/">a reduced test case</a>) you'll solve the problem yourself. And if not, the chances of you getting help from someone else goes way up.</p><p>It doesn't have to be JSFiddle either, could be <a //AN_Xml:href="http://jsbin.com/">JS Bin</a>, <a //AN_Xml:href="http://cssdesk.com/">CSSDesk</a>, a temporary test page you toss up on your own site, whatever.</p><p></p><p>Doing this will make you a better coder and better in bed. I promise.</p><p>XOXOXO,<br //AN_Xml:/> -Chris</p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13414&c=272646127' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13414-seriously-just-make-a-jsfiddle/">Seriously, Just Make a JSFiddle</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Chosen</h1> <p>Chris Coyier — Thu, 28 Jul 2011 03:21:48 +0000</p> <p><p>Super hot jQuery and Prototype plugin by the <a //AN_Xml:href="http://www.getharvest.com/">Harvest</a> team that seriously improves the UI of <code><select></code> elements.</p><p><a //AN_Xml:href="http://harvesthq.github.com/chosen/" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13411-chosen/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13411&c=1260734136' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p></p><p><a //AN_Xml:href="http://css-tricks.com/13411-chosen/">Chosen</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>Examples of Sites where localStorage should or is being used</h1> <p>Chris Coyier — Wed, 27 Jul 2011 22:52:16 +0000</p> <p>localStorage is a new JavaScript API in HTML5 that allows us to save data in key/value pairs in a user's browser. It's a little bit like cookies <a //AN_Xml:href="http://blog.andyhume.net/localstorage-is-not-cookies">except</a>:<span //AN_Xml:id="more-13392"></span></p><ul><li>Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared).</li><li>localStorage isn't sent along in HTTP Requests, you have to ask for it.</li><li>You can store way more data in localStorage than you can in cookies.</li><li>The API for localStorage is wicked simple and easy.</li></ul><p>If you need to get more up to speed, I did a <a //AN_Xml:href="http://css-tricks.com/video-screencasts/96-localstorage-for-forms/">video screencast on localStorage recently</a>. This is how it works:</p><pre class="JavaScript"><code>/* Set some data */ //AN_Xml:localStorage.setItem("key", "value"); //AN_Xml: //AN_Xml:/* Get some data */ //AN_Xml:localStorage.getItem("key");</code></pre><p>No libraries needed, that's just JavaScript. If you want you can use Modernizr to test for it with <code>Modernizr.localstorage</code> first.</p><p>OK great that's all the geeky bits, let's see some places on the web that could be, should be, or are using it. Hopefully this will spark some ideas for your own websites.</p><h3>IS using localStorage</h3> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://snapbird.org/">Snapbird</a> (a powerful Twitter search tool) remembers the last person's stream you searched. It figures, chances are, the next time you come back you'll be searching that same person and this will save you a second. If not, you can just delete it and replace it. I find it useful as I'm typically trying to find old tweets of my own.</p> <figure> <br //AN_Xml:/> </figure><p>The Webbie Madness event this year had a large March Madness style voting grid where people were encouraged to come pick winners in multiple rounds. The first round had 32 people in 16 battles. The peoples names were disguised. It took a while to figure out who was who and decide who to vote for, and it wasn't something I was able to do in one "sitting". I suggested they save the votes as people did them to localStorage, that way you could come back any time and finish. Like total badasses, they did it!</p> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://jsbin.com/">JSBin</a> (By Remy Sharp, who did Snapbird also, go figure) allows you to save your starter HTML/JavaScript template so the next time you come back to use it, you can use that same template.</p><h3>SHOULD be using localStorage</h3> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://typekit.com/">Typekit</a> has a Type Tester tool when viewing a particular font. You can type your own text into the box to see what it will look like in that font. Unfortunately when you go to another font, that custom text you entered is gone. This would be a great case for localStorage. When the value in that area changes, save it to localStorage, and load that value in when the page loads. I think that would be a great timesaver, as I think jumping around to see that text in multiple fonts is a pretty common use case.</p> <figure> <br //AN_Xml:/> </figure><p><a //AN_Xml:href="http://csslint.net/">CSS Lint</a> has a grid of checkboxes for what features you do/don't want to CSS Lint to look for when you test your CSS. It would be really nice if this used localStorage to remember what checkbox configuration you used, so if you reload the page or come back later, it's the same. So if you don't like the "Don't use IDs" checkbox, you can turn if off forever =).</p> <figure> <br //AN_Xml:/> </figure><p>Pretty much any website with a login form could use localStorage to keep the username saved. So when a user comes back, it's one less step for them to log in.</p> <figure> <br //AN_Xml:/> </figure><p>Zeldman.com has links in the footer which allow you to toggle the colors used on the site between two versions. It saves this as a cookie which is great, but is subject to the frailty of cookies. Any site like this with alternate styling choices (e.g. font-size toggle) could save that information in localStorage and have it persist better.</p><h3>MOR</h3><p>This is the tip of the iceberg. I'm sure people with more developer-oriented minds can think of bigger and better ideas for this. Saving your place in a game? Caching assets? What else you got?</p><p><a //AN_Xml:href="http://diveintohtml5.org/storage.html">Way more info from Mark Pilgrim.</a></p> <br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13392&c=1922308254' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13392-localstorage-examples/">Examples of Sites where localStorage should or is being used</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> <article> <h1>CSSFrag</h1> <p>Chris Coyier — Mon, 25 Jul 2011 18:41:27 +0000</p> <p>Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) <a //AN_Xml:href="http://simonstl.com/articles/cssFragID.html">fragment identifiers proposal</a>. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:<span //AN_Xml:id="more-13386"></span></p><p><code>http://example.com/lorem.html#css(.content:nth-child(2))</code></p><p><a //AN_Xml:href="http://shauninman.com/archive/2011/07/25/cssfrag" title="Direct link to featured article">Direct Link to Article</a> — <a //AN_Xml:href="http://css-tricks.com/13386-cssfrag/">Permalink</a></p><br //AN_Xml:/><p><a //AN_Xml:href='http://rss.buysellads.com/click.php?z=1259963&k=3469a2a501a9e18091036aa0c89f9dcb&a=13386&c=975553724' target='_blank'> </a></p><p><a //AN_Xml:href='http://buysellads.com/buy/sitedetails/pubkey/3469a2a501a9e18091036aa0c89f9dcb/zone/1259963' target='_blank'>Advertise here with BSA</a></p><p><a //AN_Xml:href="http://css-tricks.com/13386-cssfrag/">CSSFrag</a> is a post from <a //AN_Xml:href="http://css-tricks.com">CSS-Tricks</a></p> </article> </main></body></html>