Tag Archives: Announcements

Node-ChakraCore Update: N-API, Node.js on iOS and more

Today, we are happy to announce a new preview release of ChakraCore, based on Node.js 8, available for you to try on Windows, macOS, and Linux.

We started our Node-ChakraCore journey with a focus on extending the reach of Node.js to a new platform, Windows 10 IoT Core. From the beginning, it’s been clear that in addition to growing the reach of Node.js ecosystem, there’s a need to address real problems facing developers and the Node.js ecosystem though innovation, openness and community collaboration.

As we continue our journey to bring fresh new ideas and enable the community to imagine new scenarios, we want to take a moment to reflect on some key milestones we’ve achieved in the last year.

Full cross-platform support

While ChakraCore was born on Windows, we’ve always aspired to make it cross-platform. At NodeSummit 2016, we announced experimental support for the Node-ChakraCore interpreter and runtime on Linux and macOS.

In the year since that announcement, we’ve brought support for full JIT compilation and concurrent and partial GC on x64 to both macOS and Ubuntu Linux 14.04 and higher. This has been a massive undertaking that brings Node-ChakraCore features to parity across all major desktop operating systems. We are actively working on cross-platform internationalization to complete this support.

Support for Node.js API (N-API)

This year, our team was part of the community effort to design and develop the next-generation Node.js API (N-API) in Node.js 8 which is fully supported in ChakraCore. N-API is a stable Node API layer for native modules, which provides ABI compatibility guarantees across different Node versions & flavors. This allows N-API-enabled native modules to just work across different versions and flavors of Node.js, without recompilations.

According to some estimates, 30% of the module ecosystem gets impacted every time there is a new Node.js release, due to lack of ABI stability.  This causes friction in Node.js upgrades in production deployments and adds cost to native module maintainers in having to maintain several supported versions for their module.

Node.js on iOS

We are always delighted to see the community build and extend Node-ChakraCore in novel and interesting ways. Janea Systems recently announced their experimental port of Node.js to run on iOS, powered by Node-ChakraCore. This takes Node.js to iOS for the first time, expanding the reach of the Node.js ecosystem to an entire new category of devices.

Node.js on iOS would not be possible without Node-ChakraCore. Because of the JITing restrictions on iOS, stock Node.js cannot run. However, Node-ChakraCore can be built to use the interpreter only, with the JIT completely turned off.

This is particularly useful for scenarios like offline-first mobile apps designed with the expectation of unreliability connectivity or limited bandwidth. These apps primarily rely on local cache on the device, and use store and forward techniques to opportunistically use data connectivity when available. These kinds of apps are common in scenarios like large factory floors, remote oil rigs, disaster zones, and more.

Time-Travel Debugging

This year also brought the debut of Time-Travel debugging with Node-ChakraCore on all the supported platforms, as originally demoed using VSCode at NodeSummit 2016. This innovation directly helps with the biggest pain-point developers have with Node.js – debugging! With this release, Time-Travel Debugging has improved in stability and functionality since its introduction, and is also available with Node-ChakraCore on Linux and macOS.

 And much more …

These are just the start – our team has also made major investments in infrastructure automation, which have resulted in faster turnaround of Node-ChakraCore updates following the Node.js 8. Both stable Node-ChakraCore builds and nightlies are now available from the Node.js foundation build system.

We recently started measuring module compatibility using CITGM modules, and have improved compatibility with a wide variety of modules. Popular node modules like, node-sass, express and body-parser are considering using Node-ChakraCore in their CI system to ensure ongoing compatibility.  Node-ChakraCore also has improved 15% in ACMEAir performance on Linux in the last 2 months, and we’ve identified areas to make further improvements in the near future.

With our initial priority of full cross-platform support behind us, we are moving our focus to new priorities, including performance and module compatibility. These are our primary focus for the immediate future, and we look forward to sharing progress with the community as it happens!

Get involved

As with any open source project, community participation is the key to the health of Node-ChakraCore. We could not have come this far in our journey without the help of everyone who is active on our github repo, and in the broader Node community, for their reviews and guidance.  We are humbled by your enthusiasm and wish to thank you for everything you do. We will be counting on your continued support as we make progress in our journey together.

For those who are looking to get involved outside of directly contributing code, there are several ways to get involved and advance the Node-ChakraCore project. If you are a …

  1. Node.js Developer – Try testing Node-ChakraCore in your project, and use Time-Travel debugging with VSCode and let us know how it goes.
  2. Node.js module maintainer – Try testing your module with Node-ChakraCore. Use these instructions to add Node-ChakraCore in your own CI to ensure ongoing compatibility. If you run into issues, please let us know at our repo or our gitter channel.
  3. Native module maintainer – Consider porting your module to N-API. This will help insulate your module from breakage due to new Node releases and will also work with Node-ChakraCore.

As always, we are eager to hear your feedback, so please keep them coming. Find us on twitter @ChakraCore, our gitter channel or you can open an issue on our github repo to start a conversation.

Arunesh Chandra, Senior Program Manager, Chakra

The End of an Era – Next Steps for Adobe Flash

Today, Adobe announced that Flash will no longer be supported after 2020. Microsoft will phase out support for Flash in Microsoft Edge and Internet Explorer ahead of this date.

Flash led the way on the web for rich content, gaming, animations, and media of all kinds, and inspired many of the current web standards powering HTML5. Adobe has partnered with Microsoft, Google, Mozilla, Apple, and many others, to ensure that the open web could meet and exceed the experiences that Flash has traditionally provided. HTML5 standards, implemented across all modern browsers, provide these capabilities with improved performance, battery life, and increased security. We look forward to continuing to work with Adobe and our industry partners on enriching the open web without the need for plug-ins.

