Should I replace my JS img slide with HTML5 and CSS3

[deldalton]

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.

[deldalton]

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.

[deldalton]

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 ...

[deldalton]

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.

[Ingolme]

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.

[deldalton]

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.