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

Question

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?

Answer 1

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: http://www.w3.org/TR/CSS21/syndata.html#parsing-errors