design tips

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second post (coming tomorrow!) will cover the use of fallbacks and invalid values to extend the technique to non-numeric values.

What if I told you a single …

The post DRY Switching with CSS Variables: The Difference of One Declaration appeared first on CSS-Tricks.

I posted a video of this talk some months back, but it was nearly an hour and a half long. Here’s an updated version that I gave at JAMstack_conf that’s only 30 minutes:

The gist is that the front-end stack is wildly powerful these days. Our front-end skillset can be expanded to give us power to do back-end-ish things and talk with APIs that allow us to build entire products in a way we haven’t quite been able to before.…

The post The All Powerful Front-End Developer appeared first on CSS-Tricks.

Ever have that, “Ugighgk, another device to support?!” feeling? Like, perhaps when you heard that wrist devices have browsers? Ethan’s latest post is about that.

Personally, the Apple Watch is interesting to me not because it’s a watch. Rather, it’s interesting to me because it’s a smaller-than-normal touchscreen attached to a cellular antenna, and one that’s not necessarily on the most reliable connection. It helps me look past the device, and to think about how someone will interact with …

The post It’s not about the device. appeared first on CSS-Tricks.

In the previous post in this two-part series, we explored the CSS-in-JS landscape and, we realized not only that CSS-in-JS can produce critical styles, but also that some libraries don’t even have a runtime. We saw that user experience can significantly improve by adding clever optimizations, which is why this series focuses on developer experience (the experience of authoring styles).

In this part, we’ll explore the tools for “plain ol’ CSS” by refactoring the Photo component from our existing example.…

The post Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS appeared first on CSS-Tricks.

Sounds like Edge is going to spin down EdgeHTML, the engine that powers edge, and go with Chromium. It’s not entirely clear as I write whether the browser will still be called Edge or not. Opera did this same thing in 2013. We’ll surely be seeing much more information about this directly from Microsoft, and hot takes galore.

Probably three major categories of hot-take:

1. Hallelujah, I dislike supporting Edge, this will make my job easier and make the web better

…

The post Sayonara Edge appeared first on CSS-Tricks.