SStory
asked on
Fall back for old browsers when using vw, vh
I have the following:
<div id="main" style="margin:auto;width:1 00vw;heigh t:100vh">
I can detect, with Javascript, if they are using a browser that doesn't support this. What is the best way to fall back to something that will at least display decently though, not perfectly.
My thoughts: If the user has an old browser, and/or has Javascript disabled, none of this will work. How can I have it do what I have shown, unless Javascript is enabled and detects an old browser? In other words if I put in a Javascript function in the above and they don't have it enabled it might mess up the site for the majority of users who have modern browsers.
Thanks
<div id="main" style="margin:auto;width:1
I can detect, with Javascript, if they are using a browser that doesn't support this. What is the best way to fall back to something that will at least display decently though, not perfectly.
My thoughts: If the user has an old browser, and/or has Javascript disabled, none of this will work. How can I have it do what I have shown, unless Javascript is enabled and detects an old browser? In other words if I put in a Javascript function in the above and they don't have it enabled it might mess up the site for the majority of users who have modern browsers.
Thanks
There is a polyfil for them
https://github.com/saabi/vminpoly
But you shouldn't be using them unless you can say you do not support IE8 at all.
https://github.com/saabi/vminpoly
But you shouldn't be using them unless you can say you do not support IE8 at all.
ASKER
@Slick812:
Javascript
When ran from a vb.net custom browser, returns IE 7.0.
However, http://caniuse.com/#feat=css-mediaqueries, shows IE 7.0 doesn't support @media queries. It also doesn't support vw, vh units per this:
http://caniuse.com/#feat=viewport-units
However, the following code (first section in css file, last part shows HTML:
Shows the red background even though it reports IE 7 which should not support and according to what I understand from you, ignore the mediaquery section.
I like your idea, but it doesn't seem to be working. Am I doing something wrong?
Javascript
var browser=get_browser();
var browserver=get_browser_version();
alert('You are using ' + browser + ' ' + browserver);
When ran from a vb.net custom browser, returns IE 7.0.
However, http://caniuse.com/#feat=css-mediaqueries, shows IE 7.0 doesn't support @media queries. It also doesn't support vw, vh units per this:
http://caniuse.com/#feat=viewport-units
However, the following code (first section in css file, last part shows HTML:
#leftcol {
float:left;
padding:5px;
width:136px;
height:100%;
text-align:center;
}
@media screen{
#leftcol {
float:left;
padding:5px;
width:17vw;
height:100%;
text-align:center;
background-color:red;
}
}
<!--HTML code here-->
<div id="leftcol">
some stuff is actually here
</div>
Shows the red background even though it reports IE 7 which should not support and according to what I understand from you, ignore the mediaquery section.
I like your idea, but it doesn't seem to be working. Am I doing something wrong?
ASKER
I can't seem to get the suggestion working, but a combination of javascript, php and dynamic loading of various scripts, with a page reload passing arguments to let the page dumb down to older browsers seems to work. It is not as good as the above would be if it had worked.
OK, I am on holiday now, and not in one location, little time.
first I will say that I forgot to completely give all of the info about @media screen, The @media screen is supported WAY BACK, as it was for the printer page difference, BUT you did NOT look at the spec I gave -
@media screen and (max-width: 4010px){
the max-width: is what actually what does it. This works on IE-9 and above, on iOS Safari 6.0 and above (iphone), and Android Browser 4.0 and above. Please Notice That I use a very high number here 4010px, as laptops and phones now have displays 3200 pixels , using 4010px will have this happen in all broswers that can read the max-width spec.
As a note - the vw and vh seem to be poorly supported and not only that, seem to have a limited usefulness, I only fould a legitimate reason for using it as a FONT size adjustment, it was not a better solution for a <div> width or height spec, at least for me and how I do responsive pages.
Here is some additional Info, you CAN use subsequent CSS declarations to get backwards compatibility (I have already mentioned) this is an Actual css that I use in almost ALL pages I build -
.inblk {
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block;
vertical-align:top;
zoom:1;
*display:inline;
}
using this I can Get the newer display:inline-block; spec in most OLDER browsers Including Internet Explorer 5.2. . .
Because, all browsers will start at the first css spec that they understand for display: , and then if there is another display: spec after it, that it can understand (use), it will automatically use the later spec, not the one before it. This may be the BEST rout for you, , if you insist on using the poorly supported vh and vw CSS spec something like this -
<div id="dvTop" style="margin:5px auto; width:31.21345%; width:29.531vw;">
since the width:29.531vw; is after the width:31.21345%; , any browser that can use vh , will use that instead of the first percentage width: spec., and those that CAN NOT use vh , will be using the percentage width.
Also, if you are building web pages, you really should study and learn How, and Why to effectively use the media - max-width -
@media screen and (max-width: 800px){ }
for me and many others, this opens up your ability to do responsive pages for laptops, tablets and very small cells
here is a site (and there are others) that can give you CSS , HTML5, Javascript, and SVG compatibility info -
http://caniuse.com/
Unfortunately there are many, many CSS factors that can be addressed for various things to Fall back for old browsers. For me I avoid using the viewport vh and vw, because of the few alternate android browsers that fully support it, and laptop browsers that do not fully support it.
first I will say that I forgot to completely give all of the info about @media screen, The @media screen is supported WAY BACK, as it was for the printer page difference, BUT you did NOT look at the spec I gave -
@media screen and (max-width: 4010px){
the max-width: is what actually what does it. This works on IE-9 and above, on iOS Safari 6.0 and above (iphone), and Android Browser 4.0 and above. Please Notice That I use a very high number here 4010px, as laptops and phones now have displays 3200 pixels , using 4010px will have this happen in all broswers that can read the max-width spec.
As a note - the vw and vh seem to be poorly supported and not only that, seem to have a limited usefulness, I only fould a legitimate reason for using it as a FONT size adjustment, it was not a better solution for a <div> width or height spec, at least for me and how I do responsive pages.
Here is some additional Info, you CAN use subsequent CSS declarations to get backwards compatibility (I have already mentioned) this is an Actual css that I use in almost ALL pages I build -
.inblk {
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block;
vertical-align:top;
zoom:1;
*display:inline;
}
using this I can Get the newer display:inline-block; spec in most OLDER browsers Including Internet Explorer 5.2. . .
Because, all browsers will start at the first css spec that they understand for display: , and then if there is another display: spec after it, that it can understand (use), it will automatically use the later spec, not the one before it. This may be the BEST rout for you, , if you insist on using the poorly supported vh and vw CSS spec something like this -
<div id="dvTop" style="margin:5px auto; width:31.21345%; width:29.531vw;">
since the width:29.531vw; is after the width:31.21345%; , any browser that can use vh , will use that instead of the first percentage width: spec., and those that CAN NOT use vh , will be using the percentage width.
Also, if you are building web pages, you really should study and learn How, and Why to effectively use the media - max-width -
@media screen and (max-width: 800px){ }
for me and many others, this opens up your ability to do responsive pages for laptops, tablets and very small cells
here is a site (and there are others) that can give you CSS , HTML5, Javascript, and SVG compatibility info -
http://caniuse.com/
Unfortunately there are many, many CSS factors that can be addressed for various things to Fall back for old browsers. For me I avoid using the viewport vh and vw, because of the few alternate android browsers that fully support it, and laptop browsers that do not fully support it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
maybe like -
.blusec{width:20em;height:
@media screen and (max-width: 4010px){.blusec{width:100v
you will need to try different settings for the various layouts and responsive (and NON responsive for old) factors that are in your page, there is not a one size fits all solution for the vw use that I know of, as having a phone responsive display will be dependent on the sectional relationships for width and height.
you can also use the way CSS reads the settings, you can place the older setting first, and the newer setting after, so the old will read and use the first and the newer will over ride the first with the last one it can understand -
<div style="width:100%; width:100vw;">