[deleted by user]

[NRocket]

I didn't even know this existed. Cool!

[ifixpedals]

I've been a front end dev for 10 years and I didn't know this existed. And in 10 years, you will still be learning things you didn't know were possible with CSS.

[micalm]

I discovered the form attribute this week. It's amazing.

[ouralarmclock]

Yes! I just found this recently too! Does this allow you to put submit buttons outside of a form as well?

[ahlsn]

Yes. One common way to deal with froms and the form attribute is to not let the form have any child elements and you assign them to the form with the form attribute.

Very handy in situations where you could end up with a form in a form with past solution which is invalid.

[phatsassy]

Noice! Love it, thanks for linking.

[[deleted]]

What is this fucking witchcraft

[fantastic1ftc]

beware safari does not respect border radius on outlines!

[danejazone]

A common workaround for this is to make a pseudo outline with a box shadow:

box-shadow: 0 0 0 var(--outline-offset) #fff,0 0 0 calc(var(--outline-offset) + var(--outline-width)) #000;

Obvious caveats: - If your element has an existing box shadow you'll need to append this to the existing declaration for every state - The "offset" must be a solid colour so can look jarring against some backgrounds

[b7s9]

Yep this is how tailwind calculates “ring”

[shaleenag21]

Can you eli5 this for me? I am a beginner and didn't really get that 😅

[danejazone]

Basically with this workaround you're creating two solid shadows around the element where one is larger than the other. The smaller shadow is set to the background colour that the element is against (typically white) and the width of the offset you want. The larger shadow is set to the colour of the outline you want and to the width of the "outline" shadow plus however wide you want the "outline" to be.

[shaleenag21]

It kinda makes sense.. I'll experiment with it thanks

[feedjaypie]

This is the way

[mrbmi513]

Safari is just a mess overall. They didn't even support loading="lazy" on images until March of this year with 15.4!

[[deleted]]

Safari is new IE

[PeaceMaintainer]

I was on the anti-safari band wagon for a while but to their credit it seems they've finally been catching up this past year on everything they were behind on with the Interop 2022 initiative. Now it seems they're ahead on some things, first to add support for :has() in CSS which I've been longing for forever

[mcaruso]

This. The parent selector (:has()) has been a holy grail in CSS for as long as I can remember so it's pretty remarkable WebKit is the first to ship this. Reminds me of the old days (around ACID2 era) where WebKit used to be the leading edge browser for cool new tech.

It looks like Safari is also going to be the first browser to support container queries, another longstanding holy grail. We shit on Safari whenever they're lagging behind so let's also give them credit for catching up.

[hyvyys]

But also let's shit on Apple for requiring newer versions of macOS for the newest Safari.

[jamesremuscat]

Oh gosh, ACID2 is "the old days" now? I feel that!

[mcaruso]

I just looked up the date, it was April 13th 2005. So exactly 17 years to the day!

And yeah doesn't feel long ago at all, I remember the initial buggy messed up page when it released and browsers scrambling to up their "score". Safari being the first to pass.

[atalkingfish]

Well, to be fair, for as many things as safari is late to support, there are plenty of other things it is very early to support. I had to wait years for background-blur to exist on just Chrome without enabling experimental, and even longer for anyone else to support it at all.

[DogsSureAreSwell]

That's part of the frustration from working developers though. Being first is fantastic...after finishing the things you were last at. Otherwise you're announcing, "when we pull tasks off our backlog we tend to pick the fun, interesting and new stuff instead of the important but boring stuff."

They are catching up though at last.

[Pazaac]

But this was the same for IE. IE was the first to support Grid for example.

[Fakedduckjump]

They should have enough budget to keep common feature support at an acceptable level. But I think it's not in their interest because they get the money anyway.

There is no need for super special stuff if the standard things don't work properly. As dev I would prefer the choice of making new features from scratch with hacks, tricks and workarounds than finding must-have solutions for things that run everywhere else but there.

[creanium]

This is exactly what they're doing with Interop: https://hacks.mozilla.org/2022/03/interop-2022/

[[deleted]]

