Menu

CSS

Nested Media Queries

February 9th, 2021

Using media queries in CSS as part of responsive websites is bread and butter stuff to today’s front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. I spent a few months experimenting with a dozen different approaches to media queries in Sass and…

SVG within CSS

February 8th, 2021

Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that. But it can also point to a filter defined by SVG. So you could do filter: url(#my-custom-filter)…

Going From Solid to Knockout Text on Scroll

February 3rd, 2021

Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS! This effect is created by rendering two containers with fixed <h1> elements. The first…

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…