Create semi-transparent CSS background images by crossfading them with a transparent GIF

Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images.

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), /* transparent GIF, base64 encoded */
    50%
);

Clever! WebKit/Chromium based browsers only though (i.e. no Firefox)

Maybe there kinda is background-opacity? →

Deep-copying in JavaScript using structuredClone

No more hacking around with the inadequate JSON.parse() or bouncing data to a Web Worker in order to deep clone an object, as there’s now structuredClone()

For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in function for deep-copying.

Like so:

const myDeepCopy = structuredClone(myOriginal);

If I recall correctly, Deno was the first to support this. Also available in Node 17 and Firefox. Safari has it feature-flagged, but it’s expected soon. Will ship with Chromium 98 (currently in beta).

Deep-copying in JavaScript using structuredClone

Easing Gradients

An issue with linear gradients in CSS is that they often have hard edges where they start and/or end or transition from one color to the other. In 2017, Andreas Larsen wrote about them on CSS-Tricks, eventually leading him to create a nice editor to generate them.

Sparked by that post, a CSSWG Issue to discuss them was created. The issue lingered on for quite some time, but early September 2020 the syntax was agreed upon:

#future {
  linear-gradient(
    to bottom,
    hsla(330, 100%, 45%, 1),
    ease-in-out,
    hsla(210, 100%, 45%, 1)
  );
};

After September the issue went stale again though. The spec still remains unchanged and — lacking a spec — no browsers are working on it. In the meantime we can use Andreas’s tool to manually generate them, or make use of the postcss-easing-gradients PostCSS plugin.

Linear Gradients →

Embrace the Platform

For the third year in a row, CSS-Tricks is doing an End of Year series with posts from several web developers. This time, Chris asked all selected developers the same question: What is the one thing people can do to make their website better?

All submissions are being published on a dedicated 2021 End of Year Thoughts page. Earlier this week my submission “Embrace the Platform” was added to the list.

In my post, I first take a step back into the past, in order to move forward and provide a proper answer to the question. Central themes are The Rule of Least Power, Resilience, and Progressive Enhancement.

By embracing what the web platform gives us — instead of trying to fight against it — we can build better websites.

Keep it simple. Apply the Rule of Least Power. Build with progressive enhancement in mind.

HTML, CSS, and JavaScript — in that order.

Is what I’m saying there all new? Of course it’s not. If you’ve ever seen or heard a talk by Jeremy Keith — a person who has been of great influence throughout my career — this will all sound very familiar. Is what I’m saying there relevant? In times where JavaScript is eating the world: more than ever.

Be sure to give the other submissions a read as well. Some good high-quality stuff in there. Also great to see some recurring themes, knowing that each author wrote their piece independent from each other.

Embrace the Platform →

~

Here’s a PNG that will show a different image in Apple Software

This is wild: while writing his own parallel-decodable PNG implementation, David Buchanan discovered he had a bug in his code. Soon after, he found out Apple has the same bug in their implementation which ships with macOS and iOS.

As a result, it’s possible to craft a PNG in such a way that Apple’s decoder will show a different image. Because Safari delegates the task of decoding images to the OS, all Apple browsers — including MobileSafari — also show the “wrong” image.

If you’re using Apple-flavoured software, you should see “HELLO APPLE”, and on all other software, you should see “HELLO WORLD”.

Here’s a side-by-side comparison:

Chrome (left) vs. Safari (right) showing the Ambiguous PNG

Because other desktop browsers on macOS — such as Google Chrome and Mozilla Firefox — use their own built-in PNG decoder, they are not affected by this. On iOS however, all browsers are affected because all browsers on iOS are essentially nothing more than a differently skinned MobileSafari.

David also created a tool to craft your own PNG.

PNG Parser Differential →
Ambiguous PNG Packer →

How to prevent scrolling the page on iOS Safari 15

Rik Schennink:

If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the touchmove event but on iOS 15 that no longer works. Here we go.

The solution lies in preventing pointermove while the modal is shown.

Using Rik’s code, here’s a demo on CodePen:

See the Pen
How to prevent scrolling the page on iOS Safari 15
by Bramus (@bramus)
on CodePen.

In the near future we should be able to drop Rik’s code, and simply use the overscroll-behavior CSS property (which I’ve covered here before back in 2017) for this. And by “near future” I really do mean soon: there’s been some active movement in the relevant WebKit bug since early December. Perhaps Safari 16 will include it? 🤞

How to prevent scrolling the page on iOS Safari 15 →

Understanding Rendering in the Jamstack (SSG, ISR, DPR, DSG, …)

Can’t follow there with Jamstack’s SSG, ISR, DPR, DSG abbreviations? And what about Edge Rendering? Brian Rinaldi has a nice post explaining them all, and guiding you when to choose which.

  • static rendering – Use this as your default.
  • deferred rendering – Use this when you have to render a lot of pages.
  • server-side rendering – Use this judiciously whenever the content cannot be statically rendered with one of the above.
  • edge rendering – Use this in specific scenarios when you need to modify pages that have already been rendered using one of the above methods.

Understanding Rendering in the Jamstack →

~

The State of CSS 2021

Just like last year and the year before, Sacha Greif (with help from a team of contributers and consultants) ran “The State of CSS Survey”.

This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.

As such, these surveys are focused on anticipating what’s coming over the next few years rather than analyzing what’s popular now, which is why the features or technologies that are currently most widespread are not always included.

Highly interesting to go get an idea of what developers don’t know at / have heard of / already use. You can also use it to verify (or adjust) some of your tech stack assumptions. Also was surprised to see my name listed under the People list there 🙂

The State of CSS 2021 →