Xah Web Dev Blog Archive 2017-05

2017-05-22

Interesting that Microsoft Edge browser haven't picked up. Remain below Google Chrome, Firefox, Safari, Internet Explorer.

Chrome 63%
Safari 17%
Firefox 11%
IE 3%
Edge 1%

2017-05-21

Firefox Linux bug. “Noto Color Emoji” font are huge

problem is also reported at

2017-05-17

CSS: Newspaper Text-Flow Over Multi-Column Layout (updated. Now supported by browsers)

2017-05-17

CSS: Round Corners (minor update)

2017-05-17

CSS: Animation (minor update)

2017-05-12

CSS Color Spec Separator Now Allow Space

O, the whims of the standard.

https://github.com/w3c/csswg-drafts/commit/a54f8b2089d16eca696690fe7ffc3c11d4db9861

2017-05-12 thanks to Fuqiao Xue (xfq).

2017-05-12

Random Integer Function 🚀 (added es2015 code)

2017-05-11

Randomize Node Children 🚀 (code updated to ES2015)

2017-05-09

Find Window Size (updated)

2017-05-06

new CSS unit: vw vh vi vb vmin vmax

there's new CSS unit.

vw: Equal to 1% of the width of the viewport.
vh: Equal to 1% of the height of the viewport.
vi: Equal to 1% of the size of the initial containing block, in the direction of the root element's inline axis.
vb: Equal to 1% of the size of the initial containing block, in the direction of the root element's block axis.
vmin: Equal to 1% of the minimum value of the height and the width of the viewport.
vmax: Equal to 1% of the maximum value of the height and the width of the viewport.

The vw and vh are supported by Google Chrome, Firefox, Edge, Safari, latest ones as of 2017-05-06

The vi and vb are not supported by Google Chrome, and probably not others neither.

these are really needed. For example, you want to create a div box, with a specified aspect ratio of say 4/3. (width 4, height 3). You can say

style="width:100vw; height:75vw"

Often, on the side you have columns for index and ads etc. What you really want is percentage of the container box. The solution is the vb unit. Like this:

style="width:100vb; height:75vb"

But vb is not supported by Google Chrome yet.

These are most useful when you are creating SVG graphics, and you want the viewport to be max of a div, with a specified aspect ratio.

〔see Practical SVG Tutorial〕