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

Prevent White Flash While iFrame Loads

Chris Coyier — Tue, 17 May 2011 20:42:40 +0000

If you Google around about this problem (at the time of this writing), you'll find some incomplete answers and some other snippets advocating this bad practice:


//AN_Xml:

The reason this is bad is that the CSS will hide the iframe no matter what and users with JavaScript turned off will never see that iframe. Now I'm not usually one to go to extreme lengths to cater to that crowd, but I'm all for using better solutions that do solve that issue when they are available.

The solution

Thanks to Paul Irish and his Surefire DOM Element Insertion and Ryan Seddon and his article on inserting scoped style elements, we have this:

// Prevent variables from being global
//AN_Xml:(function () {
//AN_Xml:
//AN_Xml:      /*
//AN_Xml:          1. Inject CSS which makes iframe invisible
//AN_Xml:      */
//AN_Xml:
//AN_Xml:    var div = document.createElement('div'),
//AN_Xml:        ref = document.getElementsByTagName('base')[0] ||
//AN_Xml:              document.getElementsByTagName('script')[0];
//AN_Xml:
//AN_Xml:    div.innerHTML = '';
//AN_Xml:
//AN_Xml:    ref.parentNode.insertBefore(div, ref);
//AN_Xml:
//AN_Xml:    /*
//AN_Xml:        2. When window loads, remove that CSS,
//AN_Xml:           making iframe visible again
//AN_Xml:    */
//AN_Xml:
//AN_Xml:    window.onload = function() {
//AN_Xml:        div.parentNode.removeChild(div);
//AN_Xml:    }
//AN_Xml:
//AN_Xml:})();

Just include that on any page (in the ) with the white flash problem and it will be solved. Just note that we're using window.onload here, so if your page also uses that somewhere, combine them.

How it works

It inserts some CSS on the page (right away) which makes all iframes invisible. You can't see a white flash on an iframe that's not there!
When the window is done loading (which means iframes are done loading too), this CSS is removed, which makes the iframes visible again

Browsers affected

At the time of this writing, I'm able to replicate the problem in Chrome 11 and Safari 5 (so essentially a WebKit issue). Current Firefox, Opera, and IE are fine.

What about... other stuff?

You can put the allowtransparency="true" attribute on the iframe. You can set the iframe's background to transparent with CSS. You can make sure the background on the source document matches the background of the parent page. None of that stuff works. This works. Well... it works for users with JavaScript turned on, anyway. =)

Advertise here with BSA

Full Browser Width Bars

Chris Coyier — Mon, 16 May 2011 21:43:19 +0000

Block level elements are naturally as wide as their parent element. So let's say you put an

