Link tags: css

956

sparkline

Compat2021: Eliminating five top compatibility pain points on the web

Good to see Google, Mozilla, and Apple collaborating on fixing cross-browser CSS compatability issues:

  1. flexbox
  2. grid
  3. position: sticky
  4. aspect-ratio
  5. transforms

You can track progress here.

CSS { In Real Life } | Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties

Oh, this is smart! You can’t target pseudo-elements in JavaScript, but you can use custom properties as a proxy instead.

prefers-reduced-motion: Taking a no-motion-first approach to animations

Given the widespread browser support for prefers-reduced-motion now, this approach makes a lot of sense.

Fluid Space Calculator | Utopia

Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!

Building Dark Mode | Product Blog • Sentry

Robin makes a good point here about using dark mode thinking as a way to uncover any assumptions you might have unwittingly baked into your design:

Given its recent popularity, you might believe dark mode is a fad. But from a design perspective, dark mode is exceptionally useful. That’s because a big part of design is about building relationships between colors. And so implementing dark mode essentially forced everyone on the team to think long, hard, and consistently about our front-end design components. In short, dark mode helped our design system not only look good, but make sense.

So even if you don’t actually implement dark mode, acting as though it’s there will give you a solid base to build in.

I did something similar with the back end of Huffduffer and The Session—from day one, I built them as though the interface would be available in multiple languages. I never implemented multi-language support, but just the awareness of it saved me from baking in any shortcuts or assumptions, and enforced a good model/view/controller separation.

For most front-end codebases, the design of your color system shows you where your radioactive styles are. It shows you how things are tied together, and what depends on what.

CSS transitions and hover animations, an interactive guide

This is a really nice introduction to CSS transitions with interactive demos you can tinker with.

Diving into the ::before and ::after Pseudo-Elements / Coder’s Block

A thorough deep dive into generated content in CSS.

Front-of-the-front-end and back-of-the-front-end web development | Brad Frost

These definitions work for me:

A front-of-the-front-end developer is a web developer who specializes in writing HTML, CSS, and presentational JavaScript code.

A back-of-the-front-end developer is a web developer who specializes in writing JavaScript code necessary to make a web application function properly.

SmolCSS

Minimal snippets for modern CSS layouts and components.

Continuous Typography / MK

Sounds like some convergent thinking with the ideas behind Utopia.

I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.

Here’s a demo you can play with.

How to avoid layout shifts caused by web fonts – Simon Hearne

A terrific in-depth look at improving the performance of web fonts.

CSS Frameworks, hype and dogmatism - Post - Piccalilli

You catch more flies with honey than Tailwind.

A minimum viable experience makes for a resilient, inclusive website or app - Post - Piccalilli

The whole idea of progressive enhancement is using the power that the web platform gives us for free—specifically, HTML, CSS and JavaScript—to provide a baseline experience for the people who visit our sites and/or apps, and then build on that where appropriate and necessary, depending on the capabilities of the technology that they are using.

Responsible Web Applications

An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).

Nested Media Queries – Bram.us

Huh. I don’t think I ever thought about nesting media queries …and yet I’m pleasantly surprised that it works!

Sticky CSS Grid Items | Melanie Richards

This is a useful technique that future me is almost certainly going to need at some point.

new.css

A minimal style sheet that applies some simple rules to HTML elements so you can take a regular web page and drop in this CSS to spruce it up a bit.

Is Progressive Enhancement Dead Yet? (Webbed Briefs)

Heydon’s newest short video is right up my alley.

My stack will outlive yours

My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack.