Latest News

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:

• Placeholder space (and then flexible responsive styles after loading)
• Low-quality placeholder images
• Responsive images syntax (srcset)
• Image formats (e.g. using WebP when you can)
• Click-to-load on bad network connections
• Better UX for loading errors,

…

The post An Almost Ideal React Image Component appeared first on CSS-Tricks.

When we produce a PNG image, we use an <img> tag or a CSS background, and that’s about it. It is dead simple and guaranteed to work.

PNG is way simpler to use in HTML than SVG

Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you’re spoiled for choices when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade-offs.

Problems with inline SVG…

The post Using Custom Fonts With SVG in an Image Tag appeared first on CSS-Tricks.

Y’all probably wouldn’t be surprised if I told you it’s pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I’m a fan of just inlining those suckers, particularly when they are pretty simple.

But what else?

Logos is a classic example! A lot of people dip their toes in this way.

You don’t have to inline the SVG if you don’t want. It could be an <img> or background-image as well.…

The post What is SVG good for? appeared first on CSS-Tricks.

A good candidate for the Blog Post of the Year from Zach Holman. I think Eric Portis’ “w descriptors and sizes: Under the hood” is up there too, but perhaps even nerdier. Ooooh, also Frank Chimero’s “The Good Room” is up there. But I digress.

Zach’s article is as educational as it is funny.

But yeah, this UTC initialism doesn’t make any sense. Let’s dig into this a little more.

So you’ve got a bunch of scientist types around …

The post UTC is Enough for Everyone, Right? appeared first on CSS-Tricks.

This isn’t a comprehensive guide to centering things. We have that!

This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don’t know the width or height of what you are centering. Vertical centering being the extra tricky of the two.

Believe it or not, there was a way to do that even in IE 8. The trick …

The post Centering: The Newest Coolest Way vs. The Oldest Coolest Way appeared first on CSS-Tricks.