Search
Using a brightness() filter to generically highlight content
12.9.2020
Rick Strahl:
I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course,...
Copy the Browser’s Native Focus Styles
28.8.2020
Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style...
Quick Tips for High Contrast Mode
27.6.2020
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
Here’s the first trick:
[…] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states...
How to Create a “Skip to Content” Link
17.3.2020
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to...
Having a Little Fun With Custom Focus Styles
2.12.2019
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.
So you do a little research and find...
Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window API
25.10.2019
In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how third-party sites may be coming to a modal near you.
Let's get into the news.
WebAPKs are not available to Firefox on Android
On Android, both...
Don’t comma-separate :focus-within if you need deep browser support
24.7.2019
I really like :focus-within. It's a super useful selector that allows you to essentially select a parent element when any of its children are in focus.
Say you wanted to reveal some extra stuff when a <div> is hovered...
div:hover {
.extra-stuff {
/* reveal it */
}
}
That's...