12 little-known CSS features

CSS is not a very complicated language. But even if you have been writing style sheets for many years, there are certainly times when you will learn something new: properties or values ​​that you have not been able to use, specification details that you had no idea about.

In the process of working with CSS, I constantly find something interesting, so I decided to write a post and share my knowledge with you. True, keep in mind that not everything that will be discussed is of immediate practical importance, but, just in case, it will be useful in the economy.

color not only text colors

Let's start with simple things. The color property is used by developers constantly. Those of you who have not so much experience with CSS may not have known that this property determines not only the text color!


')



Notice that in CSS, the color:yellow property is used only once for the body element. As you can see, everything turned yellow:

• Alternate text in place of the missing image
• The frame of the list items
• Unnumbered list marker
• Ordered list number
• Element hr

Interestingly, by default, the hr element does not inherit the value of the color property, but this can be achieved by setting the border-color property to inherit . As for me, this is somewhat strange behavior.

The demonstrated is confirmed by the specification :

This property describes the foreground color of the text content of the element. In addition to this, it can be indirectly used by other properties that take on color values.

I have not yet figured out what it is, "foreground", but if you know something, write about it in the comments. As far as I understand, the foreground in this case is the color of the text itself, not the background, and also not the background elements - approx. translator.

The visibility property can be set to collapse

You probably used the visibility property more than once. The “normal” values ​​are visible (by default on all elements) and hidden , which hides the element, leaving space for it (as opposed to display:none ).

The third, rarely used value is collapse . It works the same way as hidden with respect to all elements, except for tabular rows, columns and their groups. In the case of table elements, it is assumed that the collapse value will hide them like display:none in such a way that other contents of the table will be located at the place they previously occupied.


Expected behavior

Unfortunately, not all browsers treat this value in the same way. For this reason, CSS-Tricks Almanac does not recommend using this property at all. Try the demo .

From what I discovered:

• In Chrome, the difference between collapse and hidden not observed (see this bug report and comments )
• In Firefox, Opera and IE 11, a collapse seems to work as it should: the table row is deleted, and the one that was below goes up

Now you know a little more, however, due to the different behavior of browsers, it hardly makes sense to use visibility:collapse .

New background property values

In CSS 2.1, a short write to the background property included five values ​​for the following properties: background-color , background-image , background-repeat , background-attachment and background-position . Since CSS 3, three more values ​​have been added, so this property now looks like this:

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

Notice the slash, which is placed there like a short write of the font property and border-radius [link]. This slash will allow you to turn on the background-size value after the background-position in those browsers that support it. You can also add two more values: background-origin and background-clip .

The final syntax is:

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

You can try here .
New values ​​work in all modern browsers, however, you should not forget about old men, offering an adequate replacement.

The clip property works only on absolutely positioned elements.

Surely you are aware of the clip property. It is used like this:

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

This rule “cuts” an element from four sides to the specified number of pixels. The only caveat is that the element to which you apply this property must be absolutely positioned.

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

And now look at how the clip property stops working if we remove the absolute positioning of the element.

In addition to position:absolute you can also use position:fixed , since, according to the documentation, the fixed elements also qualify as “absolutely positioned”.

Vertical percentages are calculated relative to the width of the container, not its height.

At first it is difficult to understand, and I wrote about it . You may know that the lengths of the elements indicated in percentages are calculated based on the length of their container. So, the upper and lower inner margins (padding) and the same outer margins are also calculated based on the width of the container, not its height.

See the demo .

Notice that the nested element has three indents, given in percent (upper and lower inner indents and lower outer indent). Slider changes only the width of the container. However, changing it affects the indentation calculation. The dependence on the width of the container is shown in the output of values ​​on the page.

Border property

We all have ever done this:

 .example {  border: 1px solid black; } 

The border property combines the values ​​of the border-width , border-style and border-color properties into a single construct. But do not forget that each of the properties whose value the border contains is itself an abbreviated record. So, for example, border-width can be written as follows:

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

Thus, we will set a different width of the frame for all four sides of the element. The same applies to the border-style and border-color properties. Something terrible can be obtained:

