Search code examples
cssshorthand

Shorthand CSS is not same as longhand

As I said in the title, this shorthand:

.settingsSelect {
    background: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png') no-repeat, repeat 97%, 0;
    background-size: 12px, contain;
}

is displayed as

bad shorthand

and with proper longhand:

.settingsSelect {
    background-image: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png');
    background-position: 97%, 0;
    background-repeat: no-repeat, repeat;
    background-size: 12px, contain;
}

everything works as expected.

longhand

Where is the problem? Thanks.

Solution

  • The syntax in the shorthand version is incorrect. It should be:

    .settingsSelect {
  background: url('../images/Custom.Select.Background.png') no-repeat 97%, url('../images/Settings.Input.Background.png') repeat 0;
}

    Think of it as this:

    .selector {
  background: background1, background2, background3, etc;
}

    where background1, background2, etc are each a shorthand background of:

    url() repeat X%;