I’ve recently fallen in love with the CSS3 vh property. (vh stands for “viewport-height.”) It lets you make things a certain percentage of the height of your browser window itself—whether that “viewport” is a tablet screen, a phone screen (in portrait or landscape), a laptop, a desktop, a smart fridge(?), or what have you.

This week, I had a client send me a bug that only appeared in iOS Safari. As much as I’d love to say “tell your visitors not to use iOS Safari,” it’s definitely a popular enough way to browse the web to merit fixing the bug.

Here is some very useful information on an oddly outdated-looking page. It gives device widths for a range of iPhones, iPads, Samsung phones, and so on.

I recently needed to create a number of masonry layouts for a WooCommerce website I’m building for a friend. I didn’t want to resort to jQuery, and that’s how, at long last, I found CSS3’s columns property. It lets you do CSS-only layouts that look like this:

In the first of a few “Whaaaat I had no idea CSS3 did that” posts from me: You can set elements to be a percentage of the height of your browser window!