Friday Front-End - Issue #262: The failed promise of Web Components, CSS clamp, high contrast media queries, and more!

On the surface color seems simple, but getting 100+ designers and engineers to follow guidelines that are a part of literally everything they make is a huge undertaking. To put it in perspective: over 50% of Lyft’s design system team’s office hours, high visibility projects and inner team disagreements are color related. We’ve learned a lot over the past three years. It sure as hell ain’t perfect, but it’s working pretty well so far.

Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior at different screen sizes more predictable — All in a single line of CSS, thanks to clamp().

Yesterday, we looked at how to find a date a certain amount of time in the past or future. Today, we’re going to flip that on its head, and find the relative time between two dates. Let’s imagine you have some user created content, and a timestamp for when it was created. You want to figure out how long ago that was, and display that in the UI. How would we do that?

CSS features for Windows high contrast have been available in Microsoft browsers for quite some time, but were -ms-prefixed and unsupported in other browsers. Thanks to collaboration with our partners in the CSS Working Group and the Chromium project, web developers can now use new web standards to style their content for forced color modes like Windows high contrast.