Snap Riley

PostsComments

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)

Now that is an interesting proposal. Thanks for the feedback.

8 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

I've been trying to fathom where this could be used "appropriately" but there are more standard means that have the same affect

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

I just found this same type of solution in a stackoverflow answer: https://stackoverflow.com/a/78046052

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

Oh, "readonly" and "disabled" are the correct ways to handle this (plus validation code either in the browser or the backend server) but this serves as an additional way of stopping focus.

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

But isn't that what we are trying to do by "disallowing" the focus on the element?

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

Hehehe, it seems so evil but the interesting part is how well it actually works...if you ignore the fact that the user cannot to anything with the element.

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using visibility and :focus to cause an HTML element to lose focus

This experiment originated from an event when I only had access to the CSS at the time. As such, I could not change the UX through structure (HTML) or programmatic means (JS). So I started with setting "pointer-events" and "user-select" to stop focus. But this did not stop the user from tabbing into the element and getting focus. We implemented the correct approach through a combination of HTML and JS mechanisms. However, it started a discussion about the possibility of doing this in CSS only. This is the outcome of the experiment. Interestingly, this results seems to have a similar affect as the deprecated "-moz-user-focus" found in Firefox up to 121 (Dec2023).

22 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)

I agree, it's better to not do this at all. (Thus the title containing "hackity bad hack" 😆 ) But how does one perform the CSS styling when you are backed into a corner due to vendor library CSS restrictions? Are there other techniques that would work?

8 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)

Thanks for the article. It's directly on point.

8 replies

KPCKevin Powell - Community

•Created by Snap Riley on 10/1/2024 in #front-end

Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)

I apologize in advance if this post is a little unclear. This is my first post in discord!:thanks:

8 replies