CSS: Will a nonsense value for the 'display' property cause problems?

I am using a CMS that allows data place holders with braces, like so:

Name: {First_Name} <br>
Email: {Email} <br>
Phone: {Phone} <br>

However it doesn't give me any way to do conditional output, like I can't hide the Phone line if the phone field is blank.

The CMS doesn't allow javascript or server side code. I came up with this trick:

Name: {First_Name} <br>
Email: {Email} <br>
<div style="display:none{Phone}">Phone: {Phone} <br></div>

If the person has no phone number, the div ends up display:none, but if they do, the div ends up with a nonsense value for display, and the whole div shows up.

It works in IE8, IE9, FF14, Chrome

Any reason I shouldn't do this?

No, that's absolutely fine; a value that's not understood by the browser, in CSS, doesn't result in an error, it simply ignores that value and displays the element with its default setting for that property.

> [For] illegal values. User agents must ignore a declaration with an illegal value. For example:

> img { float: left } /* correct CSS 2.1 */
img { float: left here } /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted */
img { border-width: 3 } /* a unit must be specified for length values */

> A CSS 2.1 parser would honor the first rule and ignore the rest, as if the style sheet had been:

> img { float: left }
img { }
img { }
img { }

Citation:

[To see links please register here]