RE: ideas for future css versions ...

W. Leon Sutton, Jr. wrote:
> I am curious, however, about the four-digit shorthand version.  It
> was my understanding that the three-digit shorthand for the
> hexidecimal color palette was double the digits, yes, but not in the
> way you proposed for the four-digit shorthand of the RGB-A palette.
> 
> In other words, #123 would indeed be #123123.

No.

> My understanding is that #1234 would be #12341234.

No.

> Is my understanding flawed?

Yes.

> Should it be #112233 and #11223344, instead?

Yes.

But don't take my word for it.  Try it for yourself (see below)

Matthew.van.Eerde@hbinc.com                      805.964.4554 x902
Hispanic Business Inc./HireDiversity.com         Software Engineer
perl -e"map{y/a-z/l-za-k/;print}shift" "Jjhi pcdiwtg Ptga wprztg,"

<html>
<head>
<script>
function color_recalculate()
{	var form;
	var col;
	var el;

	form = document.getElementById("color_form");

	// three-digit first
	el = document.getElementById("three_digit");
	col =
		"#" +
		form.red.value +
		form.green.value +
		form.blue.value;

	el.style.backgroundColor = col;
	el.innerHTML = col;

	// six-digit second
	el = document.getElementById("six_digit");
	col =
		"#" +
		form.red.value + form.red.value +
		form.green.value + form.green.value +
		form.blue.value + form.blue.value

	el.style.backgroundColor = col;
	el.innerHTML = col;
}
</script>
</head>
<body>

<form id="color_form" onsubmit="return false;">
<table>
	<tr>
		<td>Red<br />
<select name="red" onchange="color_recalculate();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option selected>f</option>
</select>
		</td>
		<td>Green<br />
<select name="green" onchange="color_recalculate();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option selected>f</option>
</select>
		</td>
		<td>Blue<br />
<select name="blue" onchange="color_recalculate();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option selected>f</option>
</select>
		</td>
	</tr>
</table>
</form>

<table style="width: 300px;">
	<tr>	<td style="width: 100px; background-color: #fff;"
			id="three_digit"
		>#fff
		</td>
		<td style="width: 100px; background-color: #ffffff;"
			id="six_digit"
		>#ffffff
		</td>
	</tr>
</table>

</body>
</html>

Received on Friday, 10 September 2004 15:43:15 UTC