Bleh. I doubt it will do what people need flexibly enough. The committees never end up with really usable things. Who seriously uses ? They’re all hideous. I’ll stick with my own adaptive alignment technique.
@@TesterAnimal1 Most likely, you have not yet encountered a problem where exactly this will help you solve the problem very simply. I, too, when I saw Interop 2024, was not very impressed until I began to analyze each item separately.
@@TesterAnimal1that's often true, but having tested anchor positioning quite extensively now (in Chrome canary), it's going to be as big as flex and grid. For popovers the benefit is clear, but there are a ton of other things it unlocks we've never been able to do without js.
Why multiply the pixel size? I would never have considered that as a way to do it. - If you want things to scale based on one element I would use rem as the parent and em as for child elements. Or percentage.
It was pretty specific to this use case, which I probably should have mentioned. Because it's for a game and everything is drawn in CSS it makes sense this way
The rem, though, is always tied to the body font-size. This might respond poorly to font-size changes of elements on the page. Possibly em is also a good thing to use. If you need to depend on a size that is not tied to rem or em, the CSS custom prop is indeed the way to go.
That's because of the tool called Emmet. It's to make our life easier by providing shortcuts to create elements. example, #elementId would create an element with the id "ElementId"
@@goodshiro10 good to know, tbh ive heard of emmet but had no idea what it was so never bothered to use... discovering this has now made my workflow so much easier
Gosh, I adore custom properties. So useful. Also nesting. I didn’t realize how much I needed nesting for organization until I stopped using for a second because one user was back on an unsupported browser and everything broke.
9:20 LOL, well since the pixel size is 5px and you want to get 400px, you simply do 400÷5 which is 80, thus you have to multiply the pixel-size by 80px
hello Paul, a beginner in site layout, I had a problem with css when I made up a regular filling form, checked through the code inspector, so when minimizing the window, the form does not turn out to be adaptive, can you tell me what to do for this?
Knowing that the absolute x and y is based on the first surrounding element that defines its position as relative goes a long way 😊 If only we could do absolute and relative on the same element so we don't need a relative child for its children to be relative to the absolute element 😂
Absolute elements actually take their positions from the nearest positioned element, not just ones that are relative. An element is considered to be positioned if its position property is set to anything other than “static” (the default) so I think you should be able to absolutely position children relative to their absolutely positioned parent
No. It has to be a parent. But you can have the sibling not be absolutely positioned and only absolutely position one element, which is kinda sorta the same thing.
hello Paul, a beginner in site layout, I had a problem with css when I made up a regular filling form, checked through the code inspector, so when minimizing the window, the form does not turn out to be adaptive, can you tell me what to do for this?
Kevin, my respect for you are a teacher has gone up 100 fold. this video, responding personally to a student, is priceless!!
Soon - css anchor
Looking forward to it!
Bleh. I doubt it will do what people need flexibly enough. The committees never end up with really usable things. Who seriously uses ? They’re all hideous.
I’ll stick with my own adaptive alignment technique.
This is a game changer, with that you absolutely position without having the element nested!!!
@@TesterAnimal1 Most likely, you have not yet encountered a problem where exactly this will help you solve the problem very simply. I, too, when I saw Interop 2024, was not very impressed until I began to analyze each item separately.
@@TesterAnimal1that's often true, but having tested anchor positioning quite extensively now (in Chrome canary), it's going to be as big as flex and grid. For popovers the benefit is clear, but there are a ton of other things it unlocks we've never been able to do without js.
Why multiply the pixel size? I would never have considered that as a way to do it. - If you want things to scale based on one element I would use rem as the parent and em as for child elements. Or percentage.
It was pretty specific to this use case, which I probably should have mentioned. Because it's for a game and everything is drawn in CSS it makes sense this way
I believe it could have been a lot easier if Drew used rem to manage the scaling.
calc(var(--pixel-size) * 3); could have just been 3rem;
The rem, though, is always tied to the body font-size. This might respond poorly to font-size changes of elements on the page. Possibly em is also a good thing to use. If you need to depend on a size that is not tied to rem or em, the CSS custom prop is indeed the way to go.
i had no idea you can just write the class name in codepen html and it wraps it in div tags automatically,
That's because of the tool called Emmet.
It's to make our life easier by providing shortcuts to create elements.
example, #elementId would create an element with the id "ElementId"
@@goodshiro10 good to know, tbh ive heard of emmet but had no idea what it was so never bothered to use... discovering this has now made my workflow so much easier
Thanks for the video Sir❤
Gosh, I adore custom properties. So useful.
Also nesting. I didn’t realize how much I needed nesting for organization until I stopped using for a second because one user was back on an unsupported browser and everything broke.
That's why I love SASS/SCSS, get all the benefits of modern CSS and nesting without the adopter bugs and grievances.
9:20 LOL, well since the pixel size is 5px and you want to get 400px, you simply do 400÷5 which is 80, thus you have to multiply the pixel-size by 80px
how to stick a div on scroll? I have a table of index in a div which I want to stick to its position when the user scrolls down a bit...
position: sticky can probably do it, though there are some limitations in how it works. I'd start with that though, from the sounds of it :)
hello Paul, a beginner in site layout, I had a problem with css when I made up a regular filling form, checked through the code inspector, so when minimizing the window, the form does not turn out to be adaptive, can you tell me what to do for this?
This becomes so much easier with container queries, and relating everything to cqw and cqh. No more calc. Let the browser do the math.
Knowing that the absolute x and y is based on the first surrounding element that defines its position as relative goes a long way 😊
If only we could do absolute and relative on the same element so we don't need a relative child for its children to be relative to the absolute element 😂
Absolute elements actually take their positions from the nearest positioned element, not just ones that are relative. An element is considered to be positioned if its position property is set to anything other than “static” (the default) so I think you should be able to absolutely position children relative to their absolutely positioned parent
"front end friends" 😅
from mozilla docs: ... The element is positioned relative to its closest positioned ancestor
Hello friend :)
is there a way to set an absolute element relative to its sibling?
No. It has to be a parent. But you can have the sibling not be absolutely positioned and only absolutely position one element, which is kinda sorta the same thing.
Absolute power corrupts absolutely. Absolute CSS position corrupts my UA-cam feeds🤭.
first
I find myself using absolute most of the time..
Most of the time??? Why?
I'd be scared for my future self if I was using absolute positioning in more than a handful of cases
Don't scale your browser window...
hello Paul, a beginner in site layout, I had a problem with css when I made up a regular filling form, checked through the code inspector, so when minimizing the window, the form does not turn out to be adaptive, can you tell me what to do for this?
Kevin, in 14" laptop default windows display/ resolution set as 150% and that impact on browser resolution. Can we reset browser resolution with css?