Elegant styles for all natives HTML elements without
.classesand dark mode automatically enabled.
It’s no coincidence the site looks similar to the one from The Framework That Must Not Be Named 😅
Tag Archives: link
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)
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).
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.
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.
~
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:
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.
How to prevent scrolling the page on iOS Safari 15
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 thetouchmoveevent 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? 🤞
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 →
~
12 Days of Web
12 Days of Web is Stephanie Eckles‘s “advent” calendar.
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.
Three days in, and she has already covered Intersection Observer, <details> + <summary>, and CSS Custom Properties. Good stuff.
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 🙂