CSS-Tricks Icon

CSS-Tricks

CSS-Tricks is a site about all things web design and development.
css-tricks.com • 4 Stories
All Sources

Chris Coyier CSS-Tricks

View source?

I have to agree with this hard-line stance from Chris Coyier on the subject of view source: I literally don't care at all about View Source and wouldn't miss it if it was removed from browsers. I live in DevTools, and I'll bet you do too. I want my website to arrive at light speed on a tiny spec of magical network packet dust and blossom into a complete website. Or do whatever computer science deems is the absolute fastest way to send website data between computers. I'm much more worried about the state of web performance than I am about web education. But even if I was very worried about web education, I don't think it's the network's job to deliver teachability. What about you? Is view source more important than web performance? Is DevTools a worthy replacement for view source? Chris also cites comments on the subject from Tom Dale, Jonathan Snook, and Chris Heilmann.

read more...

CSS-Tricks Icon CSS-Tricks

Hey hey `font-display`

Chris Coyier: Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. … What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. Font loading strategy is pretty important. It's one of the reasons I searched far and wide to improve the performance of fonts on Brightly Colored. Fortunately, if you're using @font-face, using font-display is as easy as using one line of CSS, and you'll see the performance improvements immediately. Unfortunately, as Chris points out, there's no performant way to get around either FOUT or FOIT.

read more...

CSS-Tricks Icon CSS-Tricks

Keep pixelated images pixelated as they scale

Chris Coyier: We're quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it's the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let's say you'd really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling. You can do it! File this one in the “I had no idea this existed” category. Really simple CSS trick, but definitely a useful one.

read more...
0:00 / 0:00