Anchor Is The Best New CSS Feature Since Flexbox

Full Video: • CSS Anchor Is The Best...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts

[@mohammedshahid7884]

This removes so much hassle which comes with relative position

[@unhhgcrxexhjvuvujchcrzwzwz7956]

Stuff is so annoying

[@antoniorocha9438]

Finally, a real "relative" positioning feature.

[@raygong3964]

For anyone wondering about browser support, this feature is still just a proposal, only chrome supports it as an experimental feature atm(not enabled by default)

[@therealmist14]

I'm guessing that's why I couldn't find this in "caniuse"

[@edism]

Ffs

[@soadsto]

they are taking forever to make it happen

[@SirusStarTV]

Now google chrome 125 has it

[@yourlocalhuman3526]

Ruined all my plans FFS

[@chillin5703]

FINALLY! I had been artificially replicating this using absolute and relative but it's such a pain in the arse. What a time save.

[@rayaqin]

making hover popups with this might be a nice experience

[@thildamoon]

That what i thought right away too!

[@IStMl]

Popover API?

[@MattDunlapCO]

Popover fixes z-index and anchors fix positioning. Anchors can also flip to the other side if there is no space.

[@Kianfox]

"works out of the box" I get it!

[@garyduell3768]

Why couldn't this feature come out 10 years ago 😢

[@chezchezchezchez]

Because things freaking evolve, dude

[@IStMl]

@@chezchezchezchez it's called "relative" positioning.

[@isuke01]

Because we still need next 5 years, it is supported only in the Chronium.

[@sohamsarkar911]

This guy is single handedly carrying my career at this point

[@sunflair-wa]

samesies!

[@sohamsarkar911]

@@sunflair-wa 🫂🫂

[@chezchezchezchez]

Buy him a coffee then

[@jamshediqbal7936]

I think it would be useful if we want to show tooltip for an element.

[@ruudlaff10]

This has the potential to entirely change how we structure pages. It could even allow us to return HTML to it's semantic roots...

[@_a_9773]

It's a cool feature but u exaggerating man

[@warrenarnold]

​@@_a_9773no my guy is fr, it was the remaining feature to complete html5

[@yourlocalhuman3526]

Don't get stiff bro😂

[@mamertvonn]

Wow.... now css can start looking like scene tree, just like a local transform of a child to it's parent

[@kierandansey7293]

It's great addition. QML has been doing this forever and extend it to include height, width etc

[@TonyNieuwenhuijs]

Golden knowledge Kyle, it's safe to say that every web-developer wil encounter a situation where this kind of "Relative" positioning is needed within their project.

[@user-vx3ps5rc5l]

fantastic for dropdowns!

[@RobertDogo]

No more relative on parent and absolute on child

[@TheRiteHand]

Cool to have the functionality, but the css working group has once again come up with novel/exotic syntax that bears no resemblance to anything else in the spec and will never be repeated again. This lack of consistency and elegance is unfortunate for, you know, the thing that's supposed to lend consistency and elegance to the web.

[@MaxPicAxe]

Literally just needed this the other day thanks

[@top_loserrr1221]

man, this help my project a lot... thanks

[@johndevnoza4223]

for me it is very very wierd that anchor didnt existed in css for so many years, since begining of graphic design or animation or anything related to visuals, anchor exists in all the softwares, like photoshop after effects ETC, so they could just took an idea of anchor from them ,as they did for positions, rotations ETC. idk this took so long to have in css :D

[@Dylan_thebrand_slayer_Mulveiny]

Would be infinitely better if it didn't eat the ID attribute.

[@saadamehdi2848]

Yes we need to anchor elements to the first element matching selectors. At least classes. Where stuff appear should be a css/présentation issue. Right now it's useless pretty much.

[@emedeirox]

This reminds me object delphi

[@jeff4r533]

relative position left the chat

[@kalibmartin7062]

😂😂😂😂😂

[@ahassan5]

I use a css library or framework so i dont have to worry about this kind of stuff.

[@LePhenixGD]

Man that's incredible!!! Finally you won't need to worry about nesting an absolutely positioned element to a relative parent container Amazing stuff Kyle!

[@tonybowen455]

This is incredible, ty!

[@osraneslipy]

Thats so freakin awesome. This removes like 3 tons of concentrated pain from css element positioning.

[@MrAlao675]

Awesome, what about browser compatibility?

[@dennistja656]

Thanks I think this has the potential to fix a problem I have or had

[@thedelanyo]

This could be really useful in tooltip designs

[@memesalldayjack3267]

that sounds good, I'll mess around with it eventually, but i got used to using divs as the anchors essentially, so i might not actually use it

[@ran_css]

Wooow now I'm understand anchor

[@MonkeyD_Luthy]

This is pretty cool .. new info for me thanks dude!

[@perfect.stealth]

This is absolutely gold. Drop downs just became much easier.

[@mauriciomueller86]

This will be great to style menus and animations

[@CodingScot]

I so need to go back and learn CSS all again 😮

[@germanballstuttgartball5291]

Wow. Just today I dived deeper into the position property and wondered if you can set the anchor like that. This is really helpful. Thank you so much.

[@shallonp5807]

This was so useful

[@KatchMK1]

Wow this is really nice!

[@quoclam7140]

I literally had to position something right before this video came out

[@paulatony8657]

Awesome Feature

[@haryanvideveloper777]

