Xah Web Dev Blog 2017-05

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

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

firefox bug big noto emoji 2017 05 21
Firefox Linux bug. “Noto Color Emoji” font are shown huge, and ignores font-size CSS.

problem is also reported at

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

CSS: Round Corners (minor update)

CSS: Animation (minor update)

CSS Color Spec Separator Now Allow Space

O, the whims of the standard.


2017-05-12 thanks to xfq.

JS: Random Range Function (added es2015 code)

JS: Randomize Node Children (code updated to ES2015)

JS: Find Window Size (updated)

new CSS unit: vw vh vi vb vmin vmax

there's new CSS unit.

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]

See also: JS: Find Window Size

yarn, a new package manager for JavaScript. I recommend it instead of npm. https://code.facebook.com/posts/1840075619545360

If you have a question, put $5 at patreon and message me.