Web platform features explorer

📃 July 2012 release notes

New in Chrome

The following features are now available in Chrome:

  • background-clip: The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.
  • background-origin: The background-origin CSS property sets the background starting position relative to the border and padding of an element.
  • background-size: The background-size CSS property scales or stretches a background based on the size of the element (with the contain and cover keywords), a length, or percentage.

New in Firefox

The following features are now available in Firefox:

  • MutationObserver: The MutationObserver API watches for changes to the DOM tree and calls a callback function when DOM changes occur.

New in Safari

The following features are now available in Safari:

  • accesskey: The accesskey global HTML attribute gives a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character.
  • <bdi>: The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
  • cubic-bezier() easing: The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.
  • <details>: The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.
  • <dfn>: The <dfn> element marks a term to be defined, styling text as italic by default.
  • dirname: The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission.
  • hashchange: The hashchange event fires when the URL fragment identifier (the part of the URL starting with #) of the current page has changed.
  • srcdoc: The srcdoc attribute for the <iframe> HTML element sets a string of HTML to embed in the document. The value of srcdoc overrides loading a document from the src attribute.
  • <meter>: The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
  • Page selectors: The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination. They're often used with the page CSS property, to choose a print layout defined by the @page rule.
  • ping: The ping attribute for <a> elements sets a URL to send a POST request to when the <a> is clicked. This is typically used for outbound link reporting.
  • <progress>: The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
  • SMIL SVG animations: The <animate>, <animateMotion>, and <animateTransform> SVG elements declaratively animate SVG elements. Also known as SMIL.
  • SVG filters: The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.
  • Text tracks: The <track> element is used as a child of the media elements that lets you specify a timed text track to be displayed in parallel with the media element.
  • translate: The translate HTML attribute marks whether an element's text should be translated.
  • WebVTT: WebVTT is a captions and subtitles format. WebVTT files are loaded using the <track> element, and the VTTCue API can be used to create or update cues dynamically.
  • WebVTT cue settings: The VTTCue API updates various aspects of cues dynamically, such as alignment, size and position.