Css \9 in Width Property

CSS \9 in width property

\9 is a "CSS hack" specific to Internet Explorer 7, 8, & 9.

This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9.

In your example,

width: 500px\9; means that a width of 500 pixels (same result as width: 500px;) will only be applied while using IE 7, 8, & 9.

All other browsers will ignore width: 500px\9; entirely, and therefore not apply width: 500px; to the element at all.

If your CSS looked like this...

#myElement {
    width: 300px;
    width: 500px\9;
}

The result would be #myElement 500 pixels wide in IE 7, 8, & 9, while in all other browsers, #myElement would be 300 pixels wide.

More info

EDIT:

This answer was written in 2011. It should now be noted that this hack also works in IE 10.

What does it mean when you add \9 to the end of a CSS color?

It's a hack for old version of Internet Explorer. This basically means that this rule will apply on IE7-9, and ignored by all other browsers.

What does outline: thin dotted \9 mean in CSS?

That means that outline: thin dotted \9; online will be applied when the client uses IE6-9, what is also commented under that line (/* IE6-9 */)

In case your question wasn't primarily about the \9: The line outline: thin dotted causes your input to have a thin dotted outline when it's focussed.

Fiddle with outline applied.

What is overflow:scroll\9 or height:100%\9?

The \9 is a hack For Internet Explorer 8 or below. That rule is only read for this explorers.

See more here http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

Why isn't there a shorthand property for width and height in CSS?

Short answer: The CSSWG couldn't agree on a name for the shorthand property yet.

The idea isn't new and a lot of people suggested it every now and then over the years. However, there's a current proposal [css-sizing] Adding a 'size' shorthand for 'width'/'height' from the CSSWG (CSS Working Group).

A lot of things have been discussed already, but a few are still unresolved. Here are some examples:

What is the proper name?

Some of the names that where suggested:

size: clashes with the @page's size-property
dimensions: probably too long or difficult to spell
box-size: probably too close to box-sizing

How will it work?

Should it be:

<box-size>: <width> <height>?

… or closer related to other properties like padding or margin:

<box-size>: <height> <width>?

Also: Should it support an additional parameter that will keep the aspect ratio?

Who's going to support it?

Which vendors will support the proposal and the syntax itself?
Will it enhance the author's experience, so that people will actually use it?

As you can see, there might be a shorthand notation in the future, as the CSSWG said recently in their Minutes Telecon on 2017-08-16:

The group agreed that a shorthand for ‘width’/’height’ would be good, but shouldn’t be called ‘size’. However, there wasn’t time to come up with a different name.

That being said, of course you can use a CSS pre-processor, to make your life easier. For example, I have a mixin in LESS, that looks like this:

.size(@a: null, @b: null) {
    & when not (null = @a) {
        width: @a;
    }

    & when (null = @b) {
        height: @a;
    }

    & when not (null = @b) {
        height: @b;
    }
}

Which is as simple as this:

.size(100%, 50%);

width: 100%;
height: 50%;

… and it supports square elements as well:

.size(100%);

width: 100%;
height: 100%;

Ember.js - Update CSS width based on an object property

The style property has to be bound with bindAttr, passing the style as a whole, not just one of the properties, as it doesn't understand that. This property only gives you access to the style as a string, targeting the immediate element. It's not possible to bind to a property of the style if you define it like that.

So here's my sugestion: I've created a couple of "model" classes like the following, implementing a property that returns the width in pixels:

var WidthEnabledModel = Em.Object.extend({
    width: 100,
    unit: "px",
    widthString: function() {
        return 'width: %@%@'.fmt(this.width, this.unit);
    }.property('width', 'unit')            
});

App.SampleModel = WidthEnabledModel.extend({
    itemName: ''
});

Then, for each item in your collection I'm binding that property to the style attribute:

<script type="text/x-handlebars" data-template-name="sample">
    <div id="sample_area" style="width: 250px;">
    {{#each thing in controller.content}}
      <div class="item" {{bindAttr style="thing.widthString"}}>
          {{thing.itemName}}<br />
          {{thing.widthString}}
      </div>
    {{/each}}
    <div>
</script>

Follow the example with full code I've made at jsfiddle here http://jsfiddle.net/schawaska/ftWZ6/

Edit:
I've made some changes in the fiddle to add more feature, but the part to set the width stays the same.

Css \9 in Width Property