W3C home > Mailing lists > Public > www-style@w3.org > September 2011

[css3-values] initial keyword (was RE: Splitting background-position in two different attributes)

From: Brian Manthos <brianman@microsoft.com>
Date: Wed, 28 Sep 2011 10:09:13 +0000
To: "L. David Baron" <dbaron@dbaron.org>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: √ėyvind Stenhaug <oyvinds@opera.com>, Alan Gresley <alan@css-class.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D1718106D@TK5EX14MBXC265.redmond.corp.microsoft.com>
The topic of initial was still bothering me from an inter-op and backwards compatibility standpoint.  I finally took another look at it.

With the replacement of "what initial maps to" with "initial keyword", pages will change in behavior.

See the example below.  In IE9 and Firefox 7, the 3rd and the 2nd DIV render the same (clip is set to match origin which is 'padding-box').  In Chrome "14.0.835.186 m", the 3rd DIV renders the same as the 1st DIV (clip is set to match origin which is 'initial' and thus treated as 'border-box').

Is this a concern or an expected victim of the change (addition of initial keyword in section 3.1.1 of CSS3 Values WD)?

Independent of that, this represents a good example of where adding (what should be) prefixed support for a new keyword introduces interoperability issues between browsers that would otherwise be compatible.  I say "what should be" because (as previously discussed) webkit should not be returning "initial" but rather "-webkit-initial"; but that's just a bug.

To address the interoperability issue, one could make the argument that style should not be returning even "-vendorprefix-initial" but rather (1) style should continue to return "padding-box" until the initial keyword can be unprefixed and (2) in the interim vendorprefixedStyle should be the mechanism that can return "-vendorprefix-initial".

Or am I misunderstanding the correct way to address interoperability and conformance w/r/t vendor prefixing?




<!doctype html>
<style>
div {
	width: 100px;
	height: 50px;
	border: 15px double red;
	margin: 10px;
}
</style>
<div style="background: blue;"></div>
<div style="background: blue; background-clip: padding-box;"></div>
<div style="background: blue;"></div>
<script>
//alert(document.getElementsByTagName("div")[2].style.backgroundOrigin);
document.getElementsByTagName("div")[2].style.backgroundClip =
	document.getElementsByTagName("div")[2].style.backgroundOrigin;
</script>
Received on Wednesday, 28 September 2011 10:09:52 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:44 GMT