We will phase out Flash from Microsoft Edge and Internet Explorer, culminating in the removal of Flash from Windows entirely by the end of 2020. This process began already for Microsoft Edge with Click-to-Run for Flash in the Windows 10 Creators Update. The process will continue in the following phases:

  • Through the end of 2017 and into 2018, Microsoft Edge will continue to ask users for permission to run Flash on most sites the first time the site is visited, and will remember the user’s preference on subsequent visits. Internet Explorer will continue to allow Flash with no special permissions required during this time.
  • In mid to late 2018, we will update Microsoft Edge to require permission for Flash to be run each session. Internet Explorer will continue to allow Flash for all sites in 2018.
  • In mid to late 2019, we will disable Flash by default in both Microsoft Edge and Internet Explorer. Users will be able to re-enable Flash in both browsers. When re-enabled, Microsoft Edge will continue to require approval for Flash on a site-by-site basis.
  • By the end of 2020, we will remove the ability to run Adobe Flash in Microsoft Edge and Internet Explorer across all supported versions of Microsoft Windows. Users will no longer have any ability to enable or run Flash.

This timeline is consistent across browsers, including Google, Mozilla, and Apple. We look forward to continuing our close collaboration with Adobe, other browser vendors, and the publishing community, as we evolve the future of the web for everyone.

— John Hazen, Principal Program Manager Lead, Microsoft Edge

Register now for Microsoft Edge Web Summit 2017

Registration is now open for Microsoft Edge Web Summit 2017. Join the Microsoft Edge team in Seattle on September 13th for a jam-packed day of energetic technical sessions looking at what’s new, and what’s next, for the web on Windows. Space is limited and reservations are on a first-come, first-served basis, so book your seat today!

Duotone photo of Seattle with superimposed text reading "Microsoft Edge Web Summit 2017, September 13th, 2017, Seattle, WA"

Microsoft Edge Web Summit is a free conference presented by the engineers building Microsoft Edge. The main track consists of 14 jam-packed technical sessions, covering everything from performance, accessibility, and test guidance, to brand-new tools and APIs for building Progressive Web Apps on Windows, adding payments and biometric authentication to your sites, and building modern layouts with new CSS features like CSS Grid.

This year, we’re introducing a new Hallway Track, where you can meet with engineers from across Microsoft to solve real problems today, and build invaluable connections for the future. Looking to reduce a troublesome performance issue? Struggling with best practices for accessibility? Eager to get started with WebVR? Curious about Bash on Windows? We’ve got you covered. The Hallway Track connects you one-to-one with Microsoft engineers throughout the day for tangible results you can take back to your site or app.

We’re excited to meet developers around the world face to face, and look forward to seeing you here in Seattle, WA! Space is limited and reservations are on a first-come, first-served basis, so book your seat today. Can’t make it? Don’t worry – though there’s no substitute for attending in person, we’ll be streaming live on Channel 9 all day (no registration required), and recorded sessions will be available after the fact.

If you have any questions about the event, you can reach the event team on Twitter @MSEdgeDev or by email at edgesummit@microsoft.com. See you there!

Microsoft Edge Web Summit logo (two line-art alpine summits, with stylized angle brackets superimposed above them)

Kyle Pflug, Senior Program Manager, Microsoft Edge

Microsoft Edge at Build 2017

Last week, Microsoft welcomed thousands of developers from around the world to Build 2017, where we shared our vision for the future of dozens of products and services. Build featured a number of exciting sessions for developers building sites and apps with web technologies, including a peek at what’s coming to the web platform beginning with EdgeHTML 16 the Windows 10 Fall Creators Update.

In this post, you’ll find a quick review of the web developer sessions at Build 2017. If you see something you’d like to learn more about, dive into the recording to get all the details!

What’s new and what’s next for the web on Windows

In this session, Kyle Pflug and Nadia Fortini take you on a whirlwind tour of what’s new in Microsoft Edge in EdgeHTML 15, and share a roadmap for our priorities in upcoming releases of Microsoft Edge.

You’ll learn about new features like Payment Request for standardized checkout experiences, WebVR for immersive mixed reality experiences built with immersive web technologies, and dramatically improved responsiveness and battery life. We also cover upcoming APIs in development for future releases, including an updated CSS Grid implementation, Service Worker and other features that enable Progressive Web Apps, and much more.

Screen capture showing Fluent Design in Microsoft Edge. The use of materials like Acrylic allows elements of the background to influence the color and texture of the browser frame.

This session also shows an early look at upcoming changes to the design and personality of Microsoft Edge, as the new Fluent Design System begins to make to the browser beginning with the Windows 10 Fall Creators Update. Fluent Design brings depth, motion, and personality to the controls and browser frame in Microsoft Edge, allowing elements of the page and background to influence the color of the browser window.

Progressive Web Apps on Windows

In this session, Aaron Gustafson introduces Progressive Web Apps, a new vision for the future of web apps enabled by groundbreaking technologies like Service Worker, which will be coming to preview builds of Microsoft Edge for developer testing this summer.

You’ll learn how Progressive Web Apps enable world-class, cross-platform, native-like apps, build on web technologies and hosted on your own server. PWAs can work offline, update content in the background even when the browser or the app is closed, and intercept network requests to update content from a cache when the network is unavailable.

This session details how we will a first-class web app ecosystem on Windows by ingesting high-quality PWAs from across the internet, and making it easy for developers to participate in the Windows Store alongside native apps with no extra effort, using tools like Web App Manifests and PWABuilder.

WebVR: Immersive Mixed Reality powered by web technologies

In this session, David Rousset and Etienne Margraff describe how EdgeHTML 15 on the Windows 10 Creators Update enables any web developer to build an immersive mixed reality experience with Microsoft Edge, Windows Mixed Reality, and the WebVR 1.1 API.

Modern frameworks like Babylon.js and A-Frame make it easy to get started building WebVR experiences using familiar web technologies. Developers can get started today even without a headset using the Windows Mixed Reality Simulator.

Better checkout experiences with the Payment Request API

