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
- Backgrounds and borders. moz://a. Retrieved 2021-05-26.
- [Handling different text directions][2]. moz://a. Retrieved 2021-05-26.
- [CSS values and units][3]. moz://a. Retrieved 2021-05-26.
- [Organizing your css][4]. moz://a. Retrieved 2021-05-26.