styling HTML5 <progress> according to admin user's chosen admin-color scheme

[pbiron]

By default, each browser applies their own styling to HTML5's ​<progress> element; e.g.,

• Chrome uses#7baaf7
• Firefox uses #06b025
• IE11 & Edge use #369aca
• I think Opera uses the same color as Chrome, but since I don't have it installed I can't be sure

Try the following ​fiddle in various browsers to see it in action.

It would be nice if the various /wp-admin/css/colors/xxx/colors.css contained rules to style HTML5's <progress> element [1] according to the admin user's currently selected admin-color scheme.

As far as I know, <progress> is not currently used in Core. However, the ​WordPress Importer Redux started by @rmccue plugin does.

[pbiron]

I tried the CSS described by ​HTML5 Doctor for styling <progress> but it doesn't seem to work.

[afercia]

@pbiron I'm not sure WordPress should provide CSS rules for things that are not used in core. If a plugin wants to use <progress>, then I'd say it should provide its own styling.

[pbiron]

Replying to afercia:

@pbiron I'm not sure WordPress should provide CSS rules for things that are not used in core. If a plugin wants to use <progress>, then I'd say it should provide its own styling.

I understand and agree with the general thought.

However, the plugin I mentioned is on track to eventually replace the official WordPress Importer plugin and I'm working on a rewrite of the Exporter (which is part of core) that will have a similar UI/UX using <progress>. So, this enhancement request is related to core.

[pbiron]

screenshot of importer rewrite

[pbiron]

For those who haven't seen the Importer revisions, I've attached a screenshot of the UI that uses <progress>.

[JDTrower]

Using the $highlight-color from the various colors.scss files, I created two pens on CodePen one with solid color progress bars while the other has stripped progress bars. Personally, I think if we decide to add this to core, that we should go with the solid. The CodePens have been tested in the latest versions of Chrome, Firefox, IE 11, Microsoft Edge, and Opera on a Windows 10 computer. I also tested on an iPhone iOS 10.3.3 in Safari. Obviously other OS/Browser combinations would need to be tested and feedback and changes are welcome. The solid progress bar pen shows squared progress bars while the stripped progress bar pen shows rounded progress bars.

If using the $highlight-color works for the progress bars, and the decision is to go ahead and add this to core ahead of the improved WP importer being released and the improved WP exporter being added to core, I can work on a patch to add the CSS to core. Otherwise, I can hold off.

Solid Progress Bar Pen - ​https://codepen.io/DTrower/pen/wqdGXQ
Stipped Progress Bar Pen - ​https://codepen.io/DTrower/pen/QMpJmK

[pbiron]

Replying to JDTrower:

Using the $highlight-color from the various colors.scss files

Thanx!!!

The only color scheme that I don't think $highlight-color works for is light...and that just might be a problem with that color scheme. For all the other color schemes, $highlight-color is the same as $menu-highlight-background but that is not the case in light. So, for light I think <progress> should use $menu-highlight-background.

Also, I'm not a fan of the black background for the unfilled part of <progress> in your pen, largely because none of the browser defaults uses it. I prefer a

I like the rest of your styling. I've updated my ​fiddle with the modified version of your styling.

If using the $highlight-color works for the progress bars, and the decision is to go ahead and add this to core ahead of the improved WP importer being released and the improved WP exporter being added to core, I can work on a patch to add the CSS to core. Otherwise, I can hold off.

For now, I think you can hold off. I'll include the styling from my fiddle in the importer & exporter rewrites and we'll see how it is received...and as they get closer to final, then we can consider whether to merge into core.

[melchoyce]

Tried one that borrows from core form styling, using @JDTrower's pen as a base: ​https://codepen.io/melchoyce/pen/zdjvXm

[mgelves]

Replying to pbiron:

For now, I think you can hold off. I'll include the styling from my fiddle in the importer & exporter rewrites and we'll see how it is received...and as they get closer to final, then we can consider whether to merge into core.

Hi @pbiron, considering you will include those changes in the "importer & exporter rewrites" can we mark as solved this ticket?