Solely Chris, proper? You’ll wish to view this in a Chromium browser:
That is precisely the form of factor I like, not for its practicality (cuz it ain’t), however for the way it illustrates an idea. Usually, tutorials and demos attempt to observe the “guidelines” — no matter these could also be — but breaking them helps you perceive how a sure factor works. That is a kind of.
The idea is fairly simple: one goal ingredient will be connected to a number of anchors on the web page.
<div class="anchor-1"></div>
<div class="anchor-2"></div>
<div class="goal"></div>
We’ve gotta register the anchors and fix the .goal
to them:
.anchor-1 {
anchor-name: --anchor-1;
}
.anchor-2 {
anchor-name: --anchor-2;
}
.goal {
}
Wait, wait! I didn’t connect the .goal
to the anchors. That’s as a result of we have now two methods to do it. One is utilizing the position-anchor
property.
.goal {
position-anchor: --anchor-1;
}
That establishes a target-anchor relationship between the 2 parts. Nevertheless it solely accepts a single anchor worth. Hmm. We want greater than that. That’s what the anchor()
perform can do. Effectively, it doesn’t take a number of values, however we will declare it a number of instances on totally different inset properties, every referencing a distinct anchor.
.goal {
high: anchor(--anchor-1, backside);
}
The second piece of anchor()
‘s perform is the anchor edge we’re positioned to and it’s gotta be some form of bodily or logical inset — high
, backside
, begin
, finish
, inside
, exterior
, and so on. — or proportion. We’re bascially saying, “Take that .goal
and slap it’s high
edge in opposition to --anchor-1
‘s backside edge.
That additionally works for different inset properties:
.goal {
high: anchor(--anchor-1 backside);
left: anchor(--anchor-1 proper);
backside: anchor(--anchor-2 high);
proper: anchor(--anchor-2 left);
}
Discover how each anchors are declared on totally different properties by means of anchor()
. That’s rad. However we aren’t truly anchored but as a result of the .goal
is rather like some other ingredient that participates within the regular doc move. We’ve got to yank it out with absolute positioning for the inset properties to take maintain.
.goal {
place: absolute;
high: anchor(--anchor-1 backside);
left: anchor(--anchor-1 proper);
backside: anchor(--anchor-2 high);
proper: anchor(--anchor-2 left);
}
In his demo, Chris cleverly attaches the .goal
to 2 <textarea>
parts. What makes it intelligent is that <textarea>
means that you can click on and drag it to vary its dimensions. The 2 of them are completely positioned, one pinned to the viewport’s top-left edge and one pinned to the bottom-right.
If we connect the .goal's high
and left
edges to --anchor-1
‘s backside
and proper
edges, then connect the goal's backside
and proper
edges to --anchor-2
‘s high
and left
edges, we’re successfully anchored to the 2 <textarea>
parts. That is what permits the .goal
ingredient to stretch with the <textarea>
parts when they’re resized.
However there’s a small catch: a <textarea>
is resized from its bottom-right nook. The second <textarea>
is positioned in a manner the place the resizer isn’t immediately connected to the .goal
. If we rotate(180deg)
, although, it’s all good.
Once more, you’ll wish to view that in a Chromium browser on the time I’m scripting this. Right here’s a clip as an alternative when you choose.
That’s only a background-color
on the .goal
ingredient. We will put somewhat character in there as an alternative as a background-image
like Chris did to shine this off.
Enjoyable, proper?! It nonetheless blows my thoughts that is all taking place in CSS. It wasn’t many days in the past that one thing like this is able to’ve been a job for JavaScript.