Search
Some Cross-Browser DevTools Features You Might Not Know
22.3.2023
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in …
Some Cross-Browser DevTools Features You Might Not Know originally...
WebKit Features in Safari 16.0
13.9.2022
Whew boy, Safari 16 is officially out in the wild and it packs in a bunch of features, some new and exciting (Subgrid! Container Queries! Font Palettes!) and others we’ve been waiting on for better cross-browser support (Motion Path! Overscroll …
WebKit Features in Safari 16.0...
Scroll Shadows? Pure CSS Parallax? Game Back On.
29.7.2022
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint …
Scroll Shadows? Pure...
“Evergreen” Does Not Mean Immediately Available
1.2.2022
I have a coworker who is smart, capable, and technologically-literate. Like me, they work on the web full-time.
When they are sharing their screen in a meeting, I find myself disassociating fixating on the red update button in their copy …
“Evergreen” Does Not Mean Immediately Available...
On Browser-Specific URL Schemes
26.10.2021
We’ve covered URL schemes:
A URL Scheme is like “http://…” or “ftp://…”. Those seem like a very low-level concept that you don’t have much control over, but actually, you do!
I’d call it non-trivial, but developers can register new …
The post On Browser-Specific URL Schemes...
@supports selector()
19.10.2021
I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support …
The post @supports selector() appeared first...
iOS Browser Choice
28.9.2021
Just last week I got one of those really?! 🤨 faces when this fact came up in conversation amongst smart and engaged fellow web developers: there is no browser choice on iOS. It’s all Safari. You can download apps that …
The post iOS Browser Choice appeared first on CSS-Tricks....
CSS Logical Properties and Values
27.7.2021
Now that cross-browser support is at a tipping point, it’s a good time to take a look at logical properties and values. If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re …
The post CSS Logical Properties...
System *Things
29.6.2021
I think we’re all largely aware of named colors in CSS:
color: OldLace;
background: rebeccapurple;
I guess you’d just call those “named colors” in CSS.
Those aren’t the only kind of named colors there are though. Some of them …
The post System *Things appeared...
Debugging iOS Safari
2.6.2021
How do I debug Safari on iOS?
These are my general steps, starting with not even using iOS Safari.
1. Is this just a small-screen problem?
Lemme just use the device mode in Chrome quick.
Note that this does a …
The post Debugging iOS Safari appeared first on CSS-Tricks.
You can support...
Is Vendor Prefixing Dead?
5.5.2021
Let‘s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don’t trigger PTSD for anyone!
It‘s not clear who started prefixing, or when it began exactly. What is clear, is …
The post Is Vendor Prefixing Dead? appeared first...
Eliminating five top compatibility pain points on the web
23.4.2021
Robert Nyman and Philip Jägenstedt:
Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky, 
…
The post Eliminating five...
Overlaying Video With Transparency While Wrangling Cross-Browser Support
8.12.2020
As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a <video> since they...
Firefox 83
19.11.2020
There’s a small line in the changelog that is is big news for CSS:
We’ve added support for CSS Conic Gradients (bug 1632351) and (bug 1175958).
🎉🎉🎉
Conic gradients are circular, just like their radial counterpart, but place color stops...
Backdrop Filter effect with CSS
16.7.2020
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter.
The approach? Easy peasy:
.container {
backdrop-filter: blur(10px);
}
The...
Improving Chromium’s browser compatibility in 2020
7.7.2020
This is exactly what I love to hear from any browser vendor:
When it comes to browser compatibility, there are still too many missing features and edge-case bugs. But it doesn’t have to be this way. Things can and will get better, if browser vendors can understand what is causing the most...
Creating an Accessible Range Slider with CSS
7.5.2020
The accessibility trick is using <input type="range"> and wrestling it into shape with CSS rather than giving up and re-building it with divs or whatever and later forget about accessibility.
The most clever example uses an angled linear-gradient background making the input look like...
Can JavaScript Detect the Browser’s Zoom Level?
21.4.2020
No, not really.
My first guess was that this was intentionally not exposed in browsers because browsers intentionally don’t want us fighting it — or making well-intentioned but bad-outcome decisions based on that info. But I don’t see any evidence of that.
StackOverflow answers paint...
Tips for Writing Animation Code Efficiently
10.4.2020
I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!
I will be using the GreenSock Animation Platform (GSAP). It provides a simple, readable API and solves...
A Business Case for Dropping Internet Explorer
28.10.2019
The distance between Internet Explorer (IE) 11 and every other major browser is an increasingly gaping chasm. Adding support for a technologically obsolete browser adds an inordinate amount of time and frustration to development. Testing becomes onerous. Bug-fixing looms large. Developers have...