\n The changes are described below, and the documentation is up to date for the latest CSS<\/a> and latest JavaScript<\/a> syntax. These features are still behind a feature flag which you can enable for testing<\/a>.\n<\/p>\n \n The original CSS proposal provided for three different modes \u2013 but they were not easily extensible beyond a single fold. The updated syntax uses a segment count for more flexibility.\n<\/p>\n OLD<\/strong>\n<\/p>\n \n Where the value<\/i> could be:\n<\/p>\n NEW<\/strong>\n<\/p>\n \n The count reflects the number of segments, which for Microsoft Surface Duo devices would be 2<\/strong>. \n<\/p>\n \n \n The environment variables populated on foldable devices also needed to be updated, and introduced the concept of indexing to rows and columns of segments.\n<\/p>\n OLD<\/strong>\n<\/p>\n NEW<\/strong>\n<\/p>\n \n The x and y coordinates refer to a conceptual grid that begins with 0 0 in the top left. For Microsoft Surface Duo devices, you would use these values to use coordinates from each view segment:\n<\/p>\n \n \n You can also calculate interim values (such as the hinge dimensions):\n<\/p>\n \n The original JavaScript proposal was already capable of returning a collection of segment Rects. This behavior hasn\u2019t changed, however the method has been renamed and added to the window.visualViewport<\/strong> property.\n<\/p>\n OLD<\/strong>\n<\/p>\n NEW<\/strong>\n<\/p>\n \n The same rules apply to both versions of the API \u2013 the value is an immutable snapshot of the moment it was queried. To adapt the layout programmatically as the device posture and app mode changes, listen for resize<\/strong> or orientationchange<\/strong> events and query for the latest segment data then respond accordingly.\n<\/p>\n \n An example of the new CSS and JavaScript syntax can be found at this GitHub URL<\/a>.\n<\/p>\n \n Figure: testing the dual-screen syntax in a desktop browser<\/em>\n<\/p>\n \n Here\u2019s a snippet of the CSS that\u2019s creating a hidden visualization of the fold area, which uses the media query and environment variables:\n<\/p>\n \n You can view the complete CSS<\/a> and HTML<\/a> source for this example on GitHub.\n<\/p>\n \n You can test the updated syntax by downloading the latest versions of Edge for Surface Duo, or the desktop version of Edge or Chrome (for the devtools simulator<\/a>) and enabling the feature-flag via edge:\/\/flags<\/strong> (or chrome:\/\/flags<\/strong> on Chrome).\n<\/p>\n \n Visit docs.microsoft.com for the latest latest CSS<\/a> and JavaScript<\/a> documentation, and this example on GitHub<\/a> (css<\/a>).\n<\/p>\n \n If you have any questions, or would like to tell us about your dual-screen web apps, use the\u00a0feedback forum<\/a>\u00a0or message us on Twitter\u00a0@surfaceduodev<\/a>.\u00a0\n<\/p>\n \n Finally, please join us for our dual screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello web developers! The dual-screen CSS and JavaScript enhancements for Microsoft Edge were initially shared in June 2020 when they were first available behind a feature flag for testing. Since then there has been a lot of work and feedback on the proposals, and the implementation currently available in the latest version of Microsoft Edge […]<\/p>\n","protected":false},"author":570,"featured_media":2030,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[709,412,46,530],"class_list":["post-2027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-design","tag-javascript","tag-surface-duo","tag-web"],"acf":[],"blog_post_summary":" Hello web developers! The dual-screen CSS and JavaScript enhancements for Microsoft Edge were initially shared in June 2020 when they were first available behind a feature flag for testing. Since then there has been a lot of work and feedback on the proposals, and the implementation currently available in the latest version of Microsoft Edge […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=2027"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2027\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2030"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}CSS<\/h2>\n
@media (screen-spanning: <value>) { }<\/pre>\n\n
@media (horizontal-viewport-segments: <count>) { }\r\n@media (vertical-viewport-segments: <count>) { }<\/pre>\n![\"Diagrams](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/word-image-1.png\")
\n<\/p>\nEnvironment variables<\/h2>\n
env(fold-top)\r\nenv(fold-left)\r\nenv(fold-width)\r\nenv(fold-height)<\/pre>\n
env(viewport-segment-width <x> <y>)\r\nenv(viewport-segment-height <x> <y>)\r\nenv(viewport-segment-top <x> <y>)\r\nenv(viewport-segment-left <x> <y>)\r\nenv(viewport-segment-bottom <x> <y>)\r\nenv(viewport-segment-right <x> <y>)<\/pre>\n
![\"Two](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/a-picture-containing-text-person-screenshot-des.png\")
\n<\/p>\n\/* dual-portrait hinge width *\/\r\ncalc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))\r\n\/* dual-landscape hinge height *\/\r\ncalc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0))<\/pre>\n
JavaScript<\/h2>\n
window.getWindowSegments()<\/pre>\n
window.visualViewport.segments<\/pre>\n
Example<\/h2>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/a-picture-containing-waterfall-chart-description.png\")
\n<\/p>\n@media (horizontal-viewport-segments:2) {\r\n .fold {\r\n top: 0;\r\n height: env(viewport-segment-height 0 0);\r\n width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));\r\n left: env(viewport-segment-right 0 0);\r\n position: absolute;\r\n }<\/pre>\nTesting<\/h2>\n
Resources and feedback<\/h2>\n