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.
Related
CSS filters are kinda supported by most browsers.
But as it has the Working Draft status, is it recommended to use it? (in production)
As you can see on your picture of the website caniuse, if you do not need your website to get this functionnality on Opera Mini & IE, you can use it.
As most used browsers (Firefox, Chrome, Safari) set up this proprety, you can take it for granted.
Can i have a list of html/css tags which works only for Internet explorer.And these tags/attributes should not work in other browsers especially for chrome and safari.
Thanks,
Shyam
As you didn't mention the version of IE, I am Going with the IE10
this link describes IE 10 Specific Styles
I think the only HTML (non-standard) tag supported by IE and not other browsers is <bgsound> for background sound. Some sites will also mention <marquee> too, but although it is non-standard, it has worked on Chrome and Firefox for a while.
About CSS, I don't know if there are any specific rules/attributes that only work on IE (but I know there are many standard rules/attributes that do NOT work on older versions of IE :P)
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.
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.