CSS line-height values should be unitless unless necessary to be defined as a specific pixel value

[pbiron]

per 44627#comment:4, CSS line-height values should be unitless unless necessary to be defined as a specific pixel value.

In trunk, there are currently 268 line-height rules that use px, 64 that use em and 14 that use '%` (tho percentages are probably considered "unitless").

It may be the case that some of those rules are correctly using units, but someone needs to go through each one and determine whether they can be done unitless.

[ianbelanger]

I would like to own this ticket if that is alright. I can begin looking into it immediately.

[desrosj]

Spoke with @ianbelanger today and he is starting to work through this today.

[ianbelanger]

This patch covers the /wp-admin/css/about.css file

[ianbelanger]

This patch covers the /wp-admin/css/admin-menu.css file

[ianbelanger]

This patch covers the /wp-admin/css/color-picker.css file

[ianbelanger]

This patch is a WIP for the /wp-admin/css/common.css file, see comment below for details

[ianbelanger]

Notes for the 44643.common.css.diff patch

In /wp-admin/css/common.css

Unchanged line-height values that use units (I could not find a good unitless solution that would work across all browsers and admin pages)

line 222 - body
line 509 - .widefat td, .widefat td p, .widefat td ol, .widefat td ul
line 516 - .widefat th, .widefat thead td, .widefat tfoot td
line 759 - .widget .widget-top, .postbox .hndle, .stuffbox .hndle, .control-section .accordion-section-title, .sidebar-name, #nav-menu-header, #nav-menu-footer, .menu-item-handle, .checkbox, .side-info, #your-profile #rich_editing, .widefat thead th, .widefat thead td, .widefat tfoot th, .widefat tfoot td

Unable to find these selectors in the DOM

line 838 - .key-labels label
line 921 - #delete-link
line 1209 - .filter-drawer .filter-group-feature input, .filter-drawer .filter-group-feature label
line 1246 - .wp-filter .button-link.edit-filters
line 1739 - .toggle-arrow
line 1769 - #number-of-columns
line 2431 - br.clear
line 3040 - .bulk-action-notice .toggle-indicator:before
line 3316 - #documentation label
line 3924 - .filter-drawer .filter-group-feature input, .filter-drawer .filter-group-feature label
line 3933 - .wp-filter .button.drawer-toggle

[ianbelanger]

This patch is a WIP for the /wp-admin/css/customize-controls.css file, see comment below for details

[ianbelanger]

Notes for 44643.customize-controls.css.diff

In wp-admin/css/customize-controls.css

Unchanged line-height values that use units (I could not find a good unitless solution that would work across all browsers and admin pages)

line 443 - #customize-controls .customize-pane-child .customize-section-title h3, #customize-controls .customize-pane-child h3.customize-section-title, #customize-outer-theme-controls .customize-pane-child .customize-section-title h3, #customize-outer-theme-controls .customize-pane-child h3.customize-section-title, #customize-controls .customize-info .panel-title
line 755 - .customize-section-title h3, h3.customize-section-title (This style is overidden by the above rule anyway and could probably be removed)
line 983 - .customize-control-color .color-picker, .customize-control-upload div
line 2900 - #available-widgets .customize-section-title h3, #available-menu-items .customize-section-title h3

Unable to find selectors in the DOM

line 987 - .customize-control .customize-inside-control-row
line 1271 - .accordion-section .dropdown-content
line 1405 - .customize-control-header .inner, .customize-control-header .inner .dashicons
line 1869 - .control-section .customize-section-text-before
line 2198 - .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before
line 2745 - .customize-control input[type="radio"] + label + br, .customize-control input[type="checkbox"] + label + br

[ianbelanger]

This patch is a WIP for the /wp-admin/css/customize-nav-menus.css file, see comment below for details

[ianbelanger]

Notes for 44643.customize-nav-menus.css.diff

In /wp-admin/css/customize-nav-menus.css

Unable to find selectors in the DOM

