Svg animation with css - fallbacks IE - css

What is the best option of fallback IE non supporting issue on CSS/SVG animations ?

Keep #m_a answer checked, just wanted to explain all available options as as fallback for people reading the question later and looking for an answer.
Before listing all options currently available having a look at http://caniuse.com/#search=svg will see that basic support for SVG in IE9+ with this issue though
IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
so If you want to fallback IE9+ then you just keep using SVG, but for IE8 and below SVG file is not an option.
Also it is important to know the term "Sprite Animation" (1) which basically represents a step-based animation showing a new slide or image in each step in fractions of the second, for smooth animation 20+ slides/second is better so that not to have quirky to human eyes.
1. CSS3 Animation and Transition:
CSS3 animation and transition and also the transform property could be used for simple and basic animations applied on DOM elements other than SVG elements but it is not supported in IE9 and below. As well as animating animated CSS properties it is possible to create "sprite animation" with CSS animation by making use of steps() like in this CSS sprite animation example.
2. JavaScript
I've seen very complex javascript animation back in 2005 and 2006, and there was a website whose owner made two identical versions of the website one totally in Flash and the other totally in javascript -which was slightly quirky though- this is a very basic and simple pure javascript.
With javascript -pure or jQuery(2)- you can change CSS properties in general but mostly for simple animation you'll use properties like positioning, color changing and opacity.
As well as above implementing "sprite animation" is possible too like in these two examples which I just made to mimic the "sprite animation" example in the CSS part above applied first on background position property and second on an 'img' tag with its parent element having overflow:hidden. again the image is .png but you can use SVG in the same way if you're looking for a fallback for IE9+ only.
There are also other JS libraries(3) which could be used:
Greensock with its GSAP API, is a good option since it is fast and provide fallback back to IE6, also could work with other js libraries as well as CSS and canvas, I like the way morphSVG works too.
CreateJS [ Easeljs and TweenJS ] which works with HTML canvas -yeah right canvas are not supported in IE8 and below, there is a workaround for IE8 thought- and it provides exporting from flash files.
Snap.svg looks simple and nice and works with SVG means only IE9+ are supported, so if you want a fallback for IE8 and below you can't use this one.
RaphaelJS supports very old browsers including IE6+ and it produces scale-able vector because uses the SVG W3C and VML(4) as DOM objects.
Adobe Edge (5) lets you create HTML5 animation with an interface but I think it produces lots of javascript files. Also you can export from Edge to Snap.svg with some plugin I believe.
3. Flash:
Flash(6) was used as best option for web designers for creating cross-browser animation for almost a decade but gradually was abandoned due to presenting CSS3 animation and the revolution of javascript as well as the handheld devices which stopped supporting Flash since around 2012.
Flash creates vector based graphics and key-frames based animations as well as the ability to embedfonts as vector in times were verdana, tahoma and times new roman were default fonts of the web before #font-face, to have vector graphics you can use the drawing tools inside the program or import Adobe Illustrator .ae files.
You can use Flash as great fallback for IEs as it is supported since long time as well as it produces scale-able vector graphics just like SVG does and offers tweening but it has it's scripting language(7) which you mostly don't need unless if you want to offer interactions to the user, also -as far as I know- you can't access its structure with javascript.
Again for demonstration purposes I've also created this flash example which uses same "sprite animation" idea from the CSS part. Also created this vector graphics demo example .
UPDATE 1:
Upon a comment from the OP, for inline SVG, when DOM is ready -put javascript right before the closing </body> tag- you can do one of the following:
Use Modernizr (8) which detects individual features of the browser -all browser not IE only- to detect whether the browser supports SVG features - in the link I included "inlinesvg", "svgclippaths" and "svgfilters" features you can add or remove features - then hit build and download it, check the documentation to know how to use it.
Detect if the browser is IE or not, I modified this condepen and made this Demo Fiddle (9) to make a condition so that if it is IE and Version < 9 it replaces all inline .svg with the corresponding .png.
There is this hack <!--[if IE]> stuff here <![endif]-->, used to work in older IE version, but not on IE10+ it won't work. so you can have this:
<!--[if lt IE 9]>
<script src="repSVG.js"></script>
<![endif]-->
Which basically means, if IE Less Than 9 -hence the lt letters- load repSVG.js which will contain only the replacement and the replaceSVG() function, check this Demo Fiddle
For SVG as backgrounds, like if you're doing a "sprite animation", create another css file, say fix.css, which contains identical naming of all CSS rules that have .svg backgrounds, but with .png images instead, like:
in you style.css:
.foo {
width:300px;
height:120px;
background:url(foo.svg);
background-size:300px 120px;
}
.bar {
width:200px;
height:50px;
background:url(bar.svg);
background-size:200px 50px;
}
in fix.css you have:
.foo { background:url(foo.png); }
.bar { background:url(bar.png); }
Then in the head section of your page do one of these:
Use Modernizr to load the fix.css in the head if the browser doesn't support SVG as backgrounds.
Again you can use this easy thing:
<link rel="stylesheet" type="text/css" href="main-style.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix.css">
<![endif]-->
Use same logic in the Previous Fiddle to detect if browser is IE and version is less that a certain version, then load fix.css again in the head section.
Note that you need to make sure to have the method you chose from above after you load style.css so that when you load fix.css it will override the background-image properties of style.css.
(*) Check CSS-Tricks: Using SVG.
UPDATE 2:
Thanks to #kaiido for mentioning SMIL(10) with a polyfill, SMIL is a great option for SVG animation but the reason I didn't think it is an option it is because IE never adopted it, IE relied on its VML, this why I didn't think it would suit the OP.
Again thanks to #kaiido,I didn't know about this fakesmile which is:
SMIL implementation written in ECMAScript ... It is primarily targeted to SVG animations... FakeSmile makes declarative animations work in IE too.
However, I'm not sure if this fix will work in new versions of chrome, from MDN:
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations.
Also from CSS-Tricks
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
(1). Examples of spritesheet images
(2). jQuery animation is slow compared to pure javascript animation, GSAP, or Createjs.
(3). I've seen Greensock, EaselJS and Snap.svg in action but not for complex animation though just simple things similar to CSS3 animation.
(4). Vector Markup Language (VML) is an XML-based markup used by Microsoft and is supported in IE5 - IE8 but is deprecated since the realese of IE9. it is also supported in MS Office 2000 and later.
(5). Adobe Edge showcase examples.
(6). As well as flash there are other software used to create .swf flash files but most of them don't offer rich features except SWiSH Max which offers good level of features.
(7). ActionScript is the scripting language used in Flash and it is ECMAScript syntax like javascript.
(8). Using feature detection is better than browser detection, because say someone uses an old browser other than IE, for example Safari5 or Opera12 then this fiddle won't fix it because it detects IE or not only not if the browser supports SVG or not.
(9). If you open the fiddle in any browser other than IE8 and below it will show SVG otherwise it show PNG, to experiment it change this IEversion < 9 to IEversion < 14 and you'll see this affect all IE existing IE in the time of this post. Notice that, in case later Microsoft decided to release an IE version that supports SVG animation with CSS, presumeably IE16, you can make another condition for that, something like this demo fiddle.
(10). SMIL stands for Synchronized Multimedia Integration Language, it has an XML-based syntax just like SVG, SVG animation using SMIL

