deldalton Posted December 5, 2014 Share Posted December 5, 2014 Hello All! I've been looking into creating a JS slideshow, and stumbled across the following article ... Simple Crossfading Slideshow in Pure CSS Is it now considered best practice (that is, simpler and beneficial to browser performance) to use HTML5 and CSS3 to replace JS? Of course, I appreciate that it does depend on what you're trying to achieve. If the JS uses less resources and is faster to run than the CSS then it would defeat the object. But, this particular article has peaked my interest. I've never seen the <figure> tag before, either. Has the author of the article used it correctly? Many thanks. Link to comment Share on other sites More sharing options...
deldalton Posted December 5, 2014 Author Share Posted December 5, 2014 I've tried creating the same cross fading slideshow. The only difference is the images I use, and the amount of images I use, which means I must amend the animation duration and the percentages for each step. I've done that. But, my code doesn't work. In fact, even if I copy the HTML and CSS exactly ... it doesn't work. I'm totally lost as to why. I'm working on my Apple Mac at the moment, and I've view the site in Safari and Chrome, without any luck. What am I missing? It would seem like the @keyframe isn't starting. Link to comment Share on other sites More sharing options...
deldalton Posted December 5, 2014 Author Share Posted December 5, 2014 That'll teach me not to read the article properly. I hadn't allowed for browser compatibility. I had assumed that it was fully supported but it's not yet. So, it's now working. I just need to make a few tweaks to make it pretty ... Link to comment Share on other sites More sharing options...
deldalton Posted December 5, 2014 Author Share Posted December 5, 2014 On second thoughts, after trying to open the page on my Windows device, I'm finding certain browsers aren't working and none of them are working correctly. Maybe I'll go back to JS, after all. It's much more predictable. Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2014 Share Posted December 5, 2014 The <figure> element is part of HTML 5 and is used to contain images with an optional caption. Search engines can use it, for example, to determine the title and keywords that belong to the image. In order to get <figure> and other HTML 5 elements to work in older versions of Internet Explorer you need to use Javascript to tell the browser that those elements exist. Just writing document.createElement("figure") for each of the elements will work, then you need to give them their default styling with CSS. There are people who have built a Javascript program that does this for you, just search for "HTML5shiv". CSS 3 animations are supported by all modern browsers (with vendor prefixes), while older versions of Internet Explorer will not work. If it's not working in any browser for you then you have done something different from the instructions in the article, or perhaps you have not been updating your browsers. For the moment, it's probably best to use a Javascript image slider. One that will fall back to having all images visible if Javascript is disabled. There are still way too many people using old versions of Internet Explorer. Link to comment Share on other sites More sharing options...
deldalton Posted December 5, 2014 Author Share Posted December 5, 2014 Ingolme. Thanks again for your comprehensive response! I will look further into. It is highly likely that i've done something wrong! I would definitely prefer a solution that is already supported in the majority of browsers, without vendor prefixes, so I'll continue to play around with Javascript for the time being. All the best. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now