When I begin a project and start planning how to lay out the home page, my brain jumps to floats and positioning. Some of you might go with Bootstrap or another framework. This is because it’s the year 2016 and that’s still how we do things. But I’d like to do some mental time traveling. Let’s pretend it’s the year 2018 and the CSS Grid Layout module is supported by all major browsers. Our page layout paradigm has shifted completely, and CSS capabilities are finally in harmony with our design goals. It’s a great time to be a web developer. Let’s create a home page using our awesome new tool.[Read more]
I like to think I’m getting pretty good at working with media queries. After all, they’re arguably the most integral part of responsive web design, and I’ve been building mobile-friendly sites for years now. But when I think about it, it’s really only width-based media queries that I’m good at. I’m an absolute viking with[Read more]
min-width, but yesterday I ran across a situation where I needed to control the content of my design based on the height of the device. This was a first for me. My initial thought was, I’ll just use vertical media queries… wait, do those even exist? Google soon informed me that, thankfully, yes they do. They may never be as utilized as their width-based counterparts, but they play an important role for specific types of designs.
If you design and/or develop for the web, chances are you’re using a Mac running OS X. There’s a slightly less, but still rather good, chance that you’re using Windows. Whichever it may be, you’re probably happy with your environment. And that’s fine, because both OS X and Windows make fine development environments. My intention with this post is not to try to convince you why your operating system of choice is poor and mine is superior. But rather I simply want to present a third option, one that you’ve likely not tried and possibly not even considered.[Read more]
There’s a handful of really awesome new CSS Level 4 selectors on the horizon. You can read about them all in the most recent W3C Editor’s Draft. I’ll likely write about more of them in the future, but there’s one in particular that I’d like to focus on for this post:[Read more]
:has(). All of the CSS Level 4 selectors do some pretty cool stuff, but
:has()strikes me as having the most exciting possibilities.