[wp-trac] [WordPress Trac] #60064: Edit no-js CSS in bundled themes (was: The no-js css rule in twenty fifteen and twentysixteen should be more specific)

[WordPress Trac]

#60064: Edit no-js CSS in bundled themes
---------------------------+------------------------------
 Reporter:  shawfactor     |       Owner:  (none)
     Type:  enhancement    |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  minor          |  Resolution:
 Keywords:  2nd-opinion    |     Focuses:
---------------------------+------------------------------
Changes (by sabernhardt):

 * keywords:   => 2nd-opinion
 * type:  defect (bug) => enhancement
 * component:  Themes => Bundled Theme


Old description:

> The css directive in style.css of the twenty fifteen theme
>
> .no-js .main-navigation ul ul {
>
> should be altered to this
>
> html.no-js .main-navigation ul ul
>
> As other plugins like buddypress add their own no-js classes to the body
> which can cause conflicts. I have raised this with them directly:
>
> https://buddypress.trac.wordpress.org/ticket/9033#ticket
>
> This could be widened into a broader ticket on a standard way of adding
> no-js classes that themes or plugins could folllow as right now done add
> it to the html and some to the body class

New description:

 The css directive in style.css of the twenty fifteen theme

 `.no-js .main-navigation ul ul {`

 should be altered to this

 `html.no-js .main-navigation ul ul`

 As other plugins like buddypress add their own `no-js` classes to the
 `body` which can cause conflicts. I have raised this with them directly:

 https://buddypress.trac.wordpress.org/ticket/9033#ticket

 This could be widened into a broader ticket on a standard way of adding
 `no-js` classes that themes or plugins could follow as right now some add
 it to the `html` and some to the `body` class

--

Comment:

 The bug is in BuddyPress 12.0.0, not the themes, and that should be fixed
 in 12.1.0.

 While the BuddyPress 12 bug would not affect all
 [https://wpdirectory.net/search/01HHRQV1V2T8FFN76EGY3Q0S18 1,917 themes]
 that use a `.no.js` selector, it probably still changed the display in
 hundreds of them. In addition to Twenty Twenty-One, which removes the `no-
 js` body class when JavaScript is enabled, the
 [https://wpdirectory.net/search/01HHRQW1SW2H0VJGNJ3B0Q2NQK 12 themes that
 target `html.no-js`] should not break. Any similar bugs that might occur
 in a future plugin theoretically would be easier to find in one of the
 bundled themes than in one of the others.

 The [https://developer.wordpress.org/coding-standards/wordpress-coding-
 standards/css/#selectors CSS Coding Standards] encourages to "refrain from
 using over-qualified selectors," though sometimes it can be necessary.
 When it is, adding an explanatory comment usually is helpful.

 Increasing the specificity could break sites' //custom// styles added
 later in the cascade. That probably is very rare with the `display`
 property of these elements, but it's still possible.

 If it's worth hardening the bundled themes against future bugs with the
 `no-js` class, it could affect three of them.

 **Twenty Fifteen** adds the class on the `html` element, and the
 stylesheet uses `.no-js` to expand any submenus in the main navigation.
 {{{
 .no-js .main-navigation ul ul {
         display: block;
 }
 }}}

 **Twenty Sixteen** also adds the class on the `html` element. Its
 stylesheet uses `.no-js` to show the main navigation, expand any submenus,
 and hide the menu toggle button.
 {{{
 .no-js .site-header-menu {
         display: block;
 }
 .no-js .main-navigation ul ul {
         display: block;
 }
 .no-js .menu-toggle {
         display: none;
 }
 }}}

 Again, **Twenty Twenty** adds the class on the `html` element. Its styles
 use both `.js` and `.no-js`, but the `.no-js` class is only used on the
 search toggle button within the header.
 {{{
 .js .show-js {
         display: block !important;
 }
 .js .hide-js {
         display: none !important;
 }
 .no-js .show-no-js {
         display: block !important;
 }
 .no-js .hide-no-js {
         display: none !important;
 }
 }}}

 Twenty Seventeen likewise adds the class on the `html` element. However,
 the stylesheet relies on `.js` instead of `.no-js` to determine whether to
 show or hide elements.

 Twenty Twenty-One adds the `.no-js` class on the `body` element and then
 its script removes the class instead of replacing it with `.js`. The
 stylesheets use `.no-js` to hide the dark mode toggle button when that is
 enabled.
 {{{
         .no-js #dark-mode-toggler {
                 display: none;
         }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60064#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform