For some strange reason, the Modernizr script will not run detection on featuers within the IE8 browser, well at least I think it doesn't.
Anyway, I am using a CMS where I cannot insert the "no-js" class into the HTML tag when I create a page - but this does not seem to bother all the other web browsers (including more recent versions of IE). Modernizr is able to inject the classes into the HTML tag even though the "no-js" class is not initially present (thank god). I have checked and verified this when using the various browser implementations of "inspect element".
I am testing IE8 in Virtual Box using an install vdi from ModernIE.
I have a specific class when Modernizr detects there is no support for SMIL SVG animation but IE8 does not seem to use it. I have a div whereby I am using an animated SVG file as the background image. What IE8 does is just display the background colour of the div and not the specific Modernizr fallback class which tells the browser to use a static PNG file as the background image. Could also be due to the face I am using background: cover property which is also not supported (but I assume I would still see the png file but just not stretched out to cover the dimensions of the div.
I'll outline the css I am using below:
.jumbotron.handwriting.dark{
background: #CD4833 url('http://qanzac100.slq.qld.gov.au/__data/assets/file/0007/283939/textpattern.svg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
/*z-index: 4;*/
}
/* Modernizr fallback for browsers that do not support SVG SMIL animation. Replaces bg image with static png file */
.no-smil .jumbotron.handwriting.dark{
background: url('http://qanzac100.slq.qld.gov.au/__data/assets/image/0004/284017/textpattern.png') no-repeat center center fixed;
background-size:cover;
}
Now I have looked over the Modernizr website quite a few times and I don't see anywhere where it says that it does not support IE8. Is there perhaps something that I am doing obviously wrong here? It works in IE11 and switches over as that browser still does not support SMIL.
I have yet to try this in IE9, but will do so shortly.
Update: IE9 works fine as it actually does support SVG object. I did a test run myself at here www.coolwebs.com.au/svgTest/ without putting it in the CMS we are using and it seemed to work. Not sure what's causing it but the problem only seems to be in IE8. I have modernizr working on IE11 when detecting for a workaround for SMIL SVG animation.
Related
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
good morning everybody,
my problem today is, that I would like to use some background-images for mobile phones (retina and non-retina), also for desktop browsers (like the actuell version of google chrome, firefox, internet explorer).
my css, or how I use it:
.item { background-image: url(../images/list-background.png); background-size:24px 24px; }
the original list-background.png is (for retina devices) 48*48* pixel width/height.
in all browsers, there is no problem with the css3 attribute background-size.
now my problem is to support internet explorer 7 and 8.
is there still a useful solution for fixing the background-size in ie7+8?
css3pie offers support for non-repeating background images background-size declaration for ie6 and ie7. http://css3pie.com/2013/01/28/pie-2-0-beta-1-released/ there's also a polyfill that supports ie8. https://github.com/louisremi/background-size-polyfill
or you could simply use conditional comments in your media queries to serve up separate separate images to ie7 and ie8.
Is there a way that I can use the CSS3 'Background-Size' property and then use something like Modernizr to ensure that it's supported in older browsers (in particular I want to use 'background-size: cover' option)?
I took a look at cssFx, which is mentioned from the Modernizr website, but this only seems to add vendor prefixes for browsers which need them to use a property, rather than allowing browsers such as IE8 to support the background size property.
Also looked at CSS3Pie, but that doesn't seem to currently support the background-size property.
[11/10/2011 - By older browsers I'm thinking mainly of IE7/8, but ideally I would like to cover FF3.6, etc.]
You're right that background-size is not supported on a number of older browsers.
The typical solution to this is to simulate it using an additional <div> or even an <img> element positioned behind the element you want to have the background.
This can be achieved simply by using additional markup, but this solution has the disadvantage of meaning that you'll be using it for all browsers, instead of the background-size property. In other words, it means deliberately degrading your code for the sake of old browsers, which is not ideal.
If you want to use the CSS property for browsers that support it, you could use a bit of Javascript to generate the above markup, but only if required. This means that modern browsers can happily use background-size, and only older browsers will use the fallback.
There are a number of Javascript solutions to this available on the web (a quick google turned up the following: http://css-tricks.com/766-how-to-resizeable-background-image/ among others), but more importantly you need to know how to trigger it based on the browser.
This is where Modernizr comes in. The description you've given of Modernizr in the question is not entirely accurate. What it does is produce a set of CSS classes in your HTML markup and matching variables in your Javascript that represent all the browser features. These are boolean flags indicating whether the current browser supports.
So with Modernizr you can then check in Javascript whether the browser supports background-size or not, and only run the alternative javascript function if it doesn't support it.
if(!Modernizr.backgroundsize) {
//do stuff here to simulate the background-size property for older browsers.
}
Hope that helps.
You can see support for background-size and its properties at: http://www.standardista.com/css3/css3-background-properties
This CSS supports IE9+, FireFox 3.6+, Safari, Chrome:
background-size: cover;
-moz-background-size: cover;
For IE7/8 support, caniuse.com lists this polyfill: https://github.com/louisremi/background-size-polyfill
First of all there is an easy fix for Firefox 3.6. There is a vendor prefix:
-moz-background-size
With regard a solution when using media queries: You could use Modernizr to target another image for when users are viewing older browsers, this would mean another browser request. However, presumably you will be loading smaller images for each query where the screen size gets smaller. Because Modernizr will create a situation where these requests will be ignored in newer browsers you will cut down on server requests for the majority of people using newer browsers.
Out of curiosity, I tried the above solution and it worked. I applied the following modernizr classes as: .no-backgroundsize for non background-size supporting ie and loaded in a new image.
For all other browsers I added the class .backgroundsize and included the prefix mention at the top for FF. This could be repeated for each media query with a new image for .no-background. This is one way to solve the problem.
-I edited this post after I tried it 12/15/12.
I think you probably want to use modernizr to check whether or not the property is supported in the current browser. If not, try to figure out an alternative display of your site/application that still looks good without the need of the background-size property.
Of course, you can also try another approach that does not involve this property at all like an underlying div with a picture in it (which you can size) and the content that is overlapping this div. Good luck.
Another option would be Background Size Polyfill:
.selector {
background-size: cover;
/* The url is relative to the document, not to the css file! */
/* Prefer absolute urls to avoid confusion. */
-ms-behavior: url(/backgroundsize.min.htc);
}
Best sample to support better:
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 - Old Chrome - Old Android */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
Don't add this, because it made problem in new firefox versions:
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5)
Source: mozilla.org
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.
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.