I am doing some videos from Microsoft Virtual Academy and stumbled upon -ms-flex or so called Flexbox in css3.
I would like to implement a web app on html5 and css3 and this -ms-flex would help me very much.
Is this available in webkit or fennec based browsers on mobile devices?
If this can be used, are there any limitations of use?
Also are there any equivalent for those browser if that is not supported?
I found that : safari has webkit-box and maybe there are others for the rest of the browsers(Opera, Chrome and Mozilla or Dolphin)
Alright, extending from comment:
According to can_i_use, You can use flex box on many modern browsers with proper prefix:
WebKit browsers (Chrome, Safari, Android stocked browser, Chrome for Android, iOS Safari) with -webkit- prefix;
Gecko/Fennec browsers (Firefox, Firefox for Android) with -moz- prefix;
Trident browsers (IE 10) with -ms- prefix;
Presto browsers (Opera desktop) without prefix.
You should be able to find some tutorial/example on MDN, or (as usual) Google.
Related
I have finished designing my website but it displays differently on firefox, chrome and internet explorer. I believe i have done everything right but i dont know what is happening. Actually, google chrome displays it as i want it to, but firefox and internet explorer does not. My internet explorer version is 10 and firefox is 29. Please any help is much appreciated. thanks
This is the link to hosted site: http://www.ruebenpersonal.netai.net.
http://pastebin.com/xTnXeGhq - Link to the html source code.
Some browsers are uses the same rendering engine and some are not.
For example:
Google Chrome and Safari browsers are using : Webkit Engine (See: http://www.webkit.org/)
Firefox is using Gecko Engine (A.K.A. Moz) - (See: http://en.wikipedia.org/wiki/Gecko_(software)
Opera is using : Presto (See: http://www.opera.com/docs/specs/productspecs/)
So differences between rendering engines are normal. Which is why we are using their css properties like;
-webkit-border-radius /* For Webkit */
-moz-border-radius /* For Gecko */
-o-border-radius /* For Presto */
border-radius /* For IE9+ */
Some older browsers like Internet Explorer 6, 7, 8 are not giving support for most of CSS3 methods. To enable that methods, there are available to use JS engines like html5shiv or modernizr.
Note: You can use a service like this to generate starter templates that supports almost every browser.
Initializr: http://www.initializr.com/
Each browser uses different rendering engines. This means that certain HTML elements, CSS styles, etc. will be interpreted differently or not at all by browsers that do not share the same rendering engine.
To understand more, I would refer to this link: http://taligarsiel.com/Projects/howbrowserswork1.htm
As far as developing for multiple browsers, I would look into the modernizr javascript library, http://modernizr.com/, and for quick reference, caniuse.com.
Hope this is helpful.
I was wondering what the browser support is for Data URIs? More specifically what version of IE does this begin to be supported in?
Also is there a difference between using them in a stylesheet as a BG image or in an img tag?
Cheers!
I follow caniuse.com, it hasn't failed me yet.
http://caniuse.com/datauri
According to caniuse Chrome, Firefox, Safari, Opera, mobile browsers, and IE8+ support Data URIs.
Can someone please elaborate on which versions of Internet Expolorer the HTML5 ★ BOILERPLATE framework supports?
Does it have support for IE versions 7 & 8?
The current version supports IE8+. From https://github.com/h5bp/html5-boilerplate#features:
Cross-browser compatible (Chrome, Firefox, IE8+, Opera, Safari).
Boilderplate v4 supports IE6+, but is no longer maintained:
HTML5 Boilerplate v4 provides legacy browser support (IE 6+, Firefox 3.6+, Safari 4+), but is no longer actively developed.
HTML 5 doesn't work in most versions of IE. So HTML5 boilerplate uses Modenizer and X-UA-Compatible to make most of it work. You can read about all of it on their github profile.
SEE DOCS:
https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/html.md
https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/html.md#modernizr
https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/html.md#x-ua-compatible
I checked on http://caniuse.com/ but can't find anything about compatibility for the vibration API.
Which browsers support it?
Update [2014-03-07]: The Vibration API is now supported by Firefox, Chrome, and Opera. I've also made this information available on on caniuse.com.
Based on this article:
The Vibration API is still primarily unsupported. Firefox 16+ is
currently the only browser with support for the API.
According to Mozilla Developer Network it is supported in Chrome with prefix webkit, in Firefox 11+ with prefix moz and in Firefox 16+ without any prefix.
But as you can check in this Issue in Chromium as of now it is not supperted in Chrome and they seem to be in no hurry as Priority is 2(Normal).
It is not supported in Android strock browser as of now.
Do any browsers support the HTML5 context menu attribute?
This has been added to Firefox 8.
See this for an example of it working https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
Right now, the contextmenu attribute is not supported by any browser version. According to caniuse.com it doesn't have support for any current browser versions (IE 9, Firefox 4, Safari 5, Chrome 11, Opera 11.1, or any mobile browsers - iOS, Opera, or Android). It is unknown if it will be supported in future versions.
It was discussed in April 2010 regarding adding it to Webkit. But it doesn't look like it's been added to the nightlies yet.
According to this wiki page for now there is no any popular layout engine except Firefox's Gecko that fully supports the menu element. Meanwhile, you can try some script solutions, like jQuery Context Menu Plugin.
You can use Modernizr for HTML5 feature detection.
It is working well here with Firefox 9.
Firefox 8 Aurora implements this feature. But unfortunately it doesn't seem to work for me now...
Pretty sure it's supported with a polyfill: https://github.com/medialize/jQuery-contextMenu