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

HTML5 for Web Designers Website

Chris Coyier — Mon, 24 Oct 2011 21:59:11 +0000

The content of HTML5 for Web Designers, the first A Book Apart book by Jeremy Keith, is online. Under the hood, the title bar at the top of the page is actually the <title> element, unhidden and styled up.

Direct Link to Article — Permalink

HTML5 for Web Designers Website is a post from CSS-Tricks

What We Don’t Know

Chris Coyier — Sun, 23 Oct 2011 22:13:39 +0000

We don't know which browser, which version of that browser, or what kind of computer a user visiting our website is using.

That's why we have web standards we follow which give us the ability to code one website that can work everywhere. We use normalized templates (e.g. HTML5 Boilerplate) to give our projects a consistent and healthy starting point. We use JavaScript libraries (e.g. jQuery) to make things easier for us an alleviate cross browser issues.

We don't know the capabilities of the browser the user is visiting our website with.

So we feature test and polyfill where we can. That way we can build the fantastic experience we want to and deliver perfectly acceptable experiences to all browsers.

We don't know what the size of browser window is of a user viewing our website.

So we should design our sites to be fluid and utilize media queries to optimize the site for any screen size (responsive web design).

We don't know what the internet connection speed is of a user viewing our website.

So we try and load as few resources as possible. We make those resources as small and compressed as we can. We serve those resources through servers optimized just for that and geographically closer to our users (e.g. NetDNA). That way our website loads as fast as possible.

We don't know the mindset of a user viewing our website.

So we conduct user research (e.g. Silverback) and try to find out. We try and accommodate different ones. We use our experience (and sometimes gut instinct as users ourselves) to make the right decisions. We design for humans.

We don't know the physical location of a user viewing our website.

So if our site needs it or could be better by knowing it, we can ask for it. Either literally or through HTML5.

We don't know what languages a visitor to our site understands.

So if we have the resources to do it, we use translation services (e.g. Smartling) to offer our website in a user's native tongue. If we are trying to be as professional as we can, we also probably try and be sensitive to culture differences worldwide.

We don't know how "computer savvy" a user is visiting our site.

So we try and make it very obvious how to use our site and not make too many assumptions. We use common design patterns to accommodate "affordances". We sweat the details in our design, copy, and overall "user experience".

We don't know what disabilities a user visiting our site might have.

So we try and craft our sites with accessibility in mind.

We know very little about a visitor to our website. We actually know less and less every day, as the demographics of internet users widens (younger and older, no longer a nerd thing, more areas geographically, etc.) So as we march forward toward the next 6 billion people using the web, let's embrace the unknown by accommodating for it.

What We Don’t Know is a post from CSS-Tricks

Abbr’s for Web Nerd Acronyms

Chris Coyier — Wed, 19 Oct 2011 23:51:23 +0000

I'm really lazy about using tags for acronyms. Most people who read a techy blog like this probably understand them, but surely there are some visitors who don't where a simple tooltip explanation would be beneficial. Maybe with this easy copy-and-paste resource to reference I'll actually start doing it. This is an education blog, after all.

CRM
//AN_Xml:CMS
//AN_Xml:SQL
//AN_Xml:ISO
//AN_Xml:PHP
//AN_Xml:HTML
//AN_Xml:XHTML
//AN_Xml:CSS
//AN_Xml:JS
//AN_Xml:ECMAScript
//AN_Xml:ISP
//AN_Xml:IP
//AN_Xml:HTTP
//AN_Xml:RSS
//AN_Xml:IRC
//AN_Xml:FTP
//AN_Xml:AJAX
//AN_Xml:DNS
//AN_Xml:DOM
//AN_Xml:OOP
//AN_Xml:DRY
//AN_Xml:SSL
//AN_Xml:RoR
//AN_Xml:KISS
//AN_Xml:LAMP
//AN_Xml:XSS
//AN_Xml:SEO
//AN_Xml:JPG
//AN_Xml:GIF
//AN_Xml:PNG
//AN_Xml:PSD
//AN_Xml:AI
//AN_Xml:SaaS
//AN_Xml:SASS
//AN_Xml:RGB
//AN_Xml:HSL
//AN_Xml:UI
//AN_Xml:UX
//AN_Xml:JSP
//AN_Xml:ASP
//AN_Xml:WYSIWYG

Maybe there could be some WordPress plugin that could REGEX post content and automatically do it?

Got some ones I should add to the list? I'll probably keep the list above specifically web development acronyms not general computer/internet ones.

Abbr’s for Web Nerd Acronyms is a post from CSS-Tricks

Group Design Project: Rate Three Candy Bars In Order

Chris Coyier — Mon, 17 Oct 2011 22:26:25 +0000

Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which inspired the idea of radio buttons with 2-way exclusivity. Then reader Erik Edhagen suggested I do more of those group design project things... so here we are!

Your Mission

Create an interface where a user is able to rate three candy bars (a Snickers, a Twix, and a Butterfinger) in the order of how much they like them (1st, 2nd, 3rd).

You don't need to save the data. You don't need to build an entire web page around it. Just the part where you do the rating.

Create your demo using Tinkerbin and post the link (and any notes/comments you might have) in the comments below. If you want to use a JS library in Tinkerbin you gotta link it up in the HTML section.

There are no other rules. Get creative.

Prize

I'll pick three users who I think did a particularly good job and send them a CSS-Tricks T-Shirt.

Let's say about a week. I'll close the comments on this post on Tuesday, October 25th and pick the winners. Follow conversation will happen in some kind of roundup post.

Why?

Just to be clear, I have no particular need for this. I'm not trying to get "free work" out of you.

I think this is just a fun and useful exercise for practicing design. You learn while thinking through how you think it's best to approach this. You learn while creating it. You learn while seeing other people's approaches. You learn dissecting and discussing all the approaches.

Group Design Project: Rate Three Candy Bars In Order is a post from CSS-Tricks

CSS Shaders

Chris Coyier — Fri, 14 Oct 2011 16:32:10 +0000

A bunch of crazy awesome affects you can apply via CSS through the filter property: blur, drop-shadow, gamma, grayscale, hue-rotate, invert, opacity, saturate, sepia, and sharpen. Adobe has been doing some great stuff with CSS lately. Their last amazing demo isn't just a demo anymore, it will be implemented in IE 10. Let's hope these make it into the spec and implemented as well.

Direct Link to Article — Permalink

CSS Shaders is a post from CSS-Tricks

Dart

Chris Coyier — Fri, 14 Oct 2011 16:02:03 +0000

It's a new language the runs in the browser and servers. A lot of it is over my head, but I always celebrate new thinking especially when it has a bunch of smart people behind it. The obvious point is that, if it's a direct competitor to JavaScript, that JavaScript has far more browser support. I'm sure that fact isn't lost on the team.

Wasn't this the last Google-originated language? Did that go anywhere?

Direct Link to Article — Permalink

Dart is a post from CSS-Tricks

New Poll: Ideal Page Weight

Chris Coyier — Thu, 13 Oct 2011 17:01:46 +0000

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.

The CSS-Tricks homepage right now weighing in at 607k

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