CSS-Tricks

ShopTalk Episode 4

Chris Coyier — Fri, 03 Feb 2012 01:50:39 +0000

Dave, Jonathan Longnecker, Nate Croft and I talk shop. Topics include website building apps, where to start designing, when not to design for modern browsers, and more.

//AN_Xml:

New Poll: In The Next 10 Years, Will We See CSS Competitor?

Chris Coyier — Thu, 02 Feb 2012 19:23:42 +0000

What do you think folks? Is a new language going to come along in the next ten years that deals with layout / style / design and unseat CSS? Or at least give it a run for its money?

//AN_Xml:

You should vote not based on if there will be any attempt at it, which there certainly will be and already has. But instead if you think one of those attempts will actually make it into native support by a browser with significant market share and see a significant number of web workers building web sites in it.

//AN_Xml:

Poll is in the sidebar (or, down pretty far if on a small screen).

//AN_Xml:

New Poll: In The Next 10 Years, Will We See CSS Competitor? is a post from CSS-Tricks

Star Ratings With Very Little CSS

Chris Coyier — Thu, 02 Feb 2012 04:19:15 +0000

Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.

//AN_Xml:

The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆ (Calculator for that kind of thing). You could use as many stars as you like:

//AN_Xml:


//AN_Xml:☆☆☆☆☆
//AN_Xml:

//AN_Xml:

Now we need to flop out that "hollow" star with a "solid" star on hover (Gallery for finding those sorts of characters). Easy, just drop a pseudo element of a solid star (★) over it on :hover

//AN_Xml:

