Updated: Comment #100
Note the patch in #70 was committed to core as
- Old classes don't describe how they affect screenreaders.
- Old classes are overly verbose.
- Old classes don't follow a standard familiar to people outside the Drupal community.
After #70 was committed, the following problem was raised:
- CSS classes without prefixes can sometimes interfere with classes in a theme.
- Rename classes to better describe how they affect screenreaders
- Reduce the amount of typing if possible.
- Have the classes follow the HTML5 Boilerplate standard.
After #70 was committed,
- Add the prefixes back or rollback the patch.
- Decide whether to add back the prefixes or rollback the patch
- If we decide to add the prefixes back, we'll have to:
- Decide what prefixes to add.
- Update any code that uses these classes.
- Update depending on whether it's been committed at that time.
- Update the change notice ([#2022859: Simplified names of "element-x" helper classes]) and documentation pages [#2023177: Upgrading 7.x themes to 8.x], [#388372: Standard Drupal core styles and classes] and [#2023297: D7 to D8 Upgrade: Generated HTML].
- If we decide to rollback, we'll have to:
- Rollback or fix any issues that use these classes.
- Rollback or fix depending on whether it's been committed at that time.
- Delete the change notice ([#2022859: Simplified names of "element-x" helper classes]) and update documentation pages [#2023177: Upgrading 7.x themes to 8.x], [#388372: Standard Drupal core styles and classes] and [#2023297: D7 to D8 Upgrade: Generated HTML].
User interface changes
This issue makes no changes to the user interface.
This issue makes a change to the CSS "API" used by core, modules, and themes.
- Open issues that we know will be affected by this change:
- "Cautionary tale" issue providing motivation for rollback:
- Meta issues to discuss and head off similar issues: ,
Original report by Jacine
Something that has really bothered me since these classes were originally introduced is how overly verbose they are. I see no reason these classes need to be so verbose and would like to see them follow the HTML5 Boilerplate.
Copying from Boilerplate, the CSS for
invisible should go in
core/modules/system/css/system.module.css and look like:
* Hide visually and from screen-readers, but maintain layout.
|PASSED: [[SimpleTest]]: [MySQL] 57,835 pass(es).|
|PASSED: [[SimpleTest]]: [MySQL] 57,665 pass(es).|
|PASSED: [[SimpleTest]]: [MySQL] 56,366 pass(es).|