matthiasott, 1 month ago

@matuzo How about this then…? 😁

deadparrot, 1 month ago

@matuzo You should be more grateful, Manuel, every div means job security

yatil, 1 month ago

@deadparrot @matuzo Please, “AI” take this job!

bastianallgeier, 1 month ago

@yatil @deadparrot @matuzo User: How do I create a clickable button in HTML?

AI: You can use the <clickable-button>Hello</clickable-button> clement to create a clickable button

User: Sorry, but that element does not exist.

AI: I'm so sorry, I was mistaken. You should use the <button-clickable> element instead

User: That element also does not exist

Ai: I'm so sorry, you are right, please use <div onclick="doSomething()">Button</div> instead

sarajw, 1 month ago

@matuzo I'm fixing a bunch of those as I come to them. I don't either.

As far as I can tell, it seems to be a dislike of having to deal with the default button styles.

matuzo, 1 month ago

@sarajw yeah, but for me that argument doesn't count anymore for new websites. Removing default button styles used to be annoying, but today it's easy.

button {  
 all: unset;  
}

button:focus-visible {  
 outline: revert;  
 outline-offset: 2px;  
}  

sarajw, 1 month ago

@matuzo Agreeeee.

Although I was reading (from @hi_mayank ?) that some useful stuff is lost with unset - is this true here?

medienbaecker, 1 month ago

@sarajw Yeah, that's why he added the focus style back with outline: revert 👍

sarajw, 1 month ago

@medienbaecker It's this article that has me all 🤔:

https://www.mayank.co/blog/revert-layer

sarajw, 1 month ago

@matuzo @hi_mayank No maybe that was just with revert in some cases... je suis confuse

hi_mayank, 1 month ago

@sarajw yeah, all:unset is fine (other than performance maybe). it does remove focus styles, but @matuzo is adding them back, so should be good

see also https://github.com/mayank99/reset.css/pull/14

cvennevik, 1 month ago

@hi_mayank @sarajw @matuzo I actually ran into a gotcha yesterday where "all: unset" had unset our global "box-sizing: inherit" reset. Ended up fixing that in our "unstyleButton" Sass mixin, so now it sets the box-sizing, cursor, and outline properties.

Wondering if we'll discover a fourth property that needs fixing on it.

hi_mayank, 1 month ago

@cvennevik @sarajw @matuzo yikes, box-sizing is a pretty nasty one to undo.

this is why i try to avoid all: unset in general. it similarly gets rid of too much when used in dialog as well

matuzo, 1 month ago

@hi_mayank @cvennevik @sarajw Untested, but that should also do the job:

button {  
 background: initial;  
 font: unset;  
 padding: initial;  
 border: initial;  
}  

Smells like blog post material. :)

noleli, 1 month ago

@matuzo @hi_mayank @cvennevik @sarajw heh, I was recently dealing with this with dialog, too. Have to unset margin, padding, border, width, max-width, and any relevant insets depending on what you’re trying to do. Mayank more or less convinced me that resetting the individual properties was a better option that all 😅

sarajw, 1 month ago

@noleli @matuzo @hi_mayank @cvennevik

I mean, I don't think restyling a button is a difficult thing to do, and I FAR FAR prefer it to adding back all the functional things that buttons do - but I guess this thread proves it isn't cut-and-dried "easy" - especially when apparently many devs don't think beyond "onClick"

matuzo, 1 month ago

@sarajw @noleli @hi_mayank @cvennevik still no good reason to use divs instead. also, what's really easy in CSS?

(yes I know, I said "really easy" earlier. easy compared to a couple of years ago ;))

sarajw, 1 month ago

@matuzo @noleli @hi_mayank @cvennevik

You know I agree. Pointing out dodgy reasoning behind a thing doesn't mean I'm arguing for it :)

And definitely getting easier - but I agree I think a lot of developers who have been busy wrangling React haven't had the time to keep up with CSS.

(Yes there's also the problem that people who are keeping up with the CSS and a11y aren't getting hired when they should be.)

mikemai2awesome, 1 month ago

@matuzo @hi_mayank @cvennevik @sarajw I believe safari adds 2px margin, probably need to reset that as well.

sarajw, 1 month ago

@mikemai2awesome @matuzo @hi_mayank @cvennevik safari definitely does something, my unsettled buttons look weird on it...

bastianallgeier, 1 month ago

@matuzo @sarajw 🤯 Never used unset so far and that's also the first time I heard about revert. CSS never stops to amaze me.

yatil, 1 month ago

@matuzo @sarajw People will cite their abandonment of IE6 as a reason that they don’t need to do progressive enhancement/graceful degredation and also cite IE6 as the reason to not use buttons because styling them in that browser used to be cumbersome a thousand years ago. (In internet years.)