为什么 Chrome、FF、Opera 的 CSS 属性有不同的名称？

发布于 2024-10-20 01:27:47 字数 508 浏览 2 评论 0原文

我想要一个名为“shadow”的 div 下面的阴影：

#shadow { box-shadow: 1px 1px 1px #000 };

完成了吗？

一点也不。它仅适用于一种浏览器。猜猜是哪一个。

对于 FF/Chrome，我必须添加不太直观的内容：

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

现在一切都很好。此方案适用于许多 CSS 属性。为什么？

幸运的是，没有 -webkit-border、moz-font 或 -ie-backgroundcolor。

附言。是的，只字不提 IE。称其为浏览器就像将轮椅与摩德纳汽车进行比较一样。

PS 2. 为什么我的帖子下面的 Google Chrome 标签旁边有一个徽标？或者为什么没有 Opera & 的徽标？ FF？

原文

I want a shadow below div called "shadow":

#shadow { box-shadow: 1px 1px 1px #000 };

Done?

Not at all. It works just in one browser. Guess which one.

For FF/Chrome I have to add not too intuitive:

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

And now everything is ok. This scheme applies to MANY CSS properties. Why?

Luckily there's no -webkit-border, moz-font or -ie-backgroundcolor.

PS. Yes, not a single word about IE. Calling THIS a browser is like comparing wheelchair to Modena cars.

PS 2. Why there is a logo next to Google Chrome tag below my post? Or why there are no logos for Opera & FF?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩虹直至黑白 2024-10-27 01:27:47

发生这种情况是因为浏览器不希望彼此发生冲突。除此之外，目前还没有真正的 box-shadow 的“规范”，因此几个浏览器都有自己的实现。

这种方法允许任何
供应商特定的扩展共存
与任何未来（或当前）的 CSS
属性不会引起冲突
因为，根据 W3C
规范，CSS 属性名称
永远不会以破折号或
下划线：

来源：http://reference.sitepoint.com/css/vendorspecific

回复收藏 0 原文

泪是无色的血 2024-10-27 01:27:47

这是浏览器在 CSS 规范获得完全批准之前发布功能的一种方式。

例如，看看 CSS3 渐变。 -moz- 与 -webkit- 完全不同。

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(145,4,88)),
    color-stop(0.58, rgb(174,30,115)),
    color-stop(0.79, rgb(209,57,150))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(145,4,88) 15%,
    rgb(174,30,115) 58%,
    rgb(209,57,150) 79%
);

这可能会引起兴趣：http://www.alistapart.com/articles/prefix-或-posthack/

所以下次你发现自己时
抱怨同样的声明
事情四次，每人一次
浏览器，记住痛苦是
暂时的。它有点像一个
疫苗——注射现在很痛，这是真的，但是
相比之下确实没那么糟糕
它所预防的疾病。并且在
在这种情况下，您正在接种疫苗
针对多年不良案件
解析器黑客攻击和浏览器嗅探。
我们经历了那场长期的瘟疫
已经一次了。如果使用前缀的话
正确地避免再次爆发
在未来很长一段时间内。

注意：最好包含不带前缀的版本，以便在完全采用该属性时继续站点功能。

It's a way for browsers to release features before the CSS Spec is fully approved.

For instance, look at the CSS3 gradients. -moz- vs -webkit- are completely different.

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(145,4,88)),
    color-stop(0.58, rgb(174,30,115)),
    color-stop(0.79, rgb(209,57,150))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(145,4,88) 15%,
    rgb(174,30,115) 58%,
    rgb(209,57,150) 79%
);

This may be of interest: http://www.alistapart.com/articles/prefix-or-posthack/

So the next time you find yourself
grumbling about declaring the same
thing four times, once for each
browser, remember that the pain is
temporary. It’s a little like a
vaccine—the shot hurts now, true, but
it’s really not that bad in comparison
to the disease it prevents. And in
this case, you’re being vaccinated
against a bad case of multi-year
parser hacking and browser sniffing.
We suffered through that long plague
once already. Prefixes will, if used
properly, ward off another outbreak
for a long time to come.

NOTE: It's good practice to include the version without the prefixes, as to continue the sites function when the property is fully adopted.

回复收藏 0 原文

慵挽 2024-10-27 01:27:47

基于未完成规范实现的属性具有供应商前缀。如果给定的供应商认为他们的实现尚未完成，即使规范已经完成，也会发生同样的情况。

回复收藏 0 原文

北斗星光 2024-10-27 01:27:47

浏览器的功能超出了它们应该遵循的标准。它们让您可以在标准发布之前暂时访问这些功能，然后它们遵循发布的标准并提供与看起来时髦的“webkit...”格式的向后兼容性。

回复收藏 0 原文

大海や 2024-10-27 01:27:47

正如其他人已经回答的那样，这是因为他们正在实现规范尚未完成的功能，或者其实现尚未完成的功能。

这是故意行为； CSS 规范指定在这种情况下他们应该这样做。制定此规则的原因如下：

为了确保不同浏览器以不同方式实现该功能（由于规范中的更改或不一致），这些差异都可以合并到同一样式表中。
例如：-moz-border-radius 的早期版本与 -webkit-border-radius 的工作方式完全不同；它们之间存在显着的语法差异，因此如果它们都只是 border-radius，您将无法同时支持它们。
规范完成后简化转换。
如果您确实使用带有供应商前缀的功能，请始终将该功能的无前缀版本放在最后，在其他版本之后。这样，最近升级为正确支持它的浏览器将选择正确的版本，而不是被过时的前缀版本覆盖。
确保网络开发人员知道他们何时使用的功能不一定适合黄金时间使用。
这很重要：您应该清楚，使用带有供应商前缀的功能意味着您正在使用浏览器制造商和规范编写者认为尚未准备好的功能。你需要知道这一点。如果它有用，请不要让它阻止您使用某些东西，但请注意，下一个版本中的情况可能会发生变化。