...most of the selectors it's considering don't match the element in question. So the problem becomes one of deciding that a selector doesn't match as fast as possible; if that requires a bit of extra work in the cases that do match you still win due to all the work you save in the cases that don't match.

Direct Link to Article — Permalink

Why Browsers Read Selectors Right to Left is a post from CSS-Tricks

Instead of yellow fade, we'll indicate which section the link we just clicked was referring to by nudging it over to the right and flashing a red border. Instead of making you think, here you go:

The structure is a bit of navigation that links to sections by ID:

<nav>
//AN_Xml:  <a href="#one">1</a>
//AN_Xml:  <a href="#two">2</a>
//AN_Xml:  <a href="#three">3</a>
//AN_Xml:</nav>
//AN_Xml:
//AN_Xml:<section>
//AN_Xml:  <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div>
//AN_Xml:  <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>
//AN_Xml:  <div id="three"><h2>Three</h2>Pellentesque habitant morbi ...</div>
//AN_Xml:</section>​

When the sections become in :target, the scoot over to the right a bit via translateX transform (prevents any weird text wrapping or anything we might get with padding) and a red border flashes on via keyframe animation.

:target {
//AN_Xml:  -webkit-animation: highlight 1s ease;
//AN_Xml:  -moz-animation: highlight 1s ease;
//AN_Xml:  -webkit-transform: translateX(20px);
//AN_Xml:  -moz-transform: translateX(20px);
//AN_Xml:  -ms-transform: translateX(20px);
//AN_Xml:  -o-transform: translateX(20px);
//AN_Xml:}
//AN_Xml:@-webkit-keyframes highlight {
//AN_Xml:  0% { border-left-color: red; }
//AN_Xml:  100% { border-left-color: white; }
//AN_Xml:}
//AN_Xml:@-moz-keyframes highlight {
//AN_Xml:  0% { border-left-color: red; }
//AN_Xml:  100% { border-left-color: white; }
//AN_Xml:}
//AN_Xml:section > div {
//AN_Xml:  border-left: 40px solid white;
//AN_Xml:  padding: 10px;
//AN_Xml:  -webkit-transition: all 0.5s ease;
//AN_Xml:  -moz-transition: all 0.5s ease;
//AN_Xml:  -ms-transition: all 0.5s ease;
//AN_Xml:  -o-transition: all 0.5s ease;
//AN_Xml:  padding-right: 50px;
//AN_Xml:  margin-left: -20px;
//AN_Xml:}

That's all there is too it really. I'd chalk this up under progressive enhancement, if you're worried about browser support. As in, it's just a nice touch, not vital.

View Demo

Fighting the Jump!

Let's say you like the idea of using :target for states but dislike the page jumping behavior, you can change the hash link in a URL without a page jump.

Using jQuery, you could target all hash-links, prevent their default behavior, and use pushState (or replaceState, I suppose) to change the URL (which won't move the page).

$("a[href^=#]").on("click", function(e) {
//AN_Xml:  e.preventDefault();
//AN_Xml:  history.pushState({}, "", this.href);
//AN_Xml:});

You could interchangeably use replaceState there too, which would change the URL without adding an entry to the browser history. Sometimes you might want that, sometimes you might not. At least you have a choice here, which you don't with the default behavior of clicking a hash link, which always adds.

But there is bad news

When the URL changes to a new hash, you'd think the current target would change and new CSS would take effect. It doesn't (tested current WebKit and Firefox at time of this writing). It's a bug.

Theoretically, you could measure and save the current scroll position of the page, let the link move it naturally, then set it back to where it was. But that just sounds so awful I couldn't even bring myself to make a test page for it.

More

//AN_Xml:
• The spec in Selectors Level 4 (no significant new stuff from what is above)
//AN_Xml:
• A simple image gallery using :target (suffers from the page jump thing, good example of that) by Chris Heilmann
//AN_Xml:
• Demo of yellow fade technique (although for existing content, not newly-added content) from Web Designer Notebook.
//AN_Xml:
• A CSS Target, literally, by Caleb Ogden.
//AN_Xml:

On :target is a post from CSS-Tricks

CSS Shaders is a post from CSS-Tricks

http://css-tricks.com/14539-new-poll-ideal-page-weight/ http://css-tricks.com/14539-new-poll-ideal-page-weight/#comments Thu, 13 Oct 2011 17:01:46 +0000 Chris Coyier http://css-tricks.com/?p=14539 What do you think is reasonable page size to try and stay under for a modern web design?

New Poll: Ideal Page Weight is a post from CSS-Tricks

]]> Since that last post was kind of a bust (in a good way!) - let's kick off another one right away. We'll keep it along the same lines: page weight, this time regarding the page as a whole.

Way back in the day Google used to only index 100k of a page (although I think that's the HTML only) but that's not true anymore. 200k for the entire page (including all resources: css, images, js, etc) used to be a common goal. I'd say very few web pages these day come in at under 200k.

So the new poll is:

What do you think is reasonable page size to try and stay under for a modern web design?

Poll is in the sidebar.

New Poll: Ideal Page Weight is a post from CSS-Tricks

]]> http://css-tricks.com/14539-new-poll-ideal-page-weight/feed/ 61