In this session, Molly Dalton, Stan Change, and Jonathan Cutler provide an in-depth look at the new Payment Request API, which allows you to build standardized, cross-browser checkout experiences on the web and in apps. Payment Request dramatically simplifies checkout by leveraging a payment app – in this case, the browser – to store and provide payment and shipping details, so your customers can enjoy less friction and a more delightful user experience.

Payment Request works in EdgeHTML 15 as well as in UWP apps, apps packaged with the Desktop Bridge, and the Microsoft Bot Framework, allowing you to build a faster and easier checkout experience across a variety of devices and platforms.

What’s new in ChakraCore

In this session, Brian Terlson gives an overview of what’s new in Chakra – the open-source JavaScript engine that powers Microsoft Edge and Windows 10.

You’ll learn about the near-native performance enabled by experimental WebAssembly support in Microsoft Edge, and exciting new emerging tools like Time Travel Debugging. You’ll also learn about Chakra’s journey to other operating systems, and the work we’ve been doing with the Node.js core project to help solve key problems like providing a stable Node API for native module developers.

Get started today

Many of these new APIs – including WebVR 1.1, Payment Request, CSS Custom Properties, and more – are available and on by default in Microsoft Edge on the Windows 10 Creators Update, which is available now. To get started with experimental features like WebAssembly, you can simply navigate to about:flags in Microsoft Edge.

To make it as easy as possible to get started, we’ve partnered with BrowserStack to provide instant, free testing of Microsoft Edge from any device. You can test the latest stable and preview releases of Microsoft Edge, and even test localhost or using WebDriver.

We look forward to sharing more about upcoming features soon as they make their way to the Windows Insider Program. In the meantime, check out the Build sessions, and let us know what you think!

Kyle Pflug, Senior Program Manager, Microsoft Edge

Disabling VBScript execution in Internet Explorer 11

VBScript is deprecated in Internet Explorer 11, and is not executed for webpages displayed in IE11 mode. However, for backwards compatibility, VBScript execution is currently still permitted for websites rendered in legacy document modes. This was introduced as a temporary solution. Document modes are deprecated in Windows 10 and not supported at all in Microsoft Edge.

To provide a more secure experience, both the Windows 10 Creators Update and Cumulative Security Update for Internet Explorer-April 11, 2017 introduce an option to block VBScript execution in Internet Explorer for all document modes. Users can configure this behavior per site security zone via registry or via Microsoft Easy fix solution. Enterprise customers can also configure this behavior via Group Policy.

Recommended Actions

As a security best practice, we recommend that Microsoft Internet Explorer users disable VBScript execution for websites in Internet Zone and Restricted Sites Zone. Details on how to configure this behavior can be found in KB4012494.

We also recommend that web developers update any pages that currently rely on VBScript to use JavaScript.

In subsequent Windows releases and future updates, we intend to disable VBScript execution by default in Internet Explorer 11 for websites in the Internet Zone and the Restricted Sites Zone. The settings to enable, disable, or prompt for VBScript execution in Internet Explorer 11 will remain configurable per site security zone, via Registry or via Group Policy, for a limited time. We will post future updates here in advance of changes to default settings for VBScript execution in Internet Explorer 11.

Staying up-to-date

Most customers have automatic updates enabled, and updates will be downloaded and installed automatically. Customers who have automatic updates turned off, will need to check for updates and install them manually.

― Maliha Qureshi, Senior Program Manager

What’s new in Microsoft Edge in the Windows 10 Creators Update

Today, the Windows 10 Creators Update began rolling out to over 400 million Windows 10 devices. With the Creators Update, we’re upgrading Microsoft Edge with dozens of new features and under-the-hood improvements to make the best browser on Windows 10 faster, leaner, and more capable than ever.

This release updates the Windows web platform to EdgeHTML 15, the fourth release of EdgeHTML and a major step forward both in terms of the browser user experience, web platform capabilities, and fundamentals like performance, efficiency, and accessibility. In this post, we’ll share a quick overview of what’s new in each area, for both users and web developers. Stay tuned over the coming weeks, as we’ll be sharing a deeper look at many of these topics individually.

Web developers can start testing EdgeHTML 15 today by updating their Windows 10 device, or by downloading a free virtual machine from Microsoft Edge Dev. You can also test Microsoft Edge for free in BrowserStack, which offers instant cloud-based testing from a Mac or PC, including WebDriver automation. BrowserStack will be updated to include the final release of EdgeHTML 15 in the coming weeks.

Introducing Microsoft Edge in the Windows 10 Creators Update

Over the last eight months, the Microsoft Edge team has been focused on exciting new features to make the browsing experience better than ever:

Organize your web with new tab management experiences

Windows users spend more than half of their time on the web, and it’s all too easy to get tangled up in the chaos of search results, sites, and other content that can build up over hours, days, or weeks of browsing. In this update, we’ve introduced two new features to take the pain out of tab management.

Microsoft Edge now lets you set your tabs aside for later, sweeping them aside and organizing them neatly in a special section for easy access when you’re ready.


Set your tabs aside for later

Simply click the new “Set these tabs aside” button next to your row of tabs, and they are moved out of sight. When you’re ready to come back to them, just click the “Tabs you’ve set aside” icon, and you get a tidy, visual view of previous sessions. Restore one tab, or restore the full set!

If you have a lot of tabs open, it can be daunting to tell them apart, or to find a specific page in the sea of tiny icons and titles. Microsoft Edge now includes the ability to preview all your open tabs at once, so you can get back to what you’re looking for in a snap.


Show tab previews to scan your tabs more easily

Simply click the “Show tab previews” arrow to the right of your new tab button, and your tabs will expand to show a preview of the full page. You can scroll through this list to see as many tabs as you have open – when you find what you want, just click it to get back to browsing!

New reading experiences in Microsoft Edge

Microsoft Edge now lets you read books from right inside the browser, putting your favorite e-books from the Windows Store or from EPUBs on the web alongside your reading list and other content you expect to find in your browser.


