Joe's
Digital Garden

CSS

Backgrounds

Greater details in the MDN's Backgrounds and borders article.

Background Image Fit

We can specify how a background image will be fit into it's container using cover and contain.

cover
Scale the image to completely cover the box, retaining aspect ratio and allowing for overflow
contain
Scale the image to fit the box, retaining aspect ratio, and not allowing for overflow.

Multiple Background Images

We can specify multiple background images that will be stacked one on top of the next, e.g.

background-image: url(image1.png), url(image2.png);

Background Attachment

We can specify if a background will scroll with the page or be fixed to an element via scroll, fixed, and local.

Text Direction

More info in MDN's [Handling different text directions][2].

Support for vertical writing modes viat writing-mode: vertical-rl

Example:

Vertical Writing Mode

<div>
    <p style="writing-mode:vertical-rl;">Vertical Writing Mode</p>
</div>

New values for specifying width and height in support of alternative writing modes include block-end inline-end, padding-inline-start, etc. These are useful with the flex and grid layouts.

Sizes

More info in MDN's [CSS values and units][3].

em
Size relative to the parent font size
rem
Size relative to the root element (html) font size
vw/vh
1% of the width or height of the view port

Variables

More info in MDN's [Organizing your css][4].

We finally have variables! Although they seem a bit clunky compared to what LESS and SASS where doing:

:root {
  --bg-color: brown
}

p {
  color: var(--bg-color);
}

This creates the variable --bg-color and sets it's value to brown. It scopes the variable to the root element. Further down we set the color of paragraph elements to --bg-color by calling the var() function and passing inthe variable name.

OOCSS

More info in MDN's [Organizing your css][4].

Object Orientated CSS takes on an inheritence approach to defining classes in CSS similar to creating a complex tree of base and child classes in Java.

We define a base class containing all the common properties. We would then define combinators which more specific properties.

External References

  1. Backgrounds and borders. moz://a. Retrieved 2021-05-26.
  2. [Handling different text directions][2]. moz://a. Retrieved 2021-05-26.
  3. [CSS values and units][3]. moz://a. Retrieved 2021-05-26.
  4. [Organizing your css][4]. moz://a. Retrieved 2021-05-26.

Linked References