3 CSS Properties To Be Excited About
I am excited – not only about these awesome CSS properties (I love the calc property!) , but also to have a guest post from a woman in tech who really knows her stuff! My friend, Beth Soderberg is an independent web developer and digital communications consultant based in Washington, DC. In her free time, she volunteers with the WordPress Training Team, the WordPress DC Meetup, and DCFemTech. You can find her online at http://bethsoderberg.com and on Twitter @bethsoderberg.
I was among the web developers who exploded in joy when Microsoft announced that older versions of Internet Explorer (i.e. anything older than IE11) would no longer be supported as of January 12, 2016. In addition to a formal end of life announcement, browser usage for IE10 and below is very very low at this point. As I watch IE 7, 8, 9, and even 10 ride off into the sunset, I am officially no longer supporting IE10 or below on new client projects. This means that I can push the boundaries of what is possible with standard CSS without worrying about inconsistent cross-browser experiences, JavaScript-filled hacks, or having to struggle to target just one version of IE with a “fix.”
That all being said, here are the three CSS properties that are now fully supported by all modern browsers (Chrome, Firefox, Safari, Opera, IE11, and Edge) that I am most excited to be able to use in my projects without worrying about browser support:
1. Columns
Have you ever had to build a layout that required a column of content to reflow just like a traditional newspaper column? I have, and I’ve always had to write JavaScript to divide the length of the content into pieces and inject CSS classes so that I could force columns to appear. It was all very unnecessarily messy and I am thrilled that I no longer need to deal with this layout in this way. Now, I can just use friendly CSS columns!
Column is a shorthand property for the column-width and column-count properties that set up basic multi-column layouts using just CSS. Column-width sets how wide each column is and column-count determines how many they are. To specify columns for an element, your CSS will look something like this:
.element-class {
-webkit-columns: 250px 3;
-moz-columns: 250px 3;
columns: 250px 3;
}
In this example, the content within the class .element-class will be laid out on the page in three columns, each of which will be 250px wide. To support webkit-based browsers and Firefox, we still need -webkit- and -moz- prefixes. Beyond that, browser support for basic columns is pretty good, though if you’d like to get fancy with your columns there is some more advanced formatting that is on the horizon, but isn’t quite there yet in terms of browser support (e.g. break-inside, column-fill, and column-span, among others).
2. Calc
The calc property is one of my favorites in the whole of CSS because it enables you to subtract a pixel value from a percentage-based layout. You can do other math calculations with it too including addition, multiplication, and division. Though there are lots of creative implementations for calc, subtracting pixel values in this way is by far my most frequent implementation of the property. This is useful when you’re building a responsive layout, but still want fixed-width padding, margins, or a border around an otherwise responsive element. For example, say you have two elements and together they take up 100% of the width of the container, but you’d like a margin of 20px between the two elements. Your CSS might look like this:
}
In this example, .element-one is 70% of the container plus 20px wide and .element-two is 30% of the container minus 20px wide, which all adds up to 100%!
Browser support for calc has been decent since the debut of IE9 (though there were still a few bugs!), but now it can be used throughout a layout in a wide range of implementations. Yippee!
3. Transitions
Transitions are the simplest method of animating elements through CSS and now we can use them and expect that they will appear in all browsers! Historically, I’ve used them frequently anyway and just accepted the fact that there would be a significant number of viewers using IE9 and below that just wouldn’t see the transitions I’d included as progressive enhancements to the websites I had built. Now I’m feeling more confident about pushing my implementations of transitions a bit past progressive enhancement. For example, I think it would be possible to reliably animate a chart to respond differently based on a hover state at this point.
So what exactly is the transition property? Ultimately it is shorthand for four related properties: transition-property, transition-duration, transition-timing-function, and transition-delay. Together, these properties make it possible for you to make elements on your webpage move in simple ways. I wrote a nice meaty post on transitions once that you should read if you’d like to learn more about the nitty gritty of each property associated with the shorthand transform property.
So that’s it: columns, calc, and transitions: three CSS properties that I’m thankful I can easily use whenever I please now that I’ve dropped support for older versions of Internet Explorer. Which CSS properties you’re excited to use now that browser support requirements have shifted?