📃 October 2013 release notes

New in Safari

The following features are now available in Safari:

• background-position: The background-position CSS property offsets the initial position of background images relative to the background origin.
• calc(): The calc() CSS function computes mathematical expressions such a calc(100%/3 - 1em).
• ch unit: The ch CSS length unit is a font-relative length based on the width of the zero (0) character.
• Composition events: The compositionstart, compositionupdate, and compositionend events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.
• crisp-edges: The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.
• Content Security Policy (CSP): Content Security Policy (CSP) helps to mitigate certain security threats, including cross-site scripting (XSS) and clickjacking attacks. It consists of a set of directives from a website to a browser, which instruct the browser to restrict the things that the site is allowed to do.
• Gradients: The linear-gradient() and radial-gradient() CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.
• HTTP Strict Transport Security: The Strict-Transport-Security HTTP response header informs browsers that the site should only be accessed using HTTPS, and that any future attempts to access it using HTTP should automatically be converted to HTTPS. Also known as HSTS.
• Iterators and the for...of loop: The for...of loop operates on a sequence of values sourced from an iterable object, such as arrays, array-like objects, DOM collections, iterators, generators, and user-defined iterables. All built-in iterators inherit from the Iterator class.
• <main>: The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.
• mask-type: The mask-type CSS property on an SVG <mask> element sets whether the mask is a luminance or alpha mask.
• MediaController: The playback of multiple <video> or <audio> elements can be coordinated by a MediaController instance, for example to synchronize a sign-language interpreter track with the main video track.
• MutationObserver: The MutationObserver API watches for changes to the DOM tree and calls a callback function when DOM changes occur.
• Notifications: The Notification() constructor shows a message to the user, typically using the notification system of the host operating system.
• Notifications from service workers and installed apps: Notifications via service worker registration's showNotification() method, sent from installed web applications (for example, saved to the Home Screen on Safari for iOS), show a message to the user, typically using the notification system of the host operating system.
• <output>: The <output> element represents the result of a calculation, user action, or form entry.
• overflow-wrap: The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
• Page visibility: The document.visibilityState and document.hidden properties tell you whether the page is visible to the user (for example, it's not minimized or in a background tab).
• requestAnimationFrame(): The requestAnimationFrame() method schedules a function that runs before the next repaint. You can use it to animate content with JavaScript.
• :scope (pseudo-class): The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.
• Sourcemap header: The Sourcemap HTTP response header links generated code to a source map, so the browser shows the original source in a debugger. This makes it easier to work with minified or transpiled code.
• Speech synthesis: The SpeechSynthesis API converts text to speech with artificial voices.
• text-emphasis: The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
• Time-relative pseudo-selectors: The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.
• URL: A URL object represents a web address, like https://example.com/, and parts of the address, such as the domain, path, and query string (as URLSearchParams).
• Viewport units: The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
• WEBGL_compressed_texture_pvrtc WebGL extension: The WEBGL_compressed_texture_pvrtc extension for WebGL 1.0 and 2.0 contexts adds PVRTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
• Wheel events: The wheel event fires when the user moves a mouse wheel or similar spatially rotating input device.