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.

CSS不是一种过于复杂的语言。 但是，即使您已经写CSS多年了，您仍然可能会遇到新的东西-从未使用过的属性，从未考虑过的值或从未了解过的规范细节。

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. color属性不仅限于文本 (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.

让我们从简单的东西开始。 每个CSS开发人员都广泛使用color属性。 但是，有些不熟悉CSS的人可能没有意识到，它不仅定义了文本的颜色。

Take a look at the demo below:

看看下面的演示：

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

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen CtwFG 。

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:

请注意，在CSS中，在body元素上仅使用了一种color属性，将其设置为yellow 。 如您所见，页面上的所有内容均为黄色，包括：

• 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

  hr元素

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.

有趣的是， hr元素默认情况下不会继承color属性的值，但是我不得不通过使用border-color: inherit来强制这样做。 对我来说，这是一种奇怪的行为。

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. visibility属性可以设置为“折叠” (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).

您可能已经使用了数百次visibility属性。 最常用的值是visible (所有元素的默认值)和hidden ，这会使元素消失，同时允许其像原来在那里一样占据空间(这与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.

visibility属性的第三个很少使用的值是collapse 。 这与hidden除表行，表行组，表列和表列组之外的所有元素一样。 在这些基于表的元素的情况下， collapse值的工作原理应类似于display: none ，因此塌缩的行/列所占用的空间可以被其他内容占用。

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

不幸的是，浏览器处理collapse的方式不一致。 尝试以下演示：

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

请参见笔可见性：在CodePen上按SitePoint( @SitePoint ) 折叠 。

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

CSS-Tricks Almanac 建议不要使用此功能 ，因为浏览器不一致。

From my observations:

根据我的观察：

• In Chrome, it makes no difference if you apply collapse or hidden (See this bug report and comments)

  在Chrome中，如果您应用collapse或hidden ，则没有任何区别(请参阅此错误报告和注释 )

• In Firefox, Opera, and IE11, collapse seems to respond exactly as it should: The row is removed and the row below moves up.

  在Firefox，Opera和IE11中， collapse似乎完全按照应有的方式进行响应：删除该行，然后将下一行向上移动。

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. background速记属性具有新的价值 (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:

在CSS2.1中， background速记属性包括5个速记值-background background-color ， background-image ， background-repeat ， background-attachment和background-position 。 在CSS3及更高版本中，它现在包括另外三个，总共多达8个。这是值的映射方式：

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.

注意正斜杠，类似于可以写font速记和边框半径的方式。 使用斜杠可以在支持的浏览器中的位置后面添加background-size值。

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

此外，您还有两个可选的声明，分别用于background-origin和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.

请参阅CodePen上SitePoint ( @SitePoint )的Pen New背景速记值 。

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. clip属性仅适用于绝对定位的元素 (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:

说到background-clip ，您以前可能也看过clip 。 看起来像这样：

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

这将在指定位置( 此处解释)将元素“剪切”。 唯一需要注意的是，必须将应用clip的元素绝对定位。 因此，您必须这样做：

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

您可以在下面的演示中看到当position: absolute切换时如何禁用剪辑：

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

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen siFJu 。

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

您还可以将元素设置为position: fixed ，因为根据规范 ，固定位置元素也可以称为“绝对定位”元素。

5.垂直百分比是相对于容器的宽度而不是高度 (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.

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen qLnpm 。

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.

注意，在内部框上声明了3个“垂直”百分比(顶部和底部填充以及底部边距)。 当滑块移动时，它仅更改容器的宽度。 但是其他值也随之变化，如页面上的输出所示，表明这些值在声明为百分比时基于容器宽度。

6. border财产有点像开始 (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.

border属性是一种简写属性，可在单个声明中设置border-style ， border-width和border-color 。

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:

但是请不要忘记border属性代表的每个属性本身就是一个简写属性。 因此，仅可以声明border-width ：

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

这将为四个边框中的每一个设置不同的宽度。 如此糟糕的演示中所示， border-color和border-style也是如此：

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

请参阅CodePen上的SitePoint ( @SitePoint )的Pen 多个边框速记 。

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.

此外，可以使用border-left-style ， border-top-width ， border-bottom-color进一步细分每个属性。

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.

但是要注意的是，您不能使用常规的border速记为不同的边设置不同的值。 因此，它是简写形式的简写形式，但不完全是简写形式。

7. text-decoration属性现在是简写形式 (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.

此属性现在表示3个属性： text-decoration-line ， text-decoration-color和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.

不幸的是，Firefox是唯一支持这些新属性的浏览器，并且(为了实现向后兼容性，我假设)暂时不支持它们。

Try the demo below in Firefox:

在Firefox中尝试以下演示：

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

见笔HapgB由SitePoint( @SitePoint上) 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.

该演示将使用长期值来执行此操作。 最终这将是一个艰难的过程，因为当前任何在text-decoration中看到额外价值的浏览器都将使整个声明无效，这显然不利于向后兼容。

8. border-width属性接受关键字值 (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.

不完全是惊天动地的事情，这并不是什么新鲜事物，但是除了标准长度值(例如5px或1em)之外， border-width属性还接受三个关键字值： medium ， thin和thick 。

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

实际上， border-width属性的初始值为“ medium”。 下面的演示使用“ thick”：

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

请参阅CodePen上SitePoint ( @SitePoint )的Pen 边框宽度关键字“ 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.

当浏览器呈现这些关键字值时，规范并不要求它们将它们映射到特定的长度值，但是据我所见，所有浏览器似乎都使用1px，3px和5px。

9.没有人使用border-image (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?

不久前，我在SitePoint上写了关于CSS3 border-image属性的文章 。 除IE10及更低版本外，所有现代浏览器均支持该功能。 但是有人在乎吗？

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.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen 边框图像演示 。

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.

不幸的是， border-image似乎是很少有人使用的新颖事物。 但是也许我错了。 如果您知道在实际项目中使用的任何border-image示例，或者您已使用过，请在评论中告知我们，我很乐意承认我错了。

10.有一个empty-cells属性 (10. There’s an empty-cells Property)

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

该平台在包括IE8在内的所有地方都得到了支持，它看起来像这样：

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:

您可能已经发现，它用于HTML表。 它告诉浏览器是显示还是隐藏其中没有内容的表单元格。 尝试在此演示中切换按钮，以查看更改empty-cells属性的值的效果：

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

请参阅CodePen上的SitePoint ( @SitePoint )的Pen 空单元格演示 。

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. font-style属性接受“ oblique”值 (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”:

几乎每次您看到font-style属性时，该属性都将使用“ normal”或“ italic”值。 但是您也可以给它一个“倾斜”值：

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

请参阅CodePen上的SitePoint ( @SitePoint )的斜体和斜体 。

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.

由于CSS处理倾斜文本的方式，它可以与斜体互换，除非(如规范所说明的那样)所使用的字体的正面被标识为倾斜。

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.

因此，如果我没有记错的话，这意味着如果字体没有真正的斜体，请将CSS设置为font-style: italic实际上会将字体显示为font-style: oblique 。

12. word-wrap行与overflow-wrap (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:

自动换行属性不是经常使用，但是在特定情况下非常有用。 一个经常使用的示例是帮助包装长而完整的文本字符串(例如URL)，而不是脱离其容器。 这是一个例子：

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

请参阅CodePen上的SitePoint ( @SitePoint )的笔自动换行演示 。

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

因为这最初是Microsoft创作的，所以从Internet浏览器一直到IE5.5，所有浏览器(包括Internet Explorer)都支持此属性。

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.

尽管有跨浏览器的支持，而且据我所见，得到了一致的支持，但W3C还是决定将overflow-wrap替换word-wrap overflow-wrap –我猜是因为前一个名称被误称。 overflow-wrap具有与word-wrap相同的值，并且word-wrap现在被视为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.

虽然一些新的浏览器做支撑overflow-wrap ，似乎毫无意义管它因为旧的浏览器在处理word-wrap就好，并不需要所有的浏览器继续支持word-wrap下去，遗留原因。

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.

当所有使用中的浏览器自动更新时，我们就可以开始使用overflow-wrap -但是直到那时，我仍然看不到从旧语法进行更改的意义。

这些对您来说是新手？ (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.

您从这篇文章中学到了什么吗？ 但愿如此。 也许最有经验CSS开发人员知道很多(如果不是全部)以上几点。 但是，那些刚接触CSS的人可能会从中受益更多。

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

有趣的是，对我们的读者来说，有多少点是新的。 在下方发表评论，告诉我们有多少新手(例如6 / 12、4 / 12等)。

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.

通过可学习的会员资格获取更多CSS提示和技巧。 您将可以访问数十种书籍和课程，包括畅销书状 跳转开始CSS ， CSS的文集 和更多 。

翻译自: https://www.sitepoint.com/12-little-known-css-facts/