• Firefox 75 for developers
• Site compatibility for Firefox 75
• Firefox 75 end-user release notes

Instant evaluation for console expressions

Better inspection & measuring

Area measuring is now resizable

Use XPath to find DOM elements

Event breakpoints for WebSockets

Network additions

Early-access DevTools features in Developer Edition

Async Stack Traces for Debugger & Console

HTML lazy loading for images

<img src="image.jpg" loading="lazy" alt="..." />

CSS min(), max(), and clamp()

• min() — accepts one or more possible values or calculations to choose from, and ensures that the value used in all situations will be the smallest of the possibilities. In effect, this provides a range of values for responsive designs, along with a maximum allowed value.
• max() — accepts one or more possible values or calculations to choose from, and ensures that the value used in all situations will be the largest of the possibilities. In effect, this provides a range of values for responsive designs, along with a minimum allowed value.
• clamp() — accepts three values or calculations: a minimum, preferred, and maximum. The idea is that the minimum or maximum will be used if the computed value falls below the minimum or above the maximum. The preferred value will be used if the computed value falls between the two. This allows the property value to adapt to changes in the element or page it is assigned to, while remaining between the minimum and maximum values.

CSS min(), max(), and clamp() in action

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem)
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

JavaScript language features

class ClassWithStaticField {
  static staticField = 'static field'
}

console.log(ClassWithStaticField.staticField)
// expected output: "static field"​

const korean = new Intl.Locale('ko', {
  script: 'Kore', region: 'KR', hourCycle: 'h24', calendar: 'gregory'
});

console.log(korean.hourCycle, japanese.hourCycle);
// expected output: "h24" "h12"

Form additions

• The HTMLFormElement interface has a new method, requestSubmit(). Unlike the old (and still available) submit() method, requestSubmit() acts as if a specified submit button has been clicked, rather than just sending the form data to the recipient. Thus the submit event is delivered and the form is checked for validity prior to the data being submitted.
• The submit event is now represented by an object of type SubmitEvent rather than a simple Event. SubmitEvent includes a new submitter property, which returns the Element that was invoked to trigger the form submission. With this event, you can have a single handler for submit events that can discern which of multiple submit buttons or links was used to submit the form.

Web Animations API enhancements

Implicit to/from keyframes

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

Automatically removing filling animations

• animation.commitStyles() — to commit the end styling state of an animation to the element being animated, even after that animation has been removed, run this method. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute.
• animation.onremove — allows you to run an event handler that fires when the animation is removed (i.e. put into an active replace state).
• animation.persist() — when you explicitly want animations to be retained, then invoke persist().
• animation.replaceState — returns the replace state of the animation. This will be active if the animation has been removed, or persisted if persist() has been invoked.

Timelines

Getting active animations

ARIA annotations