浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？

Posted 2023-03-06

【中文标题】浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？

【英文标题】：Browser loads both shorthand CSS with px, and specific css with rem on same property?

【发布时间】：2013-04-21 19:40:11

【问题描述】：

我已经开始在一个新站点上使用带有 PX 后备的 REM 单元。现在，我有一个可能很愚蠢的问题，但我找不到任何具体提及它的内容，所以我将继续在这里提问。

使用属性简写和特定属性似乎都 load 在 浏览器 Chrome 中生效。

body font:16px/23px sans-serif;
      font-size:1rem;
      line-height:1.438; 

而同时使用速记或同时使用两个特定属性会取消其中一个或另一个（例如，使用主要或后备，而不是两者）

body font-family:sans-serif;
      font-size:16px; font-size:1rem;
      line-height:23px; line-height:1.438; 

或

body font:16px/23px sans-serif;
      font:1rem/1.438 sans-serif; 

现在哪个才是最佳实践？所有示例均有效。 速记和特定属性都加载到 浏览器 Chrome 中是否有原因，即使它们的目标是相同的属性？他们实际上都在加载吗？ 这对浏览器/设备如何呈现样式有任何不利影响吗？

我只通过 Chrome 研究过这个问题，我无法通过测试辨别出任何差异。但是，您可以看到，如果您必须对所有使用 rem 的元素使用相同代码的两次迭代，这将是多么的笨重。

更新： 仅在以下所有浏览器的最新版本中测试，所有测试都与第一个代码sn-p有关

在 Firefox 中，这似乎不是问题，它只是将速记代码中的字体大小/行高替换为 rem 大小。 在 IE、safari 和 Opera 中，它采用简码并将其分离为特定属性，但仍会加载 rem 单位而忽略 px 单位。

它似乎是特定于 Chrome 的，至少在现代版本中是这样。所以现在的问题是，如何弄清楚 Chrome 是如何处理它的？显示在这篇文章底部的图像可能会解释更多。看看这两个字体属性是如何加载的，既没有被忽略也没有优先权？

更新#2： 使用边距时，Chrome 会正常运行。我将使用以下“离墙”示例进行演示：

margin:16px 0 19px 0;
margin-top:1rem;
margin-bottom:1.188rem;

在 chrome 中读取为：

margin:1em 0 1.188rem 0;

_{（来源：leftdeaf.com）}

【问题讨论】：

你说的“加载”是什么意思？是“生效”的意思吗？在这种情况下，Firefox 似乎表现正确，因为这似乎是一个简单的级联问题。 （为什么它在 Chrome 的 Web Inspector 中显示 line-height: 1.438 而不是代码中所述的 line-height: 1.438rem，这超出了我的理解。）

@BoltClock，是的，我的意思是生效，或者用作主要（rem）或回退到次要（px）。一个应该覆盖另一个。我只想用特定属性（例如font-size:1em;）修改速记font:500 16px/23px sans-serif; 中的字体大小。类似的例子是使用速记margin:0 16px 0 0;，只有右边距和margin-right:1rem;。但正如 Xarcell 所提到的，我只需要以相同的方式重写它，一个为 px，一个为 rem，如下所示：margin:0 16px 0 0; margin:0 1rem 0 0; 或 margin-right:16px; margin-right:1rem; 重复，但有效。

另外，行高最后没有显示“rem”是因为我在阅读meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights 之后更新了那个样式表，在截图之前。我现在也在这里更新了，很抱歉造成混乱。

【参考方案1】：

这两个资源将回答您的所有问题：

http://snook.ca/archives/html_and_css/font-size-with-rem

http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

使用 line-height，使用单位，而不是值：

身体 字体：16px/23px 无衬线； 字体：1rem sans-serif； 行高：1.438；

或

身体 字体大小：16px/23px； 字体大小：1rem； 字体系列：无衬线； 行高：1.438；

您不能使用 FONT 和 FONT-SIZE，只能使用其中之一。否则浏览器将尝试同时使用两者。

【讨论】：

喜欢 typekit 链接，因为它把我带到了这个：meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights 这是一篇很棒的文章，很好地解释了无单位的行高。然而，这不是我要说的。在图片链接中，您会看到，chrome 正在同时加载 px 和 rem 元素：leftdeaf.com/chromefont-size.jpg 似乎都被应用在彼此之上。我知道 rem/px 是如何工作的（尽管无单位的 line-height 是新的，所以谢谢）。

把 PX 放在 REM 之前。浏览器总是使用最后一个，如果它不理解最后一个，它会忽略它，让你使用第一个。此外，它同时使用两者的原因是因为您使用 FONT 和 FONT-SIZE。你需要选择一个或另一个，而不是两个......

明白了，看起来好像除了 chrome 之外它都可以工作，即使在所有其他浏览器中字体大小/字体存在差异，它似乎也忽略了 em 中的 px，但我猜我只需要推进一个更庞大但工作正常的实施。谢谢

"您不能使用 FONT 和 FONT-SIZE，只能使用其中一个。否则浏览器会尝试同时使用这两个。"您可以同时使用它们。无论您使用简写和/或其组件属性都不应以意想不到的方式影响级联 - 无论发生什么似乎都是浏览器错误。

@BoltClock，这就是我最初的想法，但不确定它是否使用不当，第二次猜到了。因此，我来​​这里进行进一步审查。

【参考方案2】：

在浪费了很多时间和困惑之后......它实际上确实在 Google Chrome 中正确呈现。 现在感觉很傻...我忽略了 Chrome 工具中子属性的下拉箭头。图像显示了我忽略的内容。示例显示了多个速记属性和特定属性的示例，更重要的是它显示了font 属性的工作，它没有划掉，但它仍然被覆盖。不知道为什么它不符合 strike through 像其他所有内容一样，可能是由于字体粗细、变体、样式属性保持不变。但它有效。