Xah Web Dev Blog Archive 2017-05
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%
Firefox Linux bug. “Noto Color Emoji” font are huge
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 Element Children (code updated to ES2015)
JS: Find Window Size (updated)
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.
vh are supported by Google Chrome, Firefox, Edge, Safari, latest ones as of 2017-05-06
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
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:
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
Ask me question on patreon