Sorry, my english is poor. So I just want to show up a minimalistic example. Get your rulers and try to find the distances!
<html>
<body>
<div style="min-width: 20cm, max-width: 20cm; height: 10cm; background-color: red;">who’s the liar – your ruler or your computer?</div>
</body>
</html>
BTW: the title here is whispering something like „IE“? That’s past! Now this is the update?
Zedmaraces
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
From
München
Post
Replies
Boosts
Views
Activity
Safari 16.3:
some CSS:
--images: 1;
--count: round(up, calc(sqrt(var(--images))), 1);
results `--count == 2!`
As long as the numbers can be controled, you could do sth. like
--count: round(up, calc(sqrt(var(--images)) - 0.01), 1);
but … this is ugly! ceil(1) should be 1. Every calculator agree.
BTW: Firefox has one solution for every root. √x == 0!
As you can see, I’m able to write here. But it seems, I can’t reply.
Symptom: I wanted to add an additional piece of text to one of my posts here. I can write it. But if I click on “submit”, nothing happens. The button keeps coming up and that’s all.
I’m talking about CSS-functions: https://w3c.github.io/csswg-drafts/css-values/#round-func)
.example {
--result: round(up, var(--number), 1);
}
In Safari 16.x css round didn’t work perfect.round(up, x, 1) did its job, if x wasn’t a “natural” number (all digits after the fraction mark 0). If it was, it resulted the next one!
Now Safari 17.0 gives 0 for all numbers!
!Update!
Sorry, Safari 17 does round! But: not in code like that:
:root { --result: round(up, var(--number), 1);
Had a project, where this was used to define the number of columns and rows I wanted for an (mostly) quadratic layout.
What’s working instead:
grid-template-columns: repeat(round(up, sort(var(--items), 1), minimal(…);
the former css used the :root-variant (grid-template-columns: repeat(var(--result) …).
!Update 2!
After some experiments I found: Safari 17 doesn’t like :root any more! (https://www.w3.org/TR/selectors-3/#root-pseudo)
And: Safari doesn’t calc correct: `round(up,1,1)˚ is 2 — says Apple. YOU MUST NOT CALC CSS-INTEGERS! CSS-DPI ist ####### ENOUGH!
First: don’t tell me about webkit-reporting. I just get a 502 from there!
Ok, what’s the problem? I made an example telling it all:
<html>
<head>
<style>
.ext { display: none; color: cyan; }
body {
max-inline-size: calc(100vi - 12px);
&:not(:has(:target)), &:has(p.dft:target) {
#ext { display: none; }
#dft { display: block; }
}
&:has(p.ext:target) {
#ext { display: block; }
#dft { display: none; }
}
&.ext li { display: none; }
&:has(.ext:target) {
& li.ext { display: revert; }
}
}
header > p > a::before { color: orange; content: "click me >>> "; }
ul { display: flex; }
li { margin: 1ex; list-style-type: none; inline-size: max-content; }
.yes li::before {
font-size: 70%; color: yellow; background-color: blue;
content: "(" counters(total, ":") ")";
}
ul.nGrp {
display: inline flex;
counter-reset: nameIndex;
& li::after {
display: inline-block;
counter-increment: nameIndex;
font-size: 75%; color: red; vertical-align: sub;
content: "(" counter(nameIndex) ")";
}
}
header {
inline-size: 100%;
font-size: 2rem; text-align: center;
}
article {
counter-reset: total;
padding: 1ex; margin: 1em;
&::after {
font-size: 3em; color: purple;
content: "— [" counter(total) "] —";
}
li { counter-increment: total; }
outline: 1ex groove purple;
}
</style>
<title>Strange Safari-Count</title>
</head>
<body lang="de">
<header>
<hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup>
<p id="dft" class="dft"><a href="#ext">More?</a></p>
<p id="ext" class="ext"><a href="#dft">Less!</a></p>
<p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p>
</header>
<article>
<ul>
<li class="dft"><p>A1</p></li>
<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
</li>
<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
</ul>
<ul>
<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
<li class="dft"><p>B2</p></li>
<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
</ul>
</article>
<article class="yes">
<ul>
<li class="dft"><p>A1</p></li>
<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
</li>
<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
</ul>
<ul>
<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
<li class="dft"><p>B2</p></li>
<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
</ul>
</article>
</body>
</html>
At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.