2011-02-28 65 views
5

我想下面的div影子 “影子”:为什么CSS属性对Chrome,FF,Opera有不同的名称?

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

完成?

根本不是。它只在一个浏览器中工作。猜猜哪一个。

对于FF /铬我要补充不太直观:

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

而现在一切正常。该方案适用于许多CSS属性。为什么?

幸运的是,没有-webkit边框,moz-font或-ie-backgroundcolor。

PS。是的,没有一个关于IE的单词。称之为浏览器就像比较轮椅和摩德纳汽车。

PS 2.为什么在我的文章下方的Google Chrome标记旁边有一个徽标?或者为什么Opera没有Logo & FF?

+0

关于PS2:Chrome标签有一个标志,因为Google支付了Stackoverflow来显示一个标志。这是一种微妙的广告形式;)。 – hallvors 2011-03-04 06:49:35

回答

2

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

例如,看看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-or-posthack/

因此,下一次你发现自己 抱怨宣布同 事情四次,一次为每个 浏览器,请记住,痛苦是 临时。这有点像一个 疫苗 - 现在的伤害是真的,但是 对于它预防的疾病,它的确没那么差。并在 这种情况下,您正在接受针对多年 解析器黑客攻击和浏览器嗅探的坏情况的 疫苗。 我们曾经经历过那漫长的瘟疫 。如果正确使用 ,前缀将会在很长一段时间内避开另一个疾病 。

注意:最好包含没有前缀的版本,以便在完全采用属性时继续站点功能。

+0

对于任何愿意理解为什么属性的前缀是改进Web标准开发的一种方法的人来说,AListApart文章是必读内容。 – dSebastien 2011-02-28 20:54:21

0

浏览器的能力超出了他们应该遵循的标准。在标准发布之前,他们让您能够访问过渡期间的能力,然后遵循已发布的标准,并提供与时髦外观的“webkit ...”格式的后向兼容性。

+0

它甚至是必需的,有点。如果供应商有两种先前的实施方式,则只能达到建议状态。没有实施,没有标准。 – FelipeAls 2011-02-28 20:11:56

3

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

这种方法允许任何特定供应商的 扩展共存 与任何未来的(或电流)CSS 性能,而不会造成冲突 因为,根据W3C 规格,CSS属性名 决不会与开始破折号或 下划线:

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

0

属性whic h是基于未完成规范实现的,因此给定了厂商前缀。如果供应商认为他们的实施没有完成,即使规范是这样,也是如此。

0

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

这是故意行为; CSS规范指定这是他们在这种情况下应该如何做的事情。对于这一规则的原因如下:

  • 为了确保在不同的浏览器实现的功能不同(由于规范的变化或不一致),这些差异都可以纳入同一个样式表。
    例如:-moz-border-radius的早期版本与-webkit-border-radius的工作方式大不相同;它们之间存在显着的语法差异,所以如果它们都只是border-radius,那么您将无法同时支持它们。
  • 为了简化规范完成时的过渡。
    如果您确实使用带有供应商前缀的功能,请始终将功能的非前缀版本放在其他版本之后。这样,最近升级到正确支持它的浏览器将选择正确的版本,而不是被过时的前缀版本覆盖。
  • 确保网络开发人员知道当他们使用的功能不一定准备好主要时间使用。
    这很重要:您应该清楚,使用带有供应商前缀的功能意味着您正在使用浏览器制造商和规范编写者不相信已准备好的功能。你需要知道这一点。不要让它停止使用某些有用的东西,但请注意,下一版本可能会有所变化。
相关问题