Ben Halpern

Posted on Dec 2, 2019

What's new in browser support?

#discuss #webdev #browsers #javascript

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?

Top comments (24)

Manuele J Sarfatti • Dec 2 '19

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

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

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

Ben Halpern • Dec 2 '19

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!

xelaflash • Dec 3 '19

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

Manuele J Sarfatti • Dec 3 '19

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.

Manuele J Sarfatti • Dec 2 '19 • Edited

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...

Josh Britz • Dec 3 '19

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

Yaser Adel Mehraban • Dec 2 '19 • Edited

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.

HTTP/3

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

WebXR

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.

Ben Halpern • Dec 2 '19

TLDR on these three things?

Yaser Adel Mehraban • Dec 2 '19

Sorry was on a bus, updated the original comment

Ben Halpern • Dec 2 '19

Marvelous

rhymes • Dec 3 '19

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

Szikszai Gusztáv • Dec 4 '19

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

Rémi Mercier • Dec 3 '19 • Edited

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

Dylan Davenport • Dec 3 '19 • Edited

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

NaftoliOst • Jul 7 '20

Very handy properties.
Looks like it's not supported by chrome though. Yet.

Nick Taylor • Dec 3 '19 • Edited

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.“

Zack Dunn • Dec 10 '19

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

Fernao Vellozo • Dec 3 '19 • Edited

Firefox Containers:

addons.mozilla.org/en-US/firefox/a...
addons.mozilla.org/en-US/firefox/a...

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.

rhymes • Dec 3 '19 • Edited

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

Daniel Schulz • Dec 3 '19

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...

Alan Dávalos • Dec 3 '19 • Edited

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