Putting -moz-available and -webkit-fill-available in one width css property

Question

I want to make the width of the footer browser-independent.

For Mozilla I want to use the value of -moz-available, and when a user uses Opera, then CSS should get the values from -webkit-fill-available.

How to do this in CSS3?

I tried to do something like this:

width: -moz-available, -webkit-fill-available;

This won't give the desired results.

User · Answer

I needed my ASP NET drop down list to take up all available space  and this is all I put in the CSS and it is working in Firefox and IE11  width  100   I had to add the CSS class into the asp DropDownList element

User · Answer

CSS will skip over style declarations it doesn t understand  Mozilla-based browsers will not understand -webkit-prefixed declarations  and WebKit-based browsers will not understand -moz-prefixed declarations   Because of this  we can simply declare width twice   elem       width  100       width  -moz-available              WebKit-based browsers will ignore this         width  -webkit-fill-available      Mozilla-based browsers will ignore this         width  fill-available      The width  100  declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available

[css] Putting -moz-available and -webkit-fill-available in one width (css property)

The answer is

Examples related to css

Examples related to responsive-design

Tags