Jon Raasch's Blog

Jon Raasch's Blog » CSS http://jonraasch.com/blog Web development and design blog from Portland based developer Jon Raasch Thu, 13 Oct 2011 15:27:53 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS Data URIs – Use Them In All Browsers Now! http://jonraasch.com/blog/css-data-uris-in-all-browsers http://jonraasch.com/blog/css-data-uris-in-all-browsers#comments Wed, 10 Nov 2010 18:30:23 +0000 Jon Raasch http://jonraasch.com/blog/?p=1233 Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests. HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules. Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let's walk through how to use them in all major browsers.]]> http://jonraasch.com/blog/css-data-uris-in-all-browsers/feed 14 Graceful Degradation With CSS3 http://jonraasch.com/blog/graceful-degradation-with-css3 http://jonraasch.com/blog/graceful-degradation-with-css3#comments Tue, 17 Aug 2010 16:57:51 +0000 Jon Raasch http://jonraasch.com/blog/?p=1192 cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they're just holding back modern browsers from performing to their potential. Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3's useful features to progressively enhance web pages for the vast majority of users.]]> http://jonraasch.com/blog/graceful-degradation-with-css3/feed 10 CSS Summit: The Good Parts http://jonraasch.com/blog/css-summit http://jonraasch.com/blog/css-summit#comments Thu, 29 Jul 2010 16:33:06 +0000 Jon Raasch http://jonraasch.com/blog/?p=1124 CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here's a wrap up of the single best piece of information from each presenter:

Denise Jacobs – Advanced CSS Troubleshooting

The highlight of Denise's talk was some specific coding tips about clearing floated content. She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn't allow scrollbars if they're needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don't have to use the exact values above, you just have to set some type of overflow and width / height value. Denise went on to discuss a .clearfix:after method, see the gist. Denise likes this clearing method since it doesn't include any extra, non-semantic markup (as opposed to <br class="clearfix" />). However the fact that the :after selector doesn't work in IE6/7 makes this method unusable in my opinion. Ultimately I'm going to stick to the overflow: auto; method described above.]]> http://jonraasch.com/blog/css-summit/feed 0 Great Examples of Drawing With CSS http://jonraasch.com/blog/drawing-with-css http://jonraasch.com/blog/drawing-with-css#comments Tue, 30 Mar 2010 17:34:15 +0000 Jon Raasch http://jonraasch.com/blog/?p=964

I’ve always been a fan of drawing page components with pure CSS rather than using image support. Although rendering the page with CSS can sometimes be a pain, the rewards of fewer HTTP requests & less download time make it well worthwhile. Until recently, most web designers and developers couldn’t design using CSS alone, because [...]]]> http://jonraasch.com/blog/drawing-with-css/feed 10 CSS Rounded Corners In All Browsers (With No Images) http://jonraasch.com/blog/css-rounded-corners-in-all-browsers http://jonraasch.com/blog/css-rounded-corners-in-all-browsers#comments Thu, 04 Feb 2010 18:00:19 +0000 Jon Raasch http://jonraasch.com/blog/?p=628

CSS Rounded Corners In All Browsers (With No Images)

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites. While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. [...]]]> http://jonraasch.com/blog/css-rounded-corners-in-all-browsers/feed 159