20 CSS functions

Question 1

calculate 20 + 12 in CSS

Answer 1

calc(20 + 12)

Question 2

ds f

Answer 2

s df

Question 3

How does min() work?

Answer 3

min(100px, 100%)
It takes the smallest of the numbers

can do math inside min
min(100px + 20px, 100vw - 2rem)

Question 4

How does max() work?

Answer 4

max(100px, 4em, 50%)

from the list of given values, it will take the largest one.

Question 5

set a CSS variable (custom property)

call a CSS variable

Answer 5

–variable-name: value

var(–variable-name)

Question 6

How does CSS custom property scope work?

Answer 6

scope includes the selector the custom property was declared for as well as any descendants of that selector.

Question 7

How do you make a css variable available to all selectors?

Answer 7

make the variable in :root

Question 8

Using root properties, how do you set a light or dark theme?

Answer 8

In CSS
Select :root.lighttheme and :root.darktheme that use the set the same variable names

These variable names will be used throughout the document’s other elements.

In JS
create a function that sets the classname to only lighttheme or darktheme on a click

Question 9

Inheret the theme properties from the os

What are some drawbacks (2)

Answer 9

To set the theme to dark if the user has set the theme to dark:
@media (prefers-color-scheme: dark) {
:root {
–border-btn: 1px solid rgb(220, 220, 220);
–color-base-bg: rgb(18, 18, 18);
–color-base-text: rgb(240, 240, 240);
–color-btn-bg: rgb(36, 36, 36);
–theme-name: “dark”;
}
}

To set the theme to lightif the user has set the theme to light:
@media (prefers-color-scheme: light)
1. only light and dark
2. Doesn’t (by itself) allow user to change it on their own

Question 10

Have a fallback option within a css variable

Answer 10

var(option1, backupoptions)

it can be another var

Question 11

What happens if the variable is set to something invalid vs when it’s not a variable?

p {
color: blue;
}

p {
color: 16px;
}

VS

:root {
–text-color: 16px;
}

p {
color: blue;
}

p {
color: var(–text-color);
}

Answer 11

In the first instance, p is blue

in the second, p is black (the default initial colour)

Question 12

refer to a variable in JS (card needs work)

Answer 12

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

Question 13

ds

Answer 13

d