Wisdump

Dumping wisdom on design and the web

  • Design
  • Blogging
  • Designer Resources
  • Design Critiques
  • CSS
  • About
  • Advertise
  • Contact Us

Moving forward with CSS

June 30, 2008 By Sophia Lucero

You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.

Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.

Tools and Frameworks

I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.

Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.

YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.

CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.

Best Practices

Here are some great nuggets of advice that will help guide you when writing your own CSS.

Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.

Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.

Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.

Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.

Nesting Specifics: DZone goes into the nuances of CSS selector specificity.

CSS3 and Beyond

If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.

Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.

Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.

Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.

Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.

CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.

Filed Under: CSS Tagged With: absolute positioning, cacheer, CSS, css3, Firefox, float, fonts, grid, nesting, opera, performance, stylizer, yaml

Categories

Web Design Tools You Wish You Knew About When First Designing Your Website

It’s easy to have perfect vision in hindsight, but when designing a website a little planning ahead can give you a perfect vision from the get-go. Many web designers find themselves performing redundant tasks, or creating things with manual effort that could otherwise be automated. Check out these useful web design tools that you’ll be […]

Best Resources to Use for Web Design Ideas

Web designers may have their own ideas when creating a layout design for a website but similar to writers, they also experience the so-called mental block syndrome at certain times. Fortunately, the web has a wealth of information available and designers can always turn to it for inspiration. It may surprise you to know that […]

The “Horrible Web Design Client:” An Infographic Look

Web design is a new frontier in creative designing. It takes a special set of design skills to make an effective web site. A good web site is not just pretty to look at, or filled with a lot of cool Flash animations, it is also easily navigable, with well laid out elements that are […]

Pagelines PlatformPro 1.3 – The Upgrade

PlatformPro 1.3, the latest upgraded version of the successful PlatformPro Theme by PageLines, has finally hit the market. Packed with 20 or so new options and features, it has undergone some major changes; the most important of which are listed here: The new Web Typography tool provides direct integration with Google’s Font API. This provides […]

Design tip: use extraordinary imagery

Drawn.ca has posted 2 interesting sources of atypical imagery which, I realized, can be great design inspiration: First, Dogfoose uses close-up images of produce in his illustrations. The sample below uses broccoli as treetops for a kids magazine illustration: What an amusing way to channel the miniature look (achieved through tilt-shift photography) for infographics purposes! […]

iThemes Builder – Your one-stop WordPress Theme Builder

This revolutionary new theme is incredibly easy to install – simply upload it into the themes folder, click activate – that’s it! As with all their themes, iThemes have included a My Themes widget, providing links to special features within the theme itself, as well as relevant information for the configuration of WordPress. The layout […]