CSS Grid is here—and easier than you might expect. Eric Meyer shows us how to use Grid on an existing design without breaking things for non-grid browsers. With pictures! Also a couple of gotchas.
It’s time to reexamine the toys in your conceptual toy box. When you see how to make web components modular down to the elements level, you may leave the Russian nesting doll metaphor and start to envision content blocks as Lego bricks. Samantha Zhang calls it a game changer.
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.
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.
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.
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.
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.
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.
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.
A clear process—based on communication, code reviews, and documentation—will help your team write strong, modular CSS together.