WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 2 months ago

#24450 closed defect (bug) (worksforme)

Weak CSS selectors for WP Editor styles

Reported by: ericlewis Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.6
Component: Editor Keywords:
Focuses: Cc:

Description

If a theme or plugin has an ID definition selector for table rows (#page table tr td), it overrides WP Editor's CSS selector ( .wp_themeSkin tr.mceFirst .mceToolbar tr td ), making the editor toolbar inherit the theme's styles for table data, which can look unsightly.

Change History (8)

comment:1 SergeyBiryukov11 months ago

Could not reproduce with #page table tr td.

Reproduced with #wpwrap table tr td. It's not just the editor, the table in Custom Fields meta box is also affected.

Shouldn't the theme or plugin in question use a more specific selector though (and only add the CSS on its own page, not on every admin screen)? .wp_themeSkin tr.mceFirst .mceToolbar tr td seems specific enough as is.

comment:2 follow-up: ericlewis11 months ago

Sorry I didn't specify, #page table tr td was testing with Twenty Thirteen.

The issue here seems to be CSS specificity, and the nature of CSS class usage in the selectors for the WP Editor skin versus a theme or a plugin using an ID selector to define the style. The W3 spec has a nice rundown on calculating specificity, and it's been covered in CSS Tricks and Smashing Magazine for further reading.

It's tricky here, because the nature of the WP Editor is that it can be called multiple times per page, meaning if we were going to style it with IDs we would have to drop styles in an internal stylesheet, like the styling of the WP admin bar or the Twenty-somethings' custom headers. Or perhaps use !important rule for the wp_themeSkin declarations.

Last edited 11 months ago by ocean90 (previous) (diff)

comment:3 SergeyBiryukov11 months ago

  • Milestone changed from Awaiting Review to 3.6
  • Type changed from enhancement to defect (bug)

comment:4 ericlewis11 months ago

Also, #page table tr td is not a selector in Twenty Thirteen, that was just an example using a Twenty Thirteen selector.

However, dropping a WP Editor in Twenty Thirteen does look funky out-of-the-box on button hovers, because of the style reset borrowed from Normalize.css:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

comment:5 SergeyBiryukov11 months ago

Related: #21863 (box-sizing fix for the Toolbar).

comment:6 in reply to: ↑ 2 azaozz11 months ago

Replying to ericlewis:

It's tricky here, because the nature of the WP Editor is that it can be called multiple times per page, meaning if we were going to style it with IDs we would have to drop styles in an internal stylesheet, like the styling of the WP admin bar or the Twenty-somethings' custom headers. Or perhaps use !important rule for the wp_themeSkin declarations.

Yeah, and both options (a body stylesheet generated from PHP or !important) don't sound that good.

Agree with Sergey that .wp_themeSkin tr.mceFirst .mceToolbar tr td is quite specific. We could probably add .mceEditor in front of every .wp_themeSkin in editor.css (about half of the selectors there) but it will always be possible to overwrite that with a selector containing IDs. Better option imho is to avoid using IDs when defining default element styles, or if not possible, at least to make them more specific: #page > table tr td, etc.

Other suggestions welcome :)

Last edited 11 months ago by azaozz (previous) (diff)

comment:7 markjaquith10 months ago

  • Milestone changed from 3.6 to Awaiting Review

I'm inclined to say that the theme/plugin should be using a more targeted selector, to keep its rules from affecting other things.

comment:8 azaozz2 months ago

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

No traction for 8 months. Feel free to reopen if there's a better suggestion on how to fix.

Note: See TracTickets for help on using tickets.