Blisk Changelog

What's new in Blisk 23.0.185.91

Apr 25, 2024

Blisk release 23.0.185.91
Mobile test on Google Pixel 7, Pixel 7 Pro, Pixel 7A, Pixel 8, and Pixel 8 Pro with the latest technologies support. End of support for macOS 10.13 and 10.14
New devices in Blisk:
Google Pixel 7, Pixel 7 Pro, Pixel 7A, Pixel 8, and Pixel 8 Pro are ready to use in the Blisk app, where you can run a mobile test, responsive test, or cross-device test. These devices are preinstalled in the Blisk app, so you don't need to download or install anything other than the Blisk app. The latest Androids run directly on your PC, Mac, or Linux, and the code runs locally, avoiding potential data loss or security issues.
Requirements: this feature is available in Blisk v.23.0.185.91 and later. You may need to update the Blisk application to use this feature. How to update Blisk...
Starting with v.23.0.185.91, Blisk opens new possibilities for running different kinds of mobile tests on Google Pixel 7, Pixel 7 Pro, Pixel 7A, Pixel 8, and Pixel 8 Pro: responsive test, multi-device test, touch events test, performance test, landscape orientation test, dark mode test, test for page errors, slow Internet connection test, etc.
For more information, please visit: https://blisk.io/blog/23-0-185-91

New in Blisk 22.0.217.104 (Dec 2, 2023)

New in Blisk 21.0.78.116 (Aug 14, 2023)

Blisk 21.0: Auto-save and restore Splitter location, New Universal DevTools mode, Dock DevTools to bottom 21.0.78.116
We are excited to release the new features: Auto-save and restore Splitter location, New Universal DevTools mode, Dock DevTools to bottom.
Auto-save and restore Splitter location:
Hurray! Blisk 21.0 finally addressed one of the most requested features - the automatic saving of Splitter location! This feature eliminates the need to move Splitter for every device set and will help you become even more productive. This significant improvement in user experience works in the following way:
When you create or launch a device set, Blisk watches for the device type and device order in it. If you previously specified a custom Splitter location for such device schema - Blisk will apply the previously saved location automatically.
If you move Splitter to another location - the new location will be saved automatically.
Whenever you need to reset Splitter - use Menu (Developer Mode) ➜ View ➜ Align width of device panels.
As a result, Blisk will restore the splitters and device sizes for every session, users will work with the same configuration of device set even after application relaunch. Users will not need to configure the device set in every session.
New Universal DevTools mode:
The current release offers another handy feature - Universal DevTools. Previously Blisk offered DevTools in Multi-DevTools mode. DevTools appeared to the right of each device, making the user experience not convenient, reducing the space for other devices, and making the workflow complicated for the users.
Since version 21.0, Blisk offers another approach to working with DevTools by default. Universal DevTools is a single DevTools container docked to the right or to the bottom of Blisk window. Universal DevTools provide the ability to manipulate DevTools for a single device. The user is able to quickly switch the DevTools for another device by launching DevTools for that device. In this case, the new DevTools replace the old DevTools.
Dock DevTools to bottom:
Another important improvement with Universal DevTools is that the users are now able to dock DevTools to the bottom of Blisk window.
If needed, you can enable the old Multi-DevTools mode from Menu (Developer mode) ➜ Settings ➜ DevTools ➜ Select the DevTools type. Docking DevTools to the bottom is available only in Universal DevTools mode, this mode is not supported in Multi-DevTools mode.

New in Blisk 20.1.42.63 (Jun 8, 2023)

New in Blisk 20.0.176.140 (May 27, 2023)

