Use this instead of :focus (most of the time)

[@r3pwn-dev]

"Fun" fact about safari vs any other browser: buttons don't gain focus when clicked. Apple resolved it as "wontfix" because it's technically not required as a part of the HTML spec for buttons, yet conflicts with how every other major browser works 🙃

[@dave6012]

Get it together, apple! They also mess with 3d transforms too!

[@MarvinT23]

Lol thanks so much for the explanation, I just noticed this and was like wtf 😅

[@HenrikBgelundLavstsen]

I find now a days safari is the new IE. always running into issues on safari for iOS or OSx or whatever they call it. (not a mac user)

[@MrSkinkarde]

@@HenrikBgelundLavstsen safari is the best browser.

[@TesterAnimal1]

@@MrSkinkarde really not

[@n3cro2012]

Yes, yes, yes. Been pulling my hair out due to this focus annoyance. Thanks for the tip.

[@Antimated]

I'm sure safari doesn't support it... Safari is the new IE 😅 EDIT: Yep it's safari lmao

[@lucsoft]

Most of the Safari problems are not from the Safari devs. It’s more a problem of bigger up. So I kinda feel sad for the devs to call it internet explorer.

[@VGVindaloo]

Of course it is. Seriously, I was so happy when MS finally started making browsers that mostly comply to standards, so you didn't have to add an IE fix to every fucking page, and then Apple steps in and fucks it all up again. Hello again shitty browser fixes.

[@viriv]

@@VGVindaloo ive had to make little fixes for firefox from time to time as well. mobile browser viewport is also pretty terrible if you need content fixed on the bottom

[@JaySee5]

Forever waiting for the FTC to start an anti-trust against Apple for Safari monopoly on iOS.

[@covovker]

Not like new, safari was pain in the ass back in 2007 when I got my first web dev job. Sure, IE was a bigger problem at that point in the past, while safari is consistent in being a pain in the ass for all those years.

[@JayCeeGee]

Cool. If I remember correctly, I've tried to achieve something similar with :not(:active):focus , :not(:hover):focus

[@thiagosilvaloopes]

Man, Kevin, you are really such an inspiration for me! Thank you so much for really all the content in your channel, so amazing and stunning the amount of great videos, energy, teaching and overall quality of your videos and persona!!

[@aggelos_kilitis5405]

Omg i was looking for that for soooo long. You dont know how helpful this is!

[@bernardus3289]

"Look at that I broke code pen" I laughed at that and I don't know why.

[@nathanmckean2348]

UPDATE: focus-visible is supported in Safari for Safari 15.4 (March 14, 2022)

[@magnustips]

Great video Great teaching Great energy

[@dave6012]

This! Thank you, I was just dealing with this issue and was racking my brain how to fix it 🙌

[@skilled-person]

Hi Kevin 😃 you never seize to amaze me. outline follow border radius, that's another layer of styling

[@mverma7845]

looks like your feeling better Kevin, also my part of the internet is not a little bit awesome but it's HUGELY awesome cause of your videos.

[@spencersedano]

Bro, there are so many things you can do in CSS that suprises me. I'd better keep learning JavaScript as well haha.

[@itsviney]

An aside in the video but I'd no idea that outline now honours border radius! That's great news... mostly. The big exception (of course) being Safari. Does anyone know if it's possible to check for support for outline radius using @supports? The problem I'm seeing is that because Safari *does* support 'outline' and 'border-radius' independently, I can't really check for support.

[@arthurhtbk6596]

Thanks man, this video is a true gem!

[@dawid2137pl]

Wouldn't it be better to use `@supports not selector(:focus-visible)` and apply inside of it styles for ":focus" selector than overwriting them inside `@supports selector(:focus-visible)`?

[@jamestreble178]

Another great content from the CSS Master 🙌🔥

[@GigMyRig]

Honestly, I had to pause the video as I laughed so hard at your shout out for IE 🤣

[@inklingboi8431]

My guess is that safari doesn't support it edit: and as always nice video! I had the exact same problem in one of my websites and was able to fix it thanks to this

[@mayukhbari]

Could you please send me the link of full tutorial on flex. I use flex extensively and still think of lacking many knowledge.

[@kromatic469]

A new css magic to add to my web project

[@MartiZenith]

Somehow, I needed to set .btn:focus { transform: none } as first rule in the @supports selector() to override the previous .btn:focus rule above it. Otherwise, when I click on a button the same problem comes back where the button stays upscaled even when moving the mouse away from the button.

[@abhim6380]

So focus visible only works for keyboard focus?

[@ליאורגולן-ה5ב]

you the man!

[@ChanyArpin]

Could we not do it the other way around? .btn:hover, .btn:focus-visible { transform: scale(1.2); } @support not selector(:focus-visible) { .btn:focus { transform: scale(1.2); } }

[@karl2673]

In that case you'll have to add the :hover inside the @supports too, because the :focus-visible will break the whole selector in Safari.