Find ebooks in the Microsoft Edge Hub

You can find books in the new “Books” section of the Microsoft Edge Hub, and a wide selection of books for every taste in the Windows Store.

That’s just the beginning – you’ll find new features and extensions, and improvements to performance, usability, and more, all throughout Microsoft Edge. You can find tips on what’s new and how to get the most out of Microsoft Edge at Microsoft Edge Tips.

More efficient, more responsive, and more secure

We’ve made no secret of our ongoing obsession with making Microsoft Edge get more out of your battery, run the web faster, and keep you safer. We’ve been busy on these fronts, and EdgeHTML 15 is better than ever by any measure.

Pushing the frontier of energy efficiency

In the Creator’s Update, we’re taking the longest-lasting browser on Windows and supercharging it yet again. Thanks to major improvements in Microsoft Edge, like encouraging HTML5 content over Flash, improving the efficiency of iframes, and optimizing hit testing, Microsoft Edge on the Creators Update uses 31% less power than Google Chrome 57, and 44% less power than Mozilla Firefox 52, as measured by our open-source efficiency test that simulates real-world browsing.

These improvements translate into hours more browsing time for our customers – time to finish a crucial report while you’re at a coffee shop with no power, or to watch an extra movie on a long flight. In a head-to-head video rundown test, Microsoft Edge outlasted Google Chrome by more than three hours when streaming video!

There are countless enhancements to improve efficiency in the Creators Update, and we’re methodical about measuring the impact of each fix or new feature to make sure you get the most out of your browser. Watch this space for a detailed update on the engineering work that enables our greater power efficiency, and more on how we measure power consumption, coming early next week.

Responsiveness that puts the user first

In the past, we’ve been happy to share our leadership in synthetic JavaScript benchmarks like Google’s Octane benchmark, Apple’s Jet Stream, and others. Microsoft Edge continues to lead by those measures, but ultimately any single benchmark can only tell part of the story. In EdgeHTML 15, we’ve focused on making Microsoft Edge feel faster and more responsive, even when the page may be busy or hung, by prioritizing the user’s input above other activity, and optimizing rendering for real-world scenarios.


Comparing scrolling on a busy page, before and after the input responsiveness improvements in EdgeHTML 15.

These improvements dramatically reduce input blocking on busy sites – put simply, the browser responds much more quickly to user input like clicking links or scrolling with the keyboard, even when a page may be busy loading or executing JavaScript in the background.

That just scratches the surface – for example, over the past two releases, we’ve been working on an ongoing, multi-year refactoring of the Microsoft Edge DOM tree, which is now substantially complete. Together with a number of performance optimizations, this has resulted in a more than twofold improvement in performance in many real-world scenarios, as measured by the Speedometer benchmark, which simulates real-world app patterns using common frameworks.

Chart showing Microsoft Edge scores on the Speedometer benchmark over the past four release. Edge 12: 5.44. Edge 13: 37.83. Edge 14: 53.92. Edge 15: 82.67.

We’ll be exploring these performance and responsiveness improvements in more detail over the coming weeks – stay tuned!

Safer than ever

Microsoft Edge in the Creators Update includes two broad categories of security improvements which make the browser more resilient to typical attack strategies.

First, we’ve introduced a series of mitigations to prevent arbitrary native code execution: Code Integrity Guard and Arbitrary Code Guard. These mitigations make it much more difficult to load harmful code into memory, making it less likely and less economical for attackers to be successful in building a compete exploit. You can read more about this work in Mitigating arbitrary native code execution in Microsoft Edge.

Second, we’ve dramatically improved the resiliency of the Microsoft Edge sandbox. Microsoft Edge has always been sandboxed in a series of app containers on Windows 10 – in the Creators Update, we’ve tuned these app containers by reducing the access scope to only the capabilities that are directly necessary for Microsoft Edge to work properly. This work dramatically reduces Microsoft Edge’s attack surface area (including a 90% reduction in access to WinRT and DCOM APIs), and when combined with the exploit mitigations that apply to Microsoft Edge and its brokers, increases the difficult of exploiting any remaining vulnerabilities. You can read more about this work in Strengthening the Microsoft Edge Sandbox.

Modern capabilities for web developers

The Windows 10 Creators Update upgrades the Windows web platform to EdgeHTML 15, which introduces a number of new, modern capabilities for web developers. A few of these are highlighted below – you can find the full list of changes on the Microsoft Edge Dev Guide.

Simpler web payments with the Payment Request API

The new W3C Payment Request API enables simpler checkouts and payments on Windows 10 PCs and phones. In Microsoft Edge, the Payment Request API connects to the user’s Microsoft Account (with the user’s permission), allowing easy access to payment information. Because payment information is securely saved in a digital wallet, shoppers don’t have to navigate through traditional checkout flows and repeatedly enter the same payment and shipping address information repeatedly.

Screen capture of a Microsoft Wallet dialog box with shipping and payment information.

This can provide a faster and more consistent experience across websites, which saves shoppers time and effort by allowing them to securely share saved payment information. Learn more about the Payment Request API in our blog post, Simpler web payments: Introducing the Payment Request API, or see the Payment Request API samples on Microsoft Edge Dev.

CSS Custom Properties

CSS Custom Properties (formerly called CSS Variables) are a new primitive value type to fully cascade variables across CSS properties. Custom Properties enable the same fundamental use cases as variables in CSS pre-processors, but have the additional benefits of being fully cascaded, being interacted with via JavaScript, and not requiring the additional build step to work. Learn more about CSS Custom Properties in our blog post, CSS Custom Properties in Microsoft Edge, or see Custom Properties Pooch: a Microsoft Edge demo on Microsoft Edge Dev.

WebVR Developer Preview

