Great New (to me) CSS3 properties

[xairbusdriver]

A couple of my pages have lots of text on them. I know some people use full screen views with their browsers. Even though I limit the width of the body element to 65em, lines of text that long can be more difficult to read. Columns are the obvious answer, but they can be tricky to create with floats. So, I was pleasantly surprised to discover several CSS3 properties that make columns super simple. The names are pretty self-explanatory, I think:

• column-count: any number, including zero
• column-gap: again, a number, including zero, pixels, ems and I think percentages
• column-rule: the most complicated
  • column-rule-width: any number, including zero (medium|thin|thick|length:any number, including zero|initial|inherit)
  • column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit
  • column-rule-color: hex, rgb, rgba, hsl, color key word

Since I don't really want multiple columns on very narrow screens, I just use the zero/0/none values as appropriate with the minimum screen width media queries. ie; iPhone in landscape has two columns, rotate to portrait and the columns become just one. Of course, some browsers support this property better than others; Safari doesn't yet know how to handle rule-styles. But I like 1pix rules, so "styles" for a line that narrow would be a bit hard to see, anyway!

The two pages I've applied these properties to are the "Station" and "Partners". You can make your desktop browser as narrow as you want but you'll probably need to access the pages on a mobile device, in portrait position, to see the one column view.