CSS-Tricks Icon

CSS-Tricks

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

Chris Coyier CSS-Tricks

The shapes of CSS

Chris Coyier on CSS-Tricks: By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element. Ok, so the first couple ones are easy, but the lower you go on the page, the more complex the shapes become. I had no idea you could do this with just CSS, much less with a single HTML element.

read more...

Chris Coyier CSS-Tricks

Preventing a grid blowout

Chris Coyier on CSS-Tricks: Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. … That's somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It's true that the auto value would do the same, but auto isn't quite as robust since it's size is based on the content inside. Chris explains something here which may look pretty simple, but would've taken me hours to debug. The distinction he makes between the 1fr and auto defined column is game changing on its own.

read more...

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