Microsoft Edge now supports the WebVR 1.1 draft specification, which has been collaboratively authored by Mozilla, Google, Samsung, Microsoft, Oculus and others. Developers can now use this API to create immersive VR experiences on the web with the recently available Windows Mixed Reality dev kits. You can even get started without a headset using the Windows Mixed Reality Simulator. Acer, ASUS, Dell, HP, and Lenovo will ship the world’s first Windows Mixed Reality-enabled headsets later this year, starting at just $299 USD. Note that while WebVR is enabled by default in Microsoft Edge, using the Windows Mixed Reality Portal or Mixed Reality dev kits currently requires Developer Mode to be turned on in Windows settings.

Brotli

Brotli is a compression format that achieves up to 20% better compression ratios with similar compression and decompression speeds (PDF). This ultimately results in substantially reduced page weight for users, improving load times without substantially impacting client-side CPU costs. As compared to existing algorithms, like Deflate, Brotli compression is more efficient in terms of file size and CPU time. Learn more about Brotli in our blog post, Introducing Brotli compression in Microsoft Edge.

And lots more…

There’s simply too much to list in one post – the list goes on with features including WebRTC, async-await, TCP Fast Open, Intersection Observer, experimental support for WebAssembly, and more. You can find the full list of what’s new in the Microsoft Edge Dev Guide, or a comprehensive view of which standards are supported, planned, or in preview at Microsoft Edge Platform Status.

Built in the open

We’re proud to continue building Microsoft Edge in the open, using the voice of our community to drive product planning, and sharing our roadmap transparently. Windows itself is on an exciting journey with 10 million Insiders. These initiatives are better together – Windows Insiders are essential to building Microsoft Edge faster and with better quality, and Windows itself has been able to leverage tools like Microsoft Edge Platform Status and Microsoft Edge Platform issues – for the first time launching an open backlog and bug tracker for the Windows platform.

The voice of our community is helping us chart the course for 2017 and beyond. Nolan Lawson recently shared a look at the top highest-rated CSS features on the Microsoft Edge UserVoice:

At An Event Apart Seattle, we recently announced the development has begun on our updated CSS Grid implementation. With this announcement, every one of the features pictured are in development (or, in the case of CSS Custom Properties, shipping today!).

Beyond CSS, our roadmap for preview releases over the rest of 2017 is focused on three areas: doubling down on fundamentals like performance and reliability, delivering Progressive Web Apps on Windows, and continuing to innovate in the user experience of Microsoft Edge. We’re excited to share more about what the future holds soon!

Get started today on Windows 10, or test for free via BrowserStack

You can try Microsoft Edge on the Windows 10 Creators Update today! If you’re on a Windows 10 device, simply check for updates – see the instructions here for more details. If you’re on another platform, you can test EdgeHTML 15 instantly for free via BrowserStack, or download a free virtual machine from Microsoft Edge Dev.

Kyle Pflug, Senior Program Manager, Microsoft Edge

Legacy web apps in the enterprise

Migrating legacy web apps to modern standards can be both costly and time consuming. IT departments are generally cost centers, and it makes sense for enterprises to want to maximize the ROI on their existing LOB apps. Many of these sites may continue to exist without being upgraded for a while yet, and it’s important to us that these apps do not block Windows customers as they adopt newer versions of Windows. This is why Windows 10 includes Internet Explorer 11 alongside Microsoft Edge, to provide a consistent and predictable level of compatibility with existing legacy applications.

In this blog post, we will discuss how Internet Explorer and Microsoft Edge can work together to support your legacy web apps, while still defaulting to the higher bar for security and modern experiences enabled by Microsoft Edge. Working with multiple browsers can be difficult, particularly if you have a substantial number of internal sites. To help manage this dual-browser experience, we are introducing a new web tool specifically targeted towards larger organizations: the Enterprise Mode Site List Portal.

The future of Internet Explorer

Naturally, this is a question we get quite frequently. With Microsoft Edge and the modern web representing the future, what will happen to Internet Explorer?

While we encourage everyone on Windows 10 to use Microsoft Edge—our modern web browser designed for faster, safer browsing—we are cognizant of the sizable investment that many of you have in legacy web apps. Our guidance to developers and IT administrators is simple. Upgrading web apps to modern standards is the best long-term solution. With that said, you can still use Internet Explorer 11 for backward compatibility and upgrade web apps on your own schedule.

Internet Explorer 11 supports Document modes and Enterprise Mode, which are essential tools for maintaining this backward compatibility. Internet Explorer, and the aforementioned tools, are considered components of the Windows operating system. They follow the Lifecycle Policy for the product on which they are installed. For Internet Explorer 11, this includes the lifespan of Windows 7, Windows 8.1, and Windows 10.

Cataloging your internal sites

Show of hands: who knows the exact number of internal sites and web apps your company has today? The answer to this is, of course, dependent on the size of your organization and many other factors. However, if we were in a large room of IT professionals, chances are there wouldn’t be many hands up.

As your organization grows, it’s only natural that the number of web apps should grow proportionally. It’s tough to have a firm grasp of what constitutes your “intranet”, in the non-networking sense of the word. This is an inherent problem that most will face when modernizing their web apps. In order to determine your dependency on legacy technologies, you first need to identify all the sites that must be tested, then learn their optimal configuration. There are a few ways you can go about this. If you attended our session at Microsoft Ignite in Atlanta last September, you should be familiar with these approaches.

Let’s go through them one-by-one:

Screen capture showing the F12 Developer Tools open to the "emulation" tab and configured to emulate "Internet Explorer 11"

F12 developer tools. The first method is by far the most manual approach. With the F12 developer tools in Internet Explorer 11, you can emulate any site with different Document modes and Enterprise Modes. Cycling through these different options will help you determine the appropriate compatibility setting. There’s some user training required to understand the technology behind the process, but fortunately little configuration is needed. One-by-one, you can build a list of sites and the legacy technologies they require. You can learn more about this approach here.

Screen capture showing an Enterprise Site Discovery report with an inventory of visited URLs.

