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

[davidbaumwald]

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 ✅

[sabernhardt]

align-items: start was part of [55919]

[devsahadat]

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.

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

Trac ticket: #60876

[swissspidy]

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

[jorbin]

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.

[jorbin]

Reopening for backport consideration

[davidbaumwald]

Milestone renamed

[joedolson]

Taking ownership for review and backport.

[joedolson]

In 58036:

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.
Reviewed by joedolson.
Merges [57881] to the 6.5 branch.
Fixes #60876.

[joedolson]

Adding a comment to note that the Merge line in the commit message is incorrect; [57933] was merged back, not 57881. The svn:mergeinfo shows the right information, so it is backtraceable, but want to add that context for future contributors.