具有图像和扩展渐变的背景的CSS属性值无效
Chrome已经开始提醒我我的传统渐变:具有图像和扩展渐变的背景的CSS属性值无效,css,background,linear-gradients,Css,Background,Linear Gradients,Chrome已经开始提醒我我的传统渐变: Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'), -moz-linear-gradient(bottom, #899fa6, #3e545c) 它仅适用于o、moz和ms的扩展: background: right no-repeat url('../Images/CompanyLogo.png'), -moz-linear-gradient(
Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'),
-moz-linear-gradient(bottom, #899fa6, #3e545c)
它仅适用于o、moz和ms的扩展:
background: right no-repeat url('../Images/CompanyLogo.png'),
-moz-linear-gradient(bottom, #000000, #ffffff);
webkit的一个很好:
background: right no-repeat url('../Images/CompanyLogo.png'),
-webkit-linear-gradient(bottom, #000000, #ffffff);
我做错什么了吗
扩展渐变单独使用而不是与图像组合使用时不会生成警告。从Chrome的开发工具中获得警告的原因是,这些值对于Chrome来说确实无效。但是,这不应该让您感到恐慌,因为这是它的设计方式 在CSS中,如果某个内容定义不正确或浏览器无法识别,那么它将被简单地传递,什么也不做,只给出警告而不是错误。这种行为正是允许供应商前缀工作的原因。以你自己的情况为例:
background: right no-repeat url('../Images/CompanyLogo.png'),
-moz-linear-gradient(bottom, #000000, #ffffff);
background: right no-repeat url('../Images/CompanyLogo.png'),
-webkit-linear-gradient(bottom, #000000, #ffffff);
background: right no-repeat url('../Images/CompanyLogo.png'),
linear-gradient(bottom, #000000, #ffffff);
Chrome浏览每个背景属性,并查看它可以解释哪个属性。它无法解释第一个渐变,因为它不像Firefox那样识别-moz-
。它可以解释第二个,因为它有一个-webkit-
前缀。它还可以解释第三个背景,因为Chrome支持不带前缀的CSS渐变
由于多个CSS属性影响同一事物(background
),因此将使用列出的最新属性(非固定版本)。对于未解释的第一个背景
,将显示一条警告,但对项目没有影响
是的,应该查看和分析警告,通常将其视为错误。话虽如此,您提出的关于浏览器前缀的案例是正确的做法,因此应该接受警告。在一个完美的世界里,他们根本不会出现,他们会明白这是为另一个浏览器设计的,但没有理由担心,因为这确实是正确的方式
但话说回来,这些都是无关紧要的,因为。我在Chrome开发者工具上发现了这个bug:
似乎他们会暂时禁用CSS警告,因为有太多的误报(包括旧浏览器的有效CSS,如果我们是票据作者的话),直到他们修复为止
这些警告很可能是误报的一部分。
我将监视该问题。Chrome将警告其他浏览器的浏览器前缀,因为它无法解释这些值。如果你在FireFox中查看页面,它应该警告你关于webkit
浏览器前缀的信息,而不是警告你关于moz
前缀的信息。所以我应该接受这些警告或在Chrome上投诉?接受这些警告,这就是它应该做的。还有什么我可以解决的吗?最后一部分。为什么只有当我将它与我的示例中的图像结合时,它才会抱怨。这类警告的问题在于,如果所有程序员都知道警告总是可以而且应该被忽略的话,它们可能最终会隐藏实际问题。例如,在工作中,我们尝试将警告视为C#代码的错误。我正着手清理devtools控制台中的所有警告。但是从你的帖子来看,我想在仍然支持传统浏览器的情况下,这是不可能的?关于-moz线性梯度,我遗漏了什么吗?在我看来它是存在的:请看页面底部,/*对于旧的Fx(3.6到15)*/同意,我也将大多数警告视为错误,每个人都应该如此。话虽如此,您特别提出的警告应该是可以接受的,因为它们是为了开发跨浏览器解决方案。它与C语言不同,因为无论运行什么程序,C语言的工作原理都是一样的(一般来说)。网络程序员必须了解哪些警告是可以接受的。你可以正确地说有一个-moz线性梯度,
,我要离开文档,没关系。在caniuse上,如果单击“显示所有版本”链接,它将显示较旧的浏览器版本,包括使用-moz的Firefox版本。@SopKillen更新了我的答案以反映我们的讨论更新了我的帖子。不知道该怎么做这个答案。这是一次很好的讨论,但我希望我的帖子能有一个链接到那个bug报告。我还应该接受吗?