Tags: css

849

sparkline

The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.

Scott re-examines the browser support for loading everything-but-the-critical-CSS asynchronously and finds that it might now be as straightforward as this one declaration:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

I love the fact the Filament Group are actively looking at how deprecate their loadCSS polyfill—exactly the right attitude for polyfills in general.

Intrinsically Responsive CSS Grid with minmax() and min()

When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

Ralph Lavelle: On resilience

Thoughts on frameworks, prompted by a re-reading of Resilient Web Design. I quite like the book being described as a “a bird’s-eye view of the whole web design circus.”

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.

In defence of graceful degradation and where progressive enhancement comes in by Adam Silver

This does a really good job of describing the difference between progressive enhancement and graceful degradation …but I don’t buy the conclusion: I don’t think that feature detection equates to graceful degradation. I do agree though that, when it comes to JavaScript, the result of progressive enhancement is that the language degrades gracefully.

This is progressive enhancement. An approach to making interfaces that ensures JavaScript degrades gracefully—something that HTML and CSS do automatically.

But there’s a difference between something degrading gracefully (the result) and graceful degradation (the approach).

Using Hamburger Menus? Try Sausage Links · Bradley Taunt

Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.

Drop caps & design systems - Vox Product Blog

Sit down and listen to a story from uncle Ethan.

Relearn CSS layout: Every Layout

A new site from Heydon and Andy that provides CSS algorithms for common layout patterns.

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

This page is a truly naked, brutalist html quine.

What you see really is what you get. I like this style!

The CSS Mindset | Max Böck - Frontend Web Developer

This post absolutely nails what’s special about CSS …and why supersmart programmers might have trouble wrapping their head around it:

Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.

CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default.

Max goes on to encapsulate years of valuable CSS learnings into some short and snappy pieces of advices:

No matter what your level of CSS knowledge, this post has something for you—highly recommended!

Is CSS Turing Complete? | Lara Schenck

This starts as a good bit of computer science nerdery, that kind of answers the question in the title:

Alone, CSS is not Turing complete. CSS plus HTML plus user input is Turing complete!

And so the takeaway here is bigger than just speculation about Turing completeness:

Given that CSS is a domain-specific language for styling user interface, this makes a lot of sense! CSS + HTML + Human = Turing complete.

At the end of that day, as CSS developers that is the language we really write. CSS is incomplete without HTML, and a styled interface is incomplete without a human to use it.

Night Mode with Mix Blend Mode: Difference

Here’s a clever shortcut to creating a dark mode by using mix-blend-mode: difference.

Making Future Interfaces: Custom Properties - YouTube

Heydon cracks me up—his Patterns Day is going to have you crying with laughter; guaranteed!

Here he is talking about custom properties in CSS as part of his Making Future Interfaces video series.

Type in the digital era is a mess

Marcin explains why line height works differently in print and the web. Along the way, he hits upon this key insight about CSS:

Web also took away some of the control from typesetters. What in the print era were absolute rules, now became suggestions.

Remember that every line of CSS you write is a suggestion to the browser.

CSS-only chat

A truly monstrous async web chat using no JS whatsoever on the frontend.

This is …I mean …yes, but …it …I …

Create a responsive grid layout with no media queries, using CSS Grid - Andy Bell

CSS grid and custom properties really are a match made in heaven.

Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

The 2019 edition of Cody Lindley’s book is a good jumping-off point with lots of links to handy resources.

Fading out siblings on hover in CSS | Trys Mudford

Well, the clever CSS techniques just keep on comin’ from Trys—I’m learning so much from him!

Limitation Breeds Creativity - Cassie Evans [Bytes Conf 2019] - YouTube

Cassie’s terrific talk from Bytes Conf, featuring some wild CSS experiments.

(Conference organisers—you want Cassie on your stage!)

A progressive disclosure component - Andy Bell

This is a really nice write-up of creating an accessible progressive disclosure widget (a show/hide toggle).

Where it gets really interesting is when Andy shows how it could all be encapsulated into a web component with a progressive enhancement mindset