Bug 14203 - JavaScript API to access unsupported CSS properties
Summary: JavaScript API to access unsupported CSS properties
Status: NEW
Alias: None
Product: CSS
Classification: Unclassified
Component: CSSOM (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Simon Pieters
QA Contact: public-webapps-bugzilla
URL: http://meyerweb.com/eric/thoughts/200...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-09-18 23:20 UTC by Marat Tanalin | tanalin.com
Modified: 2013-08-08 13:26 UTC (History)
10 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Marat Tanalin | tanalin.com 2011-09-18 23:20:55 UTC
We need an API to read raw values of CSS properties including those unsupported by browser. This will allow us to incredibly speedup evolution of the web by making it possible to easily add support for new CSS properties to existing browsers that have no native support for them with pretty trivial JavaScript.

Currently, unsupported properties are just ignored and are unavailable for easy access from JavaScript.

"Easy access" means access without need for full-fledged manual CSS-parsing from scratch with JavaScript. Such JavaScript-based parsing is error-prone, very slow, leads scripts to have terribly-big size, and therefore inapplicable in most cases.

	We need more smart and usable solution.
	We need more smart and usable solution. (Yes, I've repeated this twice.)

The solution is a dedicated API to read raw values of CSS-properties. The API could consist of two methods:

	// Returns all CSS-properties as name-value pairs:
	element.getStyles();

	// Returns specified CSS-properties only:
	element.getStyles(['lorem', 'ipsum']);

	// Returns value of single specified CSS-property:
	element.getStyle('some-property');

The element.getStyles() method could return an associative-array-like object. For example, if we have CSS:

	#example {
		some-property: some value;
		another-property: another value;
	}

then we could use following JavaScript code to access the CSS properties:

	var styles = document.getElementById('example').getStyles();

	// The 'styles' variable now contain two name-value pairs:
	// styles['some-property'] === "some value"
	// styles['another-property'] === "another value"

element.getStyle('some-property') could return value of single specified property:

	var style = document.getElementById('example').getStyle('some-property');
	// The 'style' variable now contain string "some value".

Once we've got value of the property, all we need is to parse just this individual value.

Needless to say, parsing an individual value is incomparably more easy and feasible than parsing full stylesheet from scratch.

For browsers, this could be quite easy to implement the API since they _do_ read all CSS-properties (including unsupported ones), but just _skips_ unsupported ones. For API to be implemented, it's probably enough to just expose such skipped properties via the API described above.

Thanks.
Comment 1 L. David Baron (Mozilla) 2011-09-19 00:06:41 UTC
The API you propose can't be implemented without the API user providing a good bit more detail about how the property works.  For more information, see:
https://bugzilla.mozilla.org/show_bug.cgi?id=188321#c14
Comment 2 Marat Tanalin | tanalin.com 2011-09-19 01:06:53 UTC
(In reply to comment #1)

Thank you for valuable comment, David.

The API I've proposed is a _minimal_ API _enough_ to get value of an unsupported property.

Such minimal/enough API is _much, much_ better then current situation when we have no access to unsupported properties _at all_ and are forced to parse stylesheets entirely from scratch.

As far as I understand CSS-parsing mechanism, if we have following unsupported property declaration:

	some-property: some value;

then entire string "some-property: some value;" is skipped by browser.

In this string, a browser can automatically treat string before first colon as property name, while treating rest part of the string (after colon) as its value.

Inheritance (when needed) could be calculated by JS-script itself by iteratively checking the property for all parents of the element -- from direct parent to root element of element's owner-document.

Feel free to supplement the API with additional features that would make accessing unsupported properties (as well as unsupported values of supported properties) even easier for web-developers.

Based on information available at your link, we could add 'inherit' boolean parameter to getStyle() method:

// Second parameter specifies whether property should be inherited (false by default):
element.getStyle('some-property', true);

(Actually, it's enough to be able to read individual properties via only getStyle() method to achieve subject goal. getStyles() method is optional compared with getStyle().)

As for "parse + compute function", I'm not sure it's reasonable enough to use them in _client_ scripts (as opposed to internal browser's chrome scripts). Appropriate parts of parsing script could be called later in script -- when raw value is already obtained. There is no big need to do these actions in exactly one step.

Thanks.
Comment 3 Anne 2011-10-20 06:26:57 UTC
Out of scope for HTML.
Comment 4 Simon Pieters 2013-05-28 09:33:26 UTC
How about only exposing unknown properties as specified style, not letting them take part in computed style or inherit or anything? This would mean that variables don't work, though.