[css-display] box-suppress use cases

Previous Topic Next Topic
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

[css-display] box-suppress use cases

Stephanie Hobson

I would like to contribute some use cases for the box-suppress module but I'm not totally sure I understand the proposal as it is.

So, here are some cases where I have messed with whether or not an element can be seen and why:

- To hide text from users consuming my sites with visual formatting but to provide information for users consuming my content without it.
- To hide elements I plan on displaying in response to user interaction, examples:
 -- modals
 -- progressive disclosure
 -- tabs
 -- drop down menus
 -- autocomplete suggestions
- Removing content when formatting for other media
 -- print style sheets
 -- small breakpoints in a responsive design
 -- browsers without javascript enabled
- To place an interactive element over top of a non-interactive one (ie, so that a hidden button completely covers a heading and clicking on the heading triggers the events bound to the button)
- To make an element not visible but focusable (ie, skip links)
- To hide an element until the associated javascript has loaded to make it functional.

Some of my frustrations with display:none for some of these purposes are:
- it's not read out by screen readers
- it is not possible to get height and width information in JS prior to displaying it
 -- to animate it with JS
 -- to adjust other elements on the page to make space for it
 -- to adjust the scroll position of the page to make sure it is visible
- it is not possible to animate it with CSS

Please let me know if you would like code samples or more information for any of these use cases.

Thank you,