CODEWITHSUNDEEP
htmlcsscross-browser
Sagar Bhosale
Sagar Bhosale

Reputation: 407

Can we have css style attribute more than once?

#my_div{
  width: -moz-max-content;  /* mozila browser support */
  width : -webkit-max-content;  /*chrome and safari browser support*/
}

This code is working for my style.But I am not sure about whether its legal or not. Is it a correct way to specify width depending upon browser type?

Upvotes: 1

Views: 75

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

They are property values, not attributes. They are both invalid, i.e. they do not conform CSS specifications. They are still the way to go if you wish to use such features; cf. How to validate vendor prefixes in CSS like -webkit- and -moz-?

Note that these settings has any effect on browsers that do not recognize either of the browser-prefixed values. The width would thus be determined by other CSS settings, or ultimately browser defaults. Therefore, consider putting some suitable “fallback” setting before these settings.

Upvotes: 0

Justinas
Justinas

Reputation: 43479

Yes, it's ok. Let's assume we use Mozilla browser. First width takes effect, than css parser reads second width, checks it's value as -webkit-max-content;, and for Mozilla browser it's not valid, so it's ignored and falling back to previous width, that is width: -moz-max-content;. Chrome will ignore first width for Mozilla browser.

Example of these attribute values may be find here

Upvotes: 1

Xlander
Xlander

Reputation: 1331

Yes it is, as depending on the browser used the style will take the only style which works with it.

Here is an example for a linear gradient in background

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Upvotes: 1

Related Questions