14/05/2016
Modern web techniques used in Responsiville
In Responsiville and Vanilla we utilize some modern, somewhat edgy, web techniques, but only when we are certain that the browsers which we target do support them (or when we have a solid shim to work around them). These techniques are:
CSS border box
A new -back in the day- way to define an element's dimensions so that its paddings and borders are included -and not added- to its width and height, if they have a set height. Very useful for responsive grid building.
CSS variables
A modern programmatic way to define values for CSS rules. CSS variables can be defined on an element and then re-defined and cascaded down to its descendant elements and be re-used on them. Currently Internet Explorer, mobile Safari and Android native browser do not support them, but we have developed a shim to use them when they are defined on the root element (HTML).
VW/VH
Viewport units (viewport width and viewport height) are a new way to measure dimensions in CSS and refer to the browser viewport, ranging from 0 to 100 (100 meaning 100% of the viewport width or height). All browsers we target now support them.
CSS calc
Dynamic, calculated values for CSS rules. All browsers we target nowadays do support them. One can also include CSS variables inside "calc" (which we support with a shim, as mentioned above).
Javascript bind
An ES5 enhancement to the Javascript Function prototype that allows a function to be bound - and run in the scope of - any object the developer chooses. This way object oriented Javascript programming becomes a lot more accessible.