On Auto-Generated Atomic CSS
January 15th, 2021
Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is that when you take on the job of converting something HTML and CSS-like into actual HTML and CSS, there are edge cases that you’ll have to program yourself out of if you even can at all….
Fixing Smooth Scrolling with Find-on-Page
January 12th, 2021
Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this: … when you control+f or command+f and search on CSS-Tricks, it’ll scroll very slowly instead of snapping to the result, which makes finding information…
Styling Code In and Out of Blocks
January 6th, 2021
We’ll get to that, but first, a long-winded introduction. I’m still not in a confident place knowing a good time to use native web components. The templating isn’t particularly robust, so that doesn’t draw me in. There is no state management, and I like having standard ways of handling that. If I’m using another library…
CSS Individual Transform Properties in Safari Technology Preview
December 30th, 2020
In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar, as they say, to make authoring easier. Take transition, which might look something like: .element { transition: border 0.2s ease-in-out; } We could have written it like this: .element { transition-property: border; transition-duration: 0.2s; transition-timing-function: ease-in-out; } Every “part” of the…
The Rules of Margin Collapse
December 30th, 2020
Josh Comeau covers the concept of margin collapsing: This idea might sound simple, but if you’ve been writing CSS for a while, you’ve almost certainly been surprised when margins either don’t collapse, or they collapse in weird and unexpected ways. In real-world projects, all kinds of circumstances can complicate matters. The basic stuff to know:…
A Utility Class for Covering Elements
December 26th, 2020
Big ol’ same to Michelle Barker here: Here’s something I find myself needing to do again and again in CSS: completely covering one element with another. It’s the same CSS every time: the first element (the one that needs to be covered) has position: relative applied to it. The second has position: absolute and is positioned so that all…
A Calendar in Three Lines of CSS
December 24th, 2020
A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the correct first column with grid-column-start. Thoughts: I’d go with an <ol> rather than a <ul> just because it seems like days are definitely ordered. The days…
What Makes CSS Hard To Master
December 18th, 2020
Tim Severien: I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let’s reflect on the language and find out what makes it hard. Tim’s reasons CSS is hard (in my own words): You can look at a matching Ruleset, and still not have the…
What’s Old is New
December 17th, 2020
This year, I learned a lot about how “old” tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style development has been both a learning experience, while also a nostalgic one. It’s been amazing to see how you can power plain ol’ HTML, CSS, and JavaScript…
Old is Solid; New Gets Talked About
December 15th, 2020
When Chris asked me to write about “one thing I learned about building websites this year” I admit my brain immediately went through a list of techniques and CSS properties I started using this year. But then I paused. Other people can write about that much better than I can. What’s something that I specifically…