Experiments


Introduction

Every day, web developers work to optimize their designs with modern features, many of which may not be readily available on all viewing platforms. On this page you'll find the (experimental) fruits of some of the code found on CompCADEMY's very own website. Keep in mind that some of these features may still contain bugs as they are still in development.


Frosted Glass design (introduced 2018.02.06)

The new Frosted Glass design implements the graphical effects characteristic of the design theme of Apple's latest builds of iOS and Mac OS X, as well as Microsoft's "Fluent Design" effects included in the latest builds of Windows 10. If compatible with your browser, this blurred transparency effect can be seen in the navigation bar found at the head of each CompCADEMY web page, as well as the dropdown menu that cascades from it when viewed in a mobile web browser.

This is a GUI feature that invokes the newly introduced backdrop-filter CSS attribute. Currently, only WebKit, the rendering engine on which Google Chrome (Chromium), Opera, and Apple Safari are based, supports this attribute. Microsoft Edge for Windows 10 build 17093 (currently available on the Fast Ring under the Windows Insider Program) also supports this feature.

Although Chrome/Chromium and Opera provide inbuilt support for this attribute, it is not enabled out-of-the-box. To enable it, you will need to go to chrome://flags, search for Experimental Web Platform features, and select Enabled in the corresponding dropdown box. Restart your browser and go to our homepage, and you should see the effects.


For more information, please see the Mozilla Developer Network article on the backdrop-filter attribute.


Known issues:

  • Applies to WebKit/Chromium-based browsers:
    • Backdrop filter displayed on the navigation bar and dropdown menu shows a black shadow along the edges of the viewport.