12 Little-Known CSS Facts

Louis Lazaris
Tweet

CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about.

In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.

1. The color Property Isn’t Just for Text

Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Some of you not as experienced with CSS may not realize, however, that it doesn’t define only the color of the text.

Take a look at the demo below:

See the Pen CtwFG by SitePoint (@SitePoint) on CodePen.

Notice in the CSS, only one color property is used, on the body element, setting it to yellow. As you can see, everything on the page is yellow, including:

  • The alt text displayed on a missing image
  • The border on the list element
  • The bullet (or marker) on the unordered list
  • The number marker on the ordered list
  • The hr element

Interestingly, the hr element, by default does not inherit the value of the color property, but I had to force it to do so by using border-color: inherit. This is kind of odd behaviour to me.

All of this is verified by the spec:

This property describes the foreground color of an element’s text
content. In addition it is used to provide a potential indirect value
… for any other properties that accept color values.

I can’t think of anything else that would qualify as ‘foreground’, but if you do, let us know in the comments.

2. The visibility Property Can Be Set to “collapse”

You’ve probably used the visibility property hundreds of times. The most commonly used values are visible (the default for all elements) and hidden, which makes an element disappear while allowing it to still occupy space as if it was there (which is unlike display: none).

A third and rarely used value for the visibility property is collapse. This works the same way as hidden on all elements except table rows, table row groups, table columns, and table column groups. In the case of these table-based elements, a value of collapse is supposed to work similar to display: none, so that the space occupied by the collapsed row/column can be occupied by other content.

Unfortunately, the way browsers handle collapse is not consistent. Try the following demo:

See the Pen visibility: collapse by SitePoint (@SitePoint) on CodePen.

The CSS-Tricks Almanac advises never to use this, due to the browser inconsistencies.

From my observations:

  • In Chrome, it makes no difference if you apply collapse or hidden (See this bug report and comments)
  • In Firefox, Opera, and IE11, collapse seems to respond exactly as it should: The row is removed and the row below moves up.

Admittedly, this value is probably rarely ever going to be used, but it does exist, so if you didn’t know about it before, I guess in some odd way you are now smarter.

3. The background Shorthand Property Has New Values

in CSS2.1 the background shorthand property included 5 longhand values – background-color, background-image, background-repeat, background-attachment, and background-position. In CSS3 and beyond, it now includes three more, for a total of up to 8. Here’s how the values map:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

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:

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

Test it in your browser using this demo:

See the Pen New background shorthand values by SitePoint (@SitePoint) on CodePen.

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:

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

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:

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

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

See the Pen siFJu by SitePoint (@SitePoint) on CodePen.

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:

See the Pen qLnpm by SitePoint (@SitePoint) on CodePen.

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:

.example {
  border: solid 1px black;
}

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:

.example {
  border-width: 2px 5px 1px 0;
}

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:

See the Pen multiple border shorthands by SitePoint (@SitePoint) on CodePen.

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:

a {
  text-decoration: overline aqua wavy;
}

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:

See the Pen HapgB by SitePoint (@SitePoint) on CodePen.

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”:

See the Pen border-width keyword “thick” by SitePoint (@SitePoint) on CodePen.

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:

See the Pen border-image demo by SitePoint (@SitePoint) on CodePen.

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:

table {
  empty-cells: hide;
}

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:

See the Pen empty-cells demo by SitePoint (@SitePoint) on CodePen.

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”:

See the Pen italic vs. oblique by SitePoint (@SitePoint) on CodePen.

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:

See the Pen word-wrap demo by SitePoint (@SitePoint) on CodePen.

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).