New Android mobiles and desktops (including iMac 4k and 5k), and platform update (latest technologies and security improvements)
New devices in Blisk:
Samsung Galaxy S22, Samsung Galaxy S22 Plus, Samsung Galaxy S22 Ultra, Desktop 4k 1x scale, iMac Pro Retina 5K 27″, iMac Retina 4․5K 24″, iMac Retina 4K 21․5″, iMac Retina 2016 27″ are ready to use in the Blisk app, where you can run a mobile test, a responsive test, or a cross-device test. These devices are preinstalled in the Blisk app, so you don't need to download or install anything other than the Blisk app. The new devices run directly on your PC, Mac, or Linux, and the code runs locally, avoiding potential data loss or security issues.
Requirements: this feature is available in Blisk v.20.0.176.140 and later. You may need to update the Blisk application to use this feature. View Documentation.
Starting with v.20.0.176.140, Blisk opens new possibilities for running different kinds of mobile tests on Samsung Galaxy S22, Samsung Galaxy S22 Plus, Samsung Galaxy S22 Ultra, Desktop 4k 1x scale, iMac Pro Retina 5K 27″, iMac Retina 4․5K 24″, iMac Retina 4K 21․5″, iMac Retina 2016 27″: responsive test, multi-device test, touch events test, performance test, landscape orientation test, dark mode test, test for page errors, slow Internet connection test, etc.
Galaxy S22-series and new desktops: Screen size, Viewport, Pixel Ratio, CSS Media Query, and specification
The specifications, viewport size, screen size, pixels per inch (PPI), and CSS Pixel Ratio for new devices are available on the Device portal, where you can find the device metrics for all devices including the latest Galaxy S22-series and desktops:
Samsung Galaxy S22 viewport, resolution, and specs
Samsung Galaxy S22 Plus viewport, resolution, and specs
Samsung Galaxy S22 Ultra viewport, resolution, and specs
Desktop 4K 1X Scale viewport, resolution, and specs
iMac Pro Retina 5K 27″ viewport, resolution, and specs
iMac Retina 4․5K 24″ viewport, resolution, and specs
iMac Retina 4K 21․5″ viewport, resolution, and specs
Fetch Priority:
Fetch Priority gives you a way to hint to the browser which order resources should be downloaded in, by using the fetchpriority attribute. This accepts values of "high", "low", and "auto".
"high": You consider the resource a high priority and want the browser to prioritize it as long as the browser's heuristics don't prevent that from happening.
"low": You consider the resource a low priority and want the browser to deprioritize it if its heuristics permit.
"auto": This is the default value that lets the browser decide the appropriate priority.
In the example below, a low-priority image is indicated with fetchpriority="low".
CSS Color Adjust: 'only' keyword for color-scheme:
The only keyword has been re-added to the specification color-scheme as a way of per-element opt-out of color-scheme override like forced darkening.
div { color-scheme: light } will force the div element into color-scheme dark and apply forced darkening.
div { color-scheme: only light } will keep the color-scheme for the element light and opt-out of forced darkening.
This feature can be used to do per-element opt-out of color-scheme overrides like forced darkening.
HDR CSS Media Queries: dynamic-range:
This feature adds a media query to CSS which allows a page to detect the current display device’s support for HDR.
This feature adds the query: dynamic-range which may be one of standard or high. Blisk will resolve this query according to the capabilities of the display device the browser window is currently positioned on, allowing pages to toggle CSS rules accordingly or respond in Javascript via window.matchMedia().
As HDR-supported displays become more common, web developers need ways to enable HDR content on their web pages without compromising the experience for users of non-HDR displays, or mixed-HDR multi-display setups. CSS already provides the 'media query' concept for toggling rules based on display device characteristics, and this feature extends that set of queries to enable detecting HDR support on the current display device.
New window.open() popup vs. window behavior:
This change aligns Blisk with the spec for window.open(), by:
1. Adding a "popup" windowFeature to control popup vs. tab/window. 2. Ensuring all BarProp properties return !is_popup.
The window.open() API is currently confusing to use, in terms of trying to get it to open a popup vs. a tab/window. This change simplifies the usage by adding a single boolean argument called popup that works as you'd expect: popup=1 gets you a popup, and popup=0 gets a tab/window:
const popup = window.open('_blank','','popup=1');
const tab = window.open('_blank','','popup=0');
This is an interop-driven change, to align Blisk with the newly-landed spec for window.open. It does not change existing behavior around whether a popup or tab/window is opened, to avoid issues.
Autofill in ShadowDOM:
This feature allows autofill to look into ShadowDOM when collecting form controls within a form element.
With the adoption of web components, it is common to wrap form controls like input elements in ShadowDOM. When autofill traverses the children of form elements to collect form controls, it currently skips ShadowDOM, and makes these form controls never get autofilled. This feature makes autofill also traverse into ShadowDOM when collecting form controls.
CSS cascade layers:
CSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.
Cascade layers allow authors to create layers to represent element defaults, third-party libraries, themes, components, overrides, and etc.—and are able to re-order the cascade of layers in an explicit way. Without cascade layers, currently, authors need to tweak, e.g., selector specificity, !import or source ordering to achieve a certain cascade ordering, which is cumbersome and error-prone.
Support of text-emphasis properties:
This feature introduces 'text-emphasis, text-emphasis-color, text-emphasis-position, and text-emphasis-style CSS properties. They are unprefixed versions of -webkit-text-emphasis, -webkit-text-emphasis-color, -webkit-text-emphasis-position, and -webkit-text-emphasis-style.
Allow cookie domain attributes to be the empty string:
This feature updates the parsing of cookie strings to allow a cookie's domain attribute to be set to the empty string. This change will also correct the failing web-platform tests related to an empty string domain. Additionally, it brings Blisk in alignment with the draft RFC6265bis specification and will improve interoperability with Chrome, Safari, and Firefox by matching their treatment of an empty cookie domain attribute.
Navigation API:
The window.navigation API (formerly known as the app history API) provides the ability to intercept and initiate navigations, as well as introspect an application's history entries. This provides a more useful alternative to window.history and window.location, specifically aimed at the needs of single-page web applications.
The existing window.history API is hard to deal with in practice, especially for single-page applications. In the best case, developers can work around this with various hacks. In the worst case, it causes user-facing pain in the form of lost state and broken back buttons, or the inability to achieve the desired navigation flow for a web app.
CSS object-view-box:
Object-view-box allows the author to specify a subset within an image that should draw within the content box of the target replaced element. This enables an author to create an image with a custom glow or shadow applied, with proper ink-overflow behavior like a CSS shadow would have.
Object-view-box and object-overflow allows the author to specify a subset within an image that should draw within the content box of the target replaced element. This enables an author to create an image with a custom glow or shadow applied, with proper ink-overflow behavior like a CSS shadow would have.
Individual Properties for CSS Transforms:
This adds three new CSS properties: translate, rotate, and scale. These properties are known as the individual transform properties (and were previously known as the independent transform properties). This exposes a simple way for web developers to access transforms in an intuitive way, without having to think about how functions in the transform property interact with each other. The properties can be animated individually.
Support visual-box on overflow-clip-margin:
Overflow-clip-margin specifies how far an element's content is allowed to paint before being clipped. This feature allows using visual-box values to configure the reference box that defines the overflow clip edge the content is clipped to.
CSS :has() pseudo-class:
The :has() pseudo-class is a selector that specifies an element which has at least one element that matches the relative selector passed as an argument.
CSS :modal Pseudo-Class:
CSS :modal is a pseudo-class selector to style dialog element. The :modal pseudo-class represents an element that is in a state that excludes all interaction with elements outside it until it has been dismissed.
CSS Container Queries:
Container Queries allow authors to style elements according to the size of a container element. It's similar to a @media query, except it evaluates against the size of a container instead of the size of the viewport.
CSS 'lh' Length Unit:
The lh unit adds support for expressing CSS lengths relative to the line-height. That is typically useful for specifying the height of an element to fit a whole number of lines. Example: textarea { height: 5lh }
CSS Root Font Units: 'rex', 'rch', 'ric', 'rlh'
Adds root font units. Previously, only 'rem' has been supported in Blisk. This feature adds root element variants of ex, ch, ic, lh.
DevTools: Properties pane filter:
If you want to focus on a specific property in the Properties pane, you can now type that property name or value in the new Filter textbox.
By default, properties whose value is null or undefined are not shown. Enable the Show all checkbox to view all properties.
DevTools: Show rulers on hover command:
You can now open the Command Menu (Ctrl+Shift+P or Cmd+Shift+P) and run the Show rulers on hover command. The page rulers make it easier to measure the width and height of an element.
Previously, you can only enable the page rulers via Settings > Show rulers checkbox.
DevTools: New console group filter:
When filtering the console message, a console message is now shown if its message content matches the filter or the title of the group (or the ancestor group) matches the filter. Previously, the console group title would show despite the filter.
In addition, if a console message is shown, the group (or the ancestor group) it belongs to is now shown as well.
DevTools: View and edit @supports at rules in the Styles pane:
You can now view and edit the CSS @supports at-rules in the Styles pane. These changes make it easier to experiment with the at-rules in real-time. Open this demo page, inspect the element, and view the @supports at-rules in the Styles pane. Click on the rule’s declaration to edit it.
DevTools: Preview class/function properties on hover:
You can now hover over a class or function in the Sources panel during debugging to preview its properties. Previously, it only showed the function name and a link to its location in the source code.
DevTools: Partially presented frames in the Performance panel:
Performance recording now displays a new frame category "Partially presented frames" in the Frames timeline. Previously, the Frames timeline visualizes any frames with delayed main-thread work as "dropped frames". However, there are cases where some frames may still produce visual updates (e.g. scrolling) driven by the compositor thread. This leads to user confusion because the screenshots of these “Dropped frames” are still reflecting visual updates.
The new "Partially presented frames" aims to indicate more intuitively that although some content is not presented timely in the frame, the issue is not so severe as to block visual updates altogether.
DevTools: Support for the hwb() color function:
You can now view and edit HWB color format in Blisk DevTools. In the Styles pane, hold the Shift key and click on any color preview to change the color format. The HWB color format is added. Alternatively, you can change the color format to HWB in the color picker.
The new "Partially presented frames" aims to indicate more intuitively that although some content is not presented timely in the frame, the issue is not so severe as to block visual updates altogether.
DevTools: Improved private properties:
DevTools now properly evaluates and displays private accessors. Previously, you couldn't expand classes with private accessors in the Console and the Sources panel.
DevTools: Handle script execution errors in the Console:
Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.
DevTools: Picking a color outside of the browser:
DevTools now supports picking a color outside of the browser. Previously, you could only pick a color within the browser. In the Styles pane, click on any color preview to open a color picker. Use the eyedropper to pick a color from anywhere.
DevTools: Reveal assigned slot of an element:
Slotted elements in the Elements panel have a new slot badge. When debugging layout issues, use this feature to identify the element which affects the node's layout quicker. Learn how to use and elements to create a flexible template that can then be used to populate the shadow DOM of a web component at MDN web docs.
DevTools: Protocol handlers in the Manifest pane:
You can now use DevTools to test the URL protocol handler registration for Progressive Web Apps (PWA). The URL protocol handler registration lets installed PWAs handle links that use a specific protocol (e.g. magnet, web+example) for a more integrated experience.
Navigate to the Protocol Handlers section via the Application > Manifest pane. You can view and test all the available protocols here.

