七个鲜为人知的搜索网站_12个鲜为人知CSS事实（续集）

客官°小女子只卖身不卖艺 2022-12-03 11:25 196阅读 0赞

七个鲜为人知的搜索网站

Over a year ago I published the original [12 Little-known CSS Facts][] and, to this day, it has been one of SitePoint’s most popular articles ever. Since that post was published, I’ve been collecting more little CSS tips and tidbits for a new post. Because we all know that every successful movie should spawn a cheesy sequel, right?

一年多以前，我发布了原始的[12个鲜为人知CSS事实，][12 Little-known CSS Facts]并且到目前为止，它一直是SitePoint最受欢迎的文章之一。 自从该文章发布以来，我一直在为新文章收集更多CSS技巧和窍门。 因为我们都知道每部成功的电影都应该产生俗气的续集，对吧？

![12 Little-known CSS Facts: The Sequel][12 Little-known CSS Facts_ The Sequel]

Artwork by SitePoint/[Natalia Balska][].

SitePoint / [Natalia Balska的作品][Natalia Balska] 。

So let’s get right into this year’s developer’s dozen. I’m sure many of us will know at least some of these, but you can let me know in the comments how many of these were new to you.

因此，让我们进入今年的开发人员之列。 我敢肯定，我们中的许多人至少会了解其中一些，但是您可以在评论中让我知道其中有多少是新手。

## 1. `border-radius`属性可以使用“斜杠”语法 **(**1. The `border-radius` property can use “slash” syntax**)** ##

This is something I’ve [written about before][] more than four years ago on SitePoint, but I still think many beginners and even some experienced developers don’t know this feature exists.

这事我[以前写过][written about before]超过四年前SitePoint，但我仍然认为很多新手，甚至一些有经验的开发人员不知道这个功能的存在。

Believe it or not, the following is valid `border-radius` code:

信不信由你，以下是有效的`border-radius`代码：

.box {
      border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
    }

If you’ve never seen that, it might seem a little confusing, so here’s the explanation from the spec:

如果您从未见过，这似乎有点令人困惑，所以这是规格说明：

> If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.
> 
> 如果在斜线之前和之后给出值，则斜线之前的值设置水平半径，斜线之后的值设置垂直半径。 如果没有斜线，则值将相等地设置两个半径。

The spec also provides the following diagram:

该规范还提供了以下图表：

![Multiple Radii on each corner with border-radius][]

The caption for that image explains: “The two values of `border-top-left-radius: 55pt 25pt` define the curvature of the corner.”

该图像的标题说明：“ `border-top-left-radius: 55pt 25pt`的两个值`border-top-left-radius: 55pt 25pt`定义了拐角的曲率。”

So the use of the slash in the value allows you to create curved corners that are not symmetrical. If you want a more detailed consideration of this, check out my original article linked above, or better yet, try out this [handy little interactive demo from MDN][]:

因此，在值中使用斜杠可以创建不对称的弯角。 如果您需要对此进行更详细的考虑，请查看上面链接的我的原始文章，或者更好的是，尝试[使用MDN的][handy little interactive demo from MDN]这个[方便的交互式演示][handy little interactive demo from MDN] ：

Most `border-radius` generators do not allow you to set these optional values. The MDN generator is the only one I’ve found that does this.

大多数`border-radius`生成器不允许您设置这些可选值。 我发现只有MDN生成器可以做到这一点。

## 2. `font-weight`属性接受相对关键字 **(**2. The `font-weight` property accepts relative keywords**)** ##

Normally when you see the `font-weight` property defined, the value will be either `normal` or `bold`. You might also occasionally see an integer value in hundred increments: `100`, `200`, etc., up to `900`.

通常，当您看到定义的`font-weight`属性时，该值将为`normal`或`bold` 。 您也可以偶尔看到一个整数值在百个增量： `100` ， `200` ，等等，多达`900` 。

The two values that are often forgotten, however, are `bolder` and `lighter`.

但是，经常被遗忘的两个值`bolder` ， `lighter` 。

According to the spec, these keywords specify a bolder or lighter weight than the inherited value. This comes into play most significantly when you are dealing with a font that has multiple weights that are bolder than just plain “bold” and lighter than just normal text.

根据规范，这些关键字指定的重量比继承的值粗或轻。 当您处理的字体的粗细比普通的“粗体”大，并且比普通文本更轻时，这种作用最明显。

In the hundred-based values, “bold” maps to `700` and “normal” maps to `400`. So if you have a font that has a `300` weight, but nothing lower, a value of “lighter” will produce `300` if the inherited value is `400`. If there is no lighter weight (i.e. `400` is the lightest weight) then it will just stay at `400` and thus a value of “lighter” will have no effect.

