What's new in browser support?

Ben Halpern on December 02, 2019

What new features have shipped with more support that we can start paying a bit more attention to in web development?

Or what's possibly on the horizon?

markdown guide

It’s not properly new but I've recently found out about:

@media (pointer: coarse) {
  // touch device (finger)

@media (pointer: fine) {
  // touch device (stylus)

I can't believe I didn't know about this. There is definitely some DEV functionality written in JavaScript I'd wished I could have done via media query.

Time to look further into this and make some changes!


It conforts me to know that some well established DEvs were unaware about that

I personally grew up when IE5 was around. Things were so bad for the frontend that even today I just assume us poor frontend devs will never get anything nice.


I can't believe I didn't know about this

Same here. Mind blown, right??
Especially when you find out for how long this has been around...


🤯Mind blown. I'm so going to be using this in the future


Native FileSystem API

The Native File System API enables developers to build powerful web apps that interact with files on the user's local device, like IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders on the user's device.


The new standard for the web, enabling faster, more reliable, and more secure connections to web endpoints like websites and APIs.


WebXR is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR). The WebXR Device API implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.


For those who wonder what the support is for these:

Native FileSystem API ➡️ caniuse.com/#feat=native-filesyste...
HTTP/3 ➡️ caniuse.com/#feat=http3
WebXR ➡️ caniuse.com/#feat=webxr


The fact they rebuilt HTTP/2 on top of UDP is so interesting!


New CSS underline styling! 🙌

text-decoration-thickness text-decoration-offset text-decoration-color et al.

Let's say bye-bye to long and painful hacks to get underlines that look great (he said after spending an hour writing such hacks, then finding out about these new properties).

Kudos to Mozilla for this


THIS is a huge deal to me! Thanks for sharing 😃


The Intersection Observer API is not really new, but it’s not talked about a lot still. Browser support is pretty decent for it now.

“ The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount.“


I just used Intersection Observer to implement some scroll effects. Pretty neat and useful


Firefox Containers:


While this is not exactly a new feature (or rather, add-on), it's something that I haven't seen yet in any Chrome-based browser - namely Chromium, Opera or Vivaldi.

I use it mostly due to privacy concerns, but it also gives me more flexibility to use different accounts on the same site. Either way, it's possibly one of the coolest new features I have seen for browsers in a long time.


Agreed! I love containers, really easy way to use multiple accounts or separate identities. The builtin Facebook container stopping all Facebook trackers is awesome 😂

Wish they would add it to Firefox mobile as well


I'm unsure if this counts as new, but I'm still stoked: There's native lazy loading: css-tricks.com/native-lazy-loading/
We can finally hide our lazy loading scripts behind a feature query.

Also, mozilla implenented a native way to control underline strength: developer.mozilla.org/en-US/docs/W...


Not exactly JS but in the CSS realm

  • Shadow Parts are a great addition for Web Components style customization are probably coming out soon since Chrome already shipped them and both Firefox and Safari are in progress
  • The Properties and Values API (introduced in a neat way on this video) is a great improvement for CSS properties as it will allow among other things type safety and creating transitions with them, which could make properties which normally cannot be set as transitions properties actually transition with the CSS properties

Not new but this is surprising for me
Faster apps with JSON.parse

code of conduct - report abuse