小编Typ*_*yle的帖子

通过将"perspective"应用于html元素,我的mix-blend-mode似乎被Firefox忽略了.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

有什么问题？我使用的是Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

我很好奇currentColor以及它在其他属性中继承和/或使用时的行为方式.另一方面是省略border-property中的颜色值,例如默认为text-color.

.outer {
	color: #f90;
	border: 5px solid;
	box-shadow: 0 0 15px;
	text-shadow: 2px 2px 3px;
}

<div class="outer">
	Outer Div
</div>

上面的片段没什么好看的.
阴影和边框与文本颜色相同.

现在让我们继承颜色:

.outer {
    color: #f90;
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}

	
	.inner {
	    color: lime;
	    display: inline-block;
	    border: inherit;
	    box-shadow: inherit;	    
	}

<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

Resutls:

在IE11和Chrome 43中,只有文字颜色是石灰.
另一方面,在Firefox 38中,阴影也是绿色.(注意不是边框)

当主动将所有内容设置为currentColor时,浏览器通过仅显示石灰中的文本和橙色中的所有其他内容显示相同的结果.(正如您在底部的最后一个片段中看到的那样)

/**
 * playing with currentColor …

我正在使用CSS,我想创建一个具有一定比率的盒子,无论盒子的大小如何都要保留.但是如果有更多内容,我希望盒子能够增长.

按顺序总结:

• 仅限CSS (如果可能)
• 保留给定的宽高比
• 如果有更多内容(比率)允许框增长

在那些我迄今为止尝试过的技术中,盒子的内容无法使盒子增长.相反,我唯一的选择是重叠或剪裁内容.

1. 填充率哈克
2. 基于视口的单位
3. 替换了Element Scale Hack

第一种和第三种方法占据了包装器内部的空间,并且使用绝对位置将内容置于其上方.由于内容是绝对定位的,因此将其从文档流中删除.因此,它无法扩展包裹元素.

第二种选择是使用固定高度,这也不允许内容超出它.

这是使用第二个选项的演示.(基于视口单元)

* {margin: 0; padding: 0;}
div{
  width: 50vmin; height: 50vmin;

  font-size: 30px;
  background: #ccc;
  margin: auto; 
  padding: 3%;
}

<div>
 <p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p>
</div>

我部分测试的其他方法:

• 物体定位
• Flexbox的

据我所知,Object-Fit仅影响被替换的元素.我无法通过此属性对我的div/p元素产生任何影响.

Flexbox对我的场景也不实用.根据我目前的知识水平,flexbox在这方面没有帮助.因为它主要是关于建立多个项目之间的关系.但我不确定.也许flexbox中有一些我还没有意识到的东西.

解释问题:

所以,如果你有一个CSS规则看起来像这样:

h1, h1 a:hover {
  color: blue;
}

它的工作正常,从可用性的角度来看,这个例子可能是最好的,但它确实有效.(它可以证明这个问题...)

但是,如果您使用浏览器无法理解的逗号(,)分隔,则会忽略漏洞规则.

 h1, h1 a:hover, h1:focus-within {
    color: blue;
 }

浏览器不理解:focus-within伪类将忽略整个规则.这意味着即使是h1也不会得到指定的规则.

进一步想知道为什么它是这样的:

别误会我的意思.忽略他们不知道的东西是CSS中非常强大的功能!

但是为什么不是以一种只忽略未知部分并且所有其他选择器仍然按预期工作的方式设计的呢？

就个人而言,我很少偶然发现这个问题,而且我已经接受了这样一个事实:选择器中的一个错误的东西打破了整个规则.但很难解释为什么一个错误的声明或属性只导致特定的行被忽略,而选择器中未知的任何东西都会破坏整个块.

感觉我错过了什么,所以如果有一个很好的解释让我知道并感谢你这样做.

不满意的解决方案:

当然,解决方法是将选择器的"危险"部分分成新规则,如下所示:

h1, h1 a:hover {
    color: blue;
}
h1:focus-within {
    color: blue;
}

但那感觉很糟糕.(由于"不必要的"重复)

只是想把它放在这里.

根据w3.org验证器:

<link rel="stylesheet" href="css/style.css" media="screen, projection, tv" />   

似乎不再有效.由于"投影"值.

我不记得确切,但这样就包含了全屏Opera.可能Opera也将使用media ="screen"加载文件.

问题:

1. 为什么这个现在无效？
2. 还有另一种方法可以为"全屏/投影"设备提供额外的CSS吗？
3. 是否应省略媒体属性,以获得基本的布局样式？