CSS Facts

4 LITTLE KNOWN CSS FACTS

0  0 2015-12-22 08:33:53

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.

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.

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;

}

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

}

Comments (0)

Post Your Comments

Headquarter



Hong Kong Office



Find Us On

Ziuby
Ziuby