Media Queries are used to style elements depending on certain features, like ...

... width of screen

                    .card-container {
                        display: flex;
                        flex-direction: row;

                        @media (max-width: 600px) {
                            flex-direction: column;
                        }
                    }
                

... how accurate the pointer is

                    div {
                        margin: 0 1.4rem;

                        @media (pointer: coarse) { /* touch device */
                            margin: 0;
                        }
                    }
                

... print view

                    @media print {
                        .advertisement {
                            display: none;
                        }
                    }
                

Container Queries are similar to Media Queries, but depend on a defined container

With CSS complex animations can be created. Two main types:

• Transitions
• Animations

Transitions

Normally, style changes are instant. With transitions it is possible to transition smoothly between the two styles

Transition triggers

A transition needs a state (style) change and an event that triggers it. Examples of possible triggers:

• :hover pseudo-class
• :focus pseudo-class
• class change from Javascript

                    <div class="colored-border">Hover over me!</div>
                

                .colored-border {
                    background-color: #ff9900;
                    transition: background-color 1s;
                }
                .colored-border:hover {
                    background-color: #0099cc;
                }
                

The property transition (also a shorthand) allows for some simple animation between different states of other properties:

                        transition: property duration easing timing-function delay;
                

• property: which property should be transitioned? e.g. background-color
• duration: how long should the transition be? e.g. 2s
• easing: what kind of transition? e.g. linear
• delay: should the transition only start after an initial delay? e.g. 1s

Animations

• With animations more complex animations can be created
• Animations are specified in keyframes and then applied to elements

                        @keyframes move {
                            0% { transform: translateY(-100%); }
                            70% {
                                background-color: #ccff00; /* green */
                                transform: translateY(0);
                            }
                            100% { background-color: #0099cc; } /* blue */
                        }
                        .moving-container {
                            background-color: #ccff00;
                            animation-name: move;
                            animation-iteration-count: infinite;
                            animation-direction: alternate;
                            animation-duration: 2s;
                        }
                    

Many different configuration options, we don't go into detail here

Check out the good documentation on MDN

Easing

Animations can be eased. The interpolation is by default slightly eased but can be configured with animation-timing-function.

Easing

What can be animated?

Generally all properties that have a 'middle state' can be interpolated. Example:

• font-size (12px -> 16px), middle state is 13px-15px: animation is possible
• font-family (Helvetica -> Times New Roman); no clear middle state: no animation is possible

List of animatable properties

Animation performance

If possible: animate properties which do not trigger layout or paint

                        @keyframes animate-fast {
                            0% { transform: scaleY(0); }
                            100% { transform: scaleY(100%); }
                        }
                        @keyframes animate-slower {
                            0% { height: 0; }
                            100% { height: 100%; }
                        }
                

Which properties? Check here

What if we want to display an element above another?

z-index

The z-index specifies the stack level of the element in the current stacking context

                <div style="z-index: 1">z-index: 1</div>
                <div style="z-index: 3">z-index: 3</div>
                <div style="z-index: 2">z-index: 2</div>
                <div style="z-index: 1">z-index: 1</div>
            

Stacking context

z-index is not global, it is in relation to the current stacking context. A stacking context is formed on the following elements:

• on the root html element
• on an element with a position value of absolute, relative and a z-index other than auto
• on an element that is a child of a flex/grid container
• many more, see MDN

In this example, every positioned element creates its own stacking context, because of their positioning and z-index values

Accessibility

Accessibility is a big subject. We cover some tips here

Use semantic elements

Semantic elements help screen readers (and also SEO)

Keep element hierarchy consistent

Example: the order of headings should always be consistent:

Wrong: <h1> → <h3> → <h4> → <h5>

Correct: <h1> → <h2> → <h3> → <h4>

Keyboard navigation

• Not all users can use a mouse
• Make navigation through application (especially forms) possible with just the keyboard
• Navigation with the tab key should be possible
• Make sure focus state is visible (use :focus)

Check touch targets

Check that click / touch targets are at least 9mm high by 9mm wide

Colors

Use of color

• Use more than color to convey information (e.g. red green for okay / not okay)
• Make sure to use strong contrasts between important colors. Color contrast checker