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.
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:
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:
-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).
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!
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:
. 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?