README.md

CSS Polyfills (Parallia Framework)

The goal of this project is to serve as a stable and efficient base for many css polyfills.

To make this objective a working thing, the project is divided into modules which can be loaded on demand.

This documentation is only a beginning, please feel free to improve it while you discover new useful things. Please note this file is automatically generated from the typescript files in this folder, so please edit those files, and run "grunt concat:doc" to update this one.

CSS-BOX

Provides an easier way to deal with the different css style objects of an element.

How do you get the border-box of an element?

	var cssBox = require('core:css-box');
	var box = cssBox.getBox(document.body, 'border-box');
	return { top: box.top, left: box.left, right: box.left+box.width, bottom: box.top+box.height };

How do you get the content-box of an element?

	var cssBox = require('core:css-box');
	var box = cssBox.getBox(document.body, 'content-box');
	return { top: box.top, left: box.left, right: box.left+box.width, bottom: box.top+box.height };

What kind of boxes can you get for an element?

	return ["content-box", "padding-box", "border-box", "margin-box"];

CSS-CASCADE

Provide helpers to interact with or simulate the css cascading engine.

How do you start monitoring a css property?

	var cssCascade = require('core:css-cascade');
	cssCascade.startMonitoringProperties(
		["-css-grid", "-css-grid-row", "css-grid-col"],
		{
			onupdate: function(element, rule) {
				// TODO: update the layout of "element"
			}
		}
	);

How do you find out the specified style for a property?

	var cssCascade = require('core:css-cascade');
	return cssCascade.getSpecifiedStyle(document.body, 'poly-grid')

How do you find out the specified style for multiple properties?

	var cssCascade = require('core:css-cascade');
	var rules = cssCascade.findAllMatchingRules(document.body);
	var row = cssCascade.getSpecifiedStyle(document.body, 'poly-grid-row', rules);
	var col = cssCascade.getSpecifiedStyle(document.body, 'poly-grid-col', rules);
	return [row, col];

How do you polyfill a property style getter/setter?

	var cssCascade = require('core:css-cascade');
	cssCascade.polyfillStyleInterface('poly-grid');

	var cssStyle = require('core:css-style').valueOf();
	var style = cssStyle.usedStyleOf(document.body);
	return style.polyGrid;

How do you manually choose which stylesheets to polyfill?

	// BEFORE LOADING THE POLYFILL:
	window['no_auto_stylesheet_detection'] = true;

	// AFTER LOADING THE POLYFILL:
	var cssCascade = require('core:css-cascade');
	cssCascade.loadStyleSheet("* { color: red; }");
	cssCascade.loadStyleSheetTag(document.querySelector('style.polyfill').valueOf());

CSS-SIZING

Provides a way to obtain some intrinsic size info out of displayed HTML Elements.

How do you convert a value to pixels ?

	var cssSizing = require('core:css-sizing');
	var min = cssSizing.minWidthOf(document.body);
	var max = cssSizing.maxWidthOf(document.body);
	return [min, max];

CSS-STYLE

Provides an easier way to deal with the different css style objects of an element.

How do you obtain the used value of a property?

	var cssStyle = require('core:css-style');
	return cssStyle.usedStyleOf(document.body).alignContent;

How do you override a style temporarily?

	var cssStyle = require('core:css-style');

	// set the runtime style
	var backup = cssStyle.enforceStyle(document.body, "color", "red");

	// reset the previous value
	cssStyle.restoreStyle(document.body, backup);

CSS-SYNTAX

Provides a "css-syntax-3" css parser.

How do you transform a css text into tokens?

	var cssSyntax = require('core:css-syntax');
	return cssSyntax.tokenize("* { color: red; }");

How do you parse a css stylesheet??

	var cssSyntax = require('core:css-syntax');
	return cssSyntax.parse("* { color: red; }");

How do you transform a css text into tokens?

	var cssSyntax = require('core:css-syntax');
	return cssSyntax.parseCSSValue("url('bg.png')");

CSS-UNITS

Provides a basic css unit converter.

How do you convert a value to pixels ?

	var cssUnits = require('core:css-units');
	return cssUnits.convertToPixels("33%", document.body, {
		boxType: "content-box",
		isHeightRelated: true
	});

How do you convert a value from pixels ?

	var cssUnits = require('core:css-units');
	return cssUnits.convertFromPixels(550/*px*/, /*to*/"em", document.body, {
		boxType: "content-box",
		isHeightRelated: true
	});

DOM-EVENTS

Provides helpers for dealing with events in your code.

How do you add support for events on a custom object ?

	function SomeObject() {
		// init a new SomeObject
	}

	var domEvents = require('core:dom-events');
	domEvents.EventTarget.implementsIn(SomeObject);

How do you retarget an existing event object ?

	var domEvents = require('core:dom-events');
	document.body.onclick = function(e) {

		// do as if we just clicked on #some-element instead
		var someEvent = domEvents.cloneEvent(e);
		var someElement = document.querySelector("#some-element");
		someElement.dispatchEvent(someEvent);

	};