12 CSS facts that are rarely known

12 CSS facts that are rarely known2018-02-27 Web Front-end development

CSS is not a very complicated language, but even if you have been writing CSS for many years, you are likely to encounter something new-some attributes have never been used, some values have never been considered, or some specifications you never know.

I often encounter some CSS small details, so I would like to share with you in this article, I need to admit that many things in this article do not have practical value, but perhaps you can stay for later use.

  1, the body color is not only applied to the text

Let's start with the simplest, the color attribute is a widely used attribute, some people may not notice, it is not just to define the color of the text.

Let's look at this example:

CSS code:

Body {

Color:yellow;

Background: #444;

font-size:20px;

Font-family:arial, Sans-serif;

Text-align:center;

}

UL {

Border:solid 2px;

Text-align:left;

}

OL {

Text-align:left;

}

HR {

Border-color:inherit;

}

A

Color:white;

}

Please note that we just set the color to yellow for body, but you can see that the elements in the page are all yellow, and they include:

The alt text value of the picture is the text that appears when the image source is not loaded

? border of List elements

? unordered list of points

? numbers with a sequence list

? HR Element

Interestingly, the HR element does not inherit the color attribute by default, and I need to force him to inherit Border-color:inherit, which is a bit weird for me.

The specification is defined as:

This property is used to describe the foreground color of the element's text, and is used to provide potentially indirect values for other properties that accept color values.

I do not know very clearly what is being considered as the so-called prospect, if you know, please tell me in the comments.

2, visibility can also set the "collapse" value

You may have used visibility on times, the most common is visible and hidden, which are used to show or hide the elements.

There is also a third rarely used value is collapse, except in the table row, the column uses the difference, he and hidden role is equivalent.

Let's take a look at the table elements, the collapse is how to work, but the premise is that table border-collapse need to be set to separate will have effect Oh!

HTML code:

<table cellspacing= "0" class= "table" >

<tr>

<th>Fruits</th>

<th>Vegetables</th>

<th>Rocks</th>

</tr>

<tr>

<td>Apple</td>

<td>Celery</td>

<td>Granite</td>

</tr>

<tr>

<td>Orange</td>

<td>Cabbage</td>

<td>Flint</td>

</tr>

</table>

<p><button>collapse ROW 1</button></p>

<p><button>hide ROW 1</button></p>

<p><button>RESET</button></p>

<p>see <a href= "http://www.sitepoint.com/12-little-known-css-facts/" >article</a>

.</p>

CSS code:

Body {

Text-align:center;

padding-top:20px;

Font-family:arial, Sans-serif;

}

Table {

Border-collapse:separate;

border-spacing:5px;

Border:solid 1px black;

width:500px;

margin:0 Auto;

}

Th, TD {

Text-align:center;

Border:solid 1px black;

padding:10px;

}

. VC {

Visibility:collapse;

}

. VH {

Visibility:hidden;

}

button {

margin-top:5px;

}

Css-trick website of Almanac classmate said do not use this attribute, because this attribute exists compatibility problem.

My test results are:

? In chrome, collapse and hidden are not different (see bug reports and discussions)

In Firefox,opera and Ie11, Collpase's work is normal, that is, the table row is cleared, and no longer occupies space.

I have to admit, this value may be rarely used, but he does exist.

  3, background This shorthand has a new value

In css2.1, background is the abbreviation for these 5 values, Background-color, Background-image, Background-repeat, Background-attachment, Background-position. Now, in CSS3, three more members are added, now there are 8 values, they are:

[Background-image]



[Background-origin]
[Background-clip];

Notice that the forward slash, similar to Font,border-radius, allows you to add background-size after you finish writing position.

In addition, two optional values are Background-origin and background-clip.

That's what grammar will look like in real practice.

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

Let's feel it together in the demo:

These new values work perfectly in modern browsers, but you may need to downgrade gracefully for unsupported browsers.

4. Clip is only valid for absolute elements and fixed elements

We talked about Backgrond-clip, and now we're talking about clip, which we generally write:

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

We use this method to cut a part of the element, but it is premised on that the element must be absolute-positioned (explained here), so the code becomes this

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

You can see that clip also changes when we switch the element absolute positioning:

JS Code:

CSS code:

HTML code:

You can also make clip effective by setting position:fixed because the fixed element qualifies as a absolute element according to the specification.

  5, the vertical percentage is calculated based on the width of the parent layer, not the parent layer height calculation

