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

New Poll: The Case of the Giant Background Image

Chris Coyier — Thu, 13 Oct 2011 15:40:46 +0000

Let's say you've designed a web page and it makes use of a full page background image. You really like the way the site looks with this background image. It looks amazing. But the image is 350k. You've decided that, while you know this is heavy, it's worth it.

But then you start thinking about mobile. This large background image doesn't add as much to the design on the small screen, and 350k especially cumbersome on the probably-lower-bandwidth and probably-slower-in-general device. Then consider that mobile browsers often have far more limited cache so even that won't help. Mobile traffic is 2% of your overall traffic.

~~You could of course use media queries to not show the background image when a screen is narrow, but that doesn't help much because that resource will still be downloaded.~~ So you are in a pickle:

Do you use the 350k image and revel in the beauty, accepting the significant consequences for 2% of your users? Or ditch the image and deal with the page being a bit uglier-but-faster?

The poll (in the sidebar) will only have the two choices, forcing you to choose. But if you have a third option you think you'd go with, please leave it as a comment.

Update

Somehow I became completely convinced that background images referenced in CSS, even if they are under a not-currently-active @media query were still downloaded by the browser. I feel like I had run test cases, talked with folks about it, etc, but either I must have been dreaming or browsers have fixed that issue. In this test case by reader Ruben you can test that even background images that are removed by @media queries don't load.

So this poll is basically invalid... the correct answer would be that you always remove the 350k image via @media queries.

New Poll: The Case of the Giant Background Image is a post from CSS-Tricks

Poll Results: Your Favorite Page Title Separator

Chris Coyier — Thu, 13 Oct 2011 01:03:22 +0000

THE PEOPLE HAVE SPOKEN. The pipe character "|" is by far the most popular page title separator with 47% of the vote and being up against 15 other choices. Example:

Article | Category | Site Title

The dash and en-dash split another 24% of the vote and then the rest fought for the scraps. I'm in agreement. I like me some pipes. My second favorite is the middot. Not as intense as a bullet and without the baggage of a period. There is a permanent living archive of all poll data.

New poll will be up later tonight or tomorrow.

Poll Results: Your Favorite Page Title Separator is a post from CSS-Tricks

Making SublimeVideo Fluid Width

Chris Coyier — Tue, 11 Oct 2011 15:58:39 +0000

Since v9 of this site, I've been using SublimeVideo for the video player in the screencasts area. SublimeVideo is similar to projects like VideoJS and MediaElement.js in that it's a polyfill for HTML5 video. That is, you use regular ol' clean HTML5 markup and it takes care of making sure that video can be seen on as many browser/platform/versions as possible.

How does SublimeVideo differ from those other projects?

They host the resources, not you. That means some bandwidth savings, but more importantly, means that you're always getting the latest and greatest version which is important in this fast-changing browser landscape.
It's the nicest design of all of them. Subjective, I suppose.
It's not free. While the others are.

I quite like the idea of paying for services that make our lives as front end developers easier, so I hopped on board (I pay for the service on the Star plan).

Do note that SublimeVideo is for video that you host yourself somewhere. They don't host video for you. If you want hosted video and a player that similarly works everywhere without worrying about bandwidth, you should probably just use YouTube, Vimeo or Blip.tv.

Using SublimeVideo regularly, you simply load their JavaScript in the :