Latest News

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says:

That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though.

So…

<!-- This is old -->
<svg>
<use xlink:href="#whatever" />
</svg>

<!– This …

The post On xlink:href being deprecated in SVG appeared first on CSS-Tricks.

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead.

One topic like this (which is …

The post The peculiar magic of flexbox and auto margins appeared first on CSS-Tricks.

Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within).

Here’s how I reasoned it out to myself:

1. You know how if you display: hidden; an element, even if you display: block; a child, it doesn’t matter — it’s hidden because its parent is hidden.
2. The same is

…

The post Stuff you can do with CSS pointer events appeared first on CSS-Tricks.

Paraphrased question from email:

I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger.

How do I …

The post Sometimes `sizes` is quite important. appeared first on CSS-Tricks.