[wp-trac] [WordPress Trac] #46573: Introduce a Site Health module for users to self-service their site

[WordPress Trac]

#46573: Introduce a Site Health module for users to self-service their site
---------------------------------------+-----------------------
 Reporter:  Clorith                    |       Owner:  pento
     Type:  task (blessed)             |      Status:  assigned
 Priority:  normal                     |   Milestone:  5.2
Component:  General                    |     Version:
 Severity:  normal                     |  Resolution:
 Keywords:  has-patch has-screenshots  |     Focuses:
---------------------------------------+-----------------------

Comment (by afercia):

 Couple things about the CSS part:

 1
 The "ellipsis" CSS keyframe animation works only in webkit and Firefox:
 doesn't work in Edge and IE11. Turns out `content` isn't one of the CSS
 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
 animatable properties]. The fact it works in webkit and Firefox is non-
 standard and not guaranteed to work in the future. There are alternative
 CSS techniques [https://stackoverflow.com/questions/13014808/is-there-
 anyway-to-animate-an-ellipsis-with-css-animations (a few examples here)],
 but they somehow rely on the font metrics and on animating the width of
 the "dots" container. I've tried one of them but WordPress uses system
 fonts so the rendering is different on different operating systems. The
 width varies and those techniques seem unreliable.

 2
 The whole CSS uses unnecessary overqualified selectors. For example:
 `body .health-check-accordion .health-check-accordion-trigger .badge.blue`

 Seems to me there's no reason to use a so high specificity: this
 stylesheet is enqueued only in the Site Health pages. According to the
 WordPress CSS coding standards, specificity should be kept to the lower
 possible value. Reading https://make.wordpress.org/core/handbook/best-
 practices/coding-standards/css/#selectors two base principles should be
 applied:
 - use specificity with responsibility
 - refrain from using over-qualified selectors, `div.container` can simply
 be stated as `.container`

 I'd strongly recommend to review all the CSS part as new code merged in
 WordPress should meet the standards not only for mere compliance but also
 to illustrate best practices and for educational purposes.

 Note: in #46621 I've started reducing specificity in the parts related to
 that specific issue.

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