Adactio: Links—Tagged with css

2019 End-of-Year Thoughts Archives | CSS-Tricks

I’m really enjoying this end-of-the-year round-up from people speaking their brains. It’s not over yet, but there’s already a lot of thoughtful stuff to read through.

There are optimistic hopeful thoughts from Sam and from Ire:

Only a few years ago, I would need a whole team of developers to accomplish what can now be done with just a few amazing tools.

And I like this zinger from Geoff:

HTML, CSS, and JavaScript: it’s still the best cocktail in town.

Then there are more cautious prognostications from Dave and from Robin:

The true beauty of web design is that you can pick up HTML, CSS, and the basics of JavaScript within a dedicated week or two. But over the past year, I’ve come to the conclusion that building a truly great website doesn’t require much skill and it certainly doesn’t require years to figure out how to perform the coding equivalent of a backflip.

What you need to build a great website is restraint.

The difference between HTML, CSS, and JavaScript | Zell Liew

HTML lets you create the structure of a website.

CSS lets you make the website look nice.

JavaScript lets you change HTML and CSS. Because it lets you change HTML and CSS, it can do tons of things.

Beyond automatic accessibility testing: 6 things I check on every website I build - Manuel Matuzović

Six steps that everyone can do to catch accessibility gotchas:

Check image descriptions

Disable all styles

Validate HTML

Check the document outline

Grayscale mode

Use the keyboard

The “P” in Progressive Enhancement stands for “Pragmatism” - Andy Bell

With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.

Also with Progressive Enhancement, it’s incredibly likely that your IE11 user, or your user on a low-powered device, or even your user on a poor connection won’t notice that they’re experiencing a “minor” experience because it’ll just work for them. This is the magic, right there. Everyone’s a winner.

Designing a focus style | Zell Liew

A deep dive info focus styles with this conclusion:

The default focus ring works. There are problems with it, but it can be good enough, especially if you can’t dedicate time and energy to create a custom focus ring.

A Modern CSS Reset - Andy Bell

Some very smart ideas in here for resetting default browser styles, like only resetting lists that have classes applied to them:

ul[class],
ol[class] {
  padding: 0;
}

I select only lists that do have a class attribute because if a plain ol’ <ul> or <ol> gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.

The perfect responsive menu (2019) | Polypane responsive browser

I don’t know about “perfect” but this pretty much matches how I go about implementing responsive navigation (but only if there are too many links to show—visible navigation is almost always preferable).

Keeping it simple with CSS that scales - Andy Bell

The transcript of Andy’s talk from this year’s State Of The Browser conference.

I don’t think using scale as an excuse for over-engineering stuff—especially CSS—is acceptable, even for huge teams that work on huge products.

The Book | The Lean Web

This is such a great little web book from Chris Ferdinandi that you can read online for free.

Intro

Modern Best Practices

How did we get here?

Lean Web Principles

What now?

CSS { In Real Life } | How to Accessibly Split Text

This is why we need an nth-letter selector in CSS .

Creating my logo animation - cassie.codes

What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!

Also: Cassie is on the indie web now, writing on her own website—yay!

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).

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!

Link tags: css

860