在基于百的值中，“粗体”映射到`700` ，“普通”映射到`400` 。 因此，如果您使用的字体的粗细为`300` ，但没有其他降低，如果继承的值为`400` ，则“ lighter”的值将产生`300` 。 如果没有较轻的重量(即`400`是最轻的重量)，则它将保持在`400` ，因此“较轻”的值将无效。

Look at the following CodePen demo:

查看以下CodePen演示：

See the Pen [Using font-weight bolder/lighter Keywords][Using font-weight bolder_lighter Keywords] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上使用[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[使用字体][Using font-weight bolder_lighter Keywords]粗体[/较浅关键字][Using font-weight bolder_lighter Keywords]的[笔][CodePen] 。

In this example, I’m using a font called [Exo 2][], which has 18 different styles available. My demo embeds only the non-italic styles, which are enough for each of the hundred-based weights.

在此示例中，我使用的字体叫[Exo 2][] ，它有18种可用的样式。 我的演示仅嵌入非斜体样式，对于每种基于100的权重而言，这些样式都足够。

Notice that the demo includes 12 nested ‘box’ elements with different `font-weight` values, including “bolder” and “lighter” so you can see how these affect the weight of the text in different inheritance contexts. Below is the CSS from that example. Notice the comments in the code, and remember that each subsequent “box” is nested inside the previous:

请注意，该演示包含12个嵌套的“框”元素，它们具有不同的`font-weight`值，包括“粗体”和“较浅”，因此您可以看到它们如何影响不同继承上下文中文本的粗细。 以下是该示例CSS。 请注意代码中的注释，并记住每个后续的“框”都嵌套在前面的框内：

.box {
      font-weight: 100;
    }
    
    .box-2 {
      font-weight: bolder; /* maps to 400 */
    }
    
    .box-3 {
      font-weight: bolder; /* maps to 700 */
    }
    
    .box-4 {
      font-weight: 400;
    }
    
    .box-5 {
      font-weight: bolder; /* maps to 700 */
    }
    
    .box-6 {
      font-weight: bolder; /* maps to 900 */
    }
    
    .box-7 {
      font-weight: 700;
    }
    
    .box-8 {
      font-weight: bolder; /* maps to 900 */
    }
    
    .box-9 {
      font-weight: bolder; /* maps to 900 */
    }
    
    .box-10 {
      font-weight: lighter; /* maps to 700 */
    }
    
    .box-11 {
      font-weight: lighter; /* maps to 400 */
    }
    
    .box-12 {
      font-weight: lighter; /* maps to 100 */
    }

In this case, the “bolder” and “lighter” keywords will map only to the `100`, `400`, `700`, and `900` values. With 9 different styles, these keywords will never map to the `200`, `300`, `500`, `600`, and `800` values.

在这种情况下，“更大胆的”和“较轻”的关键字将仅映射到`100` ， `400` ， `700` ，和`900`的值。 随着9种不同的风格，这些关键词将永远不会映射到`200` ， `300` ， `500` ， `600`和`800`的值。

This happens because you’re telling the browser to choose the next font in the series that is considered either ‘bold’ or ‘light’. So it’s not picking the next boldest or the next lightest, but merely a bold or light font relative to what is inherited. If, however, the lightest font started at `300` (as in the case of [Open Sans][]), and the inherited value was `400`, then a value of “lighter” would map to `300`.

发生这种情况是因为您要告诉浏览器选择系列中被视为“粗体”或“浅色”的下一个字体。 因此，它不是选择下一个最粗体或下一个最浅体，而只是选择相对于继承的粗体或浅体字体。 但是，如果最轻的字体开始于`300` (如[Open Sans][]的情况)，并且继承的值为`400` ，则“轻”的值将映射为`300` 。

This might all be a bit confusing at first, but you can fiddle around with the demo to see how these keywords work.

刚开始时这可能有点令人困惑，但是您可以在演示中随意摆弄一下这些关键字的工作方式。

## 3.有一个`outline-offset`属性 **(**3. There is an `outline-offset` property**)** ##

The `outline` property is pretty well known due to its ability to help in debugging (it [doesn’t affect page flow][doesn_t affect page flow]). The spec, however, has added an `outline-offset` property, which does exactly what its name suggests — it lets you define how far the outline should be offset from the element.

`outline`属性由于其有助于调试的能力而众所周知(它[不会影响页面流][doesn_t affect page flow] )。 但是，该规范添加了`outline-offset`属性，该属性恰好如其名称所暗示的那样—使您可以定义轮廓应与元素之间的偏移量。

See the Pen [The outline-offset property][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

参见Pen [CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [的outline-offset属性][The outline-offset property] 。

In the demo above, move the range slider left or right to see the outline offset change. The range in this example covers `0px` to `30px`, but you could go as large as you want in the CSS. Take note that although the `outline` property is a shorthand property, it doesn’t include `outline-offset`, so you always have to define `outline-offset` separately.

在上面的演示中，向左或向右移动范围滑块以查看轮廓偏移量的变化。 此示例中的范围涵盖`0px`到`30px` ，但是您可以在CSS中随意设置。 请注意，尽管`outline`属性是一个简写属性，但它不包含`outline-offset` ，因此您始终必须分别定义`outline-offset` 。

The only major drawback to the `outline-offset` property is the fact that it’s supported in every browser except Internet Explorer (not even IE11).

`outline-offset`属性的唯一主要缺点是，除Internet Explorer(甚至IE11)之外，所有浏览器都支持它。

## 4.有一个`table-layout`属性 **(**4. There is a `table-layout` property**)** ##

You’re probably thinking, *Old news. I know all about `display: table`, bruh. Easiest way to vertically center!* But that’s not what I’m talking about. Notice I said the `table-layout` property, not the `display` property.

您可能在想， *旧消息。* *我知道所有关于`display: table` ，bruh。* *垂直居中的最简单方法！* 但这不是我要说的。 注意，我说的是`table-layout`属性，而不是`display`属性。

The `table-layout` property isn’t the easiest CSS feature to explain so let’s first go to the spec, and then look at an example. The spec says:

`table-layout`属性不是最容易解释CSS功能，因此让我们先看一下规范，然后看一个示例。 规格说明：

> With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing.
> 
> 使用这种(快速)算法，表格的水平布局不取决于单元格的内容； 它仅取决于表格的宽度，列的宽度以及边框或单元格的间距。

That might be the first time in W3C specification history that something is hard to understand. LOL JK.

这可能是W3C规范历史上第一次很难理解的东西。 哈哈JK。

But seriously, as always, a live example will help. In the following demo, the table has `table-layout: fixed` added in the CSS. Click the toggle button to toggle it off, then on, etc.

但是认真地，像往常一样，一个生动的例子会有所帮助。 在下面的演示中，该表具有`table-layout: fixed`添加到CSS中。 单击切换按钮将其关闭，然后再打开，依此类推。

See the Pen [Using the table-layout property][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [using table-layout属性][Using the table-layout property] 。

You can see in this example the advantage of using `table-layout: fixed`, as opposed to the default of `auto`. This won’t always be the best choice and it won’t always be necessary, but it’s a nice one to keep in mind when dealing with tables that have cells with variable-width data.

在此示例中，您可以看到使用`table-layout: fixed`的优点，而不是默认的`auto` 。 这并不总是最好的选择，也不一定总是必要的，但是在处理具有可变宽度数据的单元格的表时，要牢记这一点。

Chris Coyier did [a great write-up on this property][] last year, so if you want a much more comprehensive discussion, that’s your best bet.

克里斯·科耶尔(Chris Coyier)去年[对该物业][a great write-up on this property]进行[了出色的撰写][a great write-up on this property] ，因此，如果您想进行更广泛的讨论，那是最好的选择。

## 5. `vertical-align`属性在表单元格和其他元素上的工作方式不同 **(**5. The `vertical-align` property works differently on table cells vs. other elements**)** ##

If you’ve been coding websites since the mid-2000s or earlier, or if you’ve done a lot of HTML emails, then you’ve probably at some point assumed the `vertical-align` property was the standard upgrade to the old [HTML4 valign attribute][], which is now listed as an [obsolete, non-conforming feature in HTML5][obsolete_ non-conforming feature in HTML5].

如果您是从2000年代中期或更早的时候开始编码网站的，或者您已经处理过许多HTML电子邮件，那么您可能在某个时候假设`vertical-align`属性是对旧[HTML4 valign][HTML4 valign attribute]的标准升级[属性][HTML4 valign attribute] ，现在[在HTML5中][obsolete_ non-conforming feature in HTML5]被列为[过时的，不符合规范的功能][obsolete_ non-conforming feature in HTML5] 。

But `vertical-align` in CSS doesn’t really work that way. Except on tables. Which, I think is kind of weird, but I suppose it makes more sense than the property not working at all on tables.

但是，CSS中的`vertical-align`实际上并不能那样工作。 除了桌子上。 我认为这有点怪异，但我想这比不完全在表上工作的属性更有意义。

So what’s the difference when this property is applied to regular elements compared to table cells?

那么，与表单元格相比，将此属性应用于常规元素有什么区别？

When not applied to table cells, the `vertical-align` property follows these basic rules:

当不应用于表单元格时， `vertical-align`属性遵循以下基本规则：

*  It works only on inline or inline-block elements.
    
    它仅适用于内联或内联块元素。
 *  It has no effect on the contents of an element but instead it changes the alignment of the element itself in relation to other inline or inline-block elements.
    
    它对元素的内容没有影响，但会更改元素本身相对于其他内联或内联块元素的对齐方式。
 *  It can be affected by text/font settings like line-height and by the size of adjacent inline or inline-block elements.
    
    它可能会受到文本/字体设置(如行高)以及相邻的嵌入式或嵌入式块元素的大小的影响。

Here’s a demo:

这是一个演示：

See the Pen [Using the vertical-align property on inline elements][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )使用[内联元素上][Using the vertical-align property on inline elements]的Pen [使用vertical-align属性][Using the vertical-align property on inline elements] 。

The `vertical-align` property is defined on the `input` element. By pressing one of the buttons, you’ll change the value to what’s written on the button. You’ll notice that each of the values changes the position of the `input`.

`vertical-align`属性在`input`元素上定义。 通过按下其中一个按钮，您可以将值更改为在按钮上写的值。 您会注意到，每个值都会更改`input`的位置。

Overall, that demo is a really rudimentary look at this property and its values. For a much deeper look, check out [Christopher Aue’s 2014 post][Christopher Aue_s 2014 post].

总体而言，该演示是对该属性及其值的真正初步了解。 如需更深入的了解，请查看[Christopher Aue在2014年发表的文章][Christopher Aue_s 2014 post] 。

When it comes to tables, however, `vertical-align` works very differently. In such a case, you apply the property/value to one or more table cells, and the content of the table cells is affected by the chosen alignment.

但是，对于表， `vertical-align`工作方式大不相同。 在这种情况下，请将属性/值应用于一个或多个表格单元，表格单元的内容会受到所选对齐方式的影响。

See the Pen [Using vertical-align on table cells][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )在[表单元格上使用垂直对齐][Using vertical-align on table cells]的笔。

As shown in the above demo, only four of the values work on table cells, and although there is an effect on the sibling cells with a value of `baseline`, the main effect is on the alignment of content inside the cell on which you’ve applied `vertical-align`.

如上面的演示所示，只有四个值在表格单元格上起作用，尽管对具有`baseline`值的同级单元格有影响，但主要影响是对单元格内的内容的对齐方式应用了`vertical-align` 。

## 6. `::first-letter`伪元素比您想象的要聪明 **(**6. The `::first-letter` pseudo-element is smarter than you think**)** ##

The `::first-letter` pseudo-element allows you to style the first letter of an element, letting you do a [drop-cap][] effect which has been common in print for many years.

`::first-letter`伪元素允许您设置元素的第一个字母的样式，从而使您可以使用[大写][drop-cap]效果，这在印刷中已经很常见了很多年。

The good thing about this one is that browsers seem to have a decent standard for what constitutes the “first letter” of an element. I first saw this when [Matt Andrews tweeted about it][], although he seemed to imply that it was a bad thing. You can see his examples in the CodePen below.

这样做的好处是，浏览器似乎对构成元素的“首字母”的内容具有不错的标准。 [马特·安德鲁斯(Matt Andrews)发推文][Matt Andrews tweeted about it]时，我第一次见到[它][Matt Andrews tweeted about it] ，尽管他似乎暗示这是一件坏事。 您可以在下面的CodePen中查看他的示例。

See the Pen [Testing ::first-letter][Testing _first-letter] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [Testing :: first-letter][Testing _first-letter] 。

Looks to me like the four big browsers all handle these the same way, so that’s great because I think this is the correct behavior. It would be a little weird if something like an open parenthesis was treated as a “first letter”. That would be more like “first character”, which I suppose could be a whole new pseudo-class in itself.

在我看来，四个大型浏览器都以相同的方式处理这些问题，所以这很棒，因为我认为这是正确的行为。 如果像开括号这样的东西被当作“第一个字母”，那将有点奇怪。 那将更像是“第一个字符”，我想它本身可能就是一个全新的伪类。

## 7.您可以在HTML类列表中使用无效字符作为分隔符 **(**7. You can use invalid characters as delimiters in your HTML class lists**)** ##

This concept was discussed [in 2013 by Ben Everard][], and I think it’s worth expanding on.

[Ben Everard在2013][in 2013 by Ben Everard]年讨论了这个概念，我认为值得扩展。

Ben’s post was about using the slash (“/”) character to separate his HTML classes into groups, to make his code easier to read or scan. As he points out, although the unescaped slash is an invalid character, browsers don’t choke on it, they simply ignore it.

Ben的帖子是关于使用斜杠(“ /”)字符将其HTML类分成多个组，以使其代码更易于阅读或扫描。 正如他指出的那样，尽管未转义的斜杠是无效字符，但浏览器不会对此造成窒息，他们只是忽略了它。

So you might have an HTML example like this one:

因此，您可能会有这样HTML示例：

With the slashes, it would become:

加上斜线，它将变成：

You can use any characters (invalid or not) to produce the same effect:

您可以使用任何字符(无效或无效)来产生相同的效果：

All these variations seem to work fine, which you can test in the demo below.

所有这些变体似乎都可以正常工作，您可以在下面的演示中进行测试。

See the Pen [Illegal Characters as HTML Class Delimiters][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )将Pen [非法字符作为HTML类分隔符][Illegal Characters as HTML Class Delimiters] 。

Of course, those delimiters cannot be used in your stylesheet as classes, which is what I mean by “invalid”. So the following would be illegal and wouldn’t apply the specified style:

当然，这些定界符不能在样式表中用作类，这就是我所说的“无效”。 因此，以下内容将是非法的，并且不会应用指定的样式：

./ {
      color: blue;
    }

If you must use these kinds of characters in your HTML classes for the purpose of targeting them in your CSS, you can [insert them escaped using this tool][]. So the above example would work only if your CSS looked like this:

如果必须在HTML类中使用这些字符以在CSS中定位它们为目标，则可以[使用此工具将它们转义插入][insert them escaped using this tool] 。 因此，上面的示例仅在CSS如下所示时才有效：

.\/ {
      color: blue;
    }

And taking it even further, Unicode characters don’t have to be escaped at all, so you can do this kind of crazy stuff:

更进一步，Unicode字符根本不需要转义，因此您可以做这种疯狂的事情：

And then have the following in your CSS:

然后在CSS中添加以下内容：

.♥ {
      color: hotpink;
    }
    
    .★ {
      color: yellow;
    }

Alternatively, you can escape these types of characters too, instead of inserting them directly. The following would be equivalent to the previous code block:

另外，您也可以转义这些类型的字符，而不是直接插入它们。 以下内容等同于上一个代码块：

.\2665 {
      color: hotpink;
    }
    
    .\2605 {
      color: yellow;
    }

## 8.动画迭代可以是小数值 **(**8. Animation iterations can be fractional values**)** ##

When writing CSS keyframe animations, you probably know that you can use the `animation-iteration-count` property to define the number of times to play the animation:

在编写CSS关键帧动画时，您可能知道可以使用`animation-iteration-count`属性来定义播放动画的次数：

.example {
      animation-iteration-count: 3;
    }

The integer value in that example will tell the animation to run 3 full times. But maybe you didn’t know that you can use fractional values:

该示例中的整数值将告诉动画完整运行3次。 但是也许您不知道可以使用分数值：

.example {
      animation-iteration-count: .5;
    }

In this case, the animation will run a half time (that is, it will stop halfway through its first iteration). Let’s look at an example demo that animates two balls on the page. The top ball has an iteration count of “1” while the bottom ball has an iteration count of “.5”.

在这种情况下，动画将运行一半时间(也就是说，它将在第一次迭代中途停止)。 让我们看一个演示示例，该演示使页面上的两个小球动画化。 顶部球的迭代次数为“ 1”，而底部球的迭代次数为“ .5”。

***Update:** As pointed out in the comments, these demos don’t work correctly in Safari on desktop or mobile. This is because of a bug in relation to the fill mode, [which I’ve filed here][which I_ve filed here], and which has since been fixed. It will be corrected in future stable updates.*

***更新：**如评论中所指出，这些演示无法在台式机或移动设备上的Safari中正常工作。* *这是由于与填充模式有关的错误， [我已经在此处提交][which I_ve filed here]了该错误，此错误已得到修复。* *以后的稳定更新中将对其进行纠正。*

See the Pen [Using a Fractional Iteration Count][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[使用分数迭代次数][Using a Fractional Iteration Count]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

What’s interesting about this is that the iteration duration is not based on the property/value that’s animating. In other words, if you animate something 100px, the halfway point is not necessarily at 50px. For example, the previous animation uses a timing function of `linear`, so this ensures the second ball stops visually at the halfway point.

有趣的是，迭代持续时间不是基于动画的属性/值。 换句话说，如果为100px的物体设置动画，则中间点不一定是50px。 例如，上一个动画使用`linear`的计时功能，因此可以确保第二个球在中途停留在视觉上。

Here are the same two animations, this time using a timing function of `ease`:

以下是相同的两个动画，此时使用的计时功能`ease` ：

See the Pen [PqRxov][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen上][PqRxov]的SitePoint( [@SitePoint][SitePoint] )提供的[Pen PqRxov][CodePen] 。

Notice now the second ball passes the halfway point before it stops. Again, this is because of the different timing function.

请注意，第二个球在停止前经过了中点。 同样，这是因为计时功能不同。

If you understand timing functions, then you’ll also realize that a value of `ease-in-out` will position the ball in the same place as `linear`. Fiddle around with fractional values and the timing functions to see the different results.

如果您了解计时功能，那么您还将认识到， `ease-in-out`值将球定位在与`linear`相同的位置。 在小数数值和计时功能之间随意切换，以查看不同的结果。

## 9.动画的速记可能会因为动画的名称而中断 **(**9. Animation shorthand can break because of the animation’s name**)** ##

Some developers have discovered this one by accident and there is a warning about it in the spec. Let’s say you have the following animation code:

一些开发人员偶然发现了这个，并且在规范中有关于它的警告。 假设您有以下动画代码：

@keyframes reverse {
      from {
        left: 0;
      }
    
      to {
        left: 300px;
      }
    }
    
    .example {
      animation: reverse 2s 1s;
    }

Notice I’m using a name of `reverse` for the animation. This seems fine at first glance, but notice what happens when we use the above code in a live example:

注意，我为动画使用了`reverse`名称。 乍一看似乎很好，但请注意，在实际示例中使用上述代码时会发生什么：

See the Pen [An animation called “reverse” won’t work in shorthand][An animation called _reverse_ won_t work in shorthand] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

看见钢笔[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [不能简写为“ reverse”动画][An animation called _reverse_ won_t work in shorthand] 。

The animation doesn’t work because “reverse” is a valid keyword value for the `animation-direction` property. This will happen for any animation name that matches a valid keyword value that’s used in the shorthand syntax. This will not happen when using longhand.

动画无效，因为“ reverse”是`animation-direction`属性的有效关键字值。 任何与速记语法中使用的有效关键字值匹配的动画名称都将发生这种情况。 使用正手时不会发生这种情况。

Animation names that will break the shorthand syntax include any of the [timing function keywords][], as well as `infinite`, `alternate`, `running`, `paused`, and so forth.

会破坏速记语法的动画名称包括任何[计时功能关键字][timing function keywords] ，以及`infinite` ， `alternate` ， `running` ， `paused`等。

## 10.您可以选择元素范围 **(**10. You can select ranges of elements**)** ##

I don’t know who first used this but I first saw it in [this demo][] by [Gunnar Bittersmann][]. Let’s say you have an ordered list of 20 elements and you want to select elements 7 through 14, inclusive. Here’s how you can do it with a single selector:

我不知道是谁首先使用的，但是我在[Gunnar Bittersmann的][Gunnar Bittersmann] [演示中][this demo]首次看到了。 假设您有20个元素的有序列表，并且想要选择7到14个元素(包括7和14)。 使用单个选择器的方法如下：

ol li:nth-child(n+7):nth-child(-n+14) {
      background: lightpink;
    }

See the Pen [Selecting Ranges of Elements with CSS][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [用CSS][Selecting Ranges of Elements with CSS]用钢笔[选择元素的范围][Selecting Ranges of Elements with CSS] 。

***Update:** As pointed out in the comments, Safari has a bug that prevents this technique from working. Fortunately, a solution proposed by Matt Pomaski seems to fix it: Simply reverse the chain so it looks like `ol li:nth-child(-n+14):nth-child(n+7)`. WebKit nightly doesn’t have this bug, so eventually you’ll be able to get this working normally in Safari.*

***更新：**正如评论中指出的那样，Safari有一个错误使该技术无法正常工作。* *幸运的是，马特·波马斯基(Matt Pomaski)提出的一种解决方案似乎可以解决该问题：只需扭转链，使其看起来像`ol li:nth-child(-n+14):nth-child(n+7)` 。* *WebKit每晚没有此错误，因此最终您将能够使其在Safari中正常运行。*

This code uses chained structural pseudo-class expressions. Although the expression itself might be a bit confusing, you can see the range you’re targeting by the numbers used in the expression.

该代码使用链式结构的伪类表达式。 尽管表达式本身可能会有些混乱，但是您可以通过表达式中使用的数字来查看要定位的范围。

To explain exactly what this is doing: In the first part of the chain, the expression says “select the 7th element, then every element after that”. The second part says “select the 14th element, and every element before that.” But since the selectors are chained, each limits the previous one’s scope. So the second part of the chain doesn’t allow the first part to go past 14 and the first part of the chain doesn’t allow the second part to go back past 7.

确切解释其作用：在链的第一部分，表达式表示“选择第7个元素，然后选择第7个元素”。 第二部分说“选择第14个元素，以及此之前的每个元素。” 但是由于选择器是链接在一起的，所以每个选择器都限制了前一个选择器的范围。 因此，链的第二部分不允许第一部分超过14，链的第一部分不允许第二部分超过7。

For a more detailed discussion of these types of selectors and expressions, you can read [my old post on the subject][].

有关这些选择器和表达式类型的详细讨论，您可以阅读[有关该主题的老文章][my old post on the subject] 。

## 11.伪元素可以应用于某些空元素 **(**11. Pseudo-elements can be applied to some void elements**)** ##

If you’re like me, at some point you’ve probably tried to apply a pseudo-element to an image or a form input. This won’t work because pseudo-elements don’t work on replaced elements. I think many developers have the assumption that void elements (that is, elements that don’t have closing tags) all fall under that category. But that’s not true.

如果您像我一样，在某些时候您可能已经尝试将伪元素应用于图像或表单输入。 这将不起作用，因为伪元素不适用于替换的元素。 我认为许多开发人员都假设void元素(即没有结束标签的元素)都属于该类别。 但这不是事实。

You can apply a pseudo-element to [some void elements][] that aren’t replaced elements. This includes `hr` elements, as in this demo:

您可以将伪元素应用于未替换的[某些void][some void elements]元素。 包括`hr`元素，如本演示中所示：

See the Pen [Pseudo-elements on a Horizontal Rule (hr element)][Pseudo-elements on a Horizontal Rule _hr element] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [编写的][CodePen] [关于水平][Pseudo-elements on a Horizontal Rule _hr element]尺( [hr元素)][Pseudo-elements on a Horizontal Rule _hr element]的Pen [伪元素][Pseudo-elements on a Horizontal Rule _hr element] 。

The colored area in that example is a horizontal rule (`hr` element) and it has both `::before` and `::after` pseudo-elements applied to it. Interestingly, I couldn’t get the same result using a `br` element, which is also a non-replaced void element.

在该示例中，彩色区域是水平尺( `hr`元素)，并且对它应用了`::before`和`::after`伪元素。 有趣的是，使用`br`元素(这也是一个不可替代的void元素)，我无法获得相同的结果。

You can also add pseudo-elements to meta tags and `link` elements, if you are crazy enough to convert those to `display: block`, as shown in the demo below.

如果您很疯狂地将伪元素转换为`display: block` ，则还可以将伪元素添加到meta标签和`link`元素，如下面的演示所示。

See the Pen [Adding pseudo-elements to meta tags and link (stylesheet) elements][Adding pseudo-elements to meta tags and link _stylesheet_ elements] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[Pen][CodePen]通过SitePoint( [@SitePoint][SitePoint] ) [将伪元素添加到元标记和链接(样式表)元素][Adding pseudo-elements to meta tags and link _stylesheet_ elements] 。

## 12.一些属性值在选择器中不区分大小写 **(**12. Some attribute values are case insensitive in selectors**)** ##

Finally, here is a bit of an obscure one. Let’s say you have the following HTML:

最后，这有点晦涩。 假设您有以下HTML：

You could style both of those elements using the attribute selector, like this:

您可以使用属性选择器来为这两个元素设置样式，如下所示：

div[class="box"] {
      color: blue;
    }
    
    input[type="email"] {
      border: solid 1px red;
    }

That would work fine. But what about this?

那会很好。 但是呢？

div[class="BOX"] {
      color: blue;
    }
    
    input[type="EMAIL"] {
      border: solid 1px red;
    }

Notice both attribute values are now in uppercase. In this case, the `.box` element will not receive the styles, because the `class` attribute is case sensitive. The email field, on the other hand, will apply the styles because the value of the `type` attribute is not case sensitive. Nothing necessarily groundbreaking here, but maybe it’s something you hadn’t realized before.

注意，两个属性值现在都是大写的。 在这种情况下， `.box`元素将不会接收样式，因为`class`属性区分大小写。 另一方面，电子邮件字段将应用样式，因为`type`属性的值不区分大小写。 这里不一定具有开创性，但也许这是您之前从未意识到的。

## 那是包装，人们 **(**That’s a Wrap, People**)** ##

Well, the curtain has officially dropped on this hopefully-not-so-cheesy sequel.

好吧，这个希望不那么俗气的续集正式拉开了帷幕。

It feels like I’m learning unique little CSS tidbits every week and I hope some of this information was new to most of you. What’s your favorite, obscure CSS trick or technique? Is there a property or other feature that you think isn’t very well known, but has good browser support? Let us know in the comments.

感觉就像我每周都在学习独特CSS小窍门，我希望其中的一些信息对大多数人来说都是新的。 您最喜欢的，晦涩CSS技巧或技术是什么？ 您是否有一个您不太了解但具有良好浏览器支持的属性或其他功能？ 让我们在评论中知道。

> 翻译自: [https://www.sitepoint.com/12-little-known-css-facts-the-sequel/][https_www.sitepoint.com_12-little-known-css-facts-the-sequel]

七个鲜为人知的搜索网站

[12 Little-known CSS Facts]: https://www.sitepoint.com/12-little-known-css-facts/
[12 Little-known CSS Facts_ The Sequel]: /images/20221123/ef20f18c4a2b4284bc9e98760993be59.png
[Natalia Balska]: http://sf-lab.net/
[written about before]: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
[Multiple Radii on each corner with border-radius]: /images/20221123/512f0435bf954e74b2c1ac7fccf28c1e.png
[handy little interactive demo from MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
[Using font-weight bolder_lighter Keywords]: http://codepen.io/SitePoint/pen/domZLx/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[Exo 2]: https://www.google.com/fonts/specimen/Exo+2
[Open Sans]: https://www.google.com/fonts/specimen/Open+Sans
[doesn_t affect page flow]: http://www.impressivewebs.com/css-things-that-dont-occupy-space/
[The outline-offset property]: http://codepen.io/SitePoint/pen/VLXyZw/
[Using the table-layout property]: http://codepen.io/SitePoint/pen/vORpYN/
[a great write-up on this property]: https://css-tricks.com/fixing-tables-long-strings/
[HTML4 valign attribute]: https://www.w3.org/TR/html401/struct/tables.html#adef-valign
[obsolete_ non-conforming feature in HTML5]: https://www.w3.org/TR/html5/obsolete.html#non-conforming-features
[Using the vertical-align property on inline elements]: http://codepen.io/SitePoint/pen/zGWpxy/
[Christopher Aue_s 2014 post]: http://christopheraue.net/2014/03/05/vertical-align/
[Using vertical-align on table cells]: http://codepen.io/SitePoint/pen/KpoZdo/
[drop-cap]: https://en.wikipedia.org/wiki/Initial
[Matt Andrews tweeted about it]: https://twitter.com/andrewsmatt/status/497704502167076864
[Testing _first-letter]: http://codepen.io/SitePoint/pen/KpoZjE/
[in 2013 by Ben Everard]: http://beneverard.co.uk/blog/using-slashes-within-the-html-class-attribute/
[Illegal Characters as HTML Class Delimiters]: http://codepen.io/SitePoint/pen/NqYyNe/
[insert them escaped using this tool]: https://mothereff.in/css-escapes
[which I_ve filed here]: https://bugs.webkit.org/show_bug.cgi?id=146996
[Using a Fractional Iteration Count]: http://codepen.io/SitePoint/pen/VLXQmM/
[PqRxov]: http://codepen.io/SitePoint/pen/PqRxov/
[An animation called _reverse_ won_t work in shorthand]: http://codepen.io/SitePoint/pen/OVvayK/
[timing function keywords]: http://dev.w3.org/csswg/css-transitions-1/#single-transition-timing-function
[this demo]: http://bittersmann.de/samples/08-15
[Gunnar Bittersmann]: https://twitter.com/g16n
[Selecting Ranges of Elements with CSS]: http://codepen.io/SitePoint/pen/wamQGv/
[my old post on the subject]: http://www.impressivewebs.com/css3-pseudo-class-expressions/
[some void elements]: https://www.w3.org/TR/html5/syntax.html#void-elements
[Pseudo-elements on a Horizontal Rule _hr element]: http://codepen.io/SitePoint/pen/ZGxmpK/
[Adding pseudo-elements to meta tags and link _stylesheet_ elements]: http://codepen.io/SitePoint/pen/KporNg/
[https_www.sitepoint.com_12-little-known-css-facts-the-sequel]: https://www.sitepoint.com/12-little-known-css-facts-the-sequel/