Enterprise Site Discovery. The next approach is much more automated. Enterprise Site Discovery automatically collects inventory data on any set of computers you designate, effectively crowdsourcing the information you would learn from the F12 developer tools. Any time a user browses the web, data—such as the URL, domain, document mode, browser state reason, and number of visits—is captured. This information can be scoped to particular domains and zones for privacy. The more data you collect, the clearer of a picture you will have. Over enough time and with enough devices, the list will begin to build itself with increasing accuracy. You can learn more about this approach here.

Screen capture showing the Windows Upgrade Analytics dashboard

Windows Upgrade Analytics. The final method is based on Enterprise Site Discovery, and is the most scalable solution. Windows Upgrade Analytics is a free service that helps IT departments easily analyze their environment and upgrade to Windows 10 through the Operations Management Suite. As a part of this solution, the same site discovery data is collected, which can be similarly scoped for privacy. Going one step further, the raw inventory data is automatically analyzed and snapshot reports, like the one pictured below, are generated. You can learn more about this approach here.

Now that we have all this site information, what do we do with it?

Dual-browser experience

Microsoft Edge and Internet Explorer 11 work better together on Windows 10. Based on the size of your legacy web app dependency, determined by the data collected above, there are several options from which you can choose to configure your enterprise browsing environment:

  • Use Microsoft Edge as your primary browser
  • Use Microsoft Edge as your primary browser and use Enterprise Mode to open sites in IE11 that use IE proprietary technologies
  • Use Microsoft Edge as your primary browser and open all intranet sites in IE11
  • Use IE11 as your primary browser and use Enterprise Mode to open sites in Microsoft Edge that use modern web technologies
  • Use IE11 as your primary browser

This blog post goes into more detail on when to use which option, and which option is best for you.

Now that we have a catalog of legacy web apps, let’s define an experience where you can use a modern browser but still maintain compatibility with your older apps.

Managing your Enterprise Mode Site List

The Enterprise Mode Site List is an XML document where you can specify a list of sites, their compat mode, and their intended browser. With this schema, you can automatically launch a page in a particular browser. In the case of IE11, that page can be launched in a particular compat mode to always render correctly. You can also restrict IE11 to only the legacy web apps that need it, automatically sending sites not included in the Enterprise Mode Site List to Microsoft Edge, as of the Anniversary Update last year. Once implemented, users can easily view this site list by visiting “about:compat” in either browser.

https://gist.github.com/kypflug/9e9961de771d2fcbd86b

There are equivalent Enterprise Mode Site List policies for both Microsoft Edge and Internet Explorer 11. The former list is used to determine which sites should open in IE11; the latter list is used to both (1) determine with which compat mode to load a site, and (2) determine which sites should open in Microsoft Edge. We recommend using one list for both browsers, where each policy points to the same XML file location.

The most straightforward way to build and manage your Enterprise Mode Site List is by using any generic text editor. However, we’ve provided a couple tools to make that process even easier.

Enterprise Mode Site List Manager

The first tool is called the Enterprise Mode Site List Manager. There are two versions: one for the old, v.1 XML schema, and one for the new, v.2 XML schema. This tool helps you create error-free XML documents, with simple n+1 versioning and URL verification. If your site list is of a relatively small size, this is the easiest way to manage your Enterprise Mode Site List.

On the other hand, if your site list is relatively large, you may encounter some difficulties with the client tool. It is not very scalable; it is designed for a single user. If you have more than one user managing your site list, there is the potential for overlap, among other complications.

Enterprise Mode Site List Portal

Today we are proud to announce a new tool specifically targeted for larger organizations: The Enterprise Mode Site List Portal.

Screen capture showing the Enterprise Mode Site List Portal dashboard

The Enterprise Mode Site List Portal is a web tool originally built by our own IT department, now made open-source on GitHub. The web app is designed for IIS with a SQL Server backend, leveraging Active Directory for employee management. In addition to all the functionality of the client tool, the Enterprise Mode Site List Portal helps enterprises:

  1. Manage site lists from any device supporting Windows 7 or greater;
  2. Submit change requests;
  3. Operate offline via an on-premise solution;
  4. Provide role-based governance;
  5. Test configuration settings before releasing to a live environment.

This new tool allows you to manage your Enterprise Mode Site List, hosted by the app, with multiple users. Updates are made by submitting new change requests, which are then approved by a designated group of people. Those updates are first made to a pre-production environment for testing, which can be rolled back if necessary. The final production changes can be deployed immediately, or scheduled for a later date. Users are notified of any updates in the request process via e-mail.

Already being used internally here at Microsoft, the Enterprise Mode Site List Portal has reduced site list management time by 65%. For some enterprises, processing a single change to their site list can take an entire week. What’s more, some enterprises have upwards of tens of thousands of entries in their site list. Using this new web tool can save you valuable time and expedite your modernization process.

As the tool is open-source, the source code is readily available for examination and experimentation. We encourage you to fork the code, submit pull requests, and send us your feedback!

Hopefully this helps illustrate the array of options to help manage legacy web apps in the enterprise. If you have any questions or concerns, please do not hesitate to reach out and ask. We are always looking for ways to improve your enterprise browsing experience!

– Josh Rennert, Program Manager, Microsoft Edge

Announcing free Microsoft Edge testing in partnership with BrowserStack

Today, we’re thrilled to announce a partnership with BrowserStack, a leader in mobile and web testing, to provide remote virtual testing on Microsoft Edge for free. Until now, developers who need to test against a specific version of Microsoft Edge have been limited to local virtual machines, or PCs with Windows 10 installed. However, there are many developers that don’t have easy access to Microsoft Edge for testing purposes.

Screen capture showing Microsoft Edge running inside a browser on macOS.

BrowserStack Live Testing can run Microsoft Edge inside your browser on macOS, Windows, or Linux.

