Skip to main content
CSS is fun and cool and I like it.
Article

Will we be flattening our HTML for CSS Grids?

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it’s a dominant web layout tool of choice. That day isn’t here yet though, as no stable browser is shipping the latest version of the spec (it’s behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered “Candidate Recommendation” … Read article “Will we be flattening our HTML for CSS Grids?”

Article

Accessible SVGs in High Contrast Mode

Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations for low vision, a condition that affects a not-insignificant amount of the population.

Rather than writing and maintaining complicated and brittle state-managing Javascript, work with existing browser capabilities such as media queries to easily make the experience accommodate … Read article “Accessible SVGs in High Contrast Mode”

Article

A Nerd’s Guide to Color on the Web

There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let’s delve into some of the technical details of color on the web.… Read article “A Nerd’s Guide to Color on the Web”

Article

`font-display` for the Masses

Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy!

If you’re a regular reader here at CSS-Tricks, chances are good you know a bit about web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property?

The font-display property in CSS is available in Chrome, and emerging in Firefox … Read article “`font-display` for the Masses”

Article

Swapping Out Text, Five Different Ways

It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description” to “Collapse Description.” This is a fairly simple thing to do, but there are various considerations to make. Let’s cover a bunch of ways.… Read article “Swapping Out Text, Five Different Ways”

Article

Poll Wrapup: How Much Effort Do People Put Into Alt Text?

From over 16,000 people surveyed, more than half (54%) say they “do some” when it comes to alt text for images that are important to content. The example provided did provide insight into the content and relevance of the image.

Thankfully the least number of people (10%) said they “do nothing.” This is unfortunate as it is a a real accessibility problem. … Read article “Poll Wrapup: How Much Effort Do People Put Into Alt Text?”