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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

Grid layout[edit | edit source]

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[edit | edit source]

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

Text layouts[edit | edit source]

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[edit | edit source]

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

CSS variables[edit | edit source]

Also called custom properties.

Features[edit | edit source]

Transitions and animations[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

CSS counters[edit | edit source]

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[edit | edit source]

  • ::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[edit | edit source]

Rules can be inherited with &:extend() 

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


See Also[edit | edit source]

Web Related