Is Phonegap capable of converting all CSS3 transitions or should we avoid some of them?
Phonegap uses a Webview to display your page.
in most devices the Webview uses webkit to render pages. So what ever works in other webkit browsers (Google chrome, for example), should work with phonegap.
read more here:
http://docs.phonegap.com/en/4.0.0/guide_hybrid_webviews_index.md.html
You should check every CSS and javascript feature you want to use on http://caniuse.com/
You should check the columns iOS Safari for iOS apps and Android Browser for android apps (not chrome for android, because it usually has better support than Android Browser and the android webview is based on the Android Browser, not on chrome)
Related
I'm using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.
It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. However, it does not work on iOS 9.3.4.
Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)
Is it possible to get iOS working with this method?
== Update ==On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.
Can I Use tells us that this is not supported on Safari (Mac or iOS).
Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.
I found a polyfill which fixes WebKit browsers' this issue. And it works for me.
Please check its demonstration for implementation.
I use Chrome browser notifications in my application and want to build chrome notification preview(how it will looks in browser) before delivering.
Where I may look css styles for browser notifications(esp. font-family and font-size)?
You should refeer to this documentation on styling Chrome Notifications.
BTW i don't think you could apply css styles to google chrome web notification system.
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 am creating a website and it's using SVG images due to retina support. I had to use modernizer to swap SVG for .PNG and also use alternative .PNGs for IE8.
I now have the problem the images are not showing on my Samsung Galaxy Ace with Android version 2.3.6.
How can I get the phone to support SVG images?
Thank you kind people.
The stock android browser didn't start supporting svg until Android version 3.0, see http://caniuse.com/#feat=svg.
You can find alternative free browsers that do support SVG on android 2.3, such as Opera Mobile (disclaimer: I work at Opera).
The modernizr solution should work just fine (see guide), though you will get PNGs in the stock browser on Android 2.3.
Are the following things are supported in windows phone 7 / can we make use of these in windows phone 7 application development ?
Is CSS supported ?
JavaScript supported ?
jQuery supported ?
If so please let me know the resources for reference.
The browser that WP7 uses is based on the same code-base as the desktop IE9. So, yes CSS is supported, with the following CSS3 features:
CSS 2.1 compliance
CSS3 2D Transforms
CSS3 Backgrounds & Borders
CSS3 Color
CSS3 Media Queries
CSS3 Namespaces
CSS3 Values and Units
CSS3 Selectors
(From the Windows Phone Team Blog)
JavaScript and jQuery are both fully supported. As a result it is possible to write HTML-based applications for WP7 as I demonstrated with a PhoneGap based application which I wrote.
the first browser-version of windows phone 7 was based on IE7 and failed hard at the Acid3-test, so support for css/javascript was there, but very bad.
with Windows Phone 7 Mango there was a browser-update wich changed the browser to IE9 and got 100% at the test - this means there's a pretty good support for javascript and css. at least jQuery mobile also works, but i don't know about "normal" jQuery.