Safari Technology Preview 13 1st

Apple has released its first update and second release to its Safari Technology Preview browser. The browser puts an emphasis on releasing stable, technology preview ready builds. With updates coming every two weeks, Apple is showing a commitment to bringing stability to developers on the cutting edge of web technologies.

1. Safari Technology Preview Mojave
2. Safari Technical Preview

The model you purchase is configured to work with a particular cellular network technology. Check with your carrier for compatibility and cellular data plan availability. Not all carriers support Apple SIM and eSIM. Release 71 (Safari 12.1, WebKit 14607.1.15) is the current version of Safari Technology Preview as of December 5, 2018. This version is particularly important because all previous versions of Safari 12 (up through 12.0.2) have a vulnerability currently called 'WebKit-RegEx-Exploit', for which a PoC, Proof of Concept, has been published. Safari translation (beta) supports English, Spanish, Chinese, French, German, Russian, and Brazilian Portuguese. Testing conducted by Apple in August 2020 using MotionMark 1.1 and Speedometer 2.0 performance benchmarks. Safari tested on production iPhone 11 Pro Max with iOS 13.6.1 and prerelease iOS 14, with WPA2 Wi-Fi network connection. The current ‌Safari Technology Preview‌ release is the built on the new Safari 14 update included in macOS Big Sur with support for Safari Web Extensions imported from other browsers, tab.

The browser can be installed alongside current builds of Safari, allowing developers to jump back and forth and compare differences as needed. Today's browser update sees changes in JavaScript, CSS, its Web APIs, Web Inspector, accessibility, rendering, media, networking, and general bug fixes.

Safari Technology Preview can be downloaded from Apple's Developer Site; once installed subsequent updates will be installed through the Mac App Store.

The full release notes are seen below:

Release 2

Browser Differences

• Changed the CFBundleSignature to allow Apple Events, like those sent from AppleScript, to correctly distinguish between Safari and Safari Technology Preview

JavaScript

• Added ES6 support for Symbol.isConcatSpreadable
• Disallowed var assignments in for-in loops according to ES6 specs
• Improved stability for ES6 classes when invoking a method of the parent class before callingsuper() in a constructor
• Allowed undefined or null for Symbol.search and Symbol.match
• Enabled Array.prototype native functions' species constructors to work with proxies
• Implemented the proposal for String.prototype.padStart() and String.prototype.padEnd()
• Implemented ES6 spec for String.prototype.match and RegExp.prototype[@@match]
• Included a workaround for web compatibility on ES6 TypeErrors when accessingRegExp.prototype flag properties
• Corrected quantified unicode regular expressions
• Ensured greedy unicode regular expressions properly backtrack past non-BMP characters

CSS

• Implemented the allow-end value of the hanging-punctuation CSS property
• Improved web compatibility by resetting CSS spacing rules on elements
• Added the new color-gamut CSS media query
• Updated screen queries to check the capabilities of the current screen instead of the deepest available screen

Web APIs

• Restricted WebSockets header parsing according to RFC6455 and RFC7230
• Improved performance of certain draw calls in WebGL with a non-power-of-two texture optimization
• Disabled the Fetch API until the implementation is ready to be enabled by default
• Enhanced Shadow DOM support to compute styles for the style attribute of elements
• Softened pushState and replaceState frequency restrictions

Web Inspector

• Timelines tab performance and bug fixes
• Disabled debugger statements while profiling a page to ensure maximum performance accuracy
• Added the ability to configure timeline instruments to use for recordings
• Added a paint count indicator in the top left corner of non-opaque layers
• Added font-variant-numeric to CSS autocompletions
• Added the console.takeHeapSnapshot method for capturing heap snapshots
• Changed details sidebar shortcuts to Command-Option-0 and Command-Shift-0
• Double-quotes and backslashes in strings are now displayed correctly in the console
• Improved the consistency of CSP directive violation messages reported in the console

Accessibility

• Corrected new lines in content editable elements to notify accessibility
• Updated the handling of SVG elements with a presentational role to be the same as other host language elements
• Limited the numbered list announcement for a list item number to the first line of text in the list item
• Changed the accessibility role descriptions for JavaScript alerts to 'web dialog' and 'web alert dialog' to make them more understandable to screen reader users

Rendering

• Updated backdrop filter to repaint when changed in JavaScript
• Corrected drawing SVG stroke patterns for objects with empty bounding box elements

Media

• Improved stability when an audio source is changed while being processed
• Fixed audio track listings

Networking

• Improved the reliability of speculative disk cache validation requests with the HTTP Refererheader

Bug Fixes

• Fixed autoscrolling in a drag selection when a window is against the screen edge, including while in full screen mode

FTC: We use income earning auto affiliate links.More.

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

