Baseline features you can use today
Published: 2023-08-20 17:12:38

---
title: Baseline features you can use today
published: true
date: 2023-05-10 00:00:00 UTC
tags: 
canonical_url: https://web.dev/baseline-features/
---

<lite-youtube videoid="x9rh0Du4Czg"> </lite-youtube>

The web is always evolving and browsers update constantly to give developers new tools to innovate on the platform. Things that previously required helper libraries become part of the web platform and supported on all browsers, along with shorter or easier ways to code design elements.

While this constant evolution and adaptation is helpful, it can also bring confusion. It can be difficult to navigate all these updates. As developers, we have questions like, "When will all browser engines support this new feature?" "When can I actually start using those features in my production code?" "For how long should we support older browsers?"

The true answer is "it depends". What is needed and what is usable really depends on your user base, tech stack, your team structure, and supported devices. But, one thing we all agree, is that the current landscape of the web can make it difficult to make those decisions.

The Chrome team is collaborating with other browser engines and the web community to bring more clarity. This includes our work on projects like [Interop 2023](https://wpt.fyi/interop-2023) which helps to improve interoperability of a set of key features. But what about features landed in the past few years? Are experimental features we learned about two years ago ready to use?

In this post, I want to highlight some features that are now available to all major browser engines for the past two major versions. This is the cut-off point where we feel that the majority of developers will feel a feature is safe to use, and is the feature set we're calling Baseline. For more, please see the announcement [of Baseline here](https://web.dev/baseline).

## The dialog element [#](https://web.dev/baseline-features/#the-dialog-element)

The `<dialog>` element is a new HTML element to create dialog prompts such as popups and modals.

Browser support
- Chrome 37, Supported 37 
- Firefox 98, Supported 98 
- Edge 79, Supported 79 
- Safari 15.4, Supported 15.4 
[Source](https://developer.mozilla.org/docs/Web/HTML/Element/dialog#browser_compatibility)

To use it, define the modal element, then open the dialog by calling the `showModal()` method on the dialog element.

```
<dialog id="d"> <form method="dialog"> <p>Hi, I'm a dialog.</p> <button>ok</button> </form></dialog><button onclick="d.showModal()"> Open Dialog</button>
```

As a native HTML element, features like focus management, tab tracking, and keeping the stacking context are built in. For more, read [Building a dialog component](https://web.dev/building-a-dialog-component/).

## Individual CSS transform properties [#](https://web.dev/baseline-features/#individual-css-transform-properties)

Using CSS transforms is a performant way to add a movement to your site.  
You might be familiar with writing CSS transforms with three properties in one line.  
With individual transform properties you can now specify transform properties individually. This comes in handy when you are writing complex keyframe animations.

```
.target { translate: 50% 0; rotate: 30deg; scale: 1.2;}
```

Browser support
- Chrome 104, Supported 104 
- Firefox 72, Supported 72 
- Edge 104, Supported 104 
- Safari 14.1, Supported 14.1 
[Source](https://developer.mozilla.org/docs/Web/CSS/scale#browser_compatibility)

For an in-depth explanation of this change, read [Finer grained control over CSS transforms with individual transform properties](https://web.dev/css-individual-transform-properties/).

## New viewport units [#](https://web.dev/baseline-features/#new-viewport-units)

On mobile, viewport size is influenced by the presence or absence of dynamic toolbars.  
Sometimes you have a URL bar and navigation toolbar visible, but sometimes those toolbars are completely retracted.  
The actual size of viewport will be different depending on whether the toolbars are visible or not.  
New viewport units like `svh` and `lvh` give web developers finer control when designing for the mobile. You can learn more in the article [The large, small, and dynamic viewport units](https://web.dev/viewport-units/).

Browser support
- Chrome 108, Supported 108 
- Firefox 101, Supported 101 
- Edge 108, Supported 108 
- Safari 15.4, Supported 15.4 

## Deep copy in JavaScript [#](https://web.dev/baseline-features/#deep-copy-in-javascript)

In the past, to create a deep copy of an object with no reference to the original object, a popular hack was `JSON.stringify` combined with `JSON.parse`. This was such a common hack that V8 (Chrome's javascript engine) aggressively improved the performance of this trick. But, you don't need this hack anymore with `structuredClone`.

```
const original = {id: 0, prop: {name: "Tom"}}/* Old hack */ const deepCopy = JSON.parse(JSON.stringify(original));/* New way */const deepCopy = structuredClone(original);
```

Browser support
- Chrome 98, Supported 98 
- Firefox 94, Supported 94 
- Edge 98, Supported 98 
- Safari 15.4, Supported 15.4 
[Source](https://developer.mozilla.org/docs/Web/API/structuredClone#browser_compatibility)

Please refer to [Deep-copying in JavaScript using structuredClone](https://web.dev/structured-clone/) for more details.

## The `:focus-visible` pseudo-class [#](https://web.dev/baseline-features/#the-focus-visible-pseudo-class)

As web developers, we all are familiar with that "focus ring" that shows up when you are navigating a page with a keyboard or clicking on input elements. It is a necessary feature for accessibility but sometimes it gets in the way of the visual design for different users. The `:focus-visible` CSS pseudo-class checks if the browser believes that the focus should be visible. You can now specify styles for only when focus should be visible.

```
/* focus with tab key */:focus-visible { outline: 5px solid pink;}/* mouse click */:focus:not(:focus-visible) { outline: none;}
```

Browser support
- Chrome 86, Supported 86 
- Firefox 85, Supported 85 
- Edge 86, Supported 86 
- Safari 15.4, Supported 15.4 
[Source](https://developer.mozilla.org/docs/Web/CSS/:focus-visible#browser_compatibility)

Check out the [Focus section on Learn CSS](https://web.dev/learn/css/focus/) for more information.

## The TransformStream interface [#](https://web.dev/baseline-features/#the-transformstream-interface)

The TransformStream interface of the Streams API makes it possible to pipe streams into one another.

For example you can stream data from one place, then compress the data stream to another location as the data gets passed. The article [Streaming requests with the fetch API](https://developer.chrome.com/articles/fetch-streaming-requests/) walks you through this sample use case.

Browser support
- Chrome 67, Supported 67 
- Firefox 102, Supported 102 
- Edge 79, Supported 79 
- Safari 14.1, Supported 14.1 
[Source](https://developer.mozilla.org/docs/Web/API/TransformStream#browser_compatibility)

## Wrap up [#](https://web.dev/baseline-features/#wrap-up)

There are many more features that recently became interoperable and stable to use on the web platform. Going forward we will work with the [WebDX Community Group](https://www.w3.org/community/webdx/) to bring more clarity to these Baseline feature sets. Please check out [web.dev/baseline](https://web.dev/baseline/) for ongoing details.

If you want to stay up-to-date, our team is publishing articles [when a feature becomes interoperable](https://web.dev/tags/newly-interoperable/), and publish [monthly updates on what's going on the web platform](https://web.dev/tags/new-to-the-web/) from experimental features to newly interoperable.

We are always curious if what we are doing helps you, or if you need different kinds of support, so please reach out to us at [WebDX Community Group](https://www.w3.org/community/webdx/).