Major changes in CSS3

The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making its way through the W3C in various stages of the recommendation process. This process has made it much easier for various pieces of CSS3 to be accepted and implemented in the browser by different manufacturers.

If you compare this process to what happened with CSS2, where everything was submitted as a single document with all the Cascading Style Sheets information within it, you begin to see the advantages of breaking the recommendation up into smaller, individual pieces. Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules.

CSS3 Selectors

CSS3 offers a bunch of new ways you can write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements.

Three new attribute selectors of CSS3:

  • Attribute beginning matches exactly

element[foo^=”bar”]

The element has an attribute called foo that begins with “bar” e.g.

  • Attribute ending matches exactly

element[foo$=”bar”]

The element has an attribute called foo that ends with “bar” e.g.

  • Attribute contains the match

element[foo*=”bar”]

The element has an attribute called foo that contains the string “bar” e.g.

16 new pseudo-classes:

  • :root
    • The root element of the document. In HTML this is always.
  • :nth-child(n)
    • Use this to match exact child elements or use variables to get alternating matches.
  • :nth-last-child(n)
    • Match exact child elements counting up from the last one.
  • :nth-of-type(n)
    • Match sibling elements with the same name before it in the document tree.
  • :nth-last-of-type(n)
    • Match sibling elements with the same name counting up from the bottom.
  • :last-child
    • Match the last child element of the parent.
  • :first-of-type
    • Match the first sibling element of that type.
  • :last-of-type
    • Match the last sibling element of that type.
  • :only-child
    • Match the element that is the only child of its parent.
  • :only-of-type
    • Match the element that is the only one of its type.
  • :empty
    • Match the element that has no children (including text nodes).
  • :target
    • Match an element that is the target of the referring URI.
  • :enabled
    • Match the element when it’s enabled.
  • :disabled
    • Match the element when it’s disabled.
  • :checked
    • Match the element when it’s checked (radio button or checkbox).
  • :not(s)
    • Match when the element does not match the simple selector s.

One new combinator:

  • element A ~ element B
    • Match when element B follows somewhere after element A, not necessarily immediately.

New Properties of CSS

CSS3 also introduced a number of new CSS properties. Many of these properties were to create visual styles that would likely associate more with a graphics program like Photoshop. Some of these, like border-radius or box-shadow, have been around since the introduction of CSS3. Others, like flexbox or even CSS Grid are new styles that are still often considered CSS3 additions.

In CSS3, the box model has not changed. But there are a bunch of new style properties that can help you style the backgrounds and borders of your boxes.

Multiple Background I​mages

Using the background-image, background-position, and background-repeat styles you can specify multiple background images to be layered on top of one another in the box. The first image is the layer closest to the user, with the following ones painted behind. If there is a background color, it is painted below all the image layers.

New Background Style Properties of CSS3

There are some new background properties in CSS3.

  • background-clip
    • This property defines how the background image should be clipped. The default is the border box, but it can be changed to the padding box or the content box.
  • background-origin
    • This property determines whether the background should be places in the padding box, the border box, or the content box.
  • background-size
    • This property allows you to indicate the size of the background image. It allows you to stretch smaller images to fit the page.

Changes to Existing Background Style Properties CSS3

There are few changes to existing background style properties:

  • Background-repeat– There are two new values for this property: space and round. Space spaces the tiled image evenly within the box without being clipped. Round rescales the background image so that it will tile a whole number of times in the box.
  • Background-attachment– A new value “local” is added so that the background will scroll with the element’s content when that element has a scroll bar.
  • Background– The background shorthand property adds in the size and origin properties.

Border Properties of CSS3

In CSS3 borders can be the styles we’re used to (solid, double, dashed, etc.) or they can be an image in border. Plus, CSS3 brings in the ability to create rounded corners. Border images are interesting because you create an image of all four borders and then tell the CSS how to apply that image to your borders.

Properties of New Border Style

There are some new border properties in CSS3:

  • Border-radius– border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
    1. These properties allow you to create rounded corners on your borders.
  • Border-image-source– Specifies the image source file to be used instead of border styles already defined.
  • border-image-slice– Represents the inward offsets from the border image edges
  • Border-image-width– Defines the value of the width for your border image.
  • Border-image-outset– Specifies the amount that the border image area extends beyond the border box.
  • Border-image-stretch – Defines how the sides and middle parts of the border image should be tiled or scaled.
  • Border-image– The shorthand property for all the border image properties.

Additional CSS3 Properties Related to Borders and Backgrounds

When a box is broken at a page break, column break for line break (for inline elements) the box-decoration-break property defines how the new boxes are wrapped with border and padding. Backgrounds can be divided up between multiple broken boxes using this property.

There also is a box-shadow property that can be used to add shadows to box elements.

With CSS3, you can now easily set up a Web page with multiple columns without tables or complicated div tag structures. You simply tell the browser how many columns the body element should have and how wide they should be. Plus you can add borders (rules), background colors that span the height of the column, and your text will flow through all the columns automatically.

CSS3 Columns

There are three new properties that allow you to define the number and width of your columns:

  • column-width
    • Defines the width of your columns should be. The browser will then flow the text to fill the space with columns that wide.
  • column-count
    • Defines the number of columns on the page. The browser will then create columns wide enough to fit in the space, but only the number you specify.
  • columns
    • Shorthand property where you can define either the width or number (or both, but that rarely makes sense).

Column Gaps and Rules in CSS3

Gaps and rules are placed between columns in the same multicolumn scenario. Gaps will push apart the columns, but rules do not take up any space. If a column rule is wider than its gap, it will overlap adjacent columns. There are five new properties for column rules and gaps:

  • Column-gap–                      Defines the width of the gaps between the columns.
  • Column-rule-color–        Defines the color of the rule.
  • Column-rule-style–          Defines the style of the rule (solid, dotted, double, etc.).
  • Column-rule-width –       Defines the width of the rule.
  • Column-rule–                     A shorthand property defining all three column rule properties at once.

Column Breaks, Spanning Columns, and Filling Columns in CSS3

Column breaks use the same CSS2 options used to define breaks in paged content, but with three new properties: break-before, break-after, and break-inside.

Like with tables, you can set elements to span columns with the column-span property. This allows you to create headlines that span multiple columns more like a newspaper.

Filling columns decides how much content will be in each column. Balanced columns try to put the same amount of content in each column while auto adjust follow  the content until the column is full and then goes to the next one.

Features in CSS3 That Aren’t Included in CSS2

There are lots of additional features in CSS3 that didn’t exist in CSS2, including:

  • CSS Template layout module and CSS3 Grid positioning module: Creating grids with CSS.
  • CSS3 Text module: Outline text and even create drop-shadows with CSS.
  • CSS3 Color module: Now with opacity.
  • Changes to the box model: Including a marquee property that acts like the IE tag.
  • CSS3 User Interface module: Giving you new cursors, responses to actions, required fields, and even resizing elements.
  • Media Queries: Media queries allow you more flexibility when defining how a style sheet should be used. For instance, you could define a style sheet that is only for handheld devices that have a viewport larger than 20em.
  • CSS3 Ruby module: Provides support for languages that use textual ruby to annotate documents.
  • CSS3 Paged Media module: For even more support for paged media (paper, transparencies, etc).
  • Generated content: L running headers and footers, footnotes, and other content that is generated programmatically, especially for paged media.
  • CSS3 Speech module: Changes to aural CSS.