HTML

 <div class="box"></div> <p>Please don't ever do this.</p> 

You can go even further and set these values ​​individually using the border-left-style , border-top-width , border-bottom-color and so on properties.

The trick is that with the help of the border you can not set different values ​​for different sides. Thus, it turns out something like an abbreviated notation within an abbreviated notation within an abbreviated notation.

The text-decoration property is now abbreviated

I knew that something from this list would surely turn your head. And the specification states that it is now standard.

 a {  text-decoration: overline aqua wavy; } 

This property can now contain the values ​​of three properties: text-decoration-line , text-decoration-color and text-decoration-style . Unfortunately, Firefox is the only browser that supports new features, but at the same time (apparently, to ensure backward compatibility) does not support abbreviated syntax.


Expected Result

Try this demo in Firefox. In it, new properties are used separately. You need to be careful with them, because at this time browsers will not be able to parse additional values ​​of the text-decoration property and simply skip it. This is not good in terms of backward compatibility.

The border-width property supports key values.

This, of course, is not something out of the ordinary, and it is not new, nevertheless, in addition to the usual widths (for example, 5px or 1em ), border-width supports three key values: medium , thin and thick .

In fact, the initial value of the border-width property is medium . The thick value is shown below:



The CSS specification does not specify a specific width for key values, but all browsers use 1px , 3px and 5px respectively.

“Nobody uses border-image ”

Not long ago, I wrote about the border-image property on SitePoint . It is supported by all modern browsers, with the exception of IE 10 and below. But who cares?

border-image is a very funny property that allows you to frame a container with a certain image.



See also the demo .

Unfortunately, the border-image is one of the new, insufficiently popular. Although maybe I'm wrong. If you have examples of using border-image , welcome to comments!

There is such property empty-cells

And it is supported by all browsers, including IE 8:

 table { empty-cells: hide; } 

I think you already understood that this property is used with reference to tables. It tells the browser to hide or show empty cells. Try this demo .

In this case, I specifically set a border for the cells and added small indents so that the difference between the two states is visible, although in some cases changing this property may not have any visual effect.

The font-style property supports oblique

The most used values ​​for this property are normal and italic . But there is also oblique .



And what does this mean? Why does the text look the same as if it were written in italics?

The specification explains this behavior as follows:

... selects a font marked oblique, otherwise italic.

Description of italics in the specification - about the same. The term “oblique” - from typography, means, actually, an inclined text, but not a real Italic.

CSS processes oblique text in such a way that the oblique value is interchangeable with italic (as stated in the specification) as long as the font used does not have a separate oblique outline.

I do not know the fonts that would have oblique, but I could be wrong. (I am mistaken. I can’t give specific font names myself (they definitely exist), but in the comments to the original article, Helvetica is an example of a font, - the translator’s note) I understand that a font cannot have both styles: italic and italic - both because italic is an artificial replacement for italics in those fonts that do not have it. (Here, too, is somewhat doubtful, especially with regard to the replacement of italics, - approx. Translator)

So, if I'm not mistaken when the font has no italics, the value of the font-style:italic property will actually show us the value of the font-style:oblique property.

Many thanks to Ogi for the comments regarding the confusion in terminology, now this has been corrected and instead of “headset” - “tracing”, and instead of “Italik” - “italic” - approx. translator

word-wrap is the same as overflow-wrap

The word-wrap property is used less frequently, but in some cases it may be useful. A very common example is breaking up a long, continuous line of text to avoid going out of the container.

Since this property was invented by Microsoft, it is supported by all browsers, including IE from version 5.5.

Despite cross-browser support and proper support, the W3C decided to replace the word-wrap property with overflow-wrap : they apparently thought the former name was wrong. overflow-wrap has the same meaning as word-wrap , and the latter is now regarded as an "alternative".

Despite the fact that support for overflow-wrap still not very common, you shouldn’t worry, because we can still use word-wrap : browsers support it also for backward compatibility.

As for the overflow-wrap , there when all the popular browsers are updated, but for now I see no reason to change something.

How many new things have you learned from all this?

Anything is good. Surely tough guys know most, if not all of the above. But less advanced developers find this very useful.

Welcome to the comments!