Re: Extended shorthand for hex colours

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Simon Pieters-3
On Thu, 15 Jan 2015 08:59:11 +0100, Ryan Williams  
<[hidden email]> wrote:

> Hexadecimal notation is commonly used for defining colours in CSS, but  
> the shorthand is lacking. Right now we can use #CCC which would be  
> expanded to #CCCCCC, but that's pretty much it.
>
> Wouldn't it be nice if we built upon the principles of the existing  
> shorthand -- repeating the defined characters -- to provide more options?
>
> For example:
>
> 1. #C expands to #CCCCCC
> 2. #C3 expands to #C3C3C3

I think this is just confusing. #abc is expanded to #aabbcc, not #abcabc.  
With your proposal you can only express grays, which is not particularly  
useful, and it is not clear from the syntax what it means. Also, it might  
not be Web-compatible to support 1-2 character hex colors. I think it is  
more useful to say that the above are invalid as they are probably typos,  
so that a validator can point out the error.

> 3. #CCC expands to #CCCCCC
>
> These two extra shorthand formats would allow a lot of hex colours to be  
> typed and/or transmitted across networks more efficiently.

Just use gzip.

> I don't think it'd make sense to allow for four- or five-character  
> shorthand, as the defined characters could not be repeated in full.
>
> Kind regards,
>
> --
> Ryan Williams


--
Simon Pieters
Opera Software

Reply | Threaded
Open this post in threaded view
|

RE: Extended shorthand for hex colours

Ryan Williams
Thanks for the reply. As I so frequently use shorthand to produce greys, I hadn't realised that the expansion uses the format #aabbcc rather than #abcabc. This renders my suggestion less intuitive than I thought.

Out of interest, I took a look around to see whether any of the (pre-)processors out there tackle this issue. Emmet (formerly Zen Coding) seems to use what I suggested:

• #1 -> #111111
• #e0 -> #e0e0e0
• #fc0 -> #ffcc00

I guess the fact that this functionality exists is an indication that at least some developers would enjoy even shorter shorthand, even if it's only useful for greys — which unlike many tones are in almost every style sheet. Shorthand is ultimately arbitrary and there to speed up development; typos might occur and cause an unexpected result, but that applies to many things in CSS.

The real problem is that web browsers not used to this format would likely render no colour at all, which is a very big obstacle to backwards compatibility due to how critical to a website's readability these values often are. I can't think of a way around that, rendering this idea nice to think about but probably best left to pre-processors.

--
Ryan Williams


> To: [hidden email]; [hidden email]

> Subject: Re: Extended shorthand for hex colours
> Date: Thu, 22 Jan 2015 15:28:02 +0100
> From: [hidden email]
>
> On Thu, 15 Jan 2015 08:59:11 +0100, Ryan Williams
> <[hidden email]> wrote:
>
> > Hexadecimal notation is commonly used for defining colours in CSS, but
> > the shorthand is lacking. Right now we can use #CCC which would be
> > expanded to #CCCCCC, but that's pretty much it.
> >
> > Wouldn't it be nice if we built upon the principles of the existing
> > shorthand -- repeating the defined characters -- to provide more options?
> >
> > For example:
> >
> > 1. #C expands to #CCCCCC
> > 2. #C3 expands to #C3C3C3
>
> I think this is just confusing. #abc is expanded to #aabbcc, not #abcabc.
> With your proposal you can only express grays, which is not particularly
> useful, and it is not clear from the syntax what it means. Also, it might
> not be Web-compatible to support 1-2 character hex colors. I think it is
> more useful to say that the above are invalid as they are probably typos,
> so that a validator can point out the error.
>
> > 3. #CCC expands to #CCCCCC
> >
> > These two extra shorthand formats would allow a lot of hex colours to be
> > typed and/or transmitted across networks more efficiently.
>
> Just use gzip.
>
> > I don't think it'd make sense to allow for four- or five-character
> > shorthand, as the defined characters could not be repeated in full.
> >
> > Kind regards,
> >
> > --
> > Ryan Williams
>
>
> --
> Simon Pieters
> Opera Software
Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Tab Atkins Jr.
In reply to this post by Simon Pieters-3
On Wed, Jan 14, 2015 at 11:59 PM, Ryan Williams
<[hidden email]> wrote:

> Hexadecimal notation is commonly used for defining colours in CSS, but the
> shorthand is lacking. Right now we can use #CCC which would be expanded to
> #CCCCCC, but that's pretty much it.
>
> Wouldn't it be nice if we built upon the principles of the existing
> shorthand -- repeating the defined characters -- to provide more options?
>
> For example:
>
> 1. #C expands to #CCCCCC
> 2. #C3 expands to #C3C3C3
> 3. #CCC expands to #CCCCCC
>
> These two extra shorthand formats would allow a lot of hex colours to be
> typed and/or transmitted across networks more efficiently.
>
> I don't think it'd make sense to allow for four- or five-character
> shorthand, as the defined characters could not be repeated in full.

