CSS opacity property improvements

[estelle]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

What specific section or headline is this issue about?

feedback from #30999

What information was incorrect, unhelpful, or incomplete?

Stuff i would love to see:

• Even though opacity: 0 elements are not visible, they are still part of the DOM. If they are in the tabbing order when invisible, they get focus. We do mention pointer events. But we should tell people to make the content visible when focused.

• Opacity alone should not be used to provide information to screen readers. Use the hidden attribute or visibility or display style properties. It's best to avoid using aria-hidden attribute, but if hidden with opacity, hide it from screen readers too.

• a mention of setting opacity as a value for @starting-style when transitioning from display none to a visible value.

• a comment in the stacking context paragraph about how adding opacity can improve perf, with a link to where that's described.

• maybe a link to a drag/drop example as opacity is commonly used on items being dragged.

What did you expect to see?

the above

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/opacity
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/opacity/index.md
• Last commit: e194ecd
• Document last modified: 2023-10-16T17:57:36.000Z

[OnkarRuikar]

a comment in the stacking context paragraph about how adding opacity can improve perf, with a link to where that's described.

Though it creates a new stacking context the opacity: .9999 is an expensive property. I think it's better to use z-index or zero transform.

maybe a link to a drag/drop example as opacity is commonly used on items being dragged.

As per the latest drag and drop HTML API browsers automatically create semitransparent ghost of the dragged element. In dev tools simply add draggable="true" to any HTML element and try dragging it. We don't have to explicitly set opacity anymore. Also, none of MDN live drag and drop demo uses opacity property.