Make WordPress Core

Opened 2 weeks ago

Last modified 7 days ago

#60876 reopened defect (bug)

Autoprefixer warning in `src/wp-admin/css/media.css` when running `precommit:css` Grunt task

Reported by: davidbaumwald's profile davidbaumwald Owned by: jorbin's profile jorbin
Milestone: 6.5.3 Priority: normal
Severity: minor Version: 6.3
Component: Media Keywords: good-first-bug has-patch needs-testing dev-feedback fixed-major
Focuses: css, administration Cc:

Description

Similar to #59819, during the Dry Run for the 6.5 release, the following warning was output while running the npm run grunt prerelease task:

>> autoprefixer: F:\WordPress Core Develop\develop.svn.wordpress.org\branches\6.5\src\wp-admin\css\media.css:1127:2: start value has mixed support, consider using flex-start instead  

Copying from #59819:

The start and end values are not supported in Opera Mobile which has a usage of 1.01%.
On WordPress' Browsers Support page:
Last 2 Opera versions.

Browsers with > 1% usage based on can I use browser usage table.[https://caniuse.com/usage-table Opera Mobile's last 2 versions have a usage of}:
73: 1.01%
12.1: 0%

Noting: Flexbox is well supported on all browser versions that WordPress supports ✅

Attachments (1)

60876.diff (400 bytes) - added by khokansardar 13 days ago.

Download all attachments as: .zip

Change History (11)

#1 @sabernhardt
2 weeks ago

  • Component changed from Administration to Media
  • Focuses administration added
  • Version changed from trunk to 6.3

align-items: start was part of [55919]

#2 @devsahadat
2 weeks ago

Proposed Solution:

Issue:
The Autoprefixer warning in src/wp-admin/css/media.css is caused by the usage of the start value in CSS properties, which is not fully supported in Opera Mobile.

Solution:
To address this issue, we propose replacing instances of start with flex-start in the affected CSS properties. This adjustment ensures consistent rendering across different browsers, including those with limited support for certain CSS properties.

Implementation:
I have updated the affected portion of media.css as follows:

Before:
.media-item-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

After:
.media-item-wrapper {
    display: grid;
    grid-template-columns: flex-start flex-start; /* Replace start with flex-start */
}

Testing:
Thorough testing across various browsers and devices is recommended after applying the changes to ensure compatibility and stability. Specifically, testing in Opera Mobile is crucial to confirm that the warning is resolved without introducing any regressions.

Documentation Update:
Optionally, update relevant documentation or comments within the codebase to provide clarity on the rationale behind the change and assist future contributors.

Benefits:

  • Ensures consistent rendering across different browsers.
  • Addresses the Autoprefixer warning, improving code quality and maintainability.

Conclusion:
By implementing this solution, we can resolve the reported warning in media.css, thereby enhancing the stability and compatibility of the WordPress Core codebase.

Please review and provide feedback on the proposed solution. I'm available to assist with any further clarification or implementation details.

Thank you.

This ticket was mentioned in PR #6350 on WordPress/wordpress-develop by @khokansardar.


13 days ago
#3

  • Keywords has-patch added; needs-patch removed

Fix Autoprefixer warning in src/wp-admin/css/media.css when running precommit:css Grunt task issue.

Trac ticket: #60876

@khokansardar
13 days ago

#4 @khokansardar
13 days ago

  • Keywords needs-testing added

#5 @swissspidy
13 days ago

@khokansardar FYI, you only need to add either a PR or a patch file, not both. That's just redundant :)

This ticket was mentioned in Slack in #core by jorbin. View the logs.


12 days ago

#7 @jorbin
11 days ago

  • Owner set to jorbin
  • Resolution set to fixed
  • Status changed from new to closed

In 57933:

Media: Use flex-start for full browser support.

The value of start is not fully supported by Opera Mini which has 1.01% usage. There is no material change in functionality with this change.

Follow-up to [55919].

Props davidbaumwald, sabernhardt, khokansardar, devsahadat.
Fixes #60876.

#8 @jorbin
11 days ago

  • Keywords dev-feedback fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport consideration

#9 @davidbaumwald
7 days ago

  • Milestone changed from 6.5.1 to 6.5.2

Milestone renamed

#10 @jorbin
7 days ago

  • Milestone changed from 6.5.2 to 6.5.3
Note: See TracTickets for help on using tickets.