Question

I’m designing a GUI for users to create web buttons. I’m wondering if it’s ok to not enter a value for a CSS property?

I’ve looked into inserting a property’s default value if a user doesn’t select one. But I run into a problem with properties that have no default value like “color”. I found a reference for all CSS properties at: https://developer.mozilla.org/en/CSS/CSS_Reference

I’ve tested it in the most recent versions of all 5 major browsers and it seams to work fine; but I’m not sure if that will always hold true in the future. I have considered programmically, with PHP, removing the entire property if a user doesn’t choose a value for it. But I want to know what your thoughts are on using CSS properties without specifying a value before doing that?

CSS:

.btn {
    background-color: #000000;
    border-color: #666666;
    border-style:;
    border-width:2px;
    color:;
}

EDIT

Here is my solution:

I simply remove any CSS properties that are not defined by the user with PHP.

$css = preg_replace('/[\n\r].+:;/i', '', $css);

Answer 1

While properties do have default values in some cases(*), it usually doesn’t work that way. What the specs do is provide initial values, which are usually mentioned in the specs. color is one of the few exceptions in that the default value is the value of the user preference (in Firefox, Edit -> Preferences -> Content -> Colors -> Text). Most others do have well-defined initial values, e.g. for border-style it’s none.

This is the official W3C documentation, which is the standard:
http://www.w3.org/TR/CSS21/

To be absolutely clear, properties must have a value according to the rules. A property without a value is an error and will be ignored.

(*) Example: in shorthands like border:green, you don’t have to specify border-style and border-width and those are then set to their default (initial) values.