Archive by Author

Hey hey `font-display`

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. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain’t no walk in the park.

Using font-display

The post Hey hey `font-display` appeared first on CSS-Tricks.

Kinsta

(This is a sponsored post.)

Huge thanks to Kinsta for sponsoring CSS-Tricks this week! We’re big fans of WordPress around here, and know some of you out there are too. So this might come of interest: Kinsta is WordPress hosting that runs on Google Cloud Platform. And in fact, it’s officially recommended by Google Cloud for fully-managed WordPress hosting.

What does that matter? Well, when you go with a cloud host you’re entering a new realm of reliability. For …

The post Kinsta appeared first on CSS-Tricks.

Working With the new CSS Typed Object Model

Eric Bidelman introduces the CSS Typed Object Model. It looks like it’s going to make dealing with getting and setting style values through JavaScript easier and less error-prone. Less stringy, more number-y when appropriate.

Like if we wanted to know the padding of an element, classically we’d do:

var el = document.querySelector("#thing");
var style = window.getComputedStyle(el);
console.log(style.padding);

And we’d get “20px” as a string or whatever it is.

One of these new API’s lets us pull it off like this:…

The post Working With the new CSS Typed Object Model appeared first on CSS-Tricks.

Wufoo and Worldpay

(This is a sponsored post.)

Huge thanks to Wufoo for sponsoring CSS-Tricks this week! Like it says in the sidebar on this very site, we’ve been using Wufoo for literally over a decade. It’s the easiest and most powerful way to build web forms on the web.

Here’s something brand new from the Wufoo team: now in addition to payment providers like PayPal and Stripe, you can choose Worldpay.

This will be a huge upgrade for international users, …

The post Wufoo and Worldpay appeared first on CSS-Tricks.

It’s Time for an RSS Revival

Brian Barrett:

Tired of Twitter? Facebook fatigued? It’s time to head back to RSS.

I’m an RSS reader lover, so I hate to admit it, but RSS ain’t going mainstream. It was too nerdy 20 years ago and it’s too nerdy now. RSS is still incredibly useful technology, but I can’t see it taking off alone.

For RSS to take off, it needs some kind of abstraction. Like Flipboard, where you can get started reading stuff right away and …

The post It’s Time for an RSS Revival appeared first on CSS-Tricks.

Some Recent Live Coding Favorites

There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I’ve watched and really enjoyed lately:

  • @keyframers – “An animated, collaborative coding live stream by @davidkpiano & @shshaw.” They’ve got 2 epsidoes out now, each of which they start with an animated interface GIF and then collaboratively re-build it.
  • The Coding Train – Daniel Shiffman’s show is a force of

The post Some Recent Live Coding Favorites appeared first on CSS-Tricks.

BigCommerce: eCommerce Your Way (and Design Awards!)

Huge thanks to BigCommerce for sponsoring CSS-Tricks this week!

Here’s the basics: BigCommerce is a hosted eCommerce platform. In just a few minutes, anybody can build their own online store. From a personal perspective, I’d suggest to any of my friends and family to go this route. CMS-powered websites are complicated enough, let alone feature-packed eCommerce websites. Please go with a solution that does it all for you so your site will look and work great and you can focus …

The post BigCommerce: eCommerce Your Way (and Design Awards!) appeared first on CSS-Tricks.

Keep Pixelated Images Pixelated as They Scale

This is a little reminder that there is a CSS property for helping control what happens to images as they scale up: image-rendering.

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 …

The post Keep Pixelated Images Pixelated as They Scale appeared first on CSS-Tricks.

`:focus-visible` and backwards compatibility

Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We’re in the early days of browser support, but it aims to solve an awkward situation:

… focus styles can often be undesirable when they are applied as a result of a mouse/pointer interaction. A classic example of this are buttons which trigger a particular action on a page, such as advancing a carousel. While it is important that a keyboard user is able to see when their focus …

The post `:focus-visible` and backwards compatibility appeared first on CSS-Tricks.

Why would you do that in CSS?

Have you seen Lynn Fisher’s extraordinary A Single Div project? Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single <div>.

Why would she do that? Here’s one pertinent possibility: it’s none of our business. We’re free to wonder, or even ask if it’s done respectfully enough. But does it really matter? Let’s stop short of assuming she doesn’t know what’s she’s doing, assuming it’s a twisted form of pain, or that she’s unaware of other technologies. Check out the example where she drew the official SVG logo with CSS and a single div. Woke.

The post Why would you do that in CSS? appeared first on CSS-Tricks.