Using CSS Mod Queries with Range Selectors

When you distractedly agree to do something that you then realize you don’t actually know how to do, what do you do? Briefly panic, and get down to work. Patrick Clancey comes up with a little arsenal of tools to help him deal with mods, ranges, and ranges within mods, allowing him to break away from standard-implementation fixed length or fixed-layout lists.

A Redesign with CSS Shapes

At least one set of crude hacks has left the building. With progressive and responsive enhancement—and using new CSS features—we can define how text should flow past a floated element. Eric Meyer explains what An Event Apart recently learned about floating shapes and feature queries.

Practical SVG

“Sizing svg is more complicated than sizing an img,” writes Chris Coyier in this excerpt from his new A Book Apart title Practical SVG. But, he continues, it’s complicated in a good way—it gives us more control and opens up some interesting new possibilities. Read on.

Meaningful CSS: Style Like You Mean It

Our markup too often remains a snarl of divs, our CSS a chaos of classes. Tim Baxter urges us to move beyond that. We can use real objects now instead of abstract representations. We can write CSS to support our markup instead of the other way around, and both can be more semantic and meaningful. The browser support is there; the standards are in place. Only habit is stopping us.

Finessing `feColorMatrix`

CSS filters lack the ability to do per-channel manipulation—a huge drawback. They may be convenient, but CSS filters are merely shortcuts derived from SVG; as such, they provide no control over RGBA channels. SVG (particularly the feColorMatrix map) gives us much more power and lets us take CSS filters to the next level. Una Kravets guides us through feColorMatrix and shows us how we can harness its power to create detailed filters.

Blending Modes Demystified

In an ideal world, we’d be able to modify a design or graphic for the web while keeping the original intact, all without opening an image editor. We’d save tons of time by not having to manually reprocess graphics whenever we changed stuff. Graphics could be neatly specified, maintained, and manipulated with just a few licks of CSS. Oh. Wait. We can do that! Justin McDowell gives us the lowdown on blending modes.

Mixing Color for the Web with Sass

We use color to influence mood, create an environment, and tell a story. 125 years ago, impressionist painter Claude Monet changed the way we think about color by describing light’s role in it. His observations have largely been lost on design for the web—but a preprocessor like Sass offers us unprecedented power to mix tints and shades that will imbue our palettes with more nuance.

2015 Summer Reading Issue

The dog days are upon us—but instead of giving up in the summer swelter, take heart! We’ve got an extra-special reading list of bright, insightful brainfood. ALA’s third annual summer reader explores what’s been on the web industry’s mind lately, from accessibility to performance, from CSS techniques to web type, from mentorship to more collaborative approaches. It’s a list as cool and fancy as a watermelon-basil popsicle. Yeah, that does sound good, doesn’t it? Kick back, chill out, and get to reading.

Container Queries: Once More Unto the Breach

Media queries have been the go-to tool in building responsive sites, allowing us to resize and recombine modules to suit multiple contexts, layouts, and viewports. But relying on fixed viewport sizes can quickly twist stylesheets into Gordian knots. We still need a future-friendly way to manage responsive CSS. Mat Marquis explores the problem and the progress toward the solution—and issues a rallying call.