Notice the forward slash, similar to how font shorthand and border-radius can be written. The slash allows you to include a background-size value after the position in supporting browsers.

In addition, you also have up to two optional declarations for background-origin and background-clip.

So the syntax looks like this:

Test it in your browser using this demo:

As for browser support, these new values seem to work fine in all modern browsers, but it’s likely you’ll have to provide good fallbacks for any nonsupporting browsers so it degrades gracefully.

4. The clip Property Works Only on Absolutely Positioned Elements

Speaking of background-clip, you’ve likely also seen clip before. It looks like this:

This will ‘clip’ the element at the specified locations (explained here). The only caveat is that the element to which you apply clip must be positioned absolutely. So you have to do this:

You can see how clip is disabled in the demo below when position: absolute is toggled:

You could also set the element to position: fixed, because, according to the spec, fixed-position elements also qualify as ‘absolutely positioned’ elements.

5. Vertical Percentages are Relative to Container Width, Not Height

This one is a tad bit confusing at first, which I’ve written about before. While you might know that percentage widths are calculated based on the width of the container, percentages on properties like top and bottom padding and top and bottom margins are likewise calculated based on the width of the container, rather than the height.

Here’s an example that you can adjust with a range slider, so you can see the effect:

Notice that there are 3 “vertical” percentages declared on the inner box (top and bottom padding, and bottom margin). When the slider moves, it changes only the container width. But the other values change in response to this, as the output on the page shows, showing that these values, when declared as percentages, are based on container width.

6. The border Property is Kind of Like Inception

We’ve all done this at some point:

The border property is a shorthand property that sets border-style, border-width, and border-color — all in a single declaration.

But don’t forget that each of the properties that the border property represents is itself a shorthand property. So border-width alone can be declared:

This will set different widths for each of the four borders. And the same is true for border-color and border-style, as shown in this awful demo:

In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.

But the catch is that you cannot use the regular border shorthand to set different values for different sides. So it’s shorthand inside of shorthand inside of shorthand, but not exactly.

7. The text-decoration Property is Now a Shorthand

I knew something on this list would blow your mind.

This is now standard, according to the spec:

This property now represents 3 properties: text-decoration-line, text-decoration-color, and text-decoration-style.

Unfortunately, Firefox is the only browser that supports these new properties, and (I’m assuming, for backwards compatibility), doesn’t support them in the shorthand yet.

Try the demo below in Firefox:

The demo is using the longhand values to do this. This ultimately will be a tough one because currently any browser that sees an extra value in text-decoration will nullify the entire declaration, which is clearly not good for backwards compatibility.

8. The border-width Property Accepts Keyword Values

Not exactly earth-shattering, and this isn’t new, but, in addition to standard length values (e.g. 5px or 1em), the border-width property accepts three keyword values: medium, thin, and thick.

In fact, the initial value of the border-width property is “medium”. The demo below uses “thick”:

When browsers render these keyword values, the spec doesn’t require that they map them to specific length values, but, from what I can see, all browsers seem to use 1px, 3px, and 5px.

9. Nobody Uses border-image

I wrote about the CSS3 border-image property on SitePoint a while back. The feature is supported in all modern browsers except IE10 and below. But does anybody care?

It seems like a really neat feature, allowing you to create border images that are fluid. Use the resize handle in this demo to test it out:

Unfortunately, border-image seems like a novelty that not many people are using. But maybe I’m wrong. If you know of any examples of border-image in use on a real project, or if you’ve used it, please let us know in the comments and I’ll be happy to admit I was wrong.

10. There’s an empty-cells Property

This one has support everywhere including IE8, and it looks like this:

As you probably figured out, it’s used for HTML tables. It tells the browser whether to show or hide table cells that have no content in them. Try the toggle button in this demo to see the effect of changing the value of the empty-cells property:

In this case, I had to ensure the borders were visible and not collapsed and I had to add some spacing between the cell borders. In some cases, this property would have no visual effect because there needs to be something visible on the table for this to make any difference.

11. The font-style Property Accepts a Value of “oblique”

Just about every time you see the font-style property, it’s used either with a value of “normal” or “italic”. But you can also give it a value of “oblique”:

But what exactly does that mean? And why does it look the same as italic?

The spec explains that the value “oblique”…

“…selects a font that is labeled as an oblique face, or an italic face if one is not.”

The description of “italic” in the spec is basically the same. The word “oblique” is a typographic term that basically represents slanted text, but not a true italic.

Due to the way CSS handles oblique text, it’s interchangeable with italic unless (as the spec explains) the font being used has a face that is identified as oblique.

I’ve never heard of a font that actually has an oblique face, but maybe I’m wrong. From the research I’ve done, it seems that it’s wrong for a font to offer both italic and oblique faces, because oblique is supposed to be a faux version of italic on fonts that don’t have a true italic.

So, if I’m not mistaken, what this means is if a font does not have a true italic face, setting the CSS to font-style: italic will actually display the font as font-style: oblique.

12. word-wrap is the Same as overflow-wrap

The word-wrap property is not used too often, but it’s very useful in specific circumstances. One often-used example is to help long unbroken strings of text (like URLs) to wrap, rather than break out of their container. Here’s an example:

Because this was originally a Microsoft creation, this property is supported in all browsers including Internet Explorer all the way back to IE5.5.

Despite cross-browser and, from what I can see, consistent support, the W3C decided to replace word-wrap with overflow-wrap — I’m guessing due to the former name being considered a misnomer. overflow-wrap has the same values as word-wrap, and word-wrap is now considered “an alternate syntax” for overflow-wrap.

While a few new browsers do support overflow-wrap, it seems pointless to bother with it since old browsers handle word-wrap just fine, and all browsers are required to continue to support word-wrap indefinitely, for legacy reasons.

We can start using overflow-wrap when all in-use browsers auto update — but until then, I don’t see a point in changing from the old syntax.

How Many of These Were New To You?

Did you learn anything from this post? I hope so. Probably most experienced CSS developers knew many, if not all, of the above points. But likely those newer to CSS would benefit more from these.

It would be interesting to see how many of these points were new to our readers. Post a comment below telling us how many were new to you (e.g. 6/12, 4/12, or whatever).