Today, we are excited to partner with BrowserStack, which provides the industry’s fastest testing on physical devices and browsers, so that you can focus on delivering customers the best version of your product or website. BrowserStack is trusted by developers at over 36,000 companies, including Microsoft, to help make the testing process faster and more accessible. Under this new partnership, developers will be able to sign into BrowserStack and test Microsoft Edge using their Live and Automate services for free.

Live testing provides a remote, cloud-based instance of Microsoft Edge streamed over the web. You can interact with the cloud-based browser just as you would an installed browser, within your local browser on any platform – whether it’s macOS, Linux, or older versions of Windows.

As testing setups are becoming more automated, we are excited to also offer BrowserStack’s Automate testing service under this partnership, for free. This method of testing allows you to run up to 10 Microsoft Edge test sessions via script, which can integrate with your local test runners via the standardized WebDriver API. You can even configure your machine so that the cloud-based browser can see your local development environment—see the Local Testing instructions at BrowserStack to learn more.


Testing Microsoft Edge in BrowserStack using WebDriver automation

To ensure you can test against all possible versions of Microsoft Edge that your users may be using, BrowserStack will be providing three versions of Microsoft Edge for testing: the two most recent “Stable” channel releases, and the most recent “Preview” release (via the Windows Insider Preview Fast ring).

You can test Microsoft Edge on the Windows 10 Anniversary Update (EdgeHTML 14) starting today. EdgeHTML 15 will be available in the Windows 10 Creators Update starting on April 11, 2017, and will come to BrowserStack in the following weeks.

BrowserStack currently serves more than 36,000 companies globally including Microsoft, AirBnB, and MasterCard. In addition to Microsoft Edge, the service provides more than 1100 combinations of operating systems and browsers and its Real Device Cloud allows anyone, anywhere to test their website on a physical Android or iOS device. With data centers located around the world, BrowserStack is trusted by over 1.6 million developers relying upon the service as it provides the fastest and most accurate testing on physical devices.

We’re very excited to partner with BrowserStack to make this testing service free for Microsoft Edge. Head over to BrowserStack and sign up to get started testing your site in Microsoft Edge today.

― Jason Weber, Director of Program Management, Microsoft Edge

CSS Custom Properties in Microsoft Edge

Beginning with EdgeHTML 15 in the Windows 10 Creators Update, Microsoft Edge introduces support for CSS Custom Properties, a new primitive value type to fully cascade variables across CSS properties. You can preview CSS Custom Properties in Windows Insider Preview builds beginning with EdgeHTML 15.15061. Check out our Custom Properties Pooch demo to see them in action!

Illustration of a dog wearing a sweater in an urban park

Check out our Custom Properties Pooch demo to see CSS Custom Properties in action!

What are CSS Custom Properties?

SASS/LESS and other pre-processors have been offering variables in CSS for years, which is one of the reasons why, in an informal poll, ~75% of polled web developers incorporate these tools in their day to day workflow. However, the biggest downfall of these tools is that they are effectively a “find & replace” of the specified value. This means that the variables can’t be updated without needing to recompile the stylesheets.

Enter CSS Custom Properties (née CSS Variables). While Custom Properties enable the same fundamental use cases, they have the additional benefits of being fully cascaded, being interacted with via JavaScript, and not requiring the additional build step to work.

How to use Custom Properties

Here’s a practical example: setting up primary and secondary colors for your site.

https://gist.github.com/gregwhitworth/76d8b3f1680cb557a67fe7808338faa6

Let’s look at what is happening here, to declare a new custom property you precede a valid ident with two dashes. In our example, we are setting up our color scheme by creating custom properties for our --primary and --secondary colors. Then to utilize these properties, we need to reference them using the var() function.

It’s worth noting that a custom property can store any valid CSS, so feel free to get creative with how you utilize them! For example, the following is a valid custom property:

https://gist.github.com/gregwhitworth/9851a17058adebf8447b6e26ab6e8833

Note: We utilized this methodology of color math extensively in our Custom Properties Pooch demo—check it out here!

Creating a fallback

A common use case for custom properties is in components. You may design a component, and you want to provide sensible defaults for all of your custom properties. Custom Properties follows the same pattern as other CSS values and allows you to set fallback values. Here’s an example:

https://gist.github.com/kypflug/fa31dcf09b3df13148b7a43d0705285b

In this case, if the --primary custom property doesn’t exist when substitution occurs we’ll use blue instead of transparent.

Note: This does not allow a fallback for a value that doesn’t work for the given property. For example:

https://gist.github.com/kypflug/9d3d502520ffec4f4a9f4bb0352c0382

This doesn’t work because blue is not a valid value for margin-top, but Custom Properties don’t know the syntax rules for properties they’re use in. All that matters is whether we have a value for --primary or not. Since we do have a value, we substitute it in, try to parse margin-top: blue, and discard it as invalid per normal CSS rules.

Custom property scoping

Custom Properties are scoped like other CSS properties, by harnessing the cascade. This is valuable when, for instance, a team might be collaborating to build components or aspects of a site. To illustrate, let’s take our previous example, and add in a component we’re building that also has its own --primary custom property:

https://gist.github.com/gregwhitworth/352afbab7bc06a7f1b4c14d63606306e

This will result in a blue background for the body and a yellow background for the .my-component.

Detecting support for Custom Properties

It’s important to remember that CSS is designed to fail silently, so if a browser doesn’t support Custom Properties, you’ll only be able to see this if your styles have visual implications. An easy way to progressively enhance your site with Custom Properties is to provide different styles to browsers that don’t support Custom Properties. You can do this by wrapping your custom property work in a @supports declaration block.

https://gist.github.com/gregwhitworth/d12e7f20de97aa9d7f959e174bfbe38e

It’s important to note that @supports only checks that --foo is syntactically correct, not that the property and value match what has been declared. For example, both the previous and following examples will result in the body having a green background in browsers that support Custom Properties, even though the current value for --foo is not false.

https://gist.github.com/gregwhitworth/7550a2c4cc3b9b93cb9781287b977ae5

Modifying a custom property via script

