I've already seen a lot of examples, but none of them work in safari.
For example:
https://jakearchibald.com/scratch/alphavid/
https://simpl.info/videoalpha/
http://www.sciencelifeny.com/transparency/transparency.html
Also I know about APNG but it is not supported in IE and Edge.
There is a seeThru library, but to work with it you need to create a mask. Is there a cross-browser solution?
Related
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 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.
Is there any point in using SVG Web, if I render SVG only for browsers that support SVG anyway? (IE9, Chrome, Firefox, Opera.)
Perhaps SVG Web fixes/works-around some browser inconsistencies? (E.g. different SVG API:s or browser bugs, like jQuery does)
((Background: I already use SVG Web, and wonder if I should attempt to remove it from my webapp, it's 100k minified. For IE 7 and 8, I use PNG images instead.))
Not really.
AFAIK it doesn't do that, unless you force all browsers to use the flash renderer, which seems a bit pointless.
I need to have gradient backgrounds on my website for internet explorer. I know there is some kind of proprietry way of doing this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df');
But this doesn't grok with border-radius (supported by IE8, at least), which my site uses all over the place.
How should I solve this? (Other than just not having gradient backgrounds on old versions of IE, I mean.)
There's a great library called CSS3PIE, which adds support to IE 6-7-8-9 for many of the CSS3 stuff you seem to be interested in.
I'm using it a lot, and it's never let me down (although it does have its quirks).
Does anyone know if IE now supports transparent png's etc...? Does chrome as well?
IE7+, and every other modern browser including Chrome, supports PNGs with alpha channels.
The only drawback to watch out for in IE7-8 is that alpha channels do not play nicely with the IE-specific alpha filter typically used as fallback for CSS opacity.
Every mayor browser does (so that includes chrome). Only IE6 doesn't, but I wouldn't consider that a problem. So yes, you can use semi-transparent png's.
The older versions of IE don't support transparency, but there are a lot of fixes out there -- for example, http://jquery.andreaseberhard.de/pngFix/.