In order to make touch screen friendly website IE supports
canvas {
-ms-touch-action: double-tap-zoom;
}
Is there any equivalent to be used with other browsers like chrome, Firefox, opera and safari?
Chrome is shipping support for touch-action in Chrome 35: http://blog.chromium.org/2014/04/chrome-35-beta-more-developer-control.html
There is no other way of implementing this in other browsers, see Krazers answer to this.
https://stackoverflow.com/a/10291359/1977007
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.
The Browser Safari falls under Webkit or not? Please do clarify my doubt at the earliest. If it is not falls under the category of Webkit, what steps would I take to write in CSS. I mean the syntax of CSS for Safari Browser Like -moz for Filezilla and -webkit for Chrome?
Safari is webkit based. In fact safari was the first browser to use webkit and the open source it. The -webkit should work.
You can read more here:
http://en.wikipedia.org/wiki/Safari_(web_browser)
http://www.webkit.org/
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.
Anyone know of one? Firefox and Chrome get it right; Opera just displays a square +.
No need for a polyfill anymore; the latest dev build of Opera brings support. :)