This is a bit of a problem, you know. The percent width is calculated based on the width of the parent layer, but if a property such as Padding,margin is used as a percentage, the final result is calculated based on the width of the parent layer rather than on the parent layer's height.

Let's look at this example:

HTML code:

CSS code:

Body {

Font-family:arial, Sans-serif;

padding-top:30px;

Text-align:center;

}

. wrapper {

width:400px;

margin:0 Auto;

Border:solid 1px black;

}

. box {

width:100px;

height:100px;

Background:gold;

Margin-left:auto;

Margin-right:auto;

padding-top:10%;

padding-bottom:10%;

margin-bottom:5%;

}

. Range {

Display:block;

margin:20px Auto;

}

Output {

Text-align:center;

Display:block;

Font-weight:bold;

padding-bottom:20px;

}

Output span {

Font-weight:normal;

}

JS Code:

Note that when we slide the slider, we just change the width of the parent container, but the Padding-bottom value changes.

  6. border is actually shorthand for shorthand properties

We've all written this statement:

. example {border:solid 1px black;}

The border attribute is shorthand for Border-style,border-width,border-color but please do not forget that each of these three attributes contains its own shorthand, such as:

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

This will give the four border a different width, and the same goes for Border-color and Border-style:

HTML code:

CSS code:

Body {

Font-family:arial, Sans-serif;

}

. box {

width:150px;

height:150px;

margin:20px Auto;

Border-color:peachpuff Chartreuse Thistle Firebrick;

Border-style:solid dashed dotted double;

border-width:10px 3px 1px 8px;

}

p {

Text-align:center;

}

The point here is that you can't use the border property to make a different color, width, or style for four edges, so the expression becomes less accurate after the attribute shorthand is shortened.

  7, Text-decoration is actually a shorthand for three properties

I know what this article says may make you a little dizzy.

According to the code, the statement is now in compliance with the standard:

A {text-decoration:overline aqua wavy;}

Text-decoration is now the abbreviation for these three attributes: Text-decoration-line, Text-decoration-color, and Text-decoration-style.

Unfortunately, only the Firefox family currently supports this new property:

HTML code:

CSS code:

Body {

padding:30px;

Text-align:center;

Font-family:arial, Sans-serif;

}

A, a:visited {

Color:blue;

Background:aqua;

-moz-text-decoration-color:aqua;

-moz-text-decoration:overline;

-moz-text-decoration-style:wavy;

Text-decoration-color:aqua;

Text-decoration:overline;

Text-decoration-style:wavy;

}

JS Code:

In this demo, we use a similar text-decoration-color, I know this is very uncomfortable to write, because many browsers do not support, if we directly write text-decoration:overline aqua wavy; No doubt the current browser can not recognize such a writing, so only do not parse, so in order to backward compatibility, we can only write.

  8, border-width support keyword value

This is not so shocking, but in addition to accepting the standard values (like 5px or 1em), Border-width also accepts three keyword values: Medium, thin, and thick.

In fact, the initial value of Border-width is medium, and the following example uses thick:

HTML code:

CSS code:

Body {

Font-family:arial, Sans-serif;

Text-align:center;

}

. example {

width:100px;

height:100px;

margin:20px Auto;

Background:aqua;

Border:solid thick red;

}

When browsers render these keywords worthwhile, the specification does not require them to use a specific width value, but in my test all browsers convert these three values into 1px,3px, and 5px.

  9. Few people use Border-image

I have written an article about CSS3 's border-image, which has been well supported by modern browsers, with the exception of IE10 and the following versions. But does anyone care?

If you don't like reading English, you can read the basic tutorials I wrote earlier about CSS3 's border-image. --@ Desert

It looks like a beautiful feature that allows you to create a flowing picture border, in which case you can zoom the window to see the flow of the picture's border.

HTML code:

CSS code:

Body {

Font-family:arial, Sans-serif;

Text-align:center;

}

Unfortunately, Border-image is still not used by many people as a novelty. But maybe I was wrong. If you know of any real case where you use Border-image, or if you've used it, please let me know in the comments and I'll be happy to admit that I was wrong.

  10, there is also a empty-cells such a property

This property is widely supported, including IE8, which is written like this:

Table {empty-cells:hide;}

