The <img srcset... attribute allows different images to be shown to the user dependant on screen resolution.
Which browsers currently (Jan 2013) support this attribute?
Given that this is a useful attribute for users browsing on smartphones, additionally, which mobile browsers offer support?
Updated Feb 2014
There are various aspects to srcset, including pixel density and viewport width. At the time of writing:
viewport width isn't supported by the current versions Safari, Chrome or Firefox
pixel density is supported by Chrome
I've put some test files and results on a Github repo which I'll try to keep current.
Webkit is now supporting the srcset attribute: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/
Interestingly, wikipedia seems to be using srcset with attributes like this:
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/300px-Izokefalizm.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/400px-Izokefalizm.jpg 2x"
I'd guess they are using a polyfill to achieve this, but it certainly is displaying larger images correctly. Might be worth poking around.
For iOS devices - Safari for iOS8 now supports srcset - but won't be generally available until the Fall 2014.
http://friendfeed.com/christianoliff/c7c40ae2/safari-for-ios8-now-supports-img-srcset
Have a look for the current support at CanIUse.com. As of now, October 2015, if you don't care about IE as much, you can safely use it on pretty much all browsers, good stuff!
A "correct" answer would have to evolve over time.
A candidate test site: https://html5test.com/compare/feature/responsive.srcset.html
Related
I'm looking for a resource on what browsers currently support the tag. What alternatives are there? and is it in any way usable on a mobile phone, I have a hard time seeing that the text would be readable. On tablets with bigger screens it would make more sense.
Thanks.
This is the best table I've found so far for summarizing support across browsers: http://www.longtailvideo.com/html5/#texttrack
Caniuse.com is excellent for finding out what browsers support what. This is the link for the video tag
I have a HTML5 video, working fine, and i'm happily smiling whenever i start my browser... However!
I know the Video tag isnt supported by some browsers, but i noticed there is a difference in support for video attributes/methods/whatever too. Is there a summary of this somewhere?
For example:
The poster attribute doesnt work in every browser, even if the vide DOES work!
I think its pretty worthless to just use an entire javascript library to take care of one attribute like poster, so how to take care of this?
Or am i completely wrong, and is IF video is supported, also every attribute supported the same way?
Please help me! :)
Thanks for all your advice,
WK
ps: I am using the video for everybody variant of the video. So thats working fine.
Is this the kind of thing your after?? click me.
Basically there is the following support for the HTML5 video tag:
Every modern browser that has support for HTML 5 supports <video>
meaning: IE9+, FF3.6+, Chrome, Opera, Safari
Internet Explorer 9 does not support the poster attribute. I believe
there is even a bug about this on Microsoft connect.
Firefox does not support the loop attribute. (replaying a video after it has finished)
Different browsers support different video formats, IE9 supports
H.264, Firefox supports ogg (Theora) and WebM etc, which means that you would need to provide all formats in order to be compatible with all browsers.
The rest is pretty much supported everywhere.
well, HTML 5 is not yet standardized. Due to this, every browser that support html5 works differently. As far video tag is concerned then you have to provide with different formats so as to get support on various browser list. You can test browser support on this site. Here you can get all the details about the extent your browser support to HTML5
I find this page a good resource (although it is starting to get old as it was earlier this year): http://www.longtailvideo.com/html5
On a separate note, I find if you go to mobile devices such as Android the browser support varies greatly per device. Even though they are "supported" I always get strange behavior.
As for poster, there is no good solution if you want to have support across all browsers.
Like the title says I'm just wondering the current support for canvas.toDataUrl? I have it working in Firefox 4 but haven't really tried it in any other browers. When I look it up on Google most of the results are pretty scattered as some are from a year ago. It says its only supported with webkit nightly builds. (which I assume now are the actual releases)
I'd also like to know the support for mobile devices as well.
I personally prefer using caniuse.com for finding out the current browser support. Caniuse covers various major releases of each browser, as well as some mobile browsers. However, I always recommend that with anything mission critical, you test in all browsers just to be on the safe side.
If you take a look again at caniuse.com you will see that the support tables are all color-coded and they tell you whether a browser fully-supports, partially-supports, does not support, or does not support (but a polyfill exists). The canvas.toDataUrl, property would fall under the category of "basic support", which shows that the canvas api (or rather the current working draft for it) is fully supported in all major browsers, and there is a polyfill available for IE.
So while it doesn't go into great detail about the specific properties browsers support, it stands to reason if a browser "fully-supports" the basic canvas API, you can safely assume that includes toDataUrl. Once again, if you dont want to leave things to chance, or if you for some reason do not trust caniuse.com, your best bet is to build a test-suite and personally test your app against all browsers.
Actually it's currently broken in the webkit nightly build, a minor security bug I found a couple days ago:
http://code.google.com/p/chromium/issues/detail?id=91016
But in general in the stable release of Chrome it works just fine. In IE9 it works just fine too.
This is a question to all web-developers working in the industry more than a few years.
Today the server guy at my work told me that his browser didn't render a Google font I used on a site properly, so I checked his browser - it was Firefox 3.5. (Google font Raleway).. This made me think.. I know for some of our sites its a requirement to support IE6 (larger corporate sites) but for the rest (personal sites) should I be looking at developing for all increments of Firefox, Chrome, IE and Safari?
Does your company still support IE6?
Does your company support previous versions of modern browsers or just the latest ones?
And finally, has anyone else had this problem with FF 3.5 and Google Hosted font Raleway..(the font displays extra extra thing so the font is almost unreadable)
http://fonts.googleapis.com/css?family=Raleway:100&v1' rel='stylesheet' type='text/css'>
If anyone's interested I found a working solution to my font problem here:
http://www.jshsolutions.net/google-webfonts-cross-browser-fix-howto/
Users of FF/Chrome/Safari usually keep their browsers up to date. Keeping antiques around like IE6 is a corporate thing. Some users keep IE7 and IE8 around due to their unnecessary fear of things breaking. We promise to support the current version of browsers plus one version backwards. If someone wants anything further back than that, there's an extra charge.
It depends entirely on the user base and also the size of the user base. For example , the user base for governrment sites will be substantially different to personal sites.
A site with 10,000,000 visitors per year with 1% IE6 usage should ideally cater for thoses users. But a site that gets 10,000 visitors a year with 1% IE6 usage could probably afford to ignore IE6.
You should always support the current and prior major release of Chrome, Firefox, Internet Explorer, Safari and Opera. If the client needs an older browser to be supported he should pay extra.
My company supports IE6 for our intranet website - but somewhat reluctantly. However, last quarter, they rolled out mandatory updates for XP systems (IE7 and SP3).
IMO, it is unnecessary to break your head over tweaking CSS for every version of the browser. I'd suggest creating CSS for major versions like IE7, FF3 and webkit-based browsers and have a disclaimer stating the minimum requirements for the website.
Alternatively, you can load content based on the user's browser. Nevertheless, it would be more tedious.
Importantly, check the current browser shares (http://www.netmarketshare.com/browser-market-share.aspx?spider=1&qprid=0) and decide which browsers you want to support.
Yes I am suffering from the same. We support IE 6,7,8,9 ,FF 3.6,4 and Safari. It seems to be the worst thing to write one code for all this browsers. I never understand why client use IE6. Check this http://ie6countdown.com/ will give you idea about how many are using IE6.
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.