小编Van*_*als的帖子

背面可见性不适用于儿童

这个解决方案(Webkit背面可见性不起作用)不起作用,因为我想在容器内部有其他转换对象来显示背面.

.container {
  position: relative;
  transform-origin: 50% 50% 0;
  transition: transform 1s ease 0s;
  width: -moz-min-content;
  width: -webkit-min-content;
}
.container img {
  backface-visibility: hidden;
}
input:checked + .container {
  transform: rotateY(180deg);
}

Run Code Online (Sandbox Code Playgroud)

<input type="checkbox" name="" id="" />
<div class="container">
  <img src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="" />
</div>

Run Code Online (Sandbox Code Playgroud)

那只猫的背面不应该是可见的.解决这个问题的任何方法？

css css-transforms

Van*_*als

2018 06-12

6
推荐指数

1
解决办法

3407
查看次数

如何使用透明文本制作文本笔划

我找到了这个解决方案:对文本进行轮廓效果这很好,但是可以使文本透明而且只绘制轮廓吗？例如,盒子阴影会发生这种情况,因为即使盒子没有背景,你也不会在盒子下方看到阴影.但是对于文本,如果它是透明的,你可以看到该类型的整个阴影.只获得透明文字的轮廓是否可行？

编辑:这个问题是对不支持例如-webkit-text-outline的浏览器有一个很好的回退,因为它们不会绘制轮廓,它们会使文本不可见...

css svg strokeshadow css-shapes

Van*_*als

2017 05-23

5
推荐指数

3
解决办法

9874
查看次数

当flexbox处于活动状态时,会忽略哪些css规则？

如何配置flexbox以获得良好的后备？说我有这个:

.parent{
	display: flex;
	flex-flow: row wrap;
	width: 320px;
	border: 1px solid black;
}
.children{
	text-align: center;
	flex: 1;
	background: #DDD;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
	<div class="children">1</div>
	<div class="children">2</div>
	<div class="children">3</div>
</div>

Run Code Online (Sandbox Code Playgroud)

我允许添加哪些规则,以便为旧浏览器提供良好的后备,并且它们会被完全忽略并且不会干扰flexbox.

请注意,我不会要求一个polifill或任何东西,我只是想要一些类似的东西.当flexbox处于活动状态时,确切地知道哪些规则被忽略会很高兴.显然会覆盖显示,但是孩子的宽度怎么样？孩子的漂浮怎么样？位置怎么样:绝对？利润率怎么样？

css css3 flexbox

Van*_*als

2015 05-28

5
推荐指数

1
解决办法

479
查看次数

第一个元素的CSS选择器接连不是兄弟姐妹

我想知道这是否可能.有了这个html:

<h1></h1>
<form>
    <label><input type="text"></label>
    <label><input type="text"></label>
    <label><input type="text"></label>
</form>

Run Code Online (Sandbox Code Playgroud)

我知道我能做到:

label:first-child{}

Run Code Online (Sandbox Code Playgroud)

但我想知道是否有可能只选择第一个标签前面的h1与+或〜或其他东西不在同一水平.

html css css-selectors

Van*_*als

lucky-day

5
推荐指数

1
解决办法

71
查看次数

防止列数破坏元素的边界

我正在使用column-count和-webkit-column-count创建布局,但我发现了一个多次出现的问题.

正如你从这张图片中看到的那样,Chrome 45(没有在FF中发生)打破了元素的边界,这非常奇怪且非常烦人.这有点突破发生的代码(但我不知道为什么它不会发生在这里,只有区别是字体,并且没有Mayers css重置):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

Run Code Online (Sandbox Code Playgroud)

但它没有用.你能给予任何启示吗？

css css3 column-count css-multicolumn-layout

Van*_*als

2017 08-28

5
推荐指数

1
解决办法

2300
查看次数

在 HTML5 中，figcaption 是否允许成为 <a> 标签的子标签？

我认为在 HTML5 中你可以将块元素作为子元素<a>元素的子元素，正如规范中所理解的：

\n\n

https://www.w3.org/TR/html-markup/a.html#a

\n\n

\n
尽管以前版本的 HTML 将 a 元素限制为仅\n 包含短语内容（本质上，以前\n 版本中称为 \xe2\x80\x9cinline\xe2\x80\x9d 内容），但 a 元素现在\n n 透明；也就是说，a 元素的实例现在允许\n 还包含流内容（实质上，在以前的版本中\n 称为\xe2\x80\x9cblock\xe2\x80\x9d 内容）\xe2\x80 \x94如果 a 元素的该实例的父元素是允许包含流内容的元素。
\n

\n\n

但现在当我使用 HTML 验证器检查我的页面时，我发现了以下错误消息：

\n\n

\n
错误：在此上下文中，元素 \xe2\x80\x9cfigcaption\xe2\x80\x9d 不允许作为元素 \xe2\x80\x9ca\xe2\x80\x9d 的子元素。（抑制该子树中的更多错误。）
\n

\n\n

代码如下：

\n\n

\r\n

<figure class="post">\r\n  <a href="#" title="foo">\r\n    <figcaption class="articuloInfo ">\r\n      <h3>FOO</h3>\r\n      <p class="fecha">4/04/2014</p>\r\n      <div class="descripcion">\r\n      </div>\r\n    </figcaption>\r\n    <div class="imagen">\r\n      <img src="foo.jpg" alt="foo">\r\n    </div>\r\n  </a>\r\n</figure>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n\n

有人可以解释一下错误在哪里以及为什么吗？

html anchor w3c-validation

Van*_*als

2016 06-16

5
推荐指数

1
解决办法

3526
查看次数

是Android浏览器的Android浏览器版本吗？

检查http://caniuse.com/#search=transition您可以看到Android浏览器在全球范围内具有显着的份额,但在此站点中没有关于三星浏览器或LG浏览器的通知.

我查了一个旧的三星G.趋势2,它有三星浏览器2.1和我的LG带有浏览器5.70.**版本.

我有3个问题:

这些浏览器是Android浏览器的实现吗？
如何查看这些浏览器的分享率？
如果它们相同,我怎么知道这些浏览器支持哪些功能？

browser android-browser

Van*_*als

lucky-day

5
推荐指数

1
解决办法

482
查看次数

我应该使用角度ng禁用功能吗？

拿这个代码:

var app = angular.module('test', []);

app.controller("controller", function() {
  this.hello = "Hello world";
  this.condition1 = true;
  this.condition2 = true;
  this.check_condition2 = function() {
    return this.condition2;
  }
});

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="controller as ctrl">
  {{ctrl.hello}}
  <br>
  <label>
    <input type="checkbox" ng-model="ctrl.condition2">Condition2</label>
  <br>
  <button ng-disabled="ctrl.condition1 && ctrl.check_condition2()">My BTN</button>
</div>

Run Code Online (Sandbox Code Playgroud)

我认为角度的作用是这样的: