Menu

CSS

Styling Web Components

January 29th, 2021

Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you’d probably be using it within your own app, it should be style-able so it can incorporated nicely anywhere. How to allow that styling isn’t exactly obvious: What wasn’t obvious to me, though, was how to allow users…

The Holy Grail Layout with CSS Grid

January 27th, 2021

A reader wrote in asking specifically how to build this layout in CSS Flexbox: My answer: That’s not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element (if not more grouping)….

You want minmax(10px, 1fr) not 1fr

January 22nd, 2021

There are a lot of grids on the web like this: .grid { display: grid; grid-template-columns: repeat(3, 1fr); } My message is that what they really should be is: .grid { display: grid; grid-template-columns: repeat(3, minmax(10px, 1fr)); }   Why? In the former, the minimum width of the grid column is min-content, which can be…

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…