小编Cha*_*ase的帖子

是否可以查看Shadow DOM元素是否存在？我并不太关心操纵它,甚至不是真的瞄准它.我理解封装的原因.但是我希望能够根据Shadow DOM元素是否存在来设置常规DOM中的其他元素.

有点像:

if ( $('#element-id #shadow-root').length ) {
    // true
}

或者如果不是阴影根,至少是一个特定的元素,比如div的id.因此,如果该div存在,那么很明显Shadow DOM元素在页面上.

我知道这不会那么简单......从我做过的一些研究中,有些事情就像这样>>>,/deep/但他们的支持似乎很低/没有/弃用.购买也许还有另一种方式,不管它有多么优雅？

我有一个带有固定位置页脚的网站。我没有处理移动设备上固定定位的噩梦般的调试，而是灵机一动，将一个 Flexbox 放在一起，填充 100% 的 html/body 高度，并使用固定高度的页脚，页面的其余部分由一个拉伸的主要内容元素，具有overflow-y: scroll.

所以不需要定位页脚。它只是被内容推到页面底部，然后滚动内容元素，而不是正文。

效果很好。但我刚刚注意到，当滚动内容时，iOS Safari 中的地址和工具栏永远不会隐藏/最小化。我认为是因为浏览器不会将溢出算作实际滚动。

没什么大不了的...但是，我正在失去一些好的屏幕房地产...

那么，工具栏隐藏是否仅在主视口滚动时触发？或者我可以使用一些疯狂的元属性或角色属性来使浏览器将不同的元素视为主要“框架”？我尝试过minimal-ui，但没有任何作用。

我正在尝试找到一种方法来检测输入当前是否显示占位符。

我知道我们可以测试给定浏览器是否支持占位符，我会使用它，但这不是我在这里要问的。

伪:placeholder-shown类正是我所需要的，但对它的支持非常低。一般来说，对占位符的支持要低得多。所以我正在寻找替代方法。

注意：解决方案不能依赖于输入是否已更改或已获得值。自动填充的输入既没有技术价值，也没有改变。因此，解决方案需要真正检测占位符本身。

我试图将一个元素直接放置在移动键盘上方。即：位置绝对/固定到页面底部，但由键盘向上推（或向上推键盘的等效高度）。

通常这与期望的行为相反，并且会有很多人努力保持底层元素到位。我感觉我记得以前也曾经历过同样的战斗……

但现在我想让它动起来，却没有动。（当然！）

我现在的重点是 iOS Safari，但更喜欢跨浏览器。

当键盘打开时，旧版本的 iOS 似乎发生了变化window.innerHeight，无论好坏。但现在情况已不再如此。这可以解释为什么我没有看到我期望看到的东西......

我一直在尝试不同位置的父元素，但没有运气。

这可能吗？或者键盘现在完全与视口分离了吗？

我试图将变量名称引用为内容属性中的实际文本字符串,而不是变量的值.

对于上下文,我正在尝试为样式指南设置调色板.颜色被定义为变量,然后使用content属性列出.@rocketRed可以编译为"#ff0048",但如何将@rocketRed编译为"@rocketRed"？

如果这还不够,那么我试图通过mixin传递变量可能会更加复杂.否则它会破坏目的.

这是一个例子:

@rocketRed:#ff0048;

.mixin(@color) {
  &:before {content: "@color"};
  &:after {content: "@{color}"};
}

.test {
  .mixin(@rocketRed)
}

编译到哪个

.test:before {
  content: "@color";
}
.test:after {
  content: "#ff0048";
}

该:before显然是行不通的.我真正喜欢编译的是:

content: "@rocketRed";

我想部分问题是变量自动编译.@color - > @rocketRed - >#ff0048.不知何故,我需要引用@color引用的内容,并通过将其转换为字符串来停止它.

这是我遇到的最接近的事情,这实际上并不太适用,但我认为解决方案(如果可能的话)会有些类似:在LESS mixin中使用选择器名称作为变量

我意识到我可能会对变量的工作方式提出一些界限,但有时候推动边界会有效!

我试图在值小于和大于时设置属性，以设置要应用的属性的窗口。

例子：

.mixin (@colorVal) when (lightness(@colorVal) > 75%) {color:red;}
.mixin (@colorVal) when (lightness(@colorVal) > 25%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 75%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 25%) {color:blue;}

我不太明白如何组合守卫。在上面的示例中，亮度为 20% 的颜色将同时应用第三个和第四个防护。所以它会编译一种绿色和蓝色的颜色。由于顺序，这在技术上可以正确呈现，但仍然有点混乱......

任何替代解决方案？谢谢！