IE (at least until IE11 -- which is the most used version) does not support CSS3 SVG animations. See: CSS3 animation is not working.
Javascript is available, at a cost to performance, and certainly a cost of time and flexibility. Animated GIFs could support something simple and self-contained. The first answer in the above link has more about that: https://stackoverflow.com/a/24477055/1864597

Related

Detect browser support for CSS-animated SVG

I am playing around with CSS-animated SVG elements and came across the problem that even though all technologies, which are used, are supported by some browsers the combination is not, i.e. CSS-animated DIVs work but SVG elements don't. I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS.
Here is a jsFiddle with an example. It works in the latest versions of Chrome, Firefox and Safari. But when opening it with e.g. Firefox 5 only the div rotates while the rect doesn't.
You can add an event listener to check for the completion of an animation iteration, and within the corresponding event handler set a flag like supportsSVGKeyFramedAnimatedProps = true (if the iteration never completes then it is not animating).
elem.addEventListener('animationiteration', eventHandler, false)
This would allow you to 'fall forward' to your SVG animation, instead of providing a fallback.
I am wondering if there is a way to detect if a browser is capable of
animating SVG elements using CSS
Simple Answer: Yes you can as stated by #jhpratt.
You can detect if a browser supports CSS-Functionality with only CSS.
The #supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query.
Example:
#supports (display: flex) {
div {
display: flex;
}
}
#supports not (display: flex) {
div {
float: right;
}
}
MDN Link: https://developer.mozilla.org/de/docs/Web/CSS/#supports
Long Answer:
You will always have some cross-browser issues.
The problem you have encountered is bothering every Webdeveloper. Still there are ways to get around with this Browser-Support-Problem:
1. You can check "can I use" for compatibility:
Link: http://caniuse.com/
It is recommend to look up any functionality which is questionable like animations.
2. Use an autoprefixer in your workflow:
With the help of an autoprefixer you don't have to worry most of the time about using CSS with a prefix like -moz-, -webkit-, etc. This tiny helper will do the trick for you, you can even tell some autoprefixers which browsers you want to support.
3. User 3rd - Party libraries:
There are many libraries out there which you can use to detect the browser and version. If you want to be sure that your animation is secure to use, you can simply use the provided animation from the libraries and of course look the compatibility up before on their respective websites.
Some Big Names:
Angular: https://angularjs.org/ (use ng-Animate)
JQuery: https://jquery.com/
Greensock: https://greensock.com/
there are many more, jsut search the world wide web.
4. Use CSS Hacks to detect specific Browsers:
It is possible to use so called CSS-Hacks. They are specific CSS calls, which only apply on certain browsers.
Some examples:
Internet Explorer/Edge 8 only: #media \0screen {}
firefox ≥ 3.6 only: #media screen and (-moz-images-in-menus:0) {}
Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}
You can look up more Browserhacks here: http://browserhacks.com/
Conclusion:
It is possible to detect specific browsers, but it is not possible to detect if the brwoser is supporting the given feature with only CSS. That is why you will always have some hard times with browser support.
Hope this helps.
Regards
I believe that the SMIL animations detections in modernizr should do it. https://modernizr.com/download?smil-setclasses
I'm using it in a pretty involved set of css/SVG chart animations. Just wrap a fallback in the following tag:
.no-smil{ }
http://codepen.io/msbtterswrth/pen/greWzy
I haven't done exactly what you're looking for, but something similar (providing an animated clip-path as defined by SVG when the browser supports it and falling back when it doesn't). You can use media queries looking for pixel ratios to determine if a broswer is moz or webkit and provide the fallback animation outside the media query and provide the preferred animation in media queries that indicate a browser that will support it.
//fallback animation here
#media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
As for older versions of Firefox? I don't know how to do that in CSS, but I'm not sure going back more than a few versions of Firefox or Chrome is a common use case.

Difference between html5shim, css3-mediaqueries.js and modernizr

I am new to the responsive design world.
I am using http://www.responsivegridsystem.com/ in my design. It tells to add following markups
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>
Since media queries are not working in IE8, as per this question IE7, IE8 support for css3 media query I am using the following markup too
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Do all these are needed? Whats the difference between html5shim, modernizr and the css3mediaqueiries?
Do i need to use modernizr? Because I am not doing anything with that in my js file like jQuery.
They serve three very separate purposes, all can be very important, but not all (if any) are always needed.
html5shiv aka html5shim
html5shiv is a script that allows you to properly use html5 elements in older browsers, Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, at the time of this answer.
So, what does that actually mean? Its pretty simple. There are a number of new elements in html5 (like <section>, <aside>, <header>, and <footer> to name a couple), as well as the ability to create your own custom elements. That means that we can write more semantic (and clearer) code. All great things, but unfortunately, older browsers don't apply your css to elements that were not one of the ones that they shipped with support (<div>, <p>, <span>, the normies). Luckily #sjoerd-visscher dropped some knowledge and saved the day. He discovered that if you use document.createElement to create any new element, it sort of registers it as one of the supported elements, and the css works!
This meant that you could actually use html5 elements in production. It was a huge deal at the time, and luckily becoming less and less important as those older browsers are dying off.
It has since expanded to add some basic styles for browsers, in addition to registering the elements.
If you don't have to support Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), or Firefox 3.x., then you DO NOT need to use html5shiv.
css3-mediaqueries-js
css3-mediaqueries-js adds support for a css feature called media queries in browsers that don't support them. If you aren't sure what that means, check out sites like The Boston Globe, Mitsubishi Australia, or techcrunch, and then resize your browser.
Media Queries allow you to apply css conditionally, based on some attribute or combination of attributes of the browser (width, height, etc). They are incredibly powerful, and power a lot of modern web design.
Now, the question is whether or not you actually need something like css3-mediaqueries-js. It was once in vogue to do so, but it is becoming more and more common for people (myself included) to recommend mobile first design. This means that the base styles should be a mobile site, with media queries adding to the base design, instead of hiding/removing some things. As a result, browsers that don't support media queries (the ones that css3-mediaqueries-js is intended for) get served the "mobile" design, rather than polyfilling and then applying the media query during every resize. Older browsers generally mean older, slower, and smaller computers. Not only do they lack support for media queries, their javascript engine is hundreds (sometimes thousands) of times slower than modern engines that power current Chrome, Firefox, and IE. All that extra work on something that isn't nearly as powerful to being with can easily result in a degraded experience for the users of those older browsers.
Whether or not you should use it is ultimately up to you, but make sure to ask yourself what is best for the user, not necessarily the designer :]
Modernizr
Modernizr is a feature-detection library, that allows you to check for new web features in a simple way. By default, ((you can build a custom version here)[http://modernizr.com/download/], changing anything you want) it adds classes the <html> element on the page, making it super easy to modify designs based on its results.
.css-gradients .background {
background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
background: url(gradient.jpg);
}
(of course that is a super trivial example, and you can accomplish the same thing using a basic fallback without modernizr, but it is just meant to serve as an easy to follow example)
It doesn't actively add or remove anything itself, but in combination with something like yepnope, you can test for a feature, and conditionally add a polyfill for that feature.
Something like this
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
would check to see if mediaqueries is support in the browser, and if it isn't, it would load css-mediaqueries-js to polyfill support for it.
HTML5shiv is for emulating html5 element in ie8.
css3-mediaqueries-js and respond js do similar task(supporting media queries)
Modernizr is actually a browser feature tester which include bunch of css classes in ie and later applying manual style for ie.
Best Usage is to use-
selectivizr with html5shiv

Is there a javascript library to fix IE rendering bugs?

Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/

What is the meaning of this property in my css file ?behavior: url(MyUrl)

in a css file of a project I see this below code:
{
behavior: url(Mylink.htc)
}
I dont Know what that means,it didnt work on Firefox,could you help me to know what is this,after that maybe i could find the replace statement in firefox?!
The behavior property is for Internet Explorer version 5+. behaviorlets you attach a script using CSS in order to implement DHTML (Dynamic HTML) components.
It's only supportet by IE (up to version 9) but no other browsers.
http://reference.sitepoint.com/css/behavior
You can use it to fix things for IE that are not supportet by default, for example transparent PNG files in (very) old IE versions:
http://www.twinhelix.com/css/iepngfix/
MS official website: "Support for element behaviors and HTML components (HTCs) has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5."
A HTC file is usually used to patch support for specific CSS rules on older browsers. For example, CSS3 Pie (http://css3pie.com/about/) is used to add support to basic CSS3 declarations such as border-radius, gradients, rgba, etc...
I believe behavior is supported by IE only.

Is it possible to add SVG images to a web page through CSS?

I just started experimenting with SVG in web pages, and I discovered that it is only possible to add SVG images into HTML using <object /> tags, not <img /> like I would have expected. Most of the time, I add graphics to web pages through CSS because they are part of the presentation of the site, not the content.
I know it is possible to apply CSS to SVG, but is it possible to add a vector image to an HTML element using purely CSS?
SVG is supported in <img> and in CSS (list-image, background-image, content) since Opera 9. Opera 10 is better still. Webkit/Safari supports svg in <img> too.
Some examples here, a couple more at dev.opera.com and annevankesteren.nl
If you're looking for inline svg examples, have a look at Sam Ruby's site.
You can try to reference an SVG file with the content property, but I don't think it's supported. If it was supported it would look like this:
.putapicturehere:before {
content: url(mysvgfile.svg);
}
This definitely won't work in IE - it might work in the newest Firefox.
I always reference quirksmode.org for css browser support questions.
You might need to make a little CSS-helper JavaScript to read the image out of an offscreen img and put it into your object tag. That way you can still control with CSS.
As far as I know, Opera 9 and WebKit (== Safari & Chrome) do it on PCs, and rumour has it, that FF3.5 will also be able.
Actually, since Apple added SVG support to iPhone's Safari just half a year ago, I'm not sure, if it works, but it's worth a try.
Cheers,
Last time I tried, almost a year ago, it didn't work. You can, however, already mix svg and xhtml markup. Only problem there is that the page has to have correct mime type (application-xml or something like that) or browsers will ignore the svg.
Inline svg is not a perfect solution if you want strict separation of content and presentation, but is seemed to be the most supported way of using svg.

Resources