All posts tagged ‘CSS 3’

File Under: CSS, Web Standards

Speed Up Your Website With CSS 3

The drive behind the adoption of new web technologies often revolves around experimentation — developers use HTML5 or CSS 3 because it’s something new and exciting. That experimental drive is great for pushing boundaries and discovering cool new possibilities. But there’s another, more practical reason, to start using the newest features of the web, particularly in the case of CSS 3, which can make not only speed up your development time, but make your site faster as well.

Eliminating images in favor of CSS 3 transitions, web fonts and animations means fewer HTTP requests, fewer files for users to download and faster page loads. Examples include replacing rounded corner images with border-radius, ditching faux-shadow images for drop-shadow and replacing images of fancy fonts with the actual web fonts.

In some cases the fallbacks necessary for older browsers will negate the speed gain for those that aren’t using modern web browsers. You need to be aware of your audience and which browsers make up the majority of your site’s visitors before you jump in with both feet, but in those cases where newer browsers dominate, transitioning your site to CSS 3 can provide a significant speed boost.

Our friends at Smashing Magazine recently broke down the process by creating the same page twice, once using CSS 3, and then again using more traditional techniques like background images for buttons and rounded corners. The result is that CSS 3 not only sped up development time, but also made the page load faster in the browser.

Not convinced? Last year Google began using CSS 3 rules to render elements of the Gmail interface in those browsers that can handle CSS 3. The company reports that using CSS 3 sped up rendering times by 12 percent.

Naturally the speed gains possible by transitioning to CSS 3 will vary considerably depending on the design of your site and how well it lends itself to CSS 3′s new features. But even a tiny speed boost, combined with the great flexibility of CSS 3, the ability to build responsive websites and the ability to tweak designs without opening Photoshop, makes CSS 3 not only fun and experimental, but downright necessary.

See Also:

File Under: CSS

Start Small, Build Big With ’320 and Up’

There are dozens of HTML5 and CSS 3 boilerplate code samples floating around the web — HTML5 Boilerplate is one popular example. But most of those projects start with a desktop-specific stylesheet, then add @media queries and styles for progressively smaller screens.

That’s backwards in our opinion. After all, the smaller the screen is, typically the simpler the stylesheet is, so why not start with the smallest screen and work your way up? That’s the thinking behind the new 320 and Up CSS 3 boilerplate from developer Andy Clarke.

Technically, 320 and Up is an extension of the HTML5 Boilerplate project, but it works just fine on its own as well.

No boilerplate is ever going to cover every use case, but 320 and Up does a nice job of hitting the sweet spot between too much and too little. Thanks to neatly divided CSS files it’s easy to take what you want from 320 and Up and leave the rest behind (though there is also an option for a single stylesheet if you prefer).

To handle CSS 3 in older web browsers 320 and Up uses the Respond JavaScript library, which we mentioned earlier this week. 320 and Up also relies on imgsizer.js to improve IE’s rendering of resizable images, and a fix for iOS Safari’s viewport scaling bug, as well as some other key JavaScript components. In other words, if you expect a high percentage of your visitors to have legacy browsers with JavaScript turned off, then 320 and Up isn’t for your website (nor, at this point, is CSS 3 in general).

Fortunately for most websites that isn’t likely to be the case and 320 and Up makes a great starting point from which to build a site that looks good on any screen. 320 and Up is licensed under the Creative Commons MIT license. Grab a copy today.

See Also:

How to Have Your @Media Queries and Eat IE Too

CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.

There are several ways around this problem. Since the main culprit when it comes to not understanding @media is Internet Explorer, conditional comments can load an entirely separate stylesheet for older versions of IE. But if you’re starting with a purely vertical layout (for mobile phones) and then applying your floats and positional rules for larger screens — which is the design pattern we recommend — that means you’ll need to handle older versions of other browsers as well.

If the extra http requests of additional stylesheets (to say nothing of maintaining those stylesheets) isn’t appealing, there are a couple of very nice polyfill solutions that use JavaScript to apply @media rules to browsers that don’t understand them.

Respond is a very lightweight (~1KB) JavaScript library that will detect CSS 3 media query support and apply the rules to browsers that don’t natively understand them. All you need to do is end every min/max-width media query block with a comment: /*/mediaquery*/.