.rating > span:hover:before {
//AN_Xml:   content: "\2605";
//AN_Xml:   position: absolute;
//AN_Xml:}

//AN_Xml:

Just by virtue of being it being absolutely positioned, the top: 0; left: 0; are implied (in modern browsers, anyway). So the solid star just sits directly on top of the hollow star. You could even change the color or size if you wished.

//AN_Xml:

But what we have so far only works on individual stars. The UX pattern demands that all the stars be filled in. Fo instance, if we hover over the 4th star, the 4th star becomes solid, but also the 1st, 2nd, and 3rd.

//AN_Xml:

Through CSS, there is no way to select a preceding child element. However, there is a way to select succeeding child elements, through the adjacent or general sibling combinators. If we literally reverse the order of the characters, then we can make use of the general sibling combinator to select all the stars that appear before the hovered star visually, but after the hovered star in the HTML.

//AN_Xml:

.rating {
//AN_Xml:  unicode-bidi: bidi-override;
//AN_Xml:  direction: rtl;
//AN_Xml:}
//AN_Xml:.rating > span:hover:before,
//AN_Xml:.rating > span:hover ~ span:before {
//AN_Xml:   content: "\2605";
//AN_Xml:   position: absolute;
//AN_Xml:}

//AN_Xml:

That's it! The whole star ratings UX pattern with very little code. Here's the entire bit of CSS to make it work:

//AN_Xml:

.rating {
//AN_Xml:  unicode-bidi: bidi-override;
//AN_Xml:  direction: rtl;
//AN_Xml:}
//AN_Xml:.rating > span {
//AN_Xml:  display: inline-block;
//AN_Xml:  position: relative;
//AN_Xml:  width: 1.1em;
//AN_Xml:}
//AN_Xml:.rating > span:hover:before,
//AN_Xml:.rating > span:hover ~ span:before {
//AN_Xml:   content: "\2605";
//AN_Xml:   position: absolute;
//AN_Xml:}

//AN_Xml:

View Demo

//AN_Xml:

And here's a Dabblet if you wanna mess with it.

//AN_Xml:

Actual Usage

//AN_Xml:

Chances are, JavaScript is going to be involved with rating stars anyway. When a user clicks a star, the rating is reported back via Ajax, and the widget itself gains a class to permanently display their selected number of stars. With JavaScript already involved, wouldn't it be OK to lean on it for flip-flopping classes around on the stars to make them work? If your app is absolutely dependent on JavaScript to work, then sure, that's fine. If you are interested in building a website that still works without JavaScript, then these Star Ratings are going to need more work. You should look into Lea Verou's example which uses radio buttons, which could be a part of a form that can be submitted to "rate" whatever it is without JavaScript.

//AN_Xml:

Others

//AN_Xml:

After first sharing this on Twitter, a couple of other folks took a crack at it in slightly different ways. @dmfilipenko's Dabblet. @mprogano's Dabblet

//AN_Xml:

Star Ratings With Very Little CSS is a post from CSS-Tricks

Real-World CSS

Chris Coyier — Wed, 01 Feb 2012 22:00:52 +0000

A very serious not at all tongue-in-cheek gallery of CSS3 techniques that poo-poos the fancy in favor of the practical.

//AN_Xml:

Direct Link to Article — Permalink…

Real-World CSS is a post from CSS-Tricks

Better Box Sizing

Chris Coyier — Wed, 01 Feb 2012 18:33:31 +0000

Paul Irish suggests the universal selector (*) to apply border-box box-sizing to every element. I've been wanting to try this forever because this box model is, in my opinion, just better. Imagine: elements with percentage widths and pixel padding without worry.

//AN_Xml:

Direct Link to Article — Permalink…

Better Box Sizing is a post from CSS-Tricks

Firefox 10

Chris Coyier — Wed, 01 Feb 2012 18:25:43 +0000

...is now a stable release. It's notable because it's the first release with it's own built in developer tools (video overview). It's all HTML/CSS for now (not a Firebug replacement) but they are nicely designed and a great first step for a product that really should be in-house. Also, CSS 3D transforms! After you've upgraded, check out this demo using -moz-element and the just-now-supported 3D transforms.

//AN_Xml:

Direct Link to Article — Permalink…

Firefox 10 is a post from CSS-Tricks

Poll Results: Internet Connection Speed

Chris Coyier — Wed, 01 Feb 2012 06:41:36 +0000

In this latest poll, I asked people to test their own internet connection speed then vote in the poll based on their result. The speed choices ranged from (what I would consider) blazingly fast, to mediocre, to nearly unusably slow. I would have guessed a bell curve, with most people having mediocre speeds and just a few on the edges of extreme fast/slow. We didn't get that at all.

//AN_Xml:

The results show a pretty even distribution across all the choices.

//AN_Xml:

Interesting, no? If we take anything from this, it should be that we can't assume anything about what peoples internet connection speed is. There is a pretty darn sizeable group of folks with very slow internet. Optimizing our sites to load fast makes a very big difference to those folks. Whether they actively think about it or not, they'll be much more likely to visit and stay on your fast loading site than a competitor's slower loading one.

//AN_Xml:

New poll soon.

//AN_Xml:

Poll Results: Internet Connection Speed is a post from CSS-Tricks

Twitter Bootstrap 2.0

Chris Coyier — Wed, 01 Feb 2012 02:28:45 +0000

If your web app doesn't look or work as well as Bootstrap does out of the box, it's time to have a pretty serious discussion with your team about why.

//AN_Xml:

Direct Link to Article — Permalink…

Twitter Bootstrap 2.0 is a post from CSS-Tricks

1000px Grid for Responsive Web Design

Chris Coyier — Mon, 30 Jan 2012 22:52:42 +0000

To figure out your grid width percentages for a fluid design, you start with a fixed design and divide the column widths by the container width. Elliot Jay Stocks calls for us to stop the self-torture and use 1000px for the container, so the math is super easy.

//AN_Xml:

Direct Link to Article — Permalink…

1000px Grid for Responsive Web Design is a post from CSS-Tricks

Pictos Server

Chris Coyier — Sun, 29 Jan 2012 21:39:21 +0000

I've long been convinced icon fonts are awesome. Now Drew Wilson's new service (and article I'm linking to) put to rest any of the last possible arguments against them. Think they use unsemnatic markup? Apply them via pseudo element. Worried some screen readers still read those? Not if you use aria-hidden="true" or map them to an unused plane of unicode characters. Too heavy weight? Build your own icon font and serve only what you need with this service.

//AN_Xml:

Direct Link to Article — Permalink

Pictos Server is a post from CSS-Tricks

CSSFrag

Chris Coyier — Mon, 25 Jul 2011 18:41:27 +0000

Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:

http://example.com/lorem.html#css(.content:nth-child(2))

Direct Link to Article — Permalink

Advertise here with BSA

CSSFrag is a post from CSS-Tricks