line 305 - .wp-customizer .metabox-prefs label

[ianbelanger]

This patch is a WIP for the /wp-admin/css/customize-widgets.css file, see comment below for details

[ianbelanger]

Notes for 44643.customize-widgets.css.diff

In /wp-admin/css/customize-widgets.css

Unable to find selectors in the DOM

line 471 - .widget-reorder-nav span:before

[ianbelanger]

This patch is a WIP for the /wp-admin/css/dashboard.css file, see comment below for details

[ianbelanger]

Notes for 44643.dashboard.css.diff

In /wp-admin/css/dashboard.css

Unable to find selectors in the DOM

line 471 - #dashboard_php_nag .button .dashicons-external (not sure how to trigger php nag)

[ianbelanger]

This patch is a WIP for the /wp-admin/css/edit.css file, see comment below for details

[ianbelanger]

Notes for 44643.edit.css.diff

In /wp-admin/css/edit.css

Unable to find selectors in the DOM

line 709 - .privacy-text-actions
line 1135 - p.popular-tags
line 1245 - .trash-undo-inside, .spam-undo-inside

[ianbelanger]

This patch is a WIP for the /wp-admin/css/forms.css file, see comment below for details

[ianbelanger]

Notes for 44643.forms.css.diff

In /wp-admin/css/forms.css

Unable to find selectors in the DOM

line 757 - .tool-box .title
line 823 - .pressthis-bookmarklet, .pressthis-bookmarklet:hover, .pressthis-bookmarklet:focus, .pressthis-bookmarklet:active

[ianbelanger]

This patch covers the /wp-admin/css/install.css file

[ianbelanger]

This patch covers the /wp-admin/css/login.css file

[ianbelanger]

This patch covers the /wp-admin/css/list-tables.css file

[ianbelanger]

This patch covers the /wp-admin/css/nav-menus.css file

[ianbelanger]

This patch covers the /wp-admin/css/revisions.css file

[ianbelanger]

This patch covers the /wp-admin/css/themes.css file

[ianbelanger]

This patch covers the /wp-includes/css/admin-bar.css file

[ianbelanger]

This patch covers the /wp-includes/css/cutomize-preview.css file

[ianbelanger]

This patch covers the /wp-includes/css/jquery-ui-dialog.css file

[ianbelanger]

This patch covers the /wp-includes/css/wp-auth-check.css file

[ianbelanger]

This patch covers the /wp-includes/functions.php file, (inline styles in the error page)

[ianbelanger]

This patch covers the /wp-includes/css/wp-embed-template.css file

[ianbelanger]

This patch covers the /wp-includes/css/wp-pointer.css file

[ianbelanger]

This patch covers the /wp-includes/css/buttons.css file with one exception, see note below

[ianbelanger]

Notes for 44643.buttons.css.diff

In /wp-includes/css/buttons.css

Unable to find selectors in the DOM. It appears that this particular selector no longer exists in core

line 360 - #media-upload.wp-core-ui .button

[ianbelanger]

This patch covers the /wp-includes/css/editor.css file with a few exceptions, see notes below

[ianbelanger]

Notes for 44643.editor.css.diff

In /wp-includes/css/editor.css

Unable to find selectors in the DOM. These may no longer exist in Core, but I am not 100% sure about that.

line 57 - .mce-window .mce-window-head .mce-title
line 70 - .mce-window .mce-window-head .mce-close, .mce-window-head .mce-close .mce-i-remove
line 228 - .mce-menu-has-icons i.mce-ico
line 242 - div.mce-tab
line 686 - .mce-window .mce-btn
line 848 - .mce-toolbar .mce-btn .mce-open

Would love to get confirmation of this from someone with intimate knowledge of Core TinyMCE.

[ianbelanger]

This patch covers the /wp-includes/css/media-views.css file with a couple of exceptions, see comment below for details

[ianbelanger]

Notes for 44643.media-views.css.diff

In /wp-includes/css/media-views.css

