Property Categories and CSS3 Modules

How to make things look pretty.

Before we dive in, let's talk about pseudo-elements.

Pseudo-elements

Pseudo-elements let you inject elements into your markup from your stylesheet.

<p>Hello, world!</p>

These are the types of pseudo-elements:

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

Layout

(Review from last week)

Visual Formatting

• display
• position
• top
• right
• bottom
• left
• float
• clear
• z-index (learn about stacking context)
• overflow
• visibility
• cursor

Box Size

• width
• min-width
• max-width
• height
• min-height
• max-height

Margin and Padding

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

Skin

Background

• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-style
• background-clip
• background-color
• background

Border

• border-width
• border-color
• border-style
• border
• border-radius

Font

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

Text

• text-align
• text-decoration
• text-indent
• text-transform
• line-height
• vertical-align
• letter-spacing
• word-spacing
• white-space
• direction

Color

• color
• opacity

List

• list-style-type
• list-style-image
• list-style-position
• list-style

Table

• caption-side
• table-layout
• border-collapse
• border-spacing
• empty-cells

Geometry and Animation

• transform
• transition
• animation

Generated Content

• content
• quotes
• counter-reset
• counter-increment

Print

• page-break-before
• page-break-after
• page-break-inside
• orphans
• widows

Lots more...

(CSS on Mozilla Developer Network)

CSS Evolvement Process

Step 1: CSS specifications are developed by the World Wide Web Consortium (the W3C).

Step 2: Browser creators (Microsoft, Google, Mozilla) can choose to implement support for the specifications in their browsers.

Step 3: Web developers can use those features in their web pages.

Sometimes browser vendors implement support for a feature before it becomes a W3C Recommendation.

ul {
  -moz-columns: 2; /* for Firefox */
  -webkit-columns: 2; /* for Chrome, Safari */
  columns: 2; /* future-proofing */
}
    

To determine when vendor prefixing is necessary, I use caniuse.com.

CSS3 Modules

Current progress on module development.