JavaScript vs CSS

**styxlawyer** · 12-12-2016, 04:40 PM

Here are two pages which look very similar. The first is animated with JavaScript and the second is pure CSS, but the second file is almost seven times larger than the first! There's obviously advantages for each method, but which would you choose?

Link 1

Link 2

**mlegg** · 12-12-2016, 05:26 PM

the loading times are somewhat close
http://www.webpagetest.org

**jscheuer1** · 12-13-2016, 12:05 AM

Load times are relative and only become a consideration when the connection is low or poor. But That's something to consider. Less code is better for wider dissemination of the page. If the action is the same, css has a slight advantage in being more widely supported, though not by much. It's really pretty much six of one, half a dozen of the other. If your target is high end users, then css I would think, otherwise javascript might be the better choice (better results with lower throughput users, wider audience).

**coothead** · 12-13-2016, 06:04 PM

Hi there styxlawyer,

which would you choose?

I would always take the CSS option whenever possible.

The first is animated with JavaScript and the second is pure CSS,
but the second file is almost seven times larger than the first!

That, of course, is only due to the coder having used basic coding methodology.

Have a a look at this rather more refined example...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#text-change {
    padding: 1em; 
    border-radius: 1em; 
    background-color: #111; 
    border: 0.2em solid #999;
    text-align: center;
 }
#text-change span     {animation: change 1.8s 0s ease-in-out infinite; } 
#text-change .color0  {color:#f00; animation-delay: 0s;      }
#text-change .color1  {color:#ff8000; animation-delay: 0.15s;}
#text-change .color2  {color:#ff0; animation-delay: 1.3s;    }
#text-change .color3  {color:#80ff00; animation-delay: 0.45s;}
#text-change .color4  {color:#0f0; animation-delay: 0.6s;    }
#text-change .color5  {color:#00ff80; animation-delay: 0.75s;}
#text-change .color6  {color:#0ff; animation-delay: 0.9s;    }
#text-change .color7  {color:#0080ff; animation-delay: 1.05s;}
#text-change .color8  {color:#0ff; animation-delay: 1.2s;    }
#text-change .color9  {color:#8000ff; animation-delay: 1.35s;}
#text-change .color10 {color:#f0f; animation-delay: 1.5s;    }
#text-change .color11 {color:#ff0080; animation-delay: 1.65s;}
@keyframes change {
   0%     {color: #f00;   }
   8.33%  {color: #ff0080;}
  16.66%  {color: #f0f;   }
  25%     {color: #8000ff;}
  33.33%  {color: #00f;   }
  41.66%  {color: #0080ff;}
  50%     {color: #0ff;   }
  58.33%  {color: #00ff80;}
  66.66%  {color: #0f0;   }
  75%     {color: #80ff00;}
  83.33%  {color: #ff0;   }
  91.66%  {color: #ff8000;}
 100%     {color: #f00;   }
 }
</style>

</head>
<body> 
<h2 id="text-change">
 <span class="color0">We</span>
 <span class="color1">would</span>
 <span class="color2">like</span>
 <span class="color3">to</span>
 <span class="color4">wish</span>
 <span class="color5">all</span>
 <span class="color6">our</span>
 <span class="color7">visitors</span>
 <span class="color8">a</span>
 <span class="color9">very</span>
 <span class="color10">Merry</span>
 <span class="color11">Christmas</span>
 <span class="color0">and</span>
 <span class="color1">a</span> 
 <span class="color2">Happy</span>
 <span class="color3">New</span>
 <span class="color4">Year.</span>
</h2>

</body>
</html>

...which is, in my opinion, pleasantly smother than the JavaScript example.

coothead

**molendijk** · 12-14-2016, 11:21 PM

As a general rule, I would prefer CSS over JS when both methods work, because most of the time CSS is faster than JS.
But there are cases in which CSS doesn't work whereas JS does. I just finished a web page where the left padding of the body was supposed to vary according to certain factors related to the width of the viewport. The CSS method (media queries) worked well enough in Firefox's Responsive Design-modus. But, strangely enough, it didn't work at all in the 'real web situation'. I had to use a javascript function together with a timeout to make things work (didn't work without the timeout). My guess is that the CSS-method may not work in complex cases where a timeout is needed, which CSS doesn't provide for.

**styxlawyer** · 12-15-2016, 12:45 AM

Thanks to all for your help, it's my first time using CSS animation. You're never too old to learn something new!

Here's the finished page which I will be using tomorrow evening. Please ignore the table at the top it was the quickest and easiest way to grab the page header from the existing site.

I was trying to use JavaScript to modify the parameters in the keyframes of the image animation according to the window width, but realised that using "100%" instead of "nnnpx" would automatically compensate for different sizes of the browser window.

I found these two pages really useful:

http://easings.net
http://cubic-bezier.com

**coothead** · 12-15-2016, 09:21 AM

Hi there styxlawyer.

you really need to change this...

Code:


 body {
    background-color: #0083de;
    font: bold 2em/2.5em verdana, arial, helvetica, sans-serif;
    overflow:hidden;
 }

...to this...

Code:


 body {
    background-color: #0083de;
    font: bold 2em/2.5em verdana, arial, helvetica, sans-serif;
    overflow-x:hidden;
 }

...as the flashing text and scrolling thing at the bottom of
the page start to disappear at about 1100px page width.

Also note that at about page width 470px the the largest
of the flashing text words start to overflow its container.

An "@media query" to reduce the font size would be the
appropriate action to take.

Please ignore the table at the top it was the quickest...

I really did try to comply, but...

https://validator.w3.org/nu/?doc=htt...f%2FParty.html

coothead

**styxlawyer** · 12-15-2016, 11:07 AM

Hi coothead,

Thanks for those tips. I have changed the overflow but will leave the rest as the page will only be seen once on one laptop and it seems to work OK. The original page is on the bridgewebs.com server. The Bridgewebs system hosts many hundreds of Bridge Club websites and I will pass on the validator results to the web master.

Thread: JavaScript vs CSS

Thread Tools

Search Thread

JavaScript vs CSS

Similar Threads

Simple JavaScript Function which are frequently used in JavaScript

Loading javascript content dynamically into Google map javascript

Javascript.AJAX link inside javascript dropdownmenu

3rd javascript not supporting in side the javascript program

[Javascript] Class-Based Javascript Analog Clock

Bookmarks

Bookmarks

Posting Permissions