New in Blisk 19.1.122.126 (Oct 13, 2022)

Blisk 19.1: Mobile test on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max
New devices in Blisk:
iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max are ready to use in the Blisk app, where you can run a mobile test, a responsive test, or a cross-device test. These devices are preinstalled in the Blisk app, so you don't need to download or install anything other than the Blisk app. The latest iPhones run directly on your PC, Mac, or Linux, and the code runs locally, avoiding potential data loss or security issues.
Requirements: this feature is available in Blisk v.19.1.122.126 and later. You may need to update the Blisk application to use this feature. View Documentation.
Starting with v.19.1.122.126, Blisk opens new possibilities for running different kinds of mobile tests on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max: responsive test, multi-device test, touch events test, performance test, landscape orientation test, dark mode test, test for page errors, slow Internet connection test, etc.
Responsive test:
Test whether your website supports responsive design and looks great on the latest Apple mobile devices. Such a mobile test will help to find issues with the responsive layout and issues with user experience on mobile devices. So now you can test responsive design on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max and compare the layout with laptops, desktops, and iPads.
Multi-device test:
Test your new iPhone or use it with other devices such as other iOS and Android mobile phones, iPadOS tablets, Windows and macOS laptops, and desktops. When you use mobile and desktop at the same time, you are running mobile and desktop tests simultaneously. It becomes much easier to compare devices side-by-side. Starting with version 19.1, you can test on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max simultaneously with other devices.
Touch events test:
Check if your website supports touch events and gestures on the iPhone 14-series. Touch is a key element in any mobile test because all interactions on mobile are done using touch. iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max in Blisk support touch events and gestures natively therefore you can test them easily without the need to have a mobile device. In addition, you can use Developer Tools on each device separately to track touchstart, touchend, touchcancel, or touchmove.
Landscape orientation test:
Test how your website behaves in landscape mode on the latest iPhones. Landscape orientation helps to find issues with layout and user experience. iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max in Blisk have an option to change the orientation with just one click providing the users with a clear vision of what happens on the mobile phones of the end users. Although portrait and landscape orientations differ only in that the viewport is rotated 90 degrees, their differences in size are significant. Usually, this difference is overlooked but causes issues for your users on mobile.
Developer Tools:
Inspect and debug your website with Developer Tools that can be run on any device. In Blisk, you can run Developer Tools on a per-device basis. This way you can use DevTools on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max at the same time. With Developer Tools, you can inspect the contents of a webpage, track webpage errors, check network requests, and solve other development-related issues.
Test for webpage errors:
Monitor for webpage errors that appear on the latest iPhones and fix the issues before they become critical. The errors on mobile devices may be different from errors on desktops. Starting with version 19.1, you can track in real-time JavaScript page errors and resources that failed to load on iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max.
Performance test:
Run mobile tests in terms of webpage speed and performance. Webpage speed is critical on mobile, low speed leads to loss of users. Use the Network tab in the Developer Tools to conduct this important mobile test. This test is now available for the latest iPhone 14-series.
Dark mode test:
Check whether your website supports the dark mode on brand-new iPhones by running Blisk in dark mode. A lot of mobile users prefer using dark mode at nighttime. That is why the support for dark mode has become a must-have for modern applications. By enabling dark mode in Blisk, you can simulate dark mode on the latest flagships from Apple and check if the UI works well under night lighting, and check the contrast.
Slow connection test:
Simulate other real-world conditions on the latest iPhones, such as a slow internet connection. In Blisk, you can simulate 2G, 3G, 4G cellular networks with Internet speeds that differ significantly. The Slow 3G setting will help you run a custom mobile test and find the resources consuming all the bandwidth on the iPhone 14-series. In addition, you can adjust the network speed on each latest iPhone differently and compare the results across a set of devices.
Usability test:
Test the user experience on mobile devices, uncover problems in the design, discover opportunities to improve the design, and learn about users' behavior and preferences.
Test with your teammates:
Starting with version 19.1, you can share device sets with the latest iPhone 14-series via the Blisk link (use Menu ➜ Device Set ➜ Share Device Set). Your teammate can launch the same device set and run the mobile test on the same URL and settings.

