如何调试CSS calc()值? [英] How do I debug CSS calc() value?
问题描述
我有相对复杂的公式，例如transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
如何调试计算值? 此外，是否有一种方法可以验证/突出显示公式错误?
how do I debug calculated value? moreover is there a way to validate/highlight formulas errors?
我试图这样输出到伪元素，但是没有运气
I tried to output like this to the pseudoelement but no luck
position: fixed;
display: block;
left:0;
right: 0;
background: yellow;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
我发现的唯一方法是将计算的一部分放入未使用的数字属性中，例如background-position-x在下面的gif上，因此它将在计算的"选项卡上显示计算的值-有用但不太方便(注意background-position-x在页面滚动时会更改):
the only way I found is to put part of calculation to unused numeric property e.g. background-position-x on the gif below so it will show calculated value on computed tab - useful but not really convenient one (notice background-position-x changes while the page scrolls):
var sc = ScrollOut({
cssProps: true
})
const results = Splitting();
var parallaxedElements = document.querySelectorAll('.section');
document.addEventListener('scroll', function(e) {
parallaxedElements
Array.from(parallaxedElements).forEach((el) => {
var bcr = el.getBoundingClientRect();
if (bcr.y < 0 && Math.abs(bcr.y) <= bcr.height) {
el.style.setProperty("--scrolled-out-y", Math.round(Math.abs(bcr.y) * 10000 / bcr.height) / 10000);
}
});
})
@import url("https://fonts.googleapis.com/css?family=Roboto");
html {
scroll-behavior: smooth;
}
body {
font-family: "Roboto";
font-size: 14px;
line-height: 1.4;
scroll-behavior: smooth;
}
.section {
position: relative;
background-attachment: fixed;
z-index: 1;
--image-scale: 1.2;
--scrolled-out-y: 0;
}
.section__background {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.section__background:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 1;
background: linear-gradient(to bottom, black, 100% white);
background: rgba(0, 0, 0, 0.4);
opacity: calc(1 + ((var(--viewport-y) * 1.5)));
}
.section__background>img {
height: 150vh;
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0px;
user-select: none;
transform: scale(var(--image-scale)) translateY(calc((-1px * var(--element-height) * (var(--image-scale) - 1)) * var(--scrolled-out-y)));
}
/* .indicator:after {
position: fixed;
display: block;
left: 0;
right: 0;
background: pink;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
} */
.section__container {
padding-bottom: 50vh;
overflow: hidden;
align-items: flex-start;
position: relative;
z-index: 4;
}
.section__heading {
color: #fff;
text-transform: uppercase;
font-size: 45px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 8px;
margin: 0;
overflow: hidden;
position: relative;
padding-bottom: 50px;
margin-bottom: 50px;
}
.section__heading:after {
content: "";
position: absolute;
top: 200px;
left: 0;
right: 0;
height: 2px;
transform: translateX(calc(var(--scrolled-out-y) * 100% - 70%));
background: #b38c6b;
}
.section__content {
display: flex;
color: white;
flex-direction: column;
}
.section__content p+p {
margin-top: 20px;
}
.splitting {
--char-percent: calc(var(--char-index) / var(--char-total));
}
.splitting .char {
display: inline-block;
opacity: calc(1 + ((var(--viewport-y) * 1.5) - var(--char-percent)));
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'>
<section data-scroll class="section section-1">
<div class="section__background">
<div class="indicator"></div>
<img src="https://picsum.photos/1920/1079" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-2">
<div class="section__background">
<img src="https://picsum.photos/1920/1081" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-3">
<div class="section__background">
<img src="https://picsum.photos/1920/1082" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-4">
<div class="section__background">
<img src="https://picsum.photos/1920/1083" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-5">
<div class="section__background">
<img src="https://picsum.photos/1920/1084" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-6">
<div class="section__background">
<img src="https://picsum.photos/1920/1085" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src='https://unpkg.com/scroll-out/dist/scroll-out.min.js'></script>
<script src='https://unpkg.com/splitting@1.0.0/dist/splitting.js'></script>
推荐答案
有没有一种方法可以验证/突出显示公式错误?
Is there a way to validate/highlight formulas errors?
您需要检查在定义公式时是否没有违反任何规则.这是来自规范:
You need to check to see if you aren't breaking any rules when defining your formula. Here it is from the specification:
在每个运算符处，将检查left和right参数的类型是否存在这些限制.如果兼容，则类型按如下所述解析(以下为简单起见，忽略了运算符上的优先级规则):
At each operator, the types of the left and right argument are checked for these restrictions. If compatible, the type resolves as described below (the following ignores precedence rules on the operators for simplicity):
- 在
+或-处，检查两面是否具有相同的类型，或者一面是<number>，另一面是<integer>.如果双方是同一类型，请解析为该类型.如果一侧是<number>，另一侧是<integer>，请解析为<number>. - 在
*处，检查至少一侧是<number>.如果双方都是<integer>，请解析为<integer>.否则，请解析到另一侧的类型. - 在
/处，检查右侧是否为<number>.如果左侧为<integer>，请解析为<number>.否则，请解析为左侧的类型.
- At
+or-, check that both sides have the same type, or that one side is a<number>and the other is an<integer>. If both sides are the same type, resolve to that type. If one side is a<number>and the other is an<integer>, resolve to<number>. - At
*, check that at least one side is<number>. If both sides are<integer>, resolve to<integer>. Otherwise, resolve to the type of the other side. - At
/, check that the right side is<number>. If the left side is<integer>, resolve to<number>. Otherwise, resolve to the type of the left side.
如果操作员未通过上述检查，则表达式无效
If an operator does not pass the above checks, the expression is invalid
一开始听起来可能有点复杂，但是规则很简单，我们可以使用以下简单的单词重新编写它们:
It may sound a bit complex at the start but the rules are easy, and we can re-write them as follows with easy words:
- 您不能添加/减去两种不同的类型(
5px + 5s没有意义). - 您只能与数字相乘(
5px * 5px没有含义，并且不等于25px). - 您只能用非
0的数字除(5px / 5px没有意义，并且不等于1或1px).
- You cannot add/subtract two different types (
5px + 5shas no meaning). - You can only multiply with a number (
5px * 5pxhas no meaning and is not equal to25px). - You can only divide with a number that isn't
0(5px / 5pxhas no meaning and it's not equal to1or1px).
如果您没有违反任何这些规则，那么您的公式是正确的.我们不要忘记另一个重要的语法规则:
If you don't break any of these rules, then your formula is correct. Let's not forget another important syntax rule:
此外，+和-运算符的两边都必须有空格. (*和/运算符可以在没有空格的情况下使用.)
In addition, white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)
请考虑一下，您只需要确定CSS变量是数字/整数还是用类型(长度，频率，角度或时间)定义.如果未定义或包含字符串值，则calc()将无效.
Consider this, you simply need to identify if your CSS variable is a number/integer or defined with a type (length, frequency, angle or time). If it's not defined or contains a string value then the calc() will be invalid.
请查看规范以获取更多详细信息和更精确的解释: https://drafts.csswg.org/css-values-3/#calc-type-checking
Check the specification for more details and a more precise explanation: https://drafts.csswg.org/css-values-3/#calc-type-checking
如何调试计算值?
How do I debug calculated value?
要检查计算值，我认为没有办法，因为calc()的计算值可能会有所不同，具体取决于您在何处使用它(哪个属性).换句话说， final 值在属性中使用之前是不存在的.
To check the computed value, I don't think there is a way because the computed value of calc() can be different depending where you use it (which property). In other words, the final value doesn't exist until it's been used within a property.
我们可能认为某些公式像calc(5px + 5px)一样琐碎，它将始终计算为10px，而另一些公式将更加困难.类似于calc(5px + 50%)，其中%的行为将基于属性而有所不同.考虑到这一点，浏览器将永远不会在属性中使用该值之前对其进行计算.
We may think that some formulas are trivial like calc(5px + 5px) which will always compute to 10px but other ones will be more difficult. Like calc(5px + 50%) where % will behave differently based on a property. Considering this, the browser will never compute the value until it's used within a property.
即使使用JS，也无法获得要调试的 final 值；您只能获得属性的计算值:
Even with the use of JS you cannot have the final value you want to debug; you can only get a computed value of properties:
var elem = document.querySelector(".box");
var prop = window.getComputedStyle(elem,null).getPropertyValue("--variable");
var height = window.getComputedStyle(elem,null).getPropertyValue("height");
console.log(prop);
console.log(height);
.box {
--variable: calc(5px + 5px);
height:var(--variable);
}
<div class="box"></div>
这篇关于如何调试CSS calc()值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