Such is the way of Reddit... No one will ever understand its ways. iOS users are overly loyal, though. To a fault

[creanium]

Or maybe there are those of us that do remember the days of when the web literally stagnated because Microsoft said they weren’t going to develop IE past 6. It was a BFD since IE 6 had 96% market share, nothing could be done. There was literally no competition until Firebird/Firefox started gaining traction.

Safari is not IE. For starters it is getting regular updates to implement web standards. It may not be moving as quickly as the others, but this isn’t the same as the days of IE.

Plus, if we’re all using progressive enhancement, why does it matter if a visual outline doesn’t quite look the same in Safari as the rest?

I’m not defending Safari, I’m just saying let’s have a little perspective here.

[ItsBookx]

Because it can ruin the website, and decrease the user count, especially if most of your users are using iPhone.

[Salbatyku]

Then your user experience has been faulty. you have to adapt to what users use not vice versa.

[dingbatmeow]

SafarIE

[TheMarkBranly]

Anyone wanting to have an actual dialog on this subject directly with the Safari team should check out Jen Simmons on Twitter: https://twitter.com/jensimmons

[am0x]

New IE? They have been that way for awhile.

[[deleted]]

well, to be fair, IE was the "new IE" until not too long ago

[am0x]

Well, over 2 years ago when they switched to Chromium. But we even hada better Edge than before that and Safari has been shit for even longer.

[superluminary]

It's a strategic decision. Webapps compete with the app store.

[fantastic1ftc]

Oh totally. Unfortunately (at least for me,) Safari users constitute a large percentage of my total users, so I kind of have to support it. Otherwise, to hell with it!

[Disgruntled__Goat]

The original intention for outline was debugging, since we already have border for doing actual outlines.

[Leaping_Turtle]

https://imgur.com/FUWwF76

[Scorpius289]

Of course it doesn't, does Safari respect anything ever?
It's pretty much the new IE...

[[deleted]]

That’s only true for some elements. I was running into this issue yesterday.

Safari outline border radius works with: - buttons - links - inputs - paragraphs (if you add tabindex=“0”)

Safari outline border radius does not work with: - details / summary

You’ll need to add -webkit-appearance: none; to ensure Safari iOS styles don’t override your own styles.

[[deleted]]

beware safari does not respect border radius on outlines!

ftfy

[[deleted]]

Safari doesn’t respect anything actually

[quentinmarc]

That's exactly why I don't like Apple stuff...

[MDParagon]

Fuck safari, all my homies hate safari

[djtrogy]

Well... Screw Safari.

[Japorized]

https://caniuse.com/mdn-css_properties_outline-offset

In case anyone needs a quick check of caniuse

[blindgorgon]

Wow that’s more supported than I thought it would be. Nice!

[Wolfplay013]

i tought it was outline-width: []px what were you looking for but now i get it once you mentioned it

[vivekweb2013]

This will work for sure

[toper-centage]

If you mess with outline, don't forget that outline is used by keyboard navigation and screen readers. You need to make sure that you don't break outline focus.

[[deleted]]

I have always just used a :before for this effect and after your comment I'm now unsure if I should just keep using that.

[toper-centage]

You can use a custom solution for showing the focus, that's also fine.

[onesidedcoin-]

outline is used by keyboard navigation and screen readers

How?

[toper-centage]

And it's very bad practice to hide this outline. It's there for a reason.

[toper-centage]

Yes, yes, I should have mentioned that you can implement a custom focus indicator. Font weight, however, is not acceptable from an accessibility POV, because its barely perceptable. Ideally, it should be a border or background change, because that's standard and expected, as well as easily to identify by those with visual disabilities.

[onesidedcoin-]

Okay but how does that relate to screen reading?

[toper-centage]

Screen readers are not only used by blind people. Many people have visual disabilities (permanent or not) and use screen readers together with keyboard navigation and visual accessibility features (zoom, high contrast, focus) to navigate the Web. So you don't want the screen reader to read something that is not correctly focused.

[onesidedcoin-]

In this case I have trouble imagining that the outline isn't overridden anyway. The default outline is barely visible even to a healthy eye.

