CODEWITHSUNDEEP
css
Marcus
Marcus

Reputation: 4480

CSS property with no value

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);

Upvotes: 2

Views: 6090

Answers (3)

jaredwilli
jaredwilli

Reputation: 12308

You can use the initial property value which will make the property use it's initial value, or the browsers default value. I'm not sure about the support for it but I'm pretty sure I've been using it for a long time now and it's always worked for me in at least IE8+.

color: initial;

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46559

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.

Upvotes: 6

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

A declaration without value, such as color:;, violates CSS syntax, so it’s not OK by the book. On the other hand, the CSS 2.1 specification defines mandatory error processing principles, which say that such a rule shall be ignored by the user agent (note that the spec explicitly mentions a missing property value as an example of “malformed declaration”).

This means that the value of the property will be determined by the user agent as if this part of your style sheet did not exist. Thus, the value will be defined by other style sheets that might be applied (including browser default style sheets, which define browser defaults for properties) or, in the absence of relevant settings in other style sheets, by the initial value of the property as designated in CSS specifications.

Upvotes: 9

Related Questions