Week 6: CSS Variables & Other Useful Tidbits

Agenda

• No Zoom class due to Thanksgiving
• In-Class tutorial
  • CSS Variables
  • CSS Math Functions
  • position
• Introduce Project 1 - Two Page Website

In-Class Tutorial

CSS Variables & More

Together we will explore how CSS Variables and math functions can streamline our CSS.

Deliverables

In-Class 6

Basic Banners

This follow along tutorial will be a practical application of this week's lesson to create a basic banner.

Due: Fri Oct 13, 2023

Assignment 6

Banners With Variables

Create a banner with different alignment & size options using CSS variables and modifier classes.

Due: Sun Oct 15, 2023

CSS Variables

CSS3 introduced the idea of including variables in your CSS to make it easier to change the values of repeated properties.

• The concept of style variables was actually something that came from CSS Preprocessors like SASS, Stylus, and LESS.
• The basic syntax

/* create the variables within a specific scope
:root is used as it includes the whole page */

:root {
  --myvar1: 1rem;
  --myvar2: pink;
}

/* the method var( ) is used to inject the value into a style declaration */
p {
  font-size: var(--myvar1);
  color: var(--myvar2);
  border: 1px solid hsl(var(--myvar2), 50%, 50%);
}

• CSS variables video (opens new window)

TIP

CSS variables are a great way to avoid errors when using the same value for a colour or a font-size.

CSS Math Functions

There are a number of math functions we can use in CSS to help create dynamic values for our font-sizes, widths, heights, and other values. Take a look at these basic examples of how they work:

CSS Browser Prefixes

When browser companies want to add a trial version of a CSS property they add support for a prefixed version. Each browser engine has it's own prefix. If you want to support older browsers then you add the prefixed version of the property first and then the non-prefixed version last. Not all properties have a prefixed version for each browser, or at all.

/* demo version of the prefixes */
-moz-border-radius: 12px; /* for firefox */
-webkit-border-radius: 12px; /* webkit for safari, chrome, and new opera */
-o-border-radius: 12px; /* old opera prior to v15 */
-ms-border-radius: 12px; /* Microsoft IE and Edge */

Object-Fit

CSS backgrounds can use the background-size property to alter the size of the image to fill spaces while still maintaining the proper aspect ratio.

If you have an <img> element and want to do the same thing - altering the size of an image while maintaining the proper aspect ratio - then we can use the CSS object-fit property.

Scroll-snap

There is a CSS property scroll-snap that will control how webpages move when the user clicks a link to move to a different part of the same page. gomakethings.com tutorial (opens new window)

Clip-Path

The CSS clip-path property lets use create shapes by defining the points around the edges. The path that we define will crop the content that is outside the shape we defined.

@supports

When you want to change your CSS properties depending on whether or not a browser supports something

• The syntax looks like media queries
• @supports video (opens new window)
• :not video (opens new window)

@supports (display: flex) {
  /* CSS here if the browser supports flexbox */
}
@supports not (display: flex) {
  /* CSS here if the browser does NOT support flexbox */
}

To Do Before Week 7

Self-Directed To Do

Watch the following videos before week 7: