Which Is Better, #Fff or #Fff

Which is better, #fff or #FFF?

Neither;

color: white;

In all seriousness, tho', it doesn't matter so long as it matches the general design of your site. (For example, SO or FB should use #FFF, while, say, Apple would use #fff. Matches the rounded corners better, you see?)

CSS: Which is faster for the browser? color:#fff; or color:#ffffff;

#fff is fewer characters, which is generally better. Network latency and bandwidth matter more than processing time in most cases. For this reason, most CSS compressors will intelligently optimize to the #fff version. The network matters more than parsing speed in this case.

If you're concerned about parsing time, I doubt the difference between the 2 declarations accounts for even 0.005% of total parsing time. There are much bigger bottlenecks that dwarf any speed difference compared to parsing color declarations.

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

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>

Is it better to use #fff rather than white and #000 rather than black?

The hex colors are already a universal "language" ... no need to over-think this with exceptions. Best to be consistent and always use hex values for everything.

Why use #fff color on body?

This is somewhat subjective, but here are a few reasons you might want to do that.

There is no standard background color for a page, even though pretty much all browsers will use white. It is generally a good idea not to rely too heavily on defaults in case they change. While it is unlikely that this specific case will change, some people will avoid exceptions and never rely on defaults. EDITED: Modern Firefox actually lets you pick the default color for pages. I'm now using it to view markdown-generated HTML1 files and text files in white-on-black. So a site not specifying background color but specifying text color would be black on black for me.

Also, as the Zen of Python says: explicit is better than implicit. Whether you agree or disagree is up to you. When I look at the CSS for the html and body elements, I like seeing background. It makes it obvious. I don't have to ask myself if there's another place where the background might be set. But then again, this is subjective. Others will say it makes the code longer to read for no reason.

A much more plausible explanation is that big websites tend to use another language to make their stylesheets and then compile them to CSS. They use variables for most colors so that the palette can be easily altered without having to search and replace the color values everywhere manually. They'll extract the site's background color to a variable as well. I do that very often, but the result is that if I settle for a white background, the compiled CSS will include background: #fff;. Why specifically #fff? Because the compiler prefers using as little characters as possible to represent a color, and white would be longer.

What are fixed format files and how is XML better than them?

The biggest advantage of a FFF over XML is built-in capability of index-based random-access. The contra-positive is obvious, the biggest disadvantage of XML compared to FFF is the linear fashion in which it must be parsed.

Suppose you have a data file holding person records. The records can hold an id, name, address, and telephone number.

Fixed Format

ID          : 8 chars
Surname     : 36 chars
Firstname   : 36 chars
Address     : 100 chars
Phone       : 20 chars
-----------------------
Total Space: 200 chars

XML Format (contrived, could be a number of formats)

<Person id="...">
   <Surname>...</>
   <Firstname>...</>
   <Address>...</>
   <Phone>...</>
</Person>

Total Space : Variant

Now, suppose this has 1000 "records" Lets see how difficult it is to get to the 600th person record with both forms.

Fixed Format

Offset = (600-1)*200 = 119800 bytes
fseek() + fread() = done

XML Format

Um..... 

XML's biggest forte is extensibility (that X didn't come from nothing). XML makes a fantastic data-snippet, RSS feed, configuration file, etc. It is easy to emit without special libraries and only basic knowhow, and can be reasonable in storage space (so long as you don't go <LoveThoseSuperDuperLongElementNames> nuts). It is easy to understand, backed by boatloads of standards, and just about everyone that's anyone has an XML parser in their toolkit. Universal "understanding" is just a schema document (DTD for the old-schoolers) away, as is validation, etc.

But XML's biggest downside has been, is now, and until quantum computing leaps a long way, always will be: speed. XML is a terrible throughput-mandated storage system.

Is there a performance difference between the different css color formats

From what I read in the article I linked below using HEX code is better but not by much we are talking if you have 100,000 colors in your code then it will create 1ms difference between them.

but you can visit this link to get a more meaning full understanding of why is doesn't make that much of a difference

and to see if it really makes a difference run an audit on your website and see the performance difference for each and see which one is better if any.
Link to answer

Why does LESS convert #fff to white?

Differences between less.js and dotless

Color compression

In dotless we favour the color keyword over the hex code, if one matches. When compressing it chooses whichever is shorter.. e.g. #FFF, #FFFFFF, white then #FFF will be chosen, but in the case of red, the keyword red will be used.

In less.js every colour is replaced with a hex code.

The above quote is from the official Dotless GitHub page.

Notes:

1. The second part of that quote sounds a bit contradictory to the first one but I think the first statement is clear enough on the expected behavior.
2. As pointed out by seven-phases-max in his comment they were planning to fix this and as per Issue #332's log the DisableColorCompression flag has already been added to disable this compression.
3. The color keyword to hex code mapping seems to be maintained in Color.cs source file.
4. Issue 317 and Issue 168 are two other similar issues which are still in open status, so I am not sure if the DisableColorCompression flag addresses the hex code to color name conversion item fully.

What is the best way to specify color in CSS?

I always use full Hex code e.g : #3c3c3c , #212121 etc It is a good Practice to use proper hex codes.
Also Names of color can be used if you know the color better and don't need the hex code for it. Easy work.

Use :

.container{
     background-color: #ffffff ; /* or */
     background-color: white;
}

RGB abd RGBA can also be used but most of the designer prefer HEX short and easy to remind.
I use RGBA for Transparent color.

---

Related Topics