Pick up loads more CSS hints and tips with a Learnable membership. You’ll get access to dozens of books and courses, including best-sellers like Jump Start CSS, The CSS Anthology and more.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Bas Hepping

    So, I’ve just had that problem with the bullets in the first item.I solved it with images for every dot. Never knew it was this easy. Thank you!

  • http://codelair.com/ Scott

    Haha, when I first heard about border-image I thought “Amazing! I’ll be using this on every website I make!”

    And then border-radius and box-shadow came along and most designs could be accomplished with those. Plus a lot of design has moved away from overly complex styles and borders.

    • http://www.agriffindesign.com Andy Griffin

      I used border-image for building chat bubbles recently. Saved my life. Extremely convenient.

      • LouisLazaris

        Seems like rounded corners and shadows would be enough even for a chat bubble… Of course, if the bubble is more complex (kind of like a cloud) then yeah, border-images would be perfect.

  • Oluwafemi William Babalola

    thanks!

  • Owen Masback

    “top and bottom position values, are likewise calculated based on the width of the container, rather than the height.”

    not true

  • Pavel Dvořák

    6/12 :D

  • Asif Khan

    Nice article, really I haven’t used a some of them for my entire life :D Thanks

  • Frederik Van Zande

    Vertical Percentages are Relative to Container Width, Not Height

    They are relative to container height, when the element you want to give vertical height, is positioned absolute or fixed.
    Counts for height, top & bottom.

  • LouisLazaris

    Excellent point. That would probably be worth a write up in itself. Thanks.

  • http://www.muhammedak.com/ Muhammed A K

    8/12 :)

  • Victor Liew Jia Hao

    overflow-wrap is new to me :)

  • Stéphanie Walter

    “Nobody Uses border-image” : this one is so true. I’ve never seen a great tutorial showing cool examples using this property. I’m also wondering if there is a way to do cool stuff using .svg images, might dig into it some days :)

    I admit I did not know point 5 ^^

  • Wakkos

    Regarding the first tip, you actually can change “inherit” for what Lea Verou calls “the first CSS variable”: currentcolor.

    • LouisLazaris

      I originally was planning to do like 20 tips and currentColor was supposed to be one of them. Maybe another article… ;)

  • Anas Ramadan

    I’m wondering if I can give the only the bullet (or marker) on the unordered list and the number marker on the ordered list a different color?

    • terrell harris

      It should be possible. The fiddle I created seems a little weird, but it works: http://jsfiddle.net/6MBde/

    • Gareth

      you could give the li a colour and enclose it’s content in a span to change colour

    • LouisLazaris

      Anas Ramadan, Gareth, terrell harris :

      Here’s a bit of a hacky way to do it that works as long as each list item has only one line:

      http://jsbin.com/qepem/1/edit

      Notice I’m using the :first-line pseudo-element to change the text, while keeping the bullet as a different color defined on the body.

      • Anas Ramadan

        Interesting :)
        I tried to improve it but didn’t work:
        li:first-line,
        li:not(:first-line) {
        color: lightgreen;
        }

  • Theracoon

    I use point 5 a lot to make elements using text replacement backgrounds responsive.

    width: 20%;
    Height: 0;
    padding-bottom: 20%;

  • Ron Chaplin

    Great Article. I would like to see more implementation of the shorthand for text-decoration. However if not properly used, it may go the way of it’s sibling, “marquee”. Let’s hope not. this would be great to give some uniqueness to sites.

  • Jingqi Xie

    I only know the 5th… But it only applies to paddings and margins, not height, tops or bottoms.

  • Mike

    Your examples which use input type=range sliders should use onchange and not oninput, which does not seem to work in IE (11). At least example 5 uses oninput. Otherwise interesting stuff :)

    • LouisLazaris

      Thanks for pointing that out.

      The reason I did not use onchange is because in Chrome (the browser I develop/test in mainly for articles like this), onchange was not responding immediately to the slider adjustments. Chrome basically waits until you finish sliding before adjusting the values. I liked it better with oninput because the change was instant, almost like an animation.

      Now that I test all three main browsers with onchange, it looks like IE11 is the only one that responds immediately to the changes.

      I have no idea why oninput wouldn’t work in IE11 though…?

  • Gareth

    the border image example doesn’t work for me in FF v28.0

    • LouisLazaris

      Thanks, it should be working now. For Chrome, I was defining a border-width only, without setting border-style or border-color, so I added this line:


      border: 45px solid transparent;

      which fixed it for Firefox.

      • Gareth

        Yes, it’s working now. I woul like to use it but I can’t ignore all the IE users. Keep up the good work

    • Govind Yaswanth

      @disqus_yJ9UMSPi3z:disqus…!
      To make border-image work in FF & IE>10..!

      Please use border-image-width: (This functions same as border-width!). Also, in this case, there is no need of using !border-style or border-width

  • http://www.redbearded.com/ Cody

    Good read. Much of this I had no idea about!

  • Adam Fisher-Cox

    Oblique fonts are the “italics” of sans-serifs. Helvetica Neue has obliques, for example.

    • http://www.bjornjohansen.no/ Bjørn Johansen

      Oblique fonts are absolutely not the «italics» of sans-serifs. E.g. both the popular open source sans serif fonts Open Sans and Ubuntu have proper italics (extremely easy to spot when looking at the «f»). But it is correct that Helvetica Neue has obliques, not italics.

      • Adam Fisher-Cox

        That’s true, I worded my comment very poorly. My point was more that obliques are not necessarily “faked” italics. Many fonts have specifically-drawn oblique variants.

  • Sam

    As Adam Fisher-Cox mentions below, Helvetica Neue has obliques, as do Helvetica and Avenir, and many other mid-twentieth-century typefaces. While these sometimes are actually drawn, as in a true italic, they’re usually formed by mathematically slanting the roman characters. Obliques tend to be less optically “correct” from a typographic standpoint, and most italics will have a single-story a and g, whereas obliques have the same form as the roman. In Helvetica’s case, the roman g is already single story, but you can see the example in the a. To see some sans-serifs with true italics look at Source Sans Pro or Syntax.

    • Martin Gisser

      Oblique/slanted fonts are old and well known in mathematical typesetting,

      Don Knuth writes in the TeXbook (1984),

      — “Slanted roman type was introduced in the 1930s,
      but it first became widely used as an alternative to the conventional
      italic during the late 1970s. It can be beneficial in mathematical
      texts, since slanted letters are distinguishable from the italic
      letters in math formulas. The double use of italic type for two
      different purposes—for example, when statements of theorems are
      italicized as well as the names of variables in those theorems—has led
      to some confusion, which can now be avoided with slanted type. People
      are not generally agreed about the relative merits of slanted versus
      italic, but slanted type is rapidly becoming a favorite for the titles
      of books and journals in bibliographies.”

  • SixKnight

    oblique and italic are a bit different. If a font has an italic face and you set font-style: italic; it takes this font. If the font has no italic face it’s displayed like oblique. Oblique is same BUT if no oblique font is available, the browser do automatic incline the font. So mostyl italic will look better because it’s a own font type – not just the browser which just incline the font.

  • Orangestar

    I’m willing to bet border-image isn’t being used because it doesn’t work on Mobile Safari (at least). Mobile Internet is hot right now.

    • LouisLazaris

      Orangestar

      I just tested two examples of border images on Safari on iOS7, and they both work fine. I’m not sure why you said it doesn’t work..?

      See support chart here: http://caniuse.com/#feat=border-image

      • Orangestar

        Hm, I just tested them again today and now they… Work?

        Well uh… I profusely apologize for doubting you!

        • LouisLazaris

          No problem… It might have been that you were testing one where the syntax was slightly off or something weird like that…?

  • http://www.sicdesignstudios.com/ Zach Kelly

    Awesome article! I pretty much didn’t know any of these elements could be used in the way they were listed here. I’m quite new to the different techniques of CSS3 so this was interesting to read in the the least so thank you for the good read!

  • LouisLazaris

    The order doesn’t matter. Try it. You can put it in any order you want, and the browser will parse it correctly.

    • T.J. Crowder

      @LouisLazaris:disqus: The spec doesn’t say the order doesn’t matter. Again, as I said, it’s not like the browser can’t figure it out since at present the property values are distinct, but that’s not the same thing as there not being an order.

      • LouisLazaris

        I’m not sure what you’re trying to say here. I don’t think the spec ever says anything about order for shorthand unless it actually makes a difference. For example, I assume it says something about font shorthand requiring that the font-family be declared last, which is true (but I can’t find it; MDN mentions this though).

        The order for border shorthand doesn’t matter, and it never will. A border-width value will always require a unit value, whereas border-style is always going to require a keyword value. Those cannot be confused by the browser, so order doesn’t make a difference. The same is true for other shorthands.

        Other shorthands are slightly different. For example, margin sets top, right, bottom, left, in that order. But those are always unit values, so they aren’t going to be mis-parsed by the browser.

        But hey, if you can show me something in the spec that says that they must be declared in that order to be recognized as ‘standard syntax’ or something like that, then I’ll gladly retract. :) But, as it stands, I don’t think what you’re saying is correct.

      • LouisLazaris

        Ah, I found it… here’s your answer:

        http://stackoverflow.com/questions/4077421/does-it-matter-which-order-i-use-for-my-css-border-top-values

        As they mention there in the answers, when the spec shows you a shorthand with a double bar in between values, this means the values are optional and they can appear in any order. This is further confirmed by MDN’s “Value definition syntax”:

        https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Double_bar

        Anyhow, sorry if I was combative about this, but I guess I knew it didn’t require an order and just wanted you to understand that. Best to have proof though…. And this certainly would make an interesting follow-up article too. Thanks for bringing it up.

  • Bryan

    I noticed this too. Haha!

  • Bryan

    Great facts. Great read. :)

  • mask

    I know four of them, border, background, border-image, font-style:oblique :)

  • DanOwen

    Thanks!

  • http://www.dumplingmag.com/ Justin McCraw

    Those new text-decoration attributes seem handy, but too bad the browser support isn’t there. I don’t know how many times we use a wavy graphic in place of this thing that’s native to at least Firefox. Great write up!

  • DanOwen

    Doesn’t work for me. ;(

    • Govind Yaswanth

      Dear @DanOwen:disqus …

      In your style sheet just add ‘border-style: solid’ (for “.sidebar-first-inner”)

      Problem will get resolved.!

      • DanOwen

        Fantastic, works beautifully. Thank you so much!

        Just added it to the style ‘paleolithic’ that is applied there.

        • Govind Yaswanth

          @DanOwen:disqus
          Even it also works on IE.!

  • LouisLazaris

    You’re spoiling the next article! :)

  • LouisLazaris

    Good one, thanks!

    Here is a demo:

    http://jsbin.com/bakaw/1/edit

  • LouisLazaris

    Arno Slatius

    You can fix the antialising problem in WebKit very easily. In your CSS, you have the following line of code in the section.experiment selector rule set:

    -webkit-transform: rotate(-2deg);

    Change that line to the following:

    -webkit-transform: rotate(-2deg) translate3d(0,0,0);

    And it will fix it. I’ve already tested it, it works.

    Now, as far as the border-image in different browsers: It looks like it works for me in IE11, latest Chrome, and latest Firefox. Which browser do you see it failing in?

    • http://www.slatius.nl Arno Slatius

      Thanks for the tip on the rotation. I added it and it looks better now, it’s a bit of a hack though.

      I’m an Opera user. I feel they messed up when they went with webkit so I’m still using 12.16 (although I’m getting more and more doubts, but I haven’t found the right alternative). It’s an ‘old’ browser these days and it doesn’t understand border-image.

      On the other hand, none of the new browsers combine these rules:

      border-radius: 30px;
      border-image: url("../images/woodV.jpg") 30 30 repeat;

      And since Opera doesn’t render the borders it’s the only one that shows the border radius correct.

    • Romulo_Ctba

      wow, that was cool

  • LouisLazaris

    @CompendiaryMe:disqus

    My initial reaction is that you can accomplish the same thing using backgrounds. In your case, your repeating image is only top and/or bottom, going horizontal. So you don’t have a corner image for your border-image. Therefore, my feeling is that you could accomplish the same thing with just regular backgrounds, maybe with multiple backgrounds, and you’d have a little more browser support (but not much).

    For sure the footer widget one could be done with a single background, because that would just be the top or bottom of a widget, not both.

  • LouisLazaris

    Good find… I couldn’t track that down in the spec. No surprise, since it’s pretty much a mess… :( Thanks for that.

  • http://hugogiraudel.com/ Hugo Giraudel

    And drop-shadow filter as far as I know.

  • LouisLazaris

    Similar to another comment made on this post, to me it doesn’t seem like you need a border image for that one. You can do the same thing with just a regular background, positioning it at the bottom. And if necessary, you can use multiple backgrounds.

  • LouisLazaris

    Very nice, that’s a good use case for border image because it requires the that the corners and border be unique and the whole thing be fluid.

  • LouisLazaris

    Nice. It’s amazing what you can do with California Style Sheets, huh? :)

  • LouisLazaris

    With gradients you could still fall back to an image on the background, so the fallback wouldn’t be a big deal. Of course, ideally, it’s not great to have to rely on images and gradients.

    But regarding the fine line you wanted, yeah I guess if the gradient doesn’t look right as a background then the image would be better.

    I’m actually amazed at how many people have posted here that they use border images, it’s nice to see it’s not as useless a feature that I thought it was! :)

  • http://wojtek.im/ Wojtek W.

    That’s a great resource. Thanks!

  • http://blog.arunace.com Arun Sengupta

    These are pretty good points you picked out, and I do admit … a lot of things I’ve read but either I’ve forgotten or never really used before.
    A few of them are actually extremely useful, and I should start using them :P at least after reading this blog :D
    Good Stuff !!!

  • http://www.slatius.nl Arno Slatius

    I user all browsers of course and a few VMs on the side for the older and other OS browsers.
    I just find myself going back to Opera for my daily stuff… I’m probably getting old and melancholic.

  • Govind Yaswanth

    Please give property border-image-width a value, which will be more meaning ful..!

  • Govind Yaswanth

    Please give property border-image-width a value, which will be more meaning ful..!

    & will solve issue in IE & Firefox!

  • http://sociao.tumblr.com/ Chris Lowles

    Surprisingly didn’t know about the word-wrap property having a dupe with a different name, thanks for the heads up, I might us it as a fallback in the future.

  • vapenation

    8/12 were new to me! Good article and great examples.

  • http://exyr.org Simon Sapin

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

    This is not true in general, only for margins and padding. There are plenty of vertical percentages (e.g. in the ‘height’, ‘top’, or ‘background-position’ properties) that refer to the height of the containing block. Each property definition table has a “Percentages” line that defines this case-by-case. For example, compare:

    http://dev.w3.org/csswg/css2/box.html#padding-properties
    http://dev.w3.org/csswg/css2/visuren.html#position-props

    • LouisLazaris

      Yeah, TBH, that section should be renamed to “Vertical Margin/Padding Percentages are Relative to Container Width, Not Height”

  • krystian

    actually, according to http://www.w3.org/TR/css3-background/#the-background, you should write in #the-background-shorthand-property-has-new-values something like:

    background: [background-image] [background-position] / [ background-size]
    [background-repeat] [background-attachment] [background-origin]
    [background-clip] [background-color];

    at least I understand it as above ;)

  • http://drewlustro.com/ Drew Lustro

    Been a web developer for 15 years and I was surprised that I didn’t know 9 or so of these. Thanks for writing, was a quality quick read.

  • Tim Nguyen

    I know most of these except for empty-cells (I never use tables anyway).
    Also, for color, you can use currentColor to inherit the color to other properties.

  • http://iulianonofrei.com/ Onofrei Iulian

    I did used border-image on a test website in which i replicated windows explorer UI

  • Liam O’Leary

    Great little article! Didn’t know about the color on hr’s, that’s useful.

  • JoshuaMuheim

    Thanks a lot for your effort! While having heard of many of them already, most weren’t very present anymore. So I have to admit a score of about 9/12 or so. But this means I (re-) learnt a lot today, yay! :-)

  • zcorpan

    Doesn’t a 0.5px normal border work?

  • LouisLazaris

    What isn’t corrected?

    Owen’s comment quoted a part of the article that I’ve now removed. That’s the correction, that I said that top/bottom position values were relative to width. But they’re not, they’re relative to height, so I removed that statement from the article.

    Was there something else you’re referring to?

  • http://www.pro-image.co.il Michael C.

    6/12 – thanks for checking my “learn something new every day” box!

  • Govind Yaswanth

    works on >IE10

    • Elliot Smith

      Nice to know!

  • http://kutec.co.in/ Kushal Jayswal

    Is “word-wrap” working in IE8?

    • LouisLazaris

      Yes, it works everywhere, even back to IE5.5, as the article mentioned.

  • LouisLazaris

    Hi ed. @owenmasback:disqus is referring to the “top” and “bottom” properties, which are used along with “position: relative” and “position: absolute”. The paragraph you quoted is referring to top and bottom “margin” and “padding” values. Those are not the same as “position” values. Originally, the article also said “position” values, but I removed that part, because, as Owen and others have pointed out, that’s not correct.

    Does that clear things up?

  • LouisLazaris

    Of course, now that I think about it, I should probably add a note about that, or maybe change the heading so it’s not so all-encompassing.