Unable to find selectors in the DOM. These may no longer exist in Core, but I am not 100% sure about that.

line 328 - .media-sidebar .sidebar-title
line 1139 - .attachments-browser .instructions

[ianbelanger]

Some relevant notes for the wp-includes folder:

Stylesheets omitted from wp-includes patches
wp-admin/css/dashicons.css (no line-height values to change)

Other filetypes omitted
wp-includes/ms-deprecated.php

[ianbelanger]

This patch covers the complete /wp-admin/css/widgets.css file, disregard the original 44643.widget.css.diff

[ianbelanger]

This patch updates the /wp-admin/css/widgets.css file, disregard the original 44643.widget.css.diff, see notes below

[ianbelanger]

Updated notes for the 44643.1.common.css.diff patch

In /wp-admin/css/common.css

Unchanged line-height values that use units (I could not find a good unitless solution that would work across all browsers and admin pages)

line 222 - body
line 509 - .widefat td, .widefat td p, .widefat td ol, .widefat td ul
line 516 - .widefat th, .widefat thead td, .widefat tfoot td
line 759 - .widget .widget-top, .postbox .hndle, .stuffbox .hndle, .control-section .accordion-section-title, .sidebar-name, #nav-menu-header, #nav-menu-footer, .menu-item-handle, .checkbox, .side-info, #your-profile #rich_editing, .widefat thead th, .widefat thead td, .widefat tfoot th, .widefat tfoot td

Still unable to find these selectors in the DOM

line 838 - .key-labels label
line 1739 - .toggle-arrow
line 1769 - #number-of-columns
line 3040 - .bulk-action-notice .toggle-indicator:before

[ianbelanger]

This patch updates the /wp-admin/css/customize-controls.css file, disregard the 44643.customize-controls.css.diff, see comment below for details

[ianbelanger]

Updated notes for 44643.1.customize-controls.css.diff

In wp-admin/css/customize-controls.css

Unchanged line-height values that use units (I could not find a good unitless solution that would work across all browsers and admin pages)

line 443 - #customize-controls .customize-pane-child .customize-section-title h3, #customize-controls .customize-pane-child h3.customize-section-title, #customize-outer-theme-controls .customize-pane-child .customize-section-title h3, #customize-outer-theme-controls .customize-pane-child h3.customize-section-title, #customize-controls .customize-info .panel-title
line 755 - .customize-section-title h3, h3.customize-section-title (This style is overidden by the above rule anyway and could probably be removed)
line 983 - .customize-control-color .color-picker, .customize-control-upload div
line 2900 - #available-widgets .customize-section-title h3, #available-menu-items .customize-section-title h3

Still unable to find selectors in the DOM

line 1271 - .accordion-section .dropdown-content
line 1405 - .customize-control-header .inner, .customize-control-header .inner .dashicons
line 1869 - .control-section .customize-section-text-before

[ianbelanger]

This patch updates the /wp-admin/css/edit.css file, disregard the original 44643.edit.css.diff, see notes below

[ianbelanger]

Updated notes for 44643.1.edit.css.diff

In wp-admin/css/edit.css

Unchanged line-height values that use units (could not find a good solution that would work across all browsers and admin pages)

line 1135 - p.popular-tags

[ianbelanger]

This patch covers the /wp-admin/css/media.css file, see notes in comment below

[ianbelanger]

Notes for 44643.media.css.diff

In wp-admin/css/media.css

Unchanged line-height values that use units (I could not find a good unitless solution that would work across all browsers and admin pages)

line 1255 - .edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .left:before

Unable to find selectors in the DOM

line 162 - .media-item .progress (couldn't keep it on the page long enough to inspect it)
line 187 - .media-item .progress .percent (same as above)

[ianbelanger]

Notes for 44643.list-tables.css.diff

In wp-admin/css/list-tables.css

Unable to find selectors in the DOM

line 2117 - table.plugin-install td.column-name strong

[afercia]

Just noting that the line-height in core also determines the height of many input fields. As the system fonts vary across operating systems, many input fields end up having a different height on different OSes. Changes to line-height for inputs, selects, etc. should be tested on all the major operating systems: macOS, Windows, and at least one GNU-Linux distro.

[ianbelanger]

Thanks @afercia, for the record I was testing on Windows only, in Chrome, Firefox, IE and Edge

[SergeyBiryukov]

Thanks for the patches, @ianbelanger!

Could we split this ticket into smaller tasks, e.g. per file? That would make it easier to test and review the patches and track the progress.

[ianbelanger]

Sure thing @SergeyBiryukov, I will create the tickets asap.

[mukesh27]

@SergeyBiryukov If we fix line-height issue in core software then we have to also fix that issue in bundled themes right?

[SergeyBiryukov]

In 45053:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/widgets.css.

Props ianbelanger, audrasjb.
Fixes #46531. See #44643.

[SergeyBiryukov]

Restoring the milestone, so the ticket does not disappear from various reports.

[SergeyBiryukov]

In 45123:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/nav-menus.css.

Props ianbelanger, audrasjb, pbiron, afercia.
Fixes #46516. See #44643.

[SergeyBiryukov]

In 45128:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/site-health.css.

Props mukesh27, ianbelanger, pbiron, afercia.
Fixes #46760. See #44643.

[SergeyBiryukov]

In 45129:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/customize-nav-menus.css.

Props ianbelanger, mukesh27, pbiron, afercia.
Fixes #46495. See #44643.

[SergeyBiryukov]

In 45130:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/about.css.

Props ianbelanger, mukesh27, pbiron, afercia.
Fixes #46495. See #44643.

[SergeyBiryukov]

In 45131:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/color-picker.css.

Props ianbelanger, mukesh27, pbiron, afercia.
Fixes #46492. See #44643.

[SergeyBiryukov]

In 45186:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/admin-menu.css.

Props ianbelanger, mukesh27, pbiron, afercia.
Fixes #46489. See #44643.

[SergeyBiryukov]

In 45187:

CSS Coding Standards: Use unitless values for line-height for count bubbles in wp-admin/css/admin-menu.css.

Missed in [45186].

Props ianbelanger.
See #46489, #44643.

[SergeyBiryukov]

In 45188:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/themes.css.

Props ianbelanger, mukesh27, audrasjb, pbiron, afercia.
Fixes #46518. See #44643.

[SergeyBiryukov]

In 45189:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/customize-controls.css.

Props ianbelanger, audrasjb, pbiron, afercia.
Fixes #46494. See #44643.

[SergeyBiryukov]

In 45460:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/customize-widgets.css.

Props ianbelanger, pbiron, afercia.
Fixes #46509. See #44643.

[SergeyBiryukov]

In 45461:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/dashboard.css.

Props ianbelanger, pbiron, afercia.
Fixes #46510. See #44643.

[SergeyBiryukov]

In 45462:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/edit.css.

Props ianbelanger, pbiron, afercia.
Fixes #46511. See #44643.

[SergeyBiryukov]

In 45464:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/forms.css.

Props ianbelanger, pbiron, afercia.
Fixes #46512. See #44643.

[SergeyBiryukov]

In 45465:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/install.css.

Props ianbelanger, pbiron, afercia.
Fixes #46513. See #44643.

[SergeyBiryukov]

In 45466:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/login.css.

Props ianbelanger, pbiron, afercia.
Fixes #46514. See #44643.

[SergeyBiryukov]

In 45467:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/list-tables.css.

Props ianbelanger, pbiron, afercia.
Fixes #46515. See #44643.

[SergeyBiryukov]

In 45468:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/revisions.css.

Props ianbelanger, pbiron, afercia.
Fixes #46517. See #44643.

[SergeyBiryukov]

In 45469:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/admin-bar.css.

Props ianbelanger, pbiron, afercia.
Fixes #46519. See #44643.

[SergeyBiryukov]

In 45470:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/customize-preview.css.

Props ianbelanger, pbiron, afercia.
Fixes #46520. See #44643.

[SergeyBiryukov]

In 45471:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/jquery-ui-dialog.css.

Props ianbelanger, pbiron, afercia.
Fixes #46521. See #44643.

[SergeyBiryukov]

In 45472:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/wp-auth-check.css.

Props ianbelanger, pbiron, afercia.
Fixes #46522. See #44643.

[SergeyBiryukov]

In 45473:

CSS Coding Standards: Use unitless values for line-height in wp-includes/functions.php.

Props ianbelanger, pbiron, afercia.
Fixes #46523. See #44643.

[SergeyBiryukov]

In 45474:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/wp-embed-template.css.

Props ianbelanger, pbiron, afercia.
Fixes #46524. See #44643.

[SergeyBiryukov]

In 45475:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/wp-pointer.css.

Props ianbelanger, pbiron, afercia.
Fixes #46525. See #44643.

[SergeyBiryukov]

In 45476:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/buttons.css.

Props ianbelanger, pbiron, afercia.
Fixes #46526. See #44643.

[SergeyBiryukov]

In 45477:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/editor.css.

Props ianbelanger, pbiron, afercia.
Fixes #46528. See #44643.

[SergeyBiryukov]

In 45478:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/media-views.css.

Props ianbelanger, pbiron, afercia.
Fixes #46529. See #44643.

[SergeyBiryukov]

In 45484:

CSS Coding Standards: Use unitless values for line-height in wp-admin/css/media.css.

Props ianbelanger, mukesh27, pbiron, afercia.
Fixes #46530. See #44643.

[SergeyBiryukov]

All the related tickets are now closed:

#44643

CSS line-height values should be unitless unless necessary to be defined as a specific pixel value

#46488

CSS line-height values should be unitless - about.css

#46489

CSS line-height values should be unitless - admin-menu.css

#46492

CSS line-height values should be unitless - color-picker.css

#46493

CSS line-height values should be unitless - common.css

#46494

CSS line-height values should be unitless - customize-controls.css

#46495

CSS line-height values should be unitless - customize-nav-menus.css

#46509

CSS line-height values should be unitless - customize-widgets.css

#46510

CSS line-height values should be unitless - dashboard.css

#46511

CSS line-height values should be unitless - edit.css

#46512

CSS line-height values should be unitless - forms.css

#46513

CSS line-height values should be unitless - install.css

#46514

CSS line-height values should be unitless - login.css

#46515

CSS line-height values should be unitless - list-tables.css

#46516

CSS line-height values should be unitless - nav-menus.css

#46517

CSS line-height values should be unitless - revisions.css

#46518

CSS line-height values should be unitless - themes.css

#46519

CSS line-height values should be unitless - admin-bar.css

#46520

CSS line-height values should be unitless - cutomize-preview.css

#46521

CSS line-height values should be unitless - jquery-ui-dialog.css

#46522

CSS line-height values should be unitless - wp-auth-check.css

#46523

CSS line-height values should be unitless - functions.php

#46524

CSS line-height values should be unitless - wp-embed-template.css

#46525

CSS line-height values should be unitless - wp-pointer.css

#46526

CSS line-height values should be unitless - buttons.css

#46528

CSS line-height values should be unitless - editor.css

#46529

CSS line-height values should be unitless - media-views.css

#46530

CSS line-height values should be unitless - media.css

#46531

CSS line-height values should be unitless - widgets.css

Any follow-up issues should be reported in new tickets.

[SergeyBiryukov]

In 46431:

CSS Coding Standards: Use unitless values for line-height in wp-includes/css/media-views.css.

Follow-up to [45478].

Props ianbelanger, afercia.
Fixes #46529. See #44643.

[desrosj]

Mentioned in the Miscellaneous Developer Focused Changes dev note for 5.3: ​https://make.wordpress.org/core/2019/10/15/miscellaneous-developer-focused-changes-in-5-3/