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.
Topic: CSS
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.
Instant Web
For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.
Let Links Be Links
The notion of the web as an application platform has never been more popular. Single-page frameworks like Ember and Angular make it easy to create complex applications that offer richer, more robust experiences than traditional websites can. But this benefit comes at a cost. Ross Penman tells us what we can do about it.
Readable Wearables
Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don’t already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.
Quantity Queries for CSS
In responsive design, we think a lot about space, especially in the context of screen sizes. But the amount of content or the number of elements is bound to affect space, too, just as unpredictably—and if we don’t want our designs to dictate our content, we need new ways to make our design aware of changing content quantities. Heydon Pickering walks us through a new idea for creating style breakpoints for quantities of HTML elements.
What Will Save Us from the Dark Side of CSS Pre-Processors?
To spare ourselves the complexity and tedium of writing CSS, we’ve embraced CSS pre-processors. But we must use them wisely or risk outputting CSS that is weirdly convoluted and just so wrong. Could post-processors save us from the pitfalls of pre-processors? Lyza D. Gardner is cautiously optimistic about their future, but also has a solution we can implement right now to save ourselves from both unchecked pre-processors and unseasoned post-processors.
A Vision for Our Sass
Sass is a powerful tool in helping us wrangle complex stylesheets. Yet it has its headaches—including troublesome nesting of CSS selectors, code duplication, and tight coupling—that result in messy outputted CSS. Universal standards aren’t a viable answer, as the Sass spec continues to quickly change and grow. Felicity Evans holds that the problem isn’t Sass itself, but the way we use it. In this article, she champions a set of tenets that offers guidelines on how to work with Sass and evaluate new features and techniques.
Axiomatic CSS and Lobotomized Owls
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational markup. Heydon Pickering offers an unexpected option for handling cascading styles more efficiently: a variation on the universal selector.
Breaking Stuff
Designers may do CSS, but not JavaScript. Some may do JavaScript, but draw the line at git. Some may be willing to use git with a graphical interface, but not with Terminal. When we get out of our comfort zone, it’s great to have a safety net so we can learn without breaking stuff too badly.