New in Blisk 19.0.60.43 (Jul 28, 2022)

New Android devices by Google and Samsung, Custom device Templates, and Address bar position for iOS devices
New Android devices:
Since version 19.0, Blisk supports more Android devices from Google and Samsung vendors that have a high demand from our users. The device specifications, resolution, and viewport sizes are available in the Device Center.
Google Pixel 5 Google Pixel 5:
Google Pixel 5 has a 6.0-inch screen with a screen size (resolution): 1080px × 2340px, 393px × 851px viewport, and a CSS Pixel Ratio of 2.75.
Google Pixel 6 Google Pixel 6:
Google Pixel 6 has a 6.4-inch screen with a screen size (resolution): 1080px × 2400px, 412px × 915px viewport, and a CSS Pixel Ratio of 2.625.
Google Pixel 6 Pro Google Pixel 6 Pro:
Google Pixel 6 Pro has a 6.71-inch screen with a screen size (resolution): 1440px × 3120px, 412px × 892px viewport, and a CSS Pixel Ratio of 3.5.
Galaxy S20 Galaxy S20:
Galaxy S20 has a 6.2-inch screen with a screen size (resolution): 1080px × 2400px, 360px × 800px viewport, and a CSS Pixel Ratio of 3.
Galaxy S20 Plus Galaxy S20 Plus:
Galaxy S20 Plus has a 6.7-inch screen with a screen size (resolution): 1080px × 2400px, 384px × 854px viewport, and a CSS Pixel Ratio of 2.8125.
Galaxy S20 Ultra Galaxy S20 Ultra:
Galaxy S20 Ultra has a 6.9-inch screen with a screen size (resolution): 1080px × 2400px, 412px × 915px viewport, and a CSS Pixel Ratio of 2.625.
Galaxy S21 Galaxy S21:
Galaxy S21 has a 6.2-inch screen with a screen size (resolution): 1080px × 2400px, 360px × 800px viewport, and a CSS Pixel Ratio of 3.
Galaxy S21 Plus Galaxy S21 Plus:
Galaxy S21 Plus has a 6.7-inch screen with a screen size (resolution): 1080px × 2400px, 384px × 854px viewport, and a CSS Pixel Ratio of 2.8125.
Galaxy S21 Ultra Galaxy S21 Ultra:
Galaxy S21 Ultra has a 6.8-inch screen with a screen size (resolution): 1080px × 2400px, 412px × 915px viewport, and a CSS Pixel Ratio of 2.625.
Custom device Templates:
Device Templates feature was introduced in version 14.0. The feature provided the default Templates of devices by the Blisk team. Since the release of this feature, we have received many requests from users to implement the ability to create their own device templates. The current version finally addresses those feature requests.
Create custom Template:
Blisk 19.0 offers a new Create Template menu item under the Device Set menu. After clicking on this menu, Blisk prompts you to create a template. The prompted templated will be based on your current set of devices, however, you can modify it and create any template of your choice.
Edit Template:
Blisk 19.0 offers a new Edit Template button in the Templates tab of the Device Manager. After clicking on this button, you will be able to update devices and the name of any existing Template.
Toggle address bar position for iOS devices:
Since the release of iOS 15, the Apple mobiles switched to bottom address bar by default. Blisk also switched to the bottom address bar by default. Some users have requested the ability to use the old-style top toolbars. In Blisk v.19, you can toggle the address bar position for iOS-based devices between the top and bottom positions. Blisk offers a new Toggle Address Bar Position to Top/Bottom button in the Device header of each iOS device.