You may already know that it is used in a table, which tells the browser whether to show empty cells. Try clicking the toggle button to see how the Empty-cells works:

HTML code:

<table cellspacing= "0" id= "table" >

<tr>

<th>Fruits</th>

<th>Vegetables</th>

<th>Rocks</th>

</tr>

<tr>

<td></td>

<td>Celery</td>

<td>Granite</td>

</tr>

<tr>

<td>Orange</td>

<td></td>

<td>Flint</td>

</tr>

</table>

<button id= "B" data-ec= "Hide" >toggle empty-cells</button>

<p>see <a href= "http://www.sitepoint.com/12-little-known-css-facts/" >article</a>.</p>

CSS code:

Body {

Text-align:center;

padding-top:20px;

Font-family:arial, Sans-serif;

}

Table {

Border:solid 1px black;

Border-collapse:separate;

border-spacing:5px;

width:500px;

margin:0 Auto;

Empty-cells:hide;

Background:lightblue;

}

Th, TD {

Text-align:center;

Border:solid 1px black;

padding:10px;

}

button {

margin-top:20px;

}

JS Code:

In this example, you need to make sure that the border of the table is visible and that the border-collapse is not set to collapsed.

  11. Font-style also has a value of "oblique"

When we use the Font-style property, the usual two values are normal and italic, but you can also give it another value oblique:

HTML code:

CSS code:

H1 {

Font-weight:normal;

Font-family:georgia, serif;

Font-style:oblique;

Text-align:center;

font-size:50px;

}

H1:nth-child (2) {

Font-style:italic;

}

p {

Font-family:arial, Sans-serif;

Text-align:center;

}

But what does it mean to be a god horse? And does it look the same as italic?

The specification is so explained to oblique:

Apply oblique style, if not, use italic style

The specification for italic interpretation and oblique basically similar, oblique the word is a typesetting term, is to be on the basis of the normal italic font, rather than the real italic.

Because of the way CSS handles oblique, it is common with italic unless the font is a oblique font.

And I've never heard of oblique fonts, but maybe I'm wrong. My research is that oblique is a faux italic when a font does not have a true italic body.

So, if I'm not wrong, it means that if a font doesn't have a true italic font, then if we write font-style:italic it actually turns the font into a font-style:oblique form.

The bottom of this diagram can be very intuitive to know the difference between the faux italic and the true italic body. The gray is the oblique faux italic body. --@ Great circle 12 rarely known CSS facts

12, Word-wrap and Overflow-wrap are equivalent

Word-wrap is not a frequently used attribute, but in some cases it is very useful, and a common example is to wrap a long URL so that it does not open the parent container, as in the following example:

HTML code:

CSS code:

Body {

Font-family:arial, Sans-serif;

Text-align:center;

}

. p {

font-size:24px;

Text-align:center;

width:200px;

margin:20px Auto;

Border:solid 1px black;

min-height:60px;

Word-wrap:break-word;

}

button {

Display:block;

margin:0 Auto;

}

JS Code:

var p = document.getElementById (' P '),

b = document.getElementById (' B ');

B.onclick = function () {

if (This.getattribute (' data-ww ') = = = = ' Break-word ') {

P.style.wordwrap = ' normal ';

This.setattribute (' data-ww ', ' normal ');

} else {

P.style.wordwrap = ' Break-word ';

This.setattribute (' Data-ww ', ' Break-word ');

}

};

Since this attribute is Microsoft original, it is supported by all browsers, including ie5.5.

Despite its cross-browser, and consistent support, the Internet has decided to replace Word-wrap with overflow-wrap-I guess the name was a bit of a misnomer? Overflow-wrap and Word-wrap have the same value, and Word-wrap is considered a post-complement syntax for overflow-wrap.

There are some browsers that support Overflow-wrap, but it seems pointless to do so because all the old browsers parse Word-wrap well, and all browsers are required to continue supporting word-wrap for historical reasons.

We can start using Overflow-wrap after the browser upgrade, but until now, I still can't see the meaning of replacing the new syntax.

  How many of these are you don't know?

I do not know what you learned from this article, I hope so, perhaps most experienced CSS developers know a lot, but for CSS novice should benefit a little more.

We're all going to take a steak. How many new discoveries are there? Please let us know in the comments!

Advertising content

Follow us

Read -8 Complaints

Write a message

12 CSS facts that are rarely known