Web Development

Lecture Objectives

• learn how to use CSS for dynamic effects when the user jumps to a position within a web page
• learn how to use CSS for dynamic effects when the use hovers over an element
• learn a little about CSS transformations and animations

Making CSS More Dynamic

In this lecture, we look at ways to make our CSS more dynamic:
scroll behaviour;
hover effects;
transforms, transitions and animations.

There are other ways of including dynamic behaviour (e.g. JavaScript) and animations (e.g. animated GIFs, animated SVGs).

Revision: Page Jumps

A page jump is where the user clicks a link and she is moved to somewhere else within the same page.

scheme://host:port/pathname?query#fragment

Revision: Example Page Jumps

<nav>
    <a href="#education">Education</a>
    <a href="#hobbies">Hobbies</a>
    <a href="#family">Family</a>
</nav>
…
<main>
    <section id="education">
        <h2>Education</h2>
        …
    </section>
    <section id="hobbies">
        <h2>Hobbies</h2>
        …
    </section>
    <section id="family">
        <h2>Family</h2>
        …
    </section>
<main>
        

Page Jumps

By default, the browser scrolls to the destination instantly.

Using scroll-behavour: smooth, the browser scrolls to the destination over a period of time.

html {
    scroll-behavior: smooth;
}
    

Page Jumps

Suppose an element at the top of the page has position: fixed, e.g.:

nav {
    position: fixed;
    top: 0;
    left: 0;
}

When we jump to a destination element, that element snaps to the top of the viewport, so some of it will be behind the fixed element.

Page Jumps

The scroll-margin-top property allows us to define a top margin that the browser should use when snapping the scrolled element into place.

nav {
    position: fixed;
    top: 0;
    left: 0;
}

section {
    scroll-margin-top: 6.5rem;
}
    

You need to choose a value that is tall enough to get you past the fixed element.

Filter Selectors

• There are three ways to combine a base selector (which finds elements) with a filter.
• Attribute selectors — in square brackets, e.g.
  • E[foo] finds E elements that have an attribute foo.
• Pseudo-classes — after a colon, e.g.
  • E:first-child finds E elements that are the first child of their parent.
  • E:hover finds E elements, but only when the user hovers over them with the mouse
• Pseudo-elements — after two colons, e.g.
  • E::first-letter finds the first letter of E elements.
• See here: http://www.w3.org/TR/css3-selectors/

:hover Pseudo-Class

The :hover selector is generally triggered when the user hovers over an element with the cursor, e.g.:

<a href="news.html">Click for news!</a>

a {
    background-color: lightblue;
}

a:hover {
    background-color: lightcoral;
}

Click for news!

LVHA Order

a:link { 
    color: red;
}
            
a:visited {
    color: orange;
}
            
a:hover {
    color: blue;
}
            
a:active {
    color: green;
}
        

Click for news!

Hovering on Touchscreens

Problem: You can't hover on a touchscreen!

If a touchscreen user touches an element that is selected by :hover, devices vary in what happens.
Most do nothing.

So don't rely on hover behaviour in your web site.

The hover @rule

You can test whether the user's primary input mechanism can hover.

a {
    background-color: lightblue;
}
                    
@media (hover: hover) {
    a:hover {
        background-color: lightcoral;
    }                
}
    

Example: Big Tables

In tables with lots of data, especially lots of columns, users find it difficult to read along each row.

Example: Big Tables

We can help the user by including borders.

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}

Example: Big Tables

But we could also include a hover effect to highlight the row that the user is trying to read.

tr:hover {
    background-color: yellow;   
}

Example: Big Tables

Some web developers prefer zebra striping.

tr:nth-child(odd) {
    background-color: lightgray;
}

Example: Big Tables

One way to do both is to use zebra-striping when hover effects are not available.

@media (hover: none) {
    tr:nth-child(odd) {
        background-color: lightgray;
    }
}

@media (hover: hover) {
    tr:hover {
        background-color: yellow;   
    }
}
    

CSS Transforms

CSS transforms allow elements to be transformed in two- or three-dimensional space.

E.g. doubling the size of an image:

img {
    transform: scale(2);
}
    

E.g. doubling its size and rotating it 30 degrees clockwise:

img {
    transform: scale(2) rotate(30deg);
}
    

Hovering

Transforms are often combined with hover effects, e.g.

img:hover {
    transform: scale(2) rotate(30deg);
}
    

CSS Transitions

CSS transitions allow changes in property values to occur smoothly over a specified duration.

img {
    transition: all 1s linear 0s;
}
            
img:hover {
    transform: rotate(360deg);
}
    

CSS Animations

CSS has animations now, using @keyframes, e.g.:

img {
    position: relative;
    animation: myanimation 6s infinite;
}
                    
@keyframes myanimation {
    0%   {
        left: 0px;
    }
    50%  {
        left: 800px; transform: rotate(720deg);
    }
    100% {
        left: 0px; transform: rotate(0deg);
    }
}
    

A Concluding Observation

Web Developers overuse JavaScript,
especially for simple changes of style.

Sometimes CSS alone suffices, e.g.:
scroll effects;
hover effects;
animations.

G'luck!