- I think Jake Archibald was the first person I heard talking about this?
- Craig Buckler provides an intro to the API, with examples.
- Dave Rupert also offers an intro, including multi-page transitions, with examples.
- A simple gallery with thumbnail ribbon.
- Alex Ivanovs offers several simple examples, including multi-page (there are some broken images in the CodePens, but the videos demonstrate things quite well).
- Ryan Trimble provides several iterations of the same example.
- Dom Christie has some really polished examples
- But a simple Twitter search shows tons of inspiring examples…
And speaking of examples of “what is possible”, whatpwacando.today demonstrates all the fancy features a PWA can do today!
Sticking with CSS for another second, Vadim Makeev shares this nice walk-through for creating a skewed background highlight using nothing but CSS.
Okay, just one more CSS… Adrian Bece writes about some Lesser-Known And Underused CSS Features. You will likely know some, but some stand-outs for me are
all (really like
all: unset; within a specific selector!),
currentColor (have used this a lot, but still forget about it!), Interaction Media Queries,
isolation (Wow!), and, oh…
Somebody help me, I can’t stop… I think most of us probably at least familiar with the concept of CSS Logical Properties by now, those super-efficient new ways to define block, inline, direction, etc., so that it works in ltr and rtl reading environments? If not, Nicolas Hoffmann will help get you up-to-speed. If so, it also works as a really nice cheatsheet!
Overlapping elements. We’ve all seen it, text over images or videos or graphics, and most of us have had to build it, typically absolutely-positioning something over something else, and always with some level of fragility at some breakpoint. But Chen Hui Jing offers another approach by overlapping elements using
And heck, why not let Andy Bell help us combine Custom Properties and responsive content with his Stack and Flow tips.
Kevin Farrugia offers a thorough explainer on
fetchpriority and how it can help LCP. The key that I think a lot of people miss regarding
fetchpriority is that it doesn’t change the priority to “high”, for example, but requests it be higher than the default.
And Eloïse Martin shares a few more tips for getting your LCP in front of your users more quickly…
Here is a slick accessible hamburger menu button that requires no JS. I would have added
cursor: pointer to the
label, but I realize this is mostly intended for touchscreens. Love it!
Jermey Keith shares a couple of really useful form attributes we should all be adding to help our users. And if you are doing two-factor authentication, please take note of
autocomplete="one-time-code", so the browser can offer to prefill the code once the text arrives. Also be sure to click through to the Phil Nash article that Jeremy links to to improve your two factor authentication experience.