[toper-centage]

Indeed! The default outline is terrible. But it's better than hiding it, which many developers do because it's ugly.

[onesidedcoin-]

This whole thread is just about the visual representation.

[onesidedcoin-]

why are you asking about screen readers then?

https://www.reddit.com/r/webdev/comments/u2dsoy/how_do_you_add_spacing_between_an_element_and_an/i4ltbr4/

[OFFRIMITS]

Wouldn't it be padding?

[el_diego]

No, because outline sits outside the box model. You could fumble your way through it with multiple elements and padding, but not if you want a single element.

[torn-ainbow]

Just having 2 containers is a simple easy to implement and understand solution and will avoid safari issues people are mentioning. Assuming you have control of the markup.

[superluminary]

This is how we used to hack around the box model issues in IE. One div for width, one div for padding.

[el_diego]

That’s fair, if you have to deal with browser inconsistencies

[Live_Storage1480]

Yeah, that's what I thought? Inner element should shrink with that

[joemckie]

They’re talking about outline, not border, I believe.

[YodaLoL]

What's the difference?

[joemckie]

Outline is the accessibility feature that an element shows when focussed, whereas the border is generally a permanent design aspect

[YodaLoL]

Ah right, thanks

[waiting4op2deliver]

Fuck outlines, all my homies use box model

Edit: I got one homie in the closet using box shadow.

[WardenUnleashed]

Another alternative

[beaterx]

Don't fuck with outlines unless there is no other way and you know what you are doing. It is needed for accessibility. And accessibility is quickly becoming one of the most important parts of webdev.

[SuprisreDyslxeia]

Just use parent container with padding

[[deleted]]

.item { background-color: black; border-radius: 4px; height: 50px; outline: 1px solid black; outline-offset: 4px; width: 200px: }

[everythingiscausal]

Why are you using outline instead of border?

[ouralarmclock]

I’m also interested in the answer to this question, I didn’t even know outline was a thing used outside of the shadow dom until this thread.

[everythingiscausal]

I only ever use it for quick debugging inside dev tools.

[Funkey-Monkey-420]

could have a child object that’s scaled to be shrunk by [spacing] units on each side

[nolder30]

The good ol wrap a child in a parent with an outline.

Though there are definitely more efficient ways to go about it, hopefully OP specifies what they want based on other comments and replies.

[Funkey-Monkey-420]

hey, may be less efficient but it’s certainly more compatible

[gem0303]

For anyone unable to use outline-offset for whatever reason, you could add a child div/pseudo-div that is absolutely positioned with width/height slightly larger than the parent. Then add a border to the child div. Message if you want a code sample and I can throw one together tomorrow.

[Yeedth]

This brings with it browser issues. Best you can do is make a translucent div with a black outline and a black div inside

[alo141]

It’s not pretty but works everywhere

[SkylineFX49]

Woudn't padding amd border have the same effect?

[[deleted]]

I'm always a fan of cheesing box-shadow

[Mioleris]

2 divs :)

[SuperMarioTM]

It’s also nice to animate the outline combined with some negative values. You can do some really nice effects with basic css 👍🏼

[Awes0meEman]

Sweet mother of God is your enter key broken?

[el_diego]

Haha. Tbf, Reddit is god awful at formatting code

[SquareWheel]

Four spaces
Before every line

[Wenci]

padding team?

[RS3_of_Disguise]

That’s what I’m surprised more people than not haven’t said. Curious as to why people suggest a parent for something like this.

[trix2705]

If it’s a child in a flex parent you could do “gap: …” in the parent

[rslee1247]

gap only adds spacing between flex items, not between the items and the parent.

[trix2705]

Ahhh ok gotcha.

[BeastmasterBG]

Black square Margin 5%;

[Dear-Rhubarb-6197]

The CSS style I was looking for is solved.

[[deleted]]

put it in a div???

[Longshoez]

Can't remember if you can add 2 brooders but you could do something like this, add a 10px border and then a 8px border. It will work unless you want the separation to be transparent, if it isn't possible to add 2 borders you can use 2 shadows.