One of the primary benefits of native support for Custom Properties is the capability of dynamically modifying them via script. In order to do this you need to modify custom properties using the setProperty() and getPropertyValue() APIs. For example, to modify our --primary color on .my-component, we can do the following:

https://gist.github.com/gregwhitworth/ff8ce6d59ccdd6dd8234d4ffd4acd7a9

Then, to retrieve the computed value of the custom property, you utilize getPropertyValue() from getComputedStyle():

https://gist.github.com/gregwhitworth/b3135bb9775ca7e73882e474a499201e

Animating a custom property

You can animate custom properties, but you can’t interpolate them. What exactly does it mean to be able to animate but not interpolate a custom property? Well, let’s take the following example:

Remember that you can store any valid ident in a custom property, so think of it as being stored as a string in an engine. The browser understands how to interpolate color: green to color: blue but it doesn’t know how to interpolate between “hello” and “world.” So, what does the browser do in the previous example? The browser takes the duration and assigns the possible values amongst the frames. For this example, that would result in a value of 50px for 500ms and 0 for the other 500ms; this is referred to in the spec as doing a 50% flip.

But I want them to interpolate!

We do too! The CSS Houdini Task Force is actively working on ways to make this happen with the Properties & Values API. If this work pans out, you’ll be able to register your custom property and inform the engine of its type, so that it can correctly interpolate values. Keep a look out for this API to start making its way into the wild, as browsers begin to experiment with these APIs to test their viability and help evolve the specification.

Improvements beyond Custom Properties

While working on our implementation of Custom Properties, we looked at a few demos that web developers had built. While some of them worked, others didn’t. When we reduced the broken demos to look for bugs, we narrowed the problems down to other gaps in our engine – not necessarily as a result of bugs in our Custom Properties implementation. For example, the largest gap we found was support for calc() within color functions (eg: rgb(), hsl()). Because this is an exciting use case where custom properties can be very powerful, we addressed this issue in our parser.

“A rising tide lifts all boats”

As we worked to fill gaps in our engine, we also wanted to be sure that web developers can rely on interoperable implementations for the feature to be useful. As we began our implementation efforts, we found that no browser had implemented the 50% flip behavior suggested in the specification for animating custom properties. Additionally, we found that no browser supported the capability of referencing variables via the var() function, within a keyframe at-rule. We worked with the CSSWG to resolve upon these issues and provide an implementation in Microsoft Edge.

Of course, the work in Edge is only one part of making sure the feature is interoperable. As we worked on our implementation, we found bugs in the implementations in existing browsers. As a result of this, we opened bugs against Blink, Gecko, and WebKit, and look forward to improved implementations across the board – including fixes shipping as early as Chrome 56 that will make Custom Properties more interoperable.

–in: “conclusion”

CSS Custom Properties not only solve a common developer request and makes your code more manageable, but it also unlocks a lot of potential for more creative work on the web. The future of the web looks bright and we’re just getting started. We’re excited to have CSS Custom Properties in the Windows 10 Creators Update, and can’t wait to see what you create!

Greg Whitworth, Program Manager, Microsoft Edge

Introducing WebRTC 1.0 and interoperable real-time communications in Microsoft Edge

We’re excited to announce the preview availability of the WebRTC 1.0 API, and support for the H.264/AVC and VP8 video codecs for RTC in Microsoft Edge, enabling plugin-free, interoperable video communications solutions across browsers and platforms.

These features are enabled by default in Windows Insider Preview builds starting with last week’s release, 15019, and will be in stable releases beginning with the Windows 10 Creator’s Update.

Background and Object RTC

Microsoft Edge introduced support for ORTC beginning in EdgeHTML 13 (Windows 10 version 1511), providing the initial foundation for real-time communications in Edge. Our priority with the WebRTC 1.0 API support is to provide interoperability with legacy implementations on existing websites, which leverage the WebRTC API as previously deployed in other browsers.

Our WebRTC 1.0 API implementation provides support for peer-to-peer audio and video based on a subset of the W3C WebRTC-PC API circa 2015, prior to the addition of the WebRTC object model.  Because this implementation is focused on legacy interoperability (including mobile applications built from early versions of the WebRTC.org source code), we don’t plan to further update the native WebRTC 1.0 API beyond this release.

To utilize the most advanced features in the Microsoft Edge RTC stack, we recommend that considering the ORTC API, especially in situations where it is desirable to control individual transport, sender, and receiver objects directly, or to set up group audio and video calls. If you need support for objects or advanced features such as multi-stream and simulcast with the current WebRTC 1.0 API, we recommend the adapter.js library, which now supports Microsoft Edge.

Codec interoperability

The H.264/AVC and VP8 video codecs are supported in the Microsoft Edge RTC stack, which means video communications are now interoperable between Microsoft Edge and other major WebRTC browsers and RTC services. We have implemented the following congestion control and robustness mechanisms for both H.264/AVC and VP8 video codecs:

These features are available within both the ORTC API and native WebRTC 1.0 API, so you can make API and video codec decisions independently.

Note that while the Edge H.264/AVC implementation supports hardware offload within both the encoder and decoder, VP8 is implemented purely in software, and as a result may exhibit higher power consumption and CPU load.  If your application uses VP8, we recommend testing on lower-end devices to ensure acceptable performance.

What’s next

As we continue to chart our roadmap for real-time communications, our next priorities are adding support for the W3C Screen Capture specification, as well as improved support for enterprise scenarios. We look forward to sharing updates and preview builds as the work progresses.  Meanwhile, we look forward to your feedback on WebRTC and our current RTC roadmap. You can try out WebRTC 1.0 in preview builds today, and if you encounter any bugs, share feedback on Microsoft Edge Platform Issues, via Twitter at @MSEdgeDev, or in the comments below.

― Shijun Sun, Principal Program Manager, Microsoft Edge
― Bernard Aboba, Principal Architect, Microsoft Skype