Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does style="color: #FFF;" render as #F0F0F0 or #FFFFFF?

Tags:

html

css

hex

colors

When defining colors using "shorthand hexidecimal" (style="color: #FFF;"), is there a defined method for expanding the shorthand? (style="color: #F0F0F0;" or style="color: #FFFFFF;")

Do all browsers use the same expansion method? Is this behavior by specification (if so, where is it defined)? Does the expansion method perhaps vary between CSS 1/2/3?

I've observed that "most browsers" expand to #FFFFFF.

Are there any other places (outside of HTML/CSS) where this shorthand notation is allowed, but the expansion method is different?

I've always avoided using shorthand hex, because I've never known the answers to these questions...

like image 857
Dolph Avatar asked May 24 '10 18:05

Dolph


People also ask

How do I add color to a style?

To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.

What is a CSS color?

The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

Does style go in body?

Defining HTML Inline StyleYou can place HTML style tags in <head> or <body> elements. We'd recommend choosing the first option, as that allows you to keep the content and styling information separate. Note: you can also use <link> elements to apply styles kept in external stylesheets.


2 Answers

CSS 2.1 (http://www.w3.org/TR/CSS2/syndata.html#value-def-color):

The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

Wordings of CSS 1, CSS 3 are the same. The CSS 4 draft say similar things.

The Internet Explorer and Firefox docs state the same method.

As a practical example, please check out this snippet, which features 3 <div>s of styles

div { width: 100px; height: 100px;  }
<div style="background-color:#f0f0f0;">#f0f0f0</div>  <div style="background-color:#fff;">#fff</div>  <div style="background-color:#ffffff;">#ffffff</div>

On Mac OS X 10.6, all Firefox 3.6, Opera 10.10, Safari 4 rendered #fff as #ffffff.

Behavior in different browsers

I don't see a reason why a browser or the standard wants to deviate from this expansion in the future, since the color #ffffff is far more common than #f0f0f0.

like image 82
kennytm Avatar answered Sep 17 '22 18:09

kennytm


The CSS2 spec section 4.3.6 Colors:

The RGB color model is used in numerical color specifications. These examples all specify the same color:

em { color: #f00 }              /* #rgb */ em { color: #ff0000 }           /* #rrggbb */ em { color: rgb(255,0,0) }       em { color: rgb(100%, 0%, 0%) } 

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

Since all modern browsers support CSS you can assume it will work this way in your web sites and web applications.

like image 26
Brian R. Bondy Avatar answered Sep 16 '22 18:09

Brian R. Bondy