When a Line Doesn’t Break
July 2nd, 2020
We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn’t have enough room for the next word in a line, it breaks it and moves down to the next line…
A Complete Guide to Dark Mode on the Web
July 1st, 2020
Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same. DuckDuckGo’s light and dark themes Let’s get into dark mode in the context of websites. We’ll delve into different options and approaches to implementing…
When Sass and New CSS Features Collide
June 29th, 2020
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered, how I…
In Defense of a Fussy Website
June 26th, 2020
The other day I was doom-scrolling twitter, and I saw a delightful article titled “The Case for Fussy Breakfasts.” I love food and especially breakfast, and since the pandemic hit I’ve been using my breaks in between meetings (or sometimes on meetings, shh) to make full bacon, poached egg, vegetable plate, so I really got…
Hide Scrollbars During an Animation
June 24th, 2020
CSS still can’t animate to auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won’t animate. */ height: auto; } There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back. My mind always goes to this solution just because…
An Overview of Scroll Technologies
June 22nd, 2020
Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. There are a number of scroll related technologies out there, so this article’s aim is to provide an overview of them…
Using Custom Property “Stacks” to Tame the Cascade
June 22nd, 2020
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuances — and inheritance requires an…
Where Do You Learn HTML & CSS in 2020?
June 19th, 2020
The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have,…
Advice for Complex CSS Illustrations
June 17th, 2020
If you were to ask me what question I hear most about front-end development, I’d say it’s “How do I get better at CSS?”. That question usually comes up after sharing a CSS illustration I have made. It’s something I love to do over on CodePen. To many, CSS is this mythical beast that can’t…
How to Reverse CSS Custom Counters
June 11th, 2020
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this: 5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title But the above is just text. I wanted to do this with a semantic <ol> element. The easy…