Summary: Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in responsive web design and for preventing cumulative layout shift. Now, there's a more straightforward way to do this with the new aspect-ratio property launching in Chromium 88, Firefox 87, and Safari Technology Preview 118.

Aspect ratio #

Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio.

With the advent of responsive design, maintaining aspect ratio has been increasingly important for web developers, especially as image dimensions differ and element sizes shift based on available space.

Some examples of where maintaining aspect ratio become important are:

• Creating responsive iframes, where they are 100% of a parent's width, and the height should remain a specific viewport ratio
• Creating intrinsic placeholder containers for images, videos, and embeds to prevent re-layout when the items load and take up space
• Creating uniform, responsive space for interactive data visualizations or SVG animations
• Creating uniform, responsive space for multi-element components such as cards or calendar dates
• Creating uniform, responsive space for multiple images of varying dimension (can be used alongside object-fit)

Object-fit #

Defining an aspect ratio helps us with sizing media in a responsive context. Another tool in this bucket is the object-fit property, which enables users to describe how an object (such an as image) within a block should fill that block:

The initial and fill values re-adjust the image to fill the space. In our example, this causes the image to be squished and blurry, as it re-adjusts pixels. Not ideal. object-fit: cover uses the image's smallest dimension to fill the space and crops the image to fit into it based on this dimension. It 'zooms in' at its lowest boundary. object-fit: contain ensures that the entire image is always visible, and so the opposite of cover, where it takes the size of the largest boundary (in our example above this is width), and resizes the image to maintain its intrinsic aspect ratio while fitting into the space. The object-fit: none case shows the image cropped in its center (default object position) at its natural size.

object-fit: cover tends to work in most situations to ensure a nice uniform interface when dealing with images of varying dimensions, however, you lose information this way (the image is cropped at its longest edges).

If these details are important (for example, when working with a flat lay of beauty products), cropping important content is not acceptable. So the ideal scenario would be responsive images of varying sizes that fit the UI space without cropping.

The old hack: maintaining aspect ratio with padding-top#

In order to make these more responsive, we can use aspect ratio. This allows for us to set a specific ratio size and base the rest of the media on an individual axis (height or width).

A currently well-accepted cross-browser solution for maintaining aspect ratio based on an image's width is known as the 'Padding-Top Hack'. This solution requires a parent container and an absolutely placed child container. One would then calculate the aspect ratio as a percentage to set as the padding-top. For example:

• 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
• 4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
• 3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
• 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

Now that we have identified the aspect ratio value, we can apply that to our parent container. Consider the following example:

We could then write the following CSS:

Maintaining aspect ratio with aspect-ratio#

Unfortunately, calculating these padding-top values is not very intuitive, and requires some additional overhead and positioning. With the new intrinsic aspect-ratioCSS property, the language for maintaining aspect ratios is much more clear.

With the same markup, we can replace: padding-top: 56.25% with aspect-ratio: 16 / 9, setting aspect-ratio to a specified ratio of width / height.

Using aspect-ratio instead of padding-top is much more clear, and does not overhaul the padding property to do something outside of its usual scope.

This new property also adds the ability to set aspect ratio to auto, where 'replaced elements with an intrinsic aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio.' If both auto and a are specified together, the preferred aspect ratio is the specified ratio of width divided by height unless it is a replaced element with an intrinsic aspect ratio, in which case that aspect ratio is used instead.

Example: consistency in a grid #

This works really well with CSS layout mechanisms like CSS Grid and Flexbox as well. Consider a list with children that you want to maintain a 1:1 aspect ratio, such as a grid of sponsor icons:

Example: preventing layout shift #

Another great feature of aspect-ratio is that it can create placeholder space to prevent Cumulative Layout Shift and deliver better Web Vitals. In this first example, loading an asset from an API such as Unsplash creates a layout shift when the media is finished loading.

Using aspect-ratio, on the other hand, creates a placeholder to prevent this layout shift:

Bonus tip: image attributes for aspect ratio #

Safari Technology Preview Mojave

Another way to set an image's aspect ratio is through image attributes. If you know the dimensions of the image ahead of time, it is a best practice to set these dimensions as its width and height.

For our example above, knowing the dimensions are 800px by 600px, the image markup would look like: . If the image sent has the same aspect ratio, but not necessarily those exact pixel values, we could still use image attribute values to set the ratio, combined with a style of width: 100% so that the image takes up the proper space. All together that would look like:

In the end, the effect is the same as setting the aspect-ratio on the image via CSS, and cumulative layout shift is avoided (see demo on Codepen).

Conclusion #

With the new aspect-ratio CSS property, launching across multiple modern browsers, maintaining proper aspect ratios in your media and layout containers gets a little bit more straightforward.

Safari Technical Preview

Photos by Amy Shamblen and Lionel Gustave via Unsplash.