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/
Related
I am following an tutorial that is typing -webkit-box-sizing: border-box; in the style.css nothing seems to happen when I write it... I am on windows and using atom. is it something you need to download? I understand an engine and something to do with animation in chrome/safari.
No need to download anythig. webkit is one of the prefixes used to make experimental css properties work for other browsers, they are temporary and you should remove them from your code once a property is fully supported by all browsers.
This is a list of prefixes used:
-webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
-moz- (Firefox)
-ms- (Edge, Internet Explorer)
-o- (Opera, Opera Mini)
to determine if a property need vendor prefixes or not, use Can I Use they mention on the notes if the property searched is experimental.
once you found that you need to use prefixes, here is an easy tool to auto-prefix
AutoPrefixes
the following are some articles for more in depth reading:
https://flaviocopes.com/css-vendor-prefixes/
https://www.lifewire.com/css-vendor-prefixes-3466867
https://bitsofco.de/css-vendor-prefixes/
I have a small question, I am new to CSS and I have pretty stupid question. Why everybody add -webkit for Chrome and Safari, -moz for Mozzila Firefox and so on, I used just "transition:" and value and it worked on Mozzila, Chrome and Opera too. So what's the reason to add it?
Thanks.
that's for older versions of those browsers which only respond to the prefixed settings and are still installed on some computers.
Web world changes a lot, and before there was official support for CSS3 (such as the transition you are using), there were fallbacks, and shims to add these features specific to browsers.
The reason people would still use -moz & -webkit is to include support for older browsers. You should read up on the pains of doing this especially for internet explorer. So if you don't want to leave your ie9 customers behind, you should try and include appropriate CSS for them. transition isn't going to cut it for these browsers.
The CSS filter property works in Firefox and Chrome. How can I get this same affect to work in Internet Explorer. For more information on what the filter property is go here: https://css-tricks.com/almanac/properties/f/filter/.
The reason CSS Filter doesn't work in IE is because it's not supported in IE.
This feature is currently in development stage for modern IE. https://status.modern.ie/filters
Generally for any modern CSS features it's good practice to check
http://caniuse.com to see which browsers actually support the property.
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/
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