[英]How to group the css selectors
:host([aspect-ratio='square']) img {
aspect-ratio: var(--ratio-square);
}
:host([aspect-ratio='landscape']) img {
aspect-ratio: var(--ratio-landscape);
}
:host([aspect-ratio='portrait']) img {
aspect-ratio: var(--ratio-portrait);
}
:host([aspect-ratio='widescreen']) img {
aspect-ratio: var(--ratio-widescreen);
}
:host([aspect-ratio='ultrawide']) img {
aspect-ratio: var(--ratio-ultrawide);
}
:host([aspect-ratio='golden']) img {
aspect-ratio: var(--ratio-golden);
}
How can I make it to a single line?我怎样才能使它成为单行? by reducing the duplicates of this code
通过减少此代码的重复
I don't think you can reasonably do this with a single line.我认为你不能用一条线合理地做到这一点。
You could do simplify it with Sass/Scss:你可以使用 Sass/Scss 来简化它:
$ratios: "square", "landscape", "portrait", "widescreen", "ultrawide", "golden";
@each $ratio in $ratios {
:host([aspect-ratio='#{$ratio}']) img {
aspect-ratio: var(--ratio-#{$ratio});
}
}
Which generates the CSS:生成 CSS:
:host([aspect-ratio='square']) img {
aspect-ratio: var(--ratio-square);
}
:host([aspect-ratio='landscape']) img {
aspect-ratio: var(--ratio-landscape);
}
:host([aspect-ratio='portrait']) img {
aspect-ratio: var(--ratio-portrait);
}
:host([aspect-ratio='widescreen']) img {
aspect-ratio: var(--ratio-widescreen);
}
:host([aspect-ratio='ultrawide']) img {
aspect-ratio: var(--ratio-ultrawide);
}
:host([aspect-ratio='golden']) img {
aspect-ratio: var(--ratio-golden);
}
I can't think of any CSS only solution here.我想不出任何 CSS 唯一的解决方案。 You'd basically need to be able to read the content of the attribute (
attr()
should be able to do that), and then use it to compose a new CSS variable.您基本上需要能够读取属性的内容(
attr()
应该能够做到这一点),然后使用它来组成一个新的 CSS 变量。 This last step is more problematic, I don't think there is any way to compose strings in CSS and pass them to a func like var()
.最后一步问题更大,我认为没有任何方法可以在 CSS 中组合字符串并将它们传递给
var()
之类的函数。
I would have hoped for the new @property
rule to allow us to do something around that, but when I tried to reference var(--css-var)
values as syntax
that simply failed (with no real surprises I must admit).我本来希望新的
@property
规则允许我们围绕它做一些事情,但是当我尝试将var(--css-var)
值引用为完全失败的syntax
时(我必须承认没有真正的惊喜)。 And even if that did work, I'm not sure the attr()
could have been used there either.即使这确实有效,我也不确定
attr()
是否可以在那里使用。 attr()
produces <string>
and I don't think there is a way to convert a <string>
to a variable name. attr()
产生<string>
并且我认为没有办法将<string>
转换为变量名。
So the best I can think of as a CSS+HTML only solution is to modify your HTML code so that instead of doing所以我能想到的最好的 CSS+HTML 解决方案是修改你的 HTML 代码,而不是做
<my-elem aspect-ratio="square">content</my-elem>
You do你做
<my-elem style="--ratio:var(--ratio-square)">content</my-elem>
As you can see, that's a bit more character but stays relatively readable, and then your CSS can become正如你所看到的,这是一个多一点的字符,但保持相对可读,然后你的 CSS 可以变成
:host([style*="--ratio:"]) img { aspect-ratio: var(--ratio) }
class MyElem extends HTMLElement { constructor() { super(); const style = document.createElement('style'); const img = new Image(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(style); shadowRoot.appendChild(img); style.textContent = ` img { width: 150px; border: 1px solid; }:host([style*="--ratio:"]) img { aspect-ratio: var(--ratio); } `; } } customElements.define("my-elem", MyElem);
:root { --ratio-square: 1/1; --ratio-landscape: 4/3; --ratio-golden: 1/1.618; }
<my-elem style="--ratio:var(--ratio-square)"></my-elem> <my-elem style="--ratio:var(--ratio-landscape)"></my-elem> <my-elem style="--ratio:var(--ratio-golden)"></my-elem>
But given that you are in a ShadowDOM, you can actually keep that attribute and use your CustomElement's constructor to set the proper CSS variable at construct:但是鉴于您在 ShadowDOM 中,您实际上可以保留该属性并使用您的 CustomElement 的构造函数在构造时设置正确的 CSS 变量:
class MyElem extends HTMLElement { constructor() { super(); const style = document.createElement('style'); const img = new Image(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(style); shadowRoot.appendChild(img); const ratio = this.getAttribute("aspect-ratio"); style.textContent = ` img { width: 150px; border: 1px solid; }:host([aspect-ratio]) img { aspect-ratio: var(--ratio-${ratio}); } `; } } customElements.define("my-elem", MyElem);
:root { --ratio-square: 1/1; --ratio-landscape: 4/3; --ratio-golden: 1/1.618; }
<my-elem aspect-ratio="square"></my-elem> <my-elem aspect-ratio="landscape"></my-elem> <my-elem aspect-ratio="golden"></my-elem>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.