I used display:flex; in every css file of my site but now it is working fine in google chrome but in UC Browser(phone) it is not working.It is just skipping flex and showing items vertically.How can i correct this without changing the full coding of the site.
Thank you
Please note that most web standards are not supported in UC browser along with the fact that it removes some css and js from web pages for faster page load.
Still, it uses WebKit as its rendering engine, so you can try to support Webkit as much as possible and you'll be good to go. Furthermore, tools like auto-prefixer will fix most of the cross-browser issues.
It's best to consider caniuse.com to check which features are supported by your target browser.
It depends on how you've structured your css. display:felix; doesn't work in all browsers. This is why it's important to research your css and browser compatibility.
Use this caniuse.com
Use display:-webkit-flex;
I think display:flex; isn't supported in UC.
i think this is right for flex
display:-ms-flexbox; //for ie older version
display:-webkit-flex; //for chrome older version,firefox older version,safari
display:-webkit-box; //for android ucbrowsers forever,i think you gonna try this line
display:flex; //for all new versions browsers like chrome 66 and above firefox 46 and above ie11 and above eventhough safari , opera and some more newversion browsers can support this line
you can go for this line in ucbrowsers in mobile or pc => display:-webkit-box;
if you want inlie-flex try this and it's works display:-webkit-inline-box;
Related
Is there anyway to check if a given CSS property is supported? For example, I want to do an animation on a page using perspective-origin, but if not available I would just alter the size instead.
there are many css-hacks for browsers but for that you need to handle yourself each css property for all browsers
CSS Hacks
but if you want automatically handled all the browser for CSS3 and html5 then use Modernizr
Supported browsers
It support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile.
Use http://caniuse.com/ website to check how your property is supported by different versions of web-browsers. You can load different styles according to client's browser version.
Also, you can emulate not-supported properties in old browsers by using CSS3PIE (http://css3pie.com/).
you can include modernizr.js which will be helpful for your issue.
you may visit the following link which was helpful when i was learning about it.
http://css-tricks.com/video-screencasts/126-using-modernizr/
I'm creating a TV weekly schedule for printing and I need more space in paper because of my large table. I found a CSS rule that helps you change the margin of pages in printing, like following example:
#page {
margin: 0.5cm;
}
I'm wondering do all the browsers support this feature? And if they do, which versions?
And if they don't, is there any alternatives?
Here is the compatibility report : http://www.browsersupport.net/CSS/#page
Looks like it is supported in most versions of Chrome and Opera, and Internet Explorer 8 and above, and current versions of Firefox.
I'm tinkering with css for my app. Am I correct in assuming that webkit specific css prefixes will always work with both Android and iOS forge-built apps?
A couple of ways to find out during your device testing:
if you are using jQuery then...
forge.logging.log($.browser.webkit);
if you are not using jQuery then parse the user agent...
forge.logging.log(/webkit/i.test(navigator.userAgent));
Most probably, you can stick to webkit prefixes + no-prefix.
Vendor prefixes are a mess, opera recently announced that they will be supporting webkit prefixes, even though opera is not a webkit browser - because a lot of websites are using webkit-only prefixes... well...
If you want to get rid of prefixes all the way, (cleaner CSS) you can use PrefixFree js : http://leaverou.github.com/prefixfree/
Is it a bug that Firefox doesn't seem to support background-image swapping in pseudo-classes or is it that the other browsers are doing more than they should be?
I'm trying to figure out if I'm doing something wrong... this works in Opera and Chrome (haven't tested in IE yet)...
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
However firefox just ignores this. I was hoping to avoid writing a javascript roll-over... this seemed like such an elegant solution, but I'm starting to suspect that I'm hosed.
Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.
What version of FF are you using? A quick search revealed this possible issue similar to yours: http://support.mozilla.com/en-US/questions/746770
Try this to see if it works:
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
[class="myClass"]:hover{ /* firefox fix */
background-image:url('on.jpg');
}
Do I need some special DOCTYPE when I want to use CSS3 ? I have div with dashed border and I want to set border-image (only can with CSS3), but when I set border-image:url(.., nothing happens.
Some browsers may only support CSS 3 features in Standards Mode, but a standards mode triggering Doctype should be considered business as usual and not "special".
Keep in mind that CSS 3 is a collection of specifications that have not yet reached recommendation stage. They are very new and browser support is far from universal (and isn't a binary state of 'supports CSS 3 or not' — the current versions of all the major web browsers support some of CSS 3 (for different values of 'some'). Your problem could simply be that you aren't using a browser that supports border-image.
border-image currently works in Safari
and Firefox 3.1 (Alpha). The syntax to
use it is:
border-image: url(border.png) 27 27 27
27 round round;
See demonstration page
CSS3 is not available on all browsers at this time. Right now, only Chrome, Opera, and Safari support it. CSS3 commands will not work on IE; you'll have to find other work-arounds or wait until browsers catch up with the standards.
Most likely the border-image did not show up, because you didn't use the correct prefixes.
Right now, just "border-image" is not supported by major browsers, hence you need to add the prefix for the browser.
E.g.
-webkit-border-image
-moz-border-image
-o-border-image
-webkit - for WebKit-based browsers such as Google Chrome and Safari
-moz - for Firefox
-o - for Opera
You do not need a specific DOCTYPE, but border-image is only supported in some browsers. You can also use:
-webkit-border-image
-moz-border-image
-khtml-border-image
-o-border-image
to broaden the range of support for browsers. CSS3 has not been implemented as a standard across all current browsers, so using specific CSS tags is the best way to go for now.
Support is very limited and inconsistent across the browsers that do support it. Check Quirksmode (bottom of the table) to see the bad news http://www.quirksmode.org/css/background.html