Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#21421 closed defect (bug) (invalid)

Sanitize/remove admin page slug from admin menu CSS classes

Reported by: kawauso Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords: reporter-feedback
Focuses: Cc:


As I discovered when testing #21307, browsers won't parse a CSS class name with both underscores and hyphens. Instead, they handle it really badly.

For example: .toplevel_page_link-manager will affect body in both Firefox and Chrome.

Plugin page menu items have both an ID and class generated as such, which seems rather redundant. I propose either dropping the redundant and only partly functional CSS class or standardising the menu slug to produce a valid class name.

Change History (5)

comment:1 @scribu3 years ago

Related: #12718

comment:2 @helen3 years ago

If browsers break on underscores and dashes combined in one class, seems like perhaps sanitize_html_class() should either replace all underscores with dashes or see if both are present and, if so, then replace underscores with dashes.

comment:3 @helen2 years ago

  • Keywords reporter-feedback added

I'm not finding any documentation on this issue - have anything or a quick example at hand?

comment:4 @wycks2 years ago

Both underscores and dashes are supported in browsers since well..forever.

The tokenizer for CSS 2.1 : http://www.w3.org/TR/CSS21/grammar.html#scanner

CSS W3 spec:

"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_);"

What does "handle it really badly" mean, outside being ugly to look at?

Last edited 2 years ago by wycks (previous) (diff)

comment:5 @helen2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Have never been able to reproduce this nor find any similar reports. Closing; feel free to reopen with steps to reproduce.

Note: See TracTickets for help on using tickets.