in your (and you've used reset CSS so there is no padding on the body) that

is automatically the full width of the browser window. It doesn't need any help.

But it's pretty rare (and stupid) these days to set text at the full browser window width (for desktop/laptop size screens). It's just too wide, the line length is too long to be readable. It's reasonable that we would want an element to stretch the full width of the browser window, for aesthetic reasons, but limit the text inside to a readable width. Like this:

One way to accomplish that is to have inner wrappers for the headers, like:


//AN_Xml:   Header
//AN_Xml:
//AN_Xml:
//AN_Xml:... text ...

That way the

could be left to be full-width, but the

could be used to limit the width to the same width as the

's.

h2 div, p {
//AN_Xml:   width: 50%;
//AN_Xml:   margin: 0 auto;
//AN_Xml:}

But you know what that is: Nonsemantic!!!!11! Rabble rabble rabble! Indeed it is. The

holds no semantic meaning, it's only for style. So ideally, we would avoid it.

With pseudo elements, we can! Instead of wrappers inside of each header, we'll wrap the entire area (which is semantic).


//AN_Xml:    Header
//AN_Xml:    ... text ... 
//AN_Xml:    Header
//AN_Xml:    ... text ... 
//AN_Xml:

We'll be limiting the width with the

element, but that will limit the width of our headers as well. That's where pseudo elements step in. We use them to create extensions off the left and right side of the header.

section {
//AN_Xml:   width: 50%;
//AN_Xml:   margin: 0 auto;
//AN_Xml:}
//AN_Xml:h2 {
//AN_Xml:   position: relative;
//AN_Xml:   background: black;
//AN_Xml:}
//AN_Xml:h2:before, h2:after {
//AN_Xml:   content: "";
//AN_Xml:   position: absolute;
//AN_Xml:   background: black;  /* Match the background */
//AN_Xml:   top: 0;
//AN_Xml:   bottom: 0;
//AN_Xml:   width: 9999px;   /* some huge width */
//AN_Xml:}
//AN_Xml:h2:before {
//AN_Xml:   right: 100%;
//AN_Xml:}
//AN_Xml:h2:after {
//AN_Xml:   left: 100%;
//AN_Xml:}

We need to be careful with our super wide extensions here, don't want to cause horizontal scroll.

body {
//AN_Xml:    overflow-x: hidden;
//AN_Xml:}

This will work in the vast majority of browsers that support pseudo elements. Check out the demo for left-only and right-only variants.

View Demo

Advertise here with BSA

Good Idea: “What is this charge on my credit card?” Page

Chris Coyier — Sun, 15 May 2011 14:45:03 +0000

In looking over my last month's credit card charges, I saw one I didn't immediately recognize:

Well, it's a URL: WP-FEE.COM, so I checked it out. It's a redirect to a WordPress.com URL of a page that explains what this charge could have been:

Oh yeah, of course, my VaultPress subscription.

Now this isn't a new idea. We do it at Wufoo as well.

And we got the idea from 37 signals.

In googling around for others that do this, I found a good one from SlideRoom:

Via PayPal

If you accept payments via PayPal, and you have an account that is dedicated to one business, you should consider putting in a URL as your "Credit Card Statement Name" so that people have an immediate resource for checking into that charge.

I have PayPal Pro, so as of this writing, to get to that preference, it's My Account > Profile > Payment receiving preferences (Under Security and risk settings). Toward the bottom of those settings:

Now I didn't tell it to, but my phone number also appears on credit card statements next to that name. I'd recommend using something like Grasshopper to have a phone number you can use on your PayPal account with a prerecorded message that explains essentially the same thing the URL would explain.

I'm sure other payment gateways or merchants or providers or whatever you call them have similar ways to change what appears on people's credit card statements.

Do this

Now you might think, yeah sure, for big fancy companies with thousands of users being charged every month, this is good, but I'm just a small guy, it's not worth the effort. Not true. When selling Digging Into WordPress we accepted online payment that were just one-off payments and on a much smaller scale than these other services. Yet, at peak sales, I would sometimes get one phone call a day asking what this charge was on their card. Certainly not how any of us want to be spending time.

Advertise here with BSA

RewardJS

Chris Coyier — Wed, 11 May 2011 17:03:36 +0000

Fix a bug. Get a prize.

A site to incentivize helping out on open source JavaScript projects. Every single day there is a prize that someone earns through sheer number of bug fixes closed. Also weekly and monthly prizes on the same metric. This month's project: jQuery UI. CSS-Tricks and Richard Worth are sponsoring today's prize which is an iPod Touch (or equivalent gift card).

Direct Link to Article — Permalink

Advertise here with BSA

CSS-Tricks

ShopTalk Episode 4

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

Star Ratings With Very Little CSS

Actual Usage

Others

Real-World CSS

Better Box Sizing

Firefox 10

Poll Results: Internet Connection Speed

Twitter Bootstrap 2.0

1000px Grid for Responsive Web Design

Pictos Server

Prevent White Flash While iFrame Loads

The solution

How it works

Browsers affected

What about... other stuff?

Full Browser Width Bars

//AN_Xml: Header //AN_Xml:

//AN_Xml: //AN_Xml:... text ...

Header

Header

Good Idea: “What is this charge on my credit card?” Page

Via PayPal

Do this

RewardJS

//AN_Xml:
Header
//AN_Xml:

`//AN_Xml: //AN_Xml:... text ...`