Browser Technologies

This course is about Progressive Enhancing the web.

CSS | PE demo’s

CSS variables

Check the demo for CSS-vars here

CSS variables code snippet:

:root {
  --color-dark-blue: #0071B3;
  --color-code: #f6f8fa;
  --text-body: 1.6rem;
}

CSS backdrop-filter

Check the demo for backdrop-filter here

CSS backdrop-filter code snippet:

section {
  background: hsla(213, 16%, 22%, .85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

HTML | PE demo’s

HTML <video> tag

Check the demo for <video> tag here

HTML <video> code snippet:

<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg">
  Your browser doesn't support HTML5 video tag.
</video>

Code snippet from Mozilla Developer Network

HTML input

Check the demo for input here

HTML input code snippet:

<input type="color" />

JS | PE demo’s

JS EcmaScript verion

Check the demo for <video> tag here

Should show: Browser is capable of EcmaSript 'version-number'

Code snippet from Marco Bonelli

JS notification

Check the demo for JS notify here

Should show a browser desktop notification or alert modal showing the notification