New in Blisk 18.0.193.167 (May 19, 2022)

Blisk 18.0: iOS 15 and iPadOS 15, New devices, Improvements for CPU and Memory usage, Settings: max number of devices, Support for New technologies, Latest Security fixes
iOS 15 for iPhones and iPadOS 15 for iPads:
Since version 18.0, Blisk supports iOS 15 and iPadOS 15 to perform any kind of mobile-friendly test on the latest iPhones and iPads:
Test mobile and desktop ›
Mobile test for touch events ›
Mobile test for single-page apps ›
Mobile test on slow connection ›
Mobile test on real size ›
Mobile test in portrait and landscape ›
Mobile test in dark mode ›
Mobile test for webpage errors ›
Testing Emails on mobile ›
New device: iPhone SE 2022:
The latest iPhone SE 2022 released by Apple recently is now available in Blisk. The device specification with viewport, screen size, device pixel ratio, CSS media query is available in iPhone SE 2022 overview. The specs of other devices are located in our Device center.
Improvements for CPU and Memory usage:
Blisk v.18 features improvements for CPU and Memory usage. The reworked Developer mode was optimized to reduce the calls for the application resources and save CPU and RAM. As a result, each tab uses less resources and has improved user experience - we managed to prevent flashing of tab contents for the device sets with up to 6-8 devices (the number depends on your device OS and CPU).
Settings: max number of devices:
One of the features that are often requested by users is increasing the number of devices in a device set. This feature has a high demand for the users that are performing device tests on multi-monitor systems or large TVs. By default, Blisk limits device set to have 8 devices to prevent high load on the CPU. Since version 18, you can change the limit of devices in Developer Mode Settings.
Setting: max number of devices in Blisk 18.0.193.167
Setting: max number of devices in Blisk 18.0.193.167
Important: using a large number of devices can seriously affect CPU load.
New technologies support in Blisk:
DevTools: CSS Grid editor:
When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see an icon appear next to it in the Styles pane. Click the icon to toggle the CSS grid editor. Here you can preview the potential changes with the on-screen icons (e.g. justify-content: space-around) and author the grid appearance with just one click.
CSS Grid editor in Blisk 18.0.193.167
DevTools: Support for const redeclarations in the Console:
The Console now supports redeclaration of const statement, in addition to the existing let and class redeclarations. The inability to redeclare was a common annoyance for web developers who use the Console to experiment with new JavaScript code.
This allows developers to copy-paste code into the DevTools console to see how it works or experiment, make small changes to the code and repeat the process without refreshing the page. Previously, DevTools threw a syntax error if the code redeclared a const binding.
Const redeclarations in Blisk 18.0.193.167
DevTools: Improved CORS debugging:
CORS-related TypeErrors in the Console are now linked to the Network panel and Issues tab. Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.
CORS debugging in Blisk 18.0.193.167
DevTools: Change color format in the Computed pane:
You can now change the color format of any element in the Computed pane by Shift + click on the color preview.
Color format in the Computed pane in Blisk 18.0.193.167
Color format in the Computed pane in Blisk 18.0.193.167
DevTools Preview feature: New CSS Overview panel:
Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS.
You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element to open the element in the Elements panel.
CSS Overview panel in Blisk 18.0.193.167:
DevTools: New CSS length authoring tools:
DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.
CSS length authoring tools in Blisk 18.0.193.167:
Hover over the unit value, and your mouse pointer is changed to a horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the Shift key when dragging.
CSS adjust value in Blisk 18.0.193.167
Relative indexing method for Array, String, and TypedArrays
Relative indexing via negative indices is a feature that enjoys popularity in other languages (e.g. Python) as well as having been requested by JS programmers.
As a result, the new method was implemented, named at(), to Array.prototype, String.prototype, and the TypedArray prototypes, that permit relative indexing with negative indices.
let arr = [1,2,3,4];
arr.at(-1); // Returns 4
crypto.randomUUID()
Generating random UUIDs is a common need for web applications (the uuid module on npm is installed > 200,000,000 times a month). Developers who have not been exposed to RFC 4122 might naturally opt to invent their own approaches to UUID generation, potentially using insufficient PRNG implementations. Standardizing a UUID method, which dictates that a CSPRNG must be used, helps protect developers from security pitfalls.
Details: The method crypto.randomUUID() is used for generating RFC 4122 version 4 identifiers. The method returns the namespace specific string representation (for example, "6e4decd0-6066-4a25-98e3-0227317cda52").
Size-adjust descriptor for @font-face
The size-adjust descriptor in @font-face allows scaling of glyph sizes for a particular font face without affecting the CSS font-size and derived metrics such as em.
CSS font-size can be seen as a scale factor for a box that the font draws in. Glyph sizes within that box vary between fonts, and size-adjust enables harmonising them across different fonts. That's why it can also help with reducing cumulative layout shift by matching up the fallback font and primary web font using this descriptor.
AbortSignal.abort() static method:
AbortSignal.abort() is a static method that allows creating a new AbortSignal object that is already aborted. It is similar in spirit to Promise.reject(), and provides improved developer ergonomics.
Web developers have found aborted AbortSignal objects to be useful for a variety of purposes. It signifies to JavaScript APIs that no work should be done. However currently, creating an already-aborted AbortSignal object requires jumping through quite a few hoops
const controller = new AbortController();
controller.abort();
return controller.signal;
A new AbortSignal.abort() factory function simplifies this to just
return AbortSignal.abort();
ALPACA attack protection:
Connections to HTTP, HTTPS or FTP servers of ports 989 and 990 will fail.
These ports are used by the FTPS protocol, which has never been implemented in Chrome. However, FTPS servers can be attacked in a cross-protocol attack by malicious web pages using carefully-crafted HTTPS requests.
This is a mitigation for the ALPACA attack. See https://alpaca-attack.com/.
CSS Flexbox: support alignment keywords start, end, self-start, self-end, left, right
Flexbox previously only obeyed center, flex-start, and flex-end. The additional alignment keywords (start, end, self-start, self-end, left, right) allow authors to more easily align the flex items in the face of varying writing modes and flex flows.
Without these additional keywords, developers need to change the keyword values whenever they change the writing mode, text direction, or flex reversal properties (flex-direction: row/column-reverse or align-content: wrap-reverse). The keywords implemented here let them set alignment once.
CSS module scripts:
Solutions for including CSS in component definitions are lacking. Current practices all have one or more of the following rough edges:
Side effects like appending

