Hardware Accelerated CSS3 Transitions on Windows Phone Browser - html

I was wondering if anyone knew of an equivalent technology to iOS' translate, rotate, and scale hardware accelerator properties used in CSS3 webkit transitions that I could find in Windows Phone 7 or even Windows Phone 7.1, Mango.
The company I work for creates websites that operate on a variety of mobile platforms. Currently, we support iPhone and Android devices only, but we're looking to expand our reach to Windows Phones as well.
In the past I used those webkit properties to provide smooth animations for moving around DOM elements in my UI plugins. jQuery's animate function and even pure javascript just wasn't cutting it.
However, after some research I'm found out that the current Windows Phone 7 doesn't support CSS3 or HTML5. So my usual methods won't work here. Fortunately, I've been told that the new 7.5 version should have Internet Explorer 9 on it, which does support some CSS3 and HTML5 technologies. However, I'm wondering if anyone knows if there are any webkit-like translate, rotate, and scale properties I can use in Windows Phone.

Correct, the current Phone (7.0) does not support HTML5 or CSS3. The browser is some sort of IE7 / IE8 hybrid in terms of its functionality.
The good news is that the Windows Phone 7.1 release (mango) will bring with it IE9.0, which is built from much of the same code as the desktop browser. This will brig with it pretty good HTML5 support and hardware accelerated CSS3 transitions, rotations etc ...
You can try out your website right now on the WP7.1 emulator.
Be sure to use the -ms CSS prefix in your CSS. Most of CSS3.0 is still in draft so still requires browser specific prefixes.

Related

Windows 10 Safari HTML5 Video canPlayType

Safari (version 5.1.7) on Windows 10 does not support html video and audio, but works well with same version on Windows 7, so you have to use flash to play html media in this case. This seems like quite a drawback or I am missing something. Is there a way around it?
http://jsfiddle.net/jxajbo6f/2/
var testEl = document.createElement( "video" ),
if ( testEl.canPlayType )
The number of users using safari on Windows 10 is going to be fairly small - Safari version less than 6 have less than 0.5% of total market share across all OS's according to this market share site for example:
https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpct=3&qpcustomb=
It could still be important for you, however, if you have a target audience or organisation that do need to use it for some reason.
The problem is that the HTML5 video standards and extensions keep evolving so a browser not being developed, as Alexander points out above, simply cannot maintain compatibility.
In addition to this the OS itself has been updated and may provide new or different mechanisms to playback videos, for example leveraging HW acceleration and allowing for DRM, and only limited support may be offered for older interfaces. Falling back to Flash looks like your best alternative if you really have to support this use case.

Minimum hardware requirements to run an HTML5 capable browser

Which is the browser with minimum hardware requirements with full support to HTML5?
The application should be able to play videos and perform some javascript transformations.
Windows or Linux it doesn't matter (but I bet my two cents on Linux as the winner).
Thanks in advance.
You may be putting the cart before the horse here.
There are a lot of "post pc" devices out there that have very low hardware specifications (iPod/iPad/iPhone, various Android devices, Blackberries, Windows Mobile Devices) that can run lightweight, full featured HTML5 browsers based on projects like WebKit (webkit.org).
Following browsers supports HTML5 for better client rendering especially when having flash, video streaming and mobile version of site. browsers: IE 10, Google chrome, Opera, netscape navigator.

Can I use html5 in my mobile website?

I must create a web site optimised for mobile devices, can I use html5 and css3?
What are the main limitations?
Which devices are compatible? (IOS, Android...)
Regards
Yes - to a degree. The website http://caniuse.com/ details HTML5 availability for the following browsers:
iOS Safari
Opera Mini
Opera Mobile
Android Browser
You can, with some limitations. Basically you'd better use some "pre-cooked" framework like Senche Touch or jQuery Mobile.
Simple answer: the best support for HTML5 in mobile phones is given by iOS and Android browsers.
Yes you can! and about compatibity... it depends on the browser... the new versions of safari that run on the iOs 4++ support html 5...
iOS and Android will both support HTML5 and CSS3 (and well). You'll run into some problems with windows mobile (which runs a modified version of ie7)
Back in April, sources announced that LG would be the first company to launch an HTML5 compatible browser.
Where this was over 6 months ago, I haven't been able to find any other sources that woukd indicate whether any phone browsers would support it.
The best thing to do would to point your mobile device (or emulate one) to a site made with HTML5.
After a little more research I found this quote from the apple.com site.
"Every new Apple mobile device and every new Mac — along with the latest version of Apple’s >Safari web browser — supports web standards including HTML5, CSS3, and JavaScript."
Also for Android, check this page.

What browsers support the HTML5 device orientation feature?

I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.

Best browser for HTML5 CSS3 on the middle-long term?

If you had to choose a browser (just one) to be the primarily supported browser for a company jumping into HTML5 (CSS3).. Which one would be your safest bet on the middle-long term?
Chrome, FireFox, Safari, IE?
I'm looking for an objective recommendation based on standards driven/compliant, developer tools, fast & correct feature implementations, memory footprint, etc.
UserBase/MarketShare would not be an issue because it would be on a closed environment in which we control the clients (which are basically big machines with a Web interface).
Thanks!
I would say a webkit based browser. That would be the best balance of speed/stability and HTML5/CSS3 features.
However I believe that Opera has the most implemented features.
Opera has always been in the lead, but they've also always had weird bugs. Right now, Chrome is in an interesting position: Google just bought an internet video protocol company (On2), and so they have the power to end the H.264 vs. Ogg Theora battle by releasing this great new codec they've bought as open source.
HTML5 itself isn't anything new: it's just new elements that display differently. Think of it like this: if HTML5 was the first to introduce the <blink> tag, developers would be a little iffy about it because you can just use CSS to set text-decoration:blink or use some Javascript to make the blinking happen.
With HTML5, things aren't that different. Most of the new elements are just extensions of <div>. For the ones that aren't (<video>, <audio>, <canvas>, etc.), there are either already strong implementations (pretty much across the board) or the implementations as complete as the HTML5 spec is.
Will there be a best browser for HTML5? Probably not. It's all just a matter of how the browsers position themselves (like I mentioned with Chrome above).
If you control the environment I would say pick one based on that has features your app can exploit to make your job easier. Otherwise, lower-common-denominator is a widely used approach for a small team.
I would say Gecko (firefox and friends) or webkit (safari, chrome and friends). I wouldn't go with IE nor Opera. Here is a HTML5/CSS3 comparison table that pretty much supports my views.
Safari’s pushing CSS animations and transitions, if they’re a big draw for you.
If you want to make a HTML5 app/site that focuses on one browser, then you might as well use HTML 4 and JavaScript. For the next many many years most HTML5 sites will have to function in non-HTML5 mode.
See HTML5 features as glacing on the cake, to add benefits to the browsers that can take advantage of it.
All the modern versions of browser support HTML 5. But recently launched internet explorer 9 specifically designed by keeping in mind future web technology needs and incorporated latest features that give rich and interactive web experience. Latest browser Internet explorer 9 has more support for Cascading Style Sheet than previous versions of Microsoft browser. It supports CSS3 and more emerging SVG2 markup standards. IE 9 includes new java script engine that designed to take advantage of multi core processor and give maximum performance.