CSS

From Leo's Notes
Last edited on 17 December 2021, at 02:05.

Things have change a lot since the last few years. Here are my quick notes on using CSS3.


Nesting

CSS can now be nested (https://www.w3.org/TR/css-nesting-1/#nesting-selector). You can either use & (anything that is within), > (any immediate children).

CSS2 CSS3 
.outside .inside {
 # Styles A
}
.outside .inside img {
 # Styles B
}
.outside .inside p {
 # Styles C
}

.outside {
  > .inside {
    # Styles A
    > img {
      # Styles B
    }
    > p {
      # Styles C
    }
  }
}

Selection

A > B selects immediate children.

A ~ B selects siblings

A + B selects immediate siblings

Square brackets select based on attribute. Eg. input[type=checkbox]. a[href=xxx].

Pseudo Classes

For form elements:

  • :enabled, :disabled
  • :checked, :indeterminate
  • :required, :optional
  • :read-write, :read-only
  • :in-range, :out-of-range (form validation with html5)
  • :valid, :invalid (form validation with html5)
  • :focus, :focus-within, :default

Targeting elements

  • :first-child, :last-child, :only-child
  • :first-of-type, :last-of-type, :only-of-type, where type is a tag name
  • :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, to select every 2nd, 3rd, 4th, .. nth element
  • :empty, for empty elements with no text

Pseudo elements, defined with two colons.

  • ::after, ::before to create a pseudo element before or after something.
  • ::selection customizes how text appears when selected
  • ::placeholder customizes placeholder text (in text fields)


Layouts

Grid layout

Grid layouts are like tables with more features. You define a list of elements which can then be laid out into a grid using grid column/grid row.

Flex box

Flex boxes lays out items by sharing space amongst all child elements to avoid overflowing the parent.

Text layouts

Texts can now be formatted to span multiple columns using CSS multi-column layout.

text-overflow is used to detect overflow. It can be used to show an ellipsis or some custom character. Eg. text-overflow: ellipsis ".."

white-space: pre-wrap is like pre but wraps the text when necessary. pre-line is similar, but collapses white spaces.

Media queries

The prefers-color-scheme can be used to determine the user's system theme (light or dark)

CSS variables

Also called custom properties.

Features

Transitions and animations

Normally, CSS changes apply immediately. CSS transitions allow these changes to be tweened over a period of time. Not all properties can be transitioned -- review the list of animated properties for more information.

CSS animations builds on top of the idea of CSS transitions by defining the start/intermediate/end state and controlling when these transitions are played.

Transformations and image effects

The transform property allows an element to be rotated, scaled, skewed, or translated. You can stack as many transforms as you'd like.

The filter property applies graphical effects like blurring, color adjustments (by changing contrast, brightness, hue, opacity, and more), and drop shadows (which is also available using box-shadow, but this might have better performance by leveraging hardware acceleration).

There are also CSS functions for gradients: linear-gradient, radial-gradient, repeating-linear-gradient, and conic-gradient.

Image scaling can be accomplished by using background-size: cover or contain and will scale a background image proportionally big enough or small enough to fit inside the parent container.

Shadows

box-shadow adds shadow effects around an element. Use the shadow box generator tool to help construct these rules.

text-shadow adds shadows to text.

Text decorations

CSS counters

Define a counter that can be incremented with counter-increment and referenced like a variable. Can also use counter-set: counter N to set the counter some value. 

body { counter-reset: section; } /* Initial value is 0 */ 
h3::before {
  counter-increment: section; 
  content: "Section " counter(section) ": ";
}


Other tips

  • ::marker pseudo elements can change a list item's marker.
  • pointer-events:none makes an element ignore the mouse. Clicks go through to the element below.

Less

Rules can be inherited with &:extend() 

img {
  &:extend(.img-responsive);
}


See Also

Web Related