New in Blisk 17.0.158.186 (Jan 6, 2022)

Blisk 17.0: Toggle Developer Mode using a Shortcut, Support for New technologies, Latest Security fixes
We are excited to release the new features: Toggle Developer Mode using a Shortcut, Support for New technologies, Latest Security fixes.
Important: learn more about new workflow in our new Getting Started Guide
Ctrl+M/CMD+M: Toggle Dev Mode using a Shortcut:
Since version 17.0, you can use the dedicated shortcut Ctrl+M (Windows) and CMD+M (macOS) to toggle the Developer Mode on and off. When you enter the Developer Mode, Blisk applies the last used Device Set - this behavior is similar to the UI button that toggles between Modes. This shortcut is essential for the Blisk application and should save you a tremendous amount of time.
Requirements: this feature is available in Blisk v.17.0.158.186 and later. You may need to update the Blisk application to use this feature. View Documentation.
New technologies support in Blisk:
CSS aspect-ratio property:
Normally, only certain replaced elements have an aspect ratio, particularly images. For them, if only one of width and height is specified, the other can be computed from it using the intrinsic aspect ratio. This property allows explicitly specifying an aspect ratio for any other element to get similar behavior.
Details: Generalizes the aspect ratio concept to general elements. This allows various effects, for example, sizing elements using an aspect ratio, things like filmstrips where each element has the same height but needs an appropriate width, cases where a replaced element is wrapped by a component but should keep the aspect ratio, etc.
CSS aspect-ratio interpolation: The aspect-ratio property allows automatically computing the other dimension if only one of width and height is specified on any element. This property was originally launched as non-interpolable (meaning that it would snap to the target value) when animated. This feature provides smooth interpolation from one aspect ratio to another.
:not() CSS Selector Pseudo-Classes:
Allows complex selectors inside the :not() pseudo class, such as :not(.a + .b .c).
:is(), :where() CSS Selector Pseudo-Classes
The matches-any pseudo-class, :is(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.
CSS Automatic Hyphenation for Windows and Linux
This feature enables hyphens: auto on Windows and Linux by downloading dictionary files used in Android Open Source Project.
Anchor target=_blank implies rel=noopener by default
To mitigate "tab-napping" attacks, in which a new tab/window opened by a victim context may navigate that opener context, the HTML standard changed to specify that anchors that target _blank should behave as if rel="noopener" is set. A page wishing to opt out of this behavior may set rel="noopener".
Streams API: transferable streams:
The streams APIs provide ubiquitous, interoperable primitives for creating, composing and consuming streams of data. A natural thing to do with a stream is to pass it to a web worker. This provides a fluent primitive for offloading work to another thread. Transferable streams add this capability by allowing ReadableStream, WritableStream, and TransformStream objects to be passed as arguments to postMessage().
Details: Offloading work onto a worker is important for a smooth user experience, but the ergonomics can be awkward. Transferable streams solve this problem for streams. Once the stream itself has been transferred, the data is transparently cloned in the background.
Cross-origin Isolation:
Following Spectre/Meltdown discovery, sensitive APIs such as SharedArrayBuffer were disabled on certain platforms with a lot of shared processes.
We want to give developers the opportunity to use these features while maintaining a good security level. We believe COOP and COEP ensure sufficient security boundaries.
When we have both COOP and COEP set we set crossOriginIsolated to true, which in the long run will allow the use of such powerful APIs.
Ontransition{run, start, cancel} event handler attributes:
The ontransitionrun, ontransitionstart, and ontransitioncancel event handler attributes allow developers to add event listeners for transitionrun, transitionstart, and transitioncancel events on elements, Document objects, and Window objects. An example of how this might be used:
target.ontransitioncancel = () => { console.log('transition was cancelled!'); }
These features are part of the stable css-transitions-1 spec, and have shipped in other browsers a long time ago.
Text-decoration-thickness, text-underline-offset and from-font keyword for text-underline-position
Implement CSS text-decoration properties text-decoration-thickness and text-underline-offset. Add support for the new from-font keyword for text-underline-position. When from-font keywords are used, support variable font MVAR underline scaling, (tags `unds` and `undo` in the MVAR table overriding underlinePosition and underlineThickness in the OpenType `post` table.
Details: With the introduction of the text-decoration-skip-ink interest for additional underline styling increased to improve situations where the underline as placed by the UA is too close to the baseline and ink-skipping triggers too early.
File System Access:
This API enables developers to build powerful apps that interact with other (non-Web) apps on the user’s device via the device’s file system. After a user grants a web app access, this API allows the app to read or save changes directly to files and folders selected by the user. Beyond reading and writing files, this API provides the ability to open a directory and enumerate its contents, as well as store file and directory handles in IndexedDB to later regain access to the same content.
Details: Today, if a website wants to create experiences involving local files (document editor, image compressor, IDE, etc.) they are at a disadvantage to native apps. A website must ask the user to reopen a file every time they want to edit it. After opening, the site can only save changes by re-downloading the file to the Downloads folder. A native app, by comparison, can maintain a most recently used list, re-save and even autosave, and save files anywhere the user wants.
FetchEvent.handled
A FetchEvent dispatched to a service worker is in a loading pipeline, which is performance sensitive. The new FetchEvent.handled property returns a promise that resolves when a response is returned from a service worker to its client. This enables a service worker to delay tasks that can only run after responses are complete.
CSS flow-relative shorthand and offset properties:
Ship the already implemented properties introduced by CSS Logical Properties. Specifically:
border-block, border-block-color, border-block-style, border-block-width
border-inline, border-inline-color, border-inline-style, border-inline-width
inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
inset, inset-block, inset-inline
margin-block, margin-inline
padding-block, padding-inline
Details: The shorthands will allow authors to set flow-relative properties for multiple sides in a single declaration. For example, margin-block: 1px 2px instead of margin-block-start: 1px; margin-block-end: 2px.
The flow-relative offset properties inset-* will provide the ability to set top/right/bottom/left with logical mappings, rather than physical.
Cookie Store API:
The Cookie Store API exposes HTTP cookies to service workers and offers an asynchronous alternative to document.cookie.
Details: Today, cookies have extremely high usage, however, the interface to cookies has been a source of complexity and performance issues. The Cookie Store API aims to improve this by providing an asynchronous alternative to document.cookie and exposing HTTP cookies to service workers which will also come with performance benefits. Its interface also encourages developers to make better decisions about security.
CSS ::marker pseudo-element:
The ::marker pseudo-element represents the automatically generated marker box of a list item. Like ::before and ::after, ::marker is a tree-abiding pseudo-element, so it always fit within the box tree.
But unlike ::before and ::after, currently it only accepts a small subset of safe properties, because the marker box layout is mostly undefined.
Note this intent only covers ::marker, not ::before::marker nor ::after::marker.
CSS Selectors: Pseudo-Class :focus-visible:
The :focus-visible pseudo-class makes it easier for developers to create focus styles that appropriately match the user's input modality. It is designed to help prevent a common anti-pattern where developers remove focus outlines for mouse users and inadvertently make their sites inaccessible to keyboard users.
CSS pseudo-element:
The ::target-text is a highlight pseudo-element to allow authors to style scroll-to-text fragments different from the default UA highlighting.
Details: Authors should be able to style the highlighted text from scroll-to-text fragments to have the style match that of the rest of the page.
Document-Policy header:
Document Policy restricts the surface area of the web platform on a per-document basis, similar to iframe sandboxing, but more flexibly. This is just the HTTP header used to set a policy on a document, separate from any features. It can do things like:
Restrict the use of poorly-performing images
Disable slow synchronous JS APIs
Configure iframe, image, or script loading styles
Restrict overall document sizes or network usage
Restrict patterns that cause page re-layout
Details: In addition to the items listed in the summary, the header will be immediately important for allowing sites to opt-out of fragment and text-fragment scrolling on load, as privacy mitigation for the Scroll-to-text-fragment feature.
Flash Player Support (removed):
Remove support for Flash Player from Blisk in alignment with Adobe's planned end of life on January 12th, 2021. Aligning with Adobe's announced plan to end support: https://blog.adobe.com/en/publish/2017/07/25/adobe-flash-update.html#gs.nwd34x
Comma separator in iframe allow attribute (deprecated)
This deprecation removes the ability to use "," as a separator between items in a permissions policy declaration (feature policy declaration) in an iframe tag. Developers should switch to ";" as the correct separator.
Details: Blisk currently recognizes a non-standard "," as a separator between items in an iframe "allow" attribute. This behavior is an accidental side effect of the way that we parse the attribute using the same parser as the 'Feature-Policy' header. (Commas were allowed by the header parser to support concatenating multiple headers together, but the attribute was always specced to contain a single serialized policy.)
'disclosure-open' and 'disclosure-closed' keywords for CSS list-style-type property
CSS property list-style-type supports two new keywords disclosure-open and disclosure-closed. In an element with display:list-item, disclosure-open shows a symbol indicating a widget like is opened. disclosure-closed shows a symbol indicating a widget like is closed. They will be used for the default style of in the user-agent stylesheet.
Details: This is a step of standardizing a way to customize the appearance of the disclosure triangle of and . disclosure-open and disclosure-closed will be used as the default style of . Web developers can use these keywords to reset the appearance, and to create a UI widget like / with their own code.
'display: list-item' by default for
The default value of CSS display property for is changed to 'list-item' from 'block'. We also support ::marker pseudo element selector for , and remove ::-webkit-details-marker pseudo element selector.
Details: This is a step of standardizing a way to customize the appearance of the disclosure triangle of and . Web developers can customize appearance with not vendor-prefixed ::-webkit-details-marker but the standard ::marker.
Schemeful same-site:
Modifies the definition of same-site for cookies such that requests on the same registrable domain but across schemes are considered cross-site instead of same-site. E.g., http:// site.example and https:// site.example (note: a space was added between the scheme and the domain to prevent automatic link conversion) will now be considered cross-site to each other.
Details: The SameSite cookie attribute offers defense against CSRF attacks but currently does not consider secure and insecure version of the same domain as being cross-site; because of this, a network attacker could impersonate http:// site.example (or a subdomain) and use that to bypass SameSite protections on https:// site.example. Changing the same-site computation to consider http:// site.example and https:// site.example as cross-site negates this type of attack.
Stop cloning sessionStorage for windows opened with noopener:
When a window is opened with noopener, Blisk should not clone the sessionStorage of its opener; it should instead start from an empty sessionStorage namespace. This is a bug fix to match the HTML specification, which added this behavior in 2017.
Support for full 'filter' property syntax on SVG elements
Allows the full syntax of the 'filter' property to be used on SVG elements which previously only supported single url(...) references. This allows filter functions such as blur(...), sepia(...) and grayscale(...) to apply to SVG elements as well as non-SVG elements. It makes the platform support for filter more uniform and allows for easier application of some "canned" effects.
Details: Without this feature, developers need to use a full SVG element definition even for basic filters like grayscale(...) or blur(...).
Top-level await:
Allow the await keyword at the top-level within JavaScript modules.
Details: Allows more seamless integration of async calls into the module loading process. Today this is accomplished by wrapping modules in async functions, but this pushes complexity into dependent modules and exposes implementation details.
Web Serial API:
The Serial API provides an interface for connecting to serial devices, either through a serial port on the user’s system or removable USB and Bluetooth devices that emulate a serial port. This API has been requested by the hardware developer community, especially developers building educational tools, as a companion to the WebUSB API because operating systems require applications to communicate with USB-based serial ports using their higher-level serial API rather than the low-level USB API.
Details: Users, especially in the educational, hobbyist and industrial sectors, connect peripheral devices to their computers that require custom software to control. For example, robotics are often used to teach computer programming and electronics in schools. This requires software that can upload code to a robot and/or control it remotely. In an industrial or hobbyist setting a piece of equipment such as a mill, laser cutter or 3D printer is controlled by a program running on a connected computer. These devices are often controlled by small microcontrollers via a serial connection.
Web Share API:
Web Share is an API for sharing data (text, URLs, images) from the web to an app of the user's choosing.
Share API Level 2: Web Share API Level 2 allows sharing of files from the web to an app of the user's choosing. The API enables web developers to build share buttons that display the same system share dialog boxes used by native applications. Level 1 enabled system share dialogs; however, only text and URLs could previously be shared.
Web Share Target: Web Share Target allows websites to receive shared data (text, URLs, images) and register to be choosable by the user as targets from sharing contexts, including (but not limited to) Web Share.
Web Share Target Level 2: Installed web applications can now receive file shares, e.g. images. Using the manifest, the web application can declare which MIME types and/or file extensions it accepts.
Previously, mobile platforms allowed files to be shared to native applications, but not web applications.
AV1 Encoder:
This feature ships an AV1 encoder in Blisk desktop, specifically optimized for video conferencing with WebRTC integration.
Details: AV1 encoding is requested by a number of RTC applications, including Duo, Meet, and Webex. The primary benefits of AV1 are:
Restrict the use of poorly-performing images
Enabling video for users on very low bandwidth networks (offering video at 30kbps and lower)
Significant screen sharing efficiency improvements over VP9 and other codecs
Add support for CSS properties "overflow: clip" and "overflow-clip-margin"
Adds two CSS features. The clip value results in a box’s content being clipped to the box's overflow clip edge. In addition, no scrolling interface is provided, and the content can not be scrolled by the user or programmatically. The overflow-clip-margin property enables specifying how far outside the bounds an element is allowed to paint before being clipped.
Details: Overflow: clip enables developers to disallow any type of scrolling for the box, including programmatic scrolling. Additionally, the box is not considered a scroll container, does not start a new formatting context, and allows the clipping to apply to a single axis via overflow-x and overflow-y.
Overflow-clip-margin allows the developer to expand the clip border. This is particularly useful for cases where there is ink overflow that should be visible.
Support specifying width/height on elements for :
This feature allows specifying a width and height on elements that are used in , which allows the image to compute an aspect ratio from these attributes, e.g.:
Details: This feature Matches similar behavior for non- images, and
URL protocol setter: New restrictions for file URLs:
Aligns behavior with the standard in edge cases when changing the URL protocol to or from "file". Previously, attempting to change the protocol of a URL with credentials or a port to "file" would lead to an invalid URL. Similarly, attempting to change a URL with no host from "file" to "http" would lead to an invalid URL. Now the invalid change will be ignored for consistency with other browsers. This affects the "protocol" attribute on the URL API, location, and and elements.
Details: Improved standards compliance and interoperability with other browsers.
Clipboard: read-only files support:
This proposes to expose read-only files on the clipboard to renderers using a similar approach to drag-and-drop. Renderers will have access to read files from the clipboard, but not write files to the clipboard. For files on the clipboard, renderers will have read-only access.
async function onPaste(e) {
let file = e.clipboardData.files[0];
let contents = await file.text();
Details: Blisk supports files via DataTransfer for drag and drop, but not for clipboard. It is useful for users to be able to use clipboard keyboard shortcuts such as Ctrl+C, Ctrl+V for a task such as attaching a file to an email rather than only drag and drop.
Security Patches and Improvements:
Blisk 17.0 includes a lot of security improvements and patches including port blocking, protection of application/x-protobuffer via Cross-Origin-Read-Blocking. Protect `application/x-protobuffer` from speculative execution attacks by adding it to the list of never sniffed MIME types used by Cross-Origin-Read-Blocking. `application/x-protobuf` is already protected as a never sniffed mime type. `application/x-protobuffer` is another commonly used MIME type that is defined as an "ALT_CONTENT_TYPE" by the protobuf library.
Details: These improvements help developers by keeping the web platform safe for users and preserving user confidence in the web by preventing their browser from being used as a vector to attack their internal network.