Is there any way to make a fixed position element relative to a div ?

[@koshalparwan3945]

It is not yet compatible with other devices, though 😢

[@mob_abominator1868]

While this is very cool, the support for this rn is not very good, it's around 79%. Though I'll be sure to use it when the situation improves.

[@appelsap45]

Where do you go to see what the support is for this?

[@mapledanish3662]

Browser support makes this unusable for now, unfortunately.

[@SirusStarTV]

They don't have a solution to dynamic arrow positioning in popups when the popup goes out of edge

[@abots]

Does anyone know browser compatibility for this

[@Seven77tw]

I can't find docs of anchor attribute on MDN

[@Mrfrontend]

I don’t think browser support is good enough to replace relative / absolute positioning in my opinion yet. A cool experimental feature I hope gets more support tho.

[@sourabhmalviya1893]

Reminds me of Android constraint and relative layouts ❤

[@dreewhispers9408]

8 years writing CSS and i never used this, amazing stuff, no need for containers

[@phil8899]

Why when you called it blue does it still go to that anchor and not by its id

[@user-gr1rg5hu1x]

Kyle , what's your secret to always be updated with newest css features please ?

[@WebsiteDevelopment-Uk]

caniuse website is the source for new CSS and html

[@manuelcasares7270]

he travels to future and watches his own videos.

[@zeusek-2137]

id attribute is coming to play

[@IAmMrLiverpool]

Awesome feature 🎉❤

[@ankursehdev5448]

how is the support on various browsers?

[@Oprichnik765]

When will it be available? Can find it on caniuse

[@thierryvt]

aah yes, we're gonna position this orange square relative to the blue one therefore we must set the position to absolute! CSS makes so much sense lmao.

[@Draghful]

This is a game changer. Holy cow :o

[@bdedu]

The link you provided on description not working.😢

[@Michael17000]

Okay nice but it could be chaos in relative complex HTML and CSS after couple of developers with their own coding styles :) But cool, I didn't know that.

[@WebsiteDevelopment-Uk]

Is it worth learning js

[@epicmetod]

Finally vanilla frontend stepped into 2001 In next 150 years we can build dynamic interactions using vanilla with ease without framework

[@DarrenbyDesign]

What's the support look like?! I wanna use this ASAP

[@Kay_Drechsler]

Quite a game changer. If just the browser support would be better.

[@nandakresna41]

I'm new into web dev. So, does this mean, we don't have to use relative positioning to the parent element and just use absolute to the child element?

[@vinodnaik4546]

Does this work for tooltip with nested elements?

[@mikelneonedwin]

We had to wait for so long....

[@YogKing]

Sounds a lot like layout constraints in iOS

[@philodox13]

Can you animate it? That would open up some wild possibilities.

[@maxaxanii7878]

It doesn’t work in my nextjs project. Says that type is not assignable, any idea why?

[@saent_bass]

Supported by 0.04% of browsers

[@emmanuelsheshi961]

finally catching up to qml...

[@lerneninverschiedenenforme7513]

your link in the description is neither clickable, nor copyable from a mobile device :(

[@yassinesafraoui]

This could be incredible if added to tailwind

[@trlolist3332]

I didnt see this just after i coded entire website....

[@Leo_Chan]

Now if only the id of the anchor could be assigned in CSS rather than an attribute of the HTML element.

[@fase8729]

Thx

[@JustinLietz]

This would have been so useful in my html class

[@ryan_millard]

Thank you.

[@mykhailohostieiev6513]

'can i use' says it has 0% support in the browsers (works in chrome with experimental flag enabled)

[@dhaneesh]

Useful

[@Hadrhune0]

it took them only 28 years to get it the right ffffffff way.

[@QckSGaming]

Real relativity that completely breaks the structure of HTML. I am torn.

[@peterjordanson4201]

What is the browser Support for it?

[@olian7542]

Just like fishing a fish 🐟

[@christopherolsson9072]

Why is this better the position absolute and relative?

[@Ferrohh]

Ho messo in pausa 20 volte al minuto per assorbire il cringe, però mi sono spaccato ahahah L'ansia sociale ha paura di te

[@Skibidi_Male_X]

Programmers are built differently

[@perfect.stealth]

so i just found out this isn't supported in the majority of browsers yet? Chrome (for some reason) doesnt work for me.

[@ignrey]

This is a more comprehensible syntax change. You already can do that adding the orange within the blue the adding position:relative to the parent element and position:absolute to the child. I like the anchor attribute because now I have the chance to attach an external element that it wouldn't be affected by changes into original element like utilizing overflow:hidden. Overall we're going to a world with less dumb-basic JS scripting.

[@jior6]

Only took 30 years

[@maxwebstudio]

Oooooh nice one

[@PaAndy89]

Omg ich liebe dieses neue feature!!!

[@jsward17]

I’m laughing in so much legacy css pain from this 😅😅. A lot of not super useful css features dropping lately but this one nails it.

[@8o8inSquares]

Oh wow, that’s new for me

[@yurisouza5574]

Thats fucking dope

[@shotkikk_priv]

8 years of developing. Never heard of it

[@trashAndNoStar]

Cool, now lets wait 5 yrs until other browsers get on board

[@felipekonig8135]

Very nice

[@dougm2738]

Wow. Sweet. Never heard of this. Is it new?

[@mmoplayah2874]

Browser support?