CSS Flexbox is a layout mode that offers an alternative to traditional methods for positioning like
floats. It provides a more efficient way to lay out, align and distribute items in a container. Blokks uses Flexbox to define the overall appearance of the embedded timetable.
Flexbox is supported by all modern browsers. Only older Android browsers and Internet Explorer 8-9 lack support.
Supported by: Chrome 49+ Edge 12+ Internet Explorer 10+ Firefox 31+ Safari 6.1+
Position: sticky is a CSS property that allow elements to stick to the viewport edge as you scroll past them.
Blokks implements sticky headers as a progressive enhancement. This means that if your browser does not support sticky headers, they simply won’t stick. No polyfill or fallback is required.
Please note that there are limitations to sticky headers. For example, they will not work inside elements with
overflow: scroll or
auto. Therefore, headers will not stick if local scrolling is enabled.
Supported by: Chrome 58+ Edge 16+ Firefox32+ Safari 7+
CSS Variables are supported by all major browsers, including Microsoft Edge. However, Internet Explorer does not support them yet. A great solution for this is to use CSS classes.
Supported by: Chrome 49+ Edge 15+ Firefox 31+ Safari 9.1+
Blokks uses Promises extensively to handle so called async operations. What they are and what they do is beyond the scope of this page. What you should know is that they aren’t supported by Internet Explorer. Luckily, adding the Promise polyfill will fix this.
If you want to know more about Promises, this article will bring you up to speed.
Supported by: Chrome 33+ Edge 12+ Firefox 29+ Safari 7.1+
MatchMedia is an API for finding out whether or not a media query applies to the document. Blokks uses MatchMedia to change layout when switching between mobile and desktop.
There is a polyfill available if you need to support Internet Explorer 9 and lower.
Supported by: Chrome 9+ Edge 12+ IE10+ Firefox 6+ Safari 5.1+
overflow: hidden; on the
<body> element is limited on iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the
<body> content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.