The main downside to Respond is that, in order to keep it fast and small, developer Scott Jehl chose to only support min-width and max-width media queries and media types. That means if you’re using orientation or other media queries, Respond won’t solve your problems.

For something more robust, you can use the css3-mediaqueries-js library. Css3-mediaqueries-js supports just about every type of media query, but of course it takes a bit longer to render the page and it’s a significantly larger file for browsers to download (15.6 KB minified).

Don’t want to rely on JavaScript at all? Well, then you’re stuck with multiple stylesheets. Developer Jeremy Keith has a nice overview of how he handles media queries on Huffduffer without the need for JavaScript.

See Also:

File Under: CSS

Simplify Your CSS With the ‘any()’ Selector

HTML5 adds a slew of new semantic tags to the web developer’s toolkit. Tags like section, article, aside, header and footer give your pages more semantic meaning and allow for more complex document structures.

While the new semantic tags are helpful, some of the changes that come along with them can make your code more difficult to style with CSS. One of the major structural changes in HTML5 is the ability to use more than one h1 tag per page. In HTML 4 heading tags typically define a hierarchy of importance — the main headline in an h1 tag, subhead in h2, sidebar headers in h3 and so on.

HTML5 greatly complicates that simple hierarchy by allowing for multiple h1 tags whose hierarchy is decided by nesting. For example, an h1 directly inside the body tag has more importance than an h1 inside a section tag. And, as we’ve pointed out before, if your section tags don’t have an h1 within them, then you probably shouldn’t be using section.

This structural nesting makes it considerably more complex to target groups of tags in CSS. It’s easy to end up with CSS that looks like this:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

That’s some pretty tangled code considering that all we’re trying to do here is target second tier h1 tags. It gets worse the deeper you need to go in nested tags — your CSS can become really tangled, really fast. The obvious answer is to simply assign classes to your various h1 tags. But littering your markup with class names is not ideal. To make life easier, and your CSS more readable, Mozilla proposed the -any() pseudo selector. Using -any() we could rewrite the code above like so:

-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav) h1 {
  font-size: 20px;
}

The -any() selector neatly groups all of our top level tags — section, article, aside, nav — then does the same for the next level of tags, and then finally targets any h1 tags. Not only is it easier to read, it’s easier to write.

The catch — there’s always a catch with emerging standards — is that, thus far, the -any() selector is only supported in Firefox 4 and WebKit nightly builds (as of r81742 you can target WebKit browsers using the -webkit prefix). Still, given that Mozilla only proposed the -any() selector about a year ago, and it’s already in three major browsers, the future of :-any() looks good.

The W3C’s CSS working group, which oversees CSS 3, is even moving toward making any() an official draft spec. Once that happens the rest of the browser pack will likely add support as well. As always Internet Explorer’s slow development cycle may delay widespread adoption of the -any() selector, but if you’re serving IE separate stylesheets anyway, there’s no reason not to embrace -any() for the rest today.

CSS heart photo by Rain Rabbit/Flickr/CC

See Also:

File Under: CSS, Web Standards

Simplify Your Stylesheets With CSSPrefixer

Woolly, the CSS sheep.

CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you gracefully degrade for older browsers.

But when it comes to writing CSS 3 there’s no question it can be a pain. Not only are the new rules considerably more complex than the simple days of background: white, most browsers are still using prefixes for CSS 3 features.

While we think browser prefixing is a good thing, it definitely adds complexity to your stylesheets and means writing the same rule several times. That’s where CSSPrefixer comes in. Prefixer is a Python-based CSS processor that takes single CSS 3 declarations and adds all the necessary browser prefixes to your stylesheet. You just write the actual CSS 3 rule and CSSPrefixer does the rest. As an added bonus CSSPrefixer can also compress your stylesheets to save on bandwidth.

Since it’s written in Python you can run CSSPrefixer from the shell, from the Python prompt or even integrate it into popular Python frameworks (like Django) using the webassets project, which now supports CSSPrefixer.

If you’re tired of wading through half a dozen rules every time you want to write a little CSS 3, use CSSPrefixer to simplify your code.

See Also: