3 Bits of CSS I’m Going to Start Using Everyday

CSS Dev Conf just wrapped up this week in New Orleans. There were tons of sessions on refactoring CSS, getting designers up to speed in terms of writing clean, reusable code, web layouts of the future, and CSS animation – all of which would require a novel-sized blog post to cover. Instead, I’m going to focus on three bits of CSS that you can understand and start using right now.

1. Viewport Sized Typography

Using vh, vw, vmin, and vmax to make headers and hero text responsive without media queries. Viewport height and width are basically just another way of measuring things online. It can be applied to anything that accepts a height and width value.

    vw - Equal to 1% of the width of the initial containing block
    vh - Equal to 1% of the height of the initial containing block
    vmin - Equal to the smaller of vw or vh
    vmax - Equal to the larger of vw or vh

Although still useful for container and general responsive sizing, I’m most excited about this feature in regards to media-queryless responsive headers. But vw font-sizing math gets a little fuzzy when applied to text. Font choices, captial vs. lowercase letters, and the number of characters your using can effect the vw font-sizing. I’ve found the best way to figure this out, is to just fiddle around with vw sizes in the browser until you find what fits your text.

Make sure to switch over to the Results tab and notice how, when resizing the browser window, the h1 takes up the same percentage of browser width.

Lacking support only in Opra Mini and some bugginess in IE9 and 10, makes this pretty widely accepted, and fallbacks are simple enough with regular px, rem, or em font-sizes.

2. Columns

With a columnar layout, you can control the number of columns, column dividers, gutter width, and the approximate min-width of each column. column-width is by far my favorite feature of CSS columns. It allows you to declare a min-width for each column. If the browser is too small to support your column-count and the column-width, the columns-count will decrease to support the column-width. The width of our blog doesn’t help show the responsiveness of column-width, so view it in another tab. Resize your browser and watch the columns adjust to fit the column-width.

Columnar layouts are supported almost everywhere with prefixes, the exceptions being IE8 and 9. The fallback for non-supporting browsers would be a single column of text.

3. Text Wrap -or- CSS Shapes Level 1

So as far as support goes, CSS Shapes still kind of suck. Lacking support in Firefox, Opera Mini, Android, and all the IEs, CSS Shapes should definately not be used as a defining part of your layout. Normally I would hold off on a feature like this, but using CSS Shapes as a text-wrap feature is pretty painless.

One important requirement is that image to be ‘shaped’, has to be floating. So this type of text-wrap around a shape would be great for bios, blog posts, anything that has a floating image with some text next to it.

  shape-outside: circle();
  shape-outside: ellipse (foo);
  shape-outside: border-box;
  shape-outside: polygon(foo);

Rather than add my own demo for this, I’m going to suggest you watch Jenn Simmons’ demo for the CSS Dev Confernce. Also, there are kittens.

Most of the shape-outside properties are self-explainitory, but the polygon properties can be as complex as you feel like making it. Chrome has a really amazing extension called CSS Shapes Editor that helps you draw out your polygon points. Just add it to your browser and play with it, it’s fun and it’s free!