CSS in 2019

CSS Variables

  • Use--variable-name: 10px syntax to define a CSS variable. To apply it, use the var(--variable-name) to an element.
  • If you need to have a fallback value when using a variable, follow the var(--variable-name, 15px) syntax
  • Variables follow the same inheritance rules in CSS - a variable is available to use from the selector it was declared and all its descendants.
  • Global variables are declared using the :root pseudo selector

Grids

  • CSS grid items are content-box by default
  • Fractional unit fr is similar to percentages but in decimal form
  • Use repeat(NUMBER_OF_TIMES, 100px, 200px) to save you from retyping your columns or rows
  • Use grid-template-columns: span NUM_OF_MERGE to create a colspan or rowspan merge. Also applicable to grid-template-rows.
  • Use grid-template-areas to name your columns. This name can then be used with grid-template-column:[COLUMN_NAME] 100px or grid-template-row:[COLUMN_NAME] 100px to quickly define your measurements.

2D and 3D Transformations Functions

  • translate(30px, 10px) to position elements in the x and y axes from its parent element area in a 2D plane
  • rotate(90deg) for rotating an element in a 2D plane
  • transform-origin: 50% 50% | center uses the element's midpoint for rotation in a 2D plane
  • rotateX(45deg) rotates an element from the x-axis in a 3D plane - the element is upside down like a reflection when the angle of rotation is 180deg
  • rotateY(45deg) rotates an element from the y-axis in a 3D plane - the effect of a 180deg rotation makes the element appear like you are looking at it from behind
  • rotateZ(90deg) is the same as rotate(90deg)
  • scale(.5,.5) is a short hand for scaleX(.5) and scaleY(.5). It resizes the specified element on a 2D plane. A value lower than 1 makes the element smaller. A negative value gives it a rotation effect.

Misc

  • These default font sizes are all the same font-size: 100% | 16px | 12pt | 1em | medium
  • Superimpose background images by specifying multiple images when using background, e.g. background: url(image1.jpg, image2,jpg)
  • Use object-fit to specify scaling rules on image or video tags in relation to its container element