For users of screen readers, depending on the screen
resolution, the two checkboxes are for opening and closing the side menus that
appear to the left and right of the screen. This is designed both for large screens
and for mobile devices with a touch screen. Checking either the main menu or sidebar checkboxes causes
the menu to open from the left or right side of the screen, respectively. Clearing
the checkox in either the main menu or sidebar closes the menu. The checkboxes are
visible to screen readers such as JAWS and NVDA for Windows, Voiceover for Mac,
and Orca screen reader for Linux. When a screen reader says "clickable" for both
main menu and sidebar, that is for the respective checkboxes. End of explaination.
New CSS Property For Web Developers: backdrop-filter
While browsing through Twitter as a progressive web application in my Android smartphone, I saw the blur effect in the header of the Twitter page. I like what I saw, so I did a search and came across backdrop-filter, which only work with Chrome-based browsers at the moment and Firefox does not have support for it. For those with eyesight, here’s what it looks like:
This image shows a website running in Google Chrome. Google Chrome supports a backdrop-filter property with a blur radius set to 5 pixels.
Mozilla Firefox (as of 96) does not support backdrop-filter CSS property.
This image shows a website running in Mozilla Firefox. Firefox does not support a backdrop-filter property.
An example of how the backdrop-filter property is shown below:
main article {
backdrop-filter: blur(5px);
}
Until Firefox supports the backdrop-filter filter right out of the box, I’m going to leave it off for now so both major browsers look the same.