[@gopikab7393]

Is there any class to style css on click other than focus

[@johnaweiss]

How is :focus-visible different from :hover?

[@Mayranos]

You beautiful Man! Thank you!

[@libbeytds]

Safari officially supports it both on desktop and mobile since 15.4

[@AmirMo_Razmi]

Hi , do you have any course or something to teach CSS ?

[@PrinjuVaidyan]

Safari doesn't have focus:visible :( I had to add a class using js for a component once

[@ELStalky]

It's incorrect to say that the element is not receiving focus, it still is; as the pseudo-class states, it just is not necessarily visible.

[@AbdicateDotNet]

Always great videos!!!

[@reyzKhight]

How is it possible

[@pascalkonings1981]

During the intro, is that your phone ringing? Or are you adding background music to your video's now?

[@abhinabgogoi2000]

Sir, do you prepare a pdf or a site for the css codes? Or if a ebook is available?

[@KevinPowell]

No. CSS tricks CSS almanac is pretty great if you want good written resources

[@mverma7845]

at 1:00 I am guessing Safari, I would of said IE but MS doesn't even support IE LOL it could also be Edge.

[@syedurwah]

what us the name that hes using as a live editor

[@Rowan11088]

*Shakes fist at sky* SAAFFFAAAAARRIIIII!!

[@francescos7001]

ofc it’s safari

[@adamzonnis980]

Hey, fellow Canadian, what city do you live in? I'm in Victoria!

[@enriqueiglo2]

Overriding and setting properties back to "normal" inside the querry is messy and a bad practice. You should instead use "@supports not" and and set :focus inside it.

[@mverma7845]

at 5:00 you should of said it's safari you get what you get and you don't complain. LOL, you said something similar to that in a previous video.

[@kosmar]

would it be easier with _ supports not _?

[@Stoney_Eagle]

Hey I left my custom video player on my codepen if you're curious what it has become so far. My name is the same as on here, it's on the main page. It's not perfect and done yet but I love it 😉

[@tar_a]

Opera browser?

[@StephenMoreira]

My guess is Safari, let's see....

[@T25de]

Same here

[@shubhambhattacharjee1111]

I like to use js and love it. But he make my love split almost 50 50 between js css.

[@darshanpanchal7193]

Hello sir can you make once more navbar and this time you are make it small code of css I want to understand you are how to fit in mobile view and computer view bhot are working. Thank you sir if I'm written wrong so I'm realy sorry but I want saw you how its work in small code

[@TheJazzNL]

Safari?

[@ozgurg0]

If a browser doesn't support a feature, this browser is probably Safari.

[@benzflynn]

Not sure if this "problem" matters much. BTW, the automatic change of outline color is only in Chrome - it's not evident in Firefox. Opera's outline is almost rectangular as it doesn't border-radius to match the button. My own approach to outlines is to remove them 😅

[@josvelema2362]

For accessibility reasons the outline on buttons or other interaction objects are actually a good thing IMO

[@KevinPowell]

Don't remove them, restyle them if you don't like the defaults. Keyboard navigation is next to impossible without outlines!

[@benzflynn]

@@KevinPowell But you've shown how to upscale selected elements with _.btn:focus { transform: scale(1.2); }._ That will show where you are on tab selection.

[@KevinPowell]

@@benzflynn oh, yeah! That's fine then. I just mean don't remove the outline and not replace it with something else, sorry for the confusion 😊

[@GnotAGnoob]

its always Safari, innit?

[@Im-mustafa-saeed]

I can tell you with full chest without even watching the video that IE doesn’t support this 😂😂😂

[@ThiagoAdomaitis]

I'll just keeep pretending Safari doesn't exist.

[@salukim]

Has to be safari

[@enriquesneffels3053]

it's such a pain we have to worry about those shitty browsers. If it weren't for all the other good things in web dev I would quit only for this crap.

[@KevinPowell]

While it's annoying, it's much better than it used to be, and it'll probably only continue getting better 😊

[@dragonek_gnu_linux_pl]

css is rly powerfull. Problem is browsers bcuse ppl don't updating them and we can have new options but it can't be visible everywhere. We still need to use old libaries and flexbox. Grid is still not supported everywhere.

[@burhd5451]

Are you the who is making all these new CSS properties?. HAHAH

Saaaafariiii 🙄

[@eduazy]

Safari...

[@dancewithakshara09]

Safari or chrome but most probably safari.

[@hiteshpaliwal8171]

Safari browser

[@yajirushik2871]

I broke codepen, anyway xD

[@reyzKhight]

2nd comment

[@MrSkinkarde]

Learn to edit audio in your videos. Pro tip: USE DE-ESSER

[@dankierson]

You speak w@aaaaaaaaayyyyyyy too fast tbru the crucial parts. It's almost jabberwocky at times. Watch it yourself. LISTEN to it.

[@abhim6380]

Yeah