Menu

CSS

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…

Debugging CSS

December 14th, 2020

High five to Ahmad Shadeed for releasing his new book, Debugging CSS. I think that’s a neat angle for a book on CSS. There are a ton of books on the general subject of CSS already, so not that they can’t be fresh takes on that, but this feels equally important and less trodden territory….