As other people have said, this has been proposed in the past.  It's
also been rejected in the past - the only expansion to the hex syntax
we accepted was to add alpha to it, written as a 4/8 digit hex number.

As Simon says, the WG is generally of the opinion that expanding
2-digit hex in the way you suggest is confusing, because it expands in
a different way than 3/4 digit hex does.  The single-digit hex doesn't
suffer from this problem, but it's also less useful, only allowing you
to specify 16 shades of gray, and save two characters doing so.

That said, the underlying purpose of 1/2 digit hex - making it easier
to specify grayscale without repetition - has been addressed, with a
gray() function in Colors 4.
<http://dev.w3.org/csswg/css-color/#grays>  You can provide a
percentage (0% to 100%) or decimal number (0 to 255) to define a gray,
without having to repeat yourself (as in rgb()) or specify additional
junk information (as in hsl()).  It also allows specifying alpha,
which is something that can't be done with a grayscale hex notation
(as it would clash with the 3-digit hex notation, not to mention
having an even more confusing expansion rule).

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Pradeep Kumar
What if we can use last two characters for alpha?

Yours
Pradeep Kumar
+91-9582565432
http://prady00.com/

On Fri, Jan 23, 2015 at 12:24 AM, Tab Atkins Jr. <[hidden email]> wrote:
On Wed, Jan 14, 2015 at 11:59 PM, Ryan Williams
<[hidden email]> wrote:
> Hexadecimal notation is commonly used for defining colours in CSS, but the
> shorthand is lacking. Right now we can use #CCC which would be expanded to
> #CCCCCC, but that's pretty much it.
>
> Wouldn't it be nice if we built upon the principles of the existing
> shorthand -- repeating the defined characters -- to provide more options?
>
> For example:
>
> 1. #C expands to #CCCCCC
> 2. #C3 expands to #C3C3C3
> 3. #CCC expands to #CCCCCC
>
> These two extra shorthand formats would allow a lot of hex colours to be
> typed and/or transmitted across networks more efficiently.
>
> I don't think it'd make sense to allow for four- or five-character
> shorthand, as the defined characters could not be repeated in full.

As other people have said, this has been proposed in the past.  It's
also been rejected in the past - the only expansion to the hex syntax
we accepted was to add alpha to it, written as a 4/8 digit hex number.

As Simon says, the WG is generally of the opinion that expanding
2-digit hex in the way you suggest is confusing, because it expands in
a different way than 3/4 digit hex does.  The single-digit hex doesn't
suffer from this problem, but it's also less useful, only allowing you
to specify 16 shades of gray, and save two characters doing so.

That said, the underlying purpose of 1/2 digit hex - making it easier
to specify grayscale without repetition - has been addressed, with a
gray() function in Colors 4.
<http://dev.w3.org/csswg/css-color/#grays>  You can provide a
percentage (0% to 100%) or decimal number (0 to 255) to define a gray,
without having to repeat yourself (as in rgb()) or specify additional
junk information (as in hsl()).  It also allows specifying alpha,
which is something that can't be done with a grayscale hex notation
(as it would clash with the 3-digit hex notation, not to mention
having an even more confusing expansion rule).

~TJ


Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Tab Atkins Jr.
On Fri, Jan 23, 2015 at 4:05 AM, Pradeep Kumar
<[hidden email]> wrote:
> What if we can use last two characters for alpha?

I addressed that in the email you responded to:

> It also allows specifying alpha,
> which is something that can't be done with a grayscale hex notation
> (as it would clash with the 3-digit hex notation, not to mention
> having an even more confusing expansion rule).

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Pradeep Kumar

Nice idea in fact. +1.

On Jan 23, 2015 11:54 PM, "Tab Atkins Jr." <[hidden email]> wrote:
On Fri, Jan 23, 2015 at 4:05 AM, Pradeep Kumar
<[hidden email]> wrote:
> What if we can use last two characters for alpha?

I addressed that in the email you responded to:

> It also allows specifying alpha,
> which is something that can't be done with a grayscale hex notation
> (as it would clash with the 3-digit hex notation, not to mention
> having an even more confusing expansion rule).

~TJ
Reply | Threaded
Open this post in threaded view
|

Re: Extended shorthand for hex colours

Christoph Päper-2
In reply to this post by Tab Atkins Jr.
1½ years ago, Tab Atkins Jr. <[hidden email]>:

> On Wed, Jan 14, 2015 at 11:59 PM, Ryan Williams
>>
>> 1. #C expands to #CCCCCC
>> 2. #C3 expands to #C3C3C3
>> 3. #CCC expands to #CCCCCC
>
> As Simon says, the WG is generally of the opinion that expanding
> 2-digit hex in the way you suggest is confusing, because it expands in
> a different way than 3/4 digit hex does.  The single-digit hex doesn't
> suffer from this problem, but it's also less useful, only allowing you
> to specify 16 shades of gray, and save two characters doing so.

Exactly. If anything, `#C3` should expand to `#CCCCCC33`, i.e. a gray with alpha.