WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#16461 closed task (blessed) (fixed)

CSS3 gradient replacements for images and rework existing

Reported by: cyberskull Owned by: ocean90
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.1
Component: Performance Keywords: has-patch
Focuses: Cc:

Description

I've created a patch that replaces the images used in colors-classic.dev.css with the correct CSS3 gradients understood by WebKit, Gecko et al.

It sets up the gradients with a fallback to the image if the gradient is not understood, thus it will still look pretty with IE or other browsers that don't understand gradients.

Other work done is a small amount of code cleanup, just a bit of housekeeping.

Tested in Firefox 3.6.13, Safari 5.0.3, WebKit Nightly, Opera 10.63 on Mac OS X 10.5 PPC. It all worked ok for me.

Attachments (7)

colors-classic.dev.diff (19.1 KB) - added by cyberskull 3 years ago.
diff file of the changes to colors-classic.dev.css
colors-classic.dev.css (38.0 KB) - added by cyberskull 3 years ago.
The updated CSS file itself.
big-css-patch.diff (26.9 KB) - added by cyberskull 3 years ago.
Should be the complete CSS gradient replacement.
16461_login.patch (1.1 KB) - added by ocean90 3 years ago.
Gradient update for login.css
16461-head_footer_favorite.patch (5.5 KB) - added by ocean90 3 years ago.
Gradient update in fresh and classic stylesheet for head, footer and favorite.
16461.complete.patch (27.5 KB) - added by ocean90 3 years ago.
16461.patch (65.5 KB) - added by ocean90 2 years ago.

Download all attachments as: .zip

Change History (55)

cyberskull3 years ago

diff file of the changes to colors-classic.dev.css

cyberskull3 years ago

The updated CSS file itself.

comment:1 ramoonus3 years ago

IE9 supports gradients
if it works in opera 10 it works in IE9

comment:2 cyberskull3 years ago

Should this patch land I will port these changes to the rest of the admin CSS.

comment:3 nacin3 years ago

  • Keywords ui-feedback added
  • Milestone changed from Awaiting Review to Future Release

comment:4 follow-up: nacin3 years ago

We'd also want to do this in colors-fresh. Ideally the files should be pretty closely synced.

comment:5 in reply to: ↑ 4 cyberskull3 years ago

Replying to nacin:

We'd also want to do this in colors-fresh. Ideally the files should be pretty closely synced.

That is easy enough to do. I've made the CSS-equivalent gradients for almost all the gradient images in wp-admin/images. From there it's just a matter of copy and paste.

If I do that, do I submit them in a separate ticket?

comment:6 follow-up: nacin3 years ago

  • Summary changed from CSS gradient replacements for images in colors-classic to CSS gradient replacements for images in colors stylesheets

Here is fine. We're indeed looking to replace gradient images with CSS gradients.

cyberskull3 years ago

Should be the complete CSS gradient replacement.

comment:7 in reply to: ↑ 6 cyberskull3 years ago

Replying to nacin:

Here is fine. We're indeed looking to replace gradient images with CSS gradients.

OK. I have attached a file with what is hopefully all the gradient images used in wp-admin/images replaced with CSS. Please inform me if I missed anything. ;)

comment:8 cyberskull3 years ago

I did the same for the admin bar in trac #16726.

comment:9 scribu3 years ago

  • Keywords ui-feedback removed
  • Milestone changed from Future Release to 3.2

comment:10 scribu3 years ago

  • Component changed from Administration to Performance

Surprisingly, patch still applies cleanly.

@cyberskull: please make patches relative to the wp root directory, not relative to wp-admin/css/ etc.

comment:11 scribu3 years ago

I was thinking of removing the images altogether, but I guess there's no rush.

comment:12 follow-up: ocean903 years ago

We should remove them. I have read an article that some browsers will load the image too, which will be no positive perfomance, but I can't find the article anymore.

comment:13 in reply to: ↑ 12 cyberskull3 years ago

Replying to ocean90:

We should remove them. I have read an article that some browsers will load the image too, which will be no positive perfomance, but I can't find the article anymore.

That behavior is being phased out, at least in WebKit. So no need to worry.

comment:14 ocean903 years ago

  • Cc jane added
  • Keywords needs-refresh ui-feedback added; has-patch removed
  • Summary changed from CSS gradient replacements for images in colors stylesheets to CSS3 gradient replacements for images and rework existing

I want to use this ticket to rework all existing CSS3 gradients to support more browsers (see #17222) and to have one standard code for all gradients.

So their are two questions:

  • Do we want the filter code for the IE < 9?
  • Should the image still be there as fallback or is a color, like we did for the admin bar, enough?
Last edited 3 years ago by ocean90 (previous) (diff)

comment:15 follow-up: ocean903 years ago

  • Keywords dev-feedback added

My suggestion based on http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

background-color: #xxx; /* Fallback */
background-image: -ms-linear-gradient(...); /* IE10 */ 
background-image: -moz-linear-gradient(...); /* Firefox */ 
background-image: -o-linear-gradient(...); /* Opera */ 
background-image: -webkit-gradient(...); /* old Webkit  */ 
background-image: -webkit-linear-gradient(...); /* new Webkit */ 

comment:16 scribu3 years ago

+1 from me.

comment:17 in reply to: ↑ 15 azaozz3 years ago

Replying to ocean90:

+1 from me too. Perhaps we can also add the standard CSS3 property at the end. Was thinking: didn't CSS3 offer a way to define a style property once and then use a reference to it? Not sure if that's supported in any browser yet (or maybe it was dropped).

comment:18 ocean903 years ago

  • Owner set to ocean90
  • Status changed from new to accepted

comment:19 follow-up: aaroncampbell3 years ago

+1 and I'd be happy to see the fallback be a color rather than an image. Getting rid of images also fits with the "make 3.2 faster" mantra.

Personally I'd like to see the proposed standard in there too (background-image: linear-gradient(...);), but I honestly have a hard time justifying it since as far as I know no browser currently supports it.

comment:20 scribu3 years ago

Similar: #17226

comment:21 in reply to: ↑ 19 azaozz3 years ago

Replying to aaroncampbell:

Personally I'd like to see the proposed standard in there too (background-image: linear-gradient(...);), but I honestly have a hard time justifying it since as far as I know no browser currently supports it.

True, but that makes it more futureproof. When we introduced border-radius none of the browsers supported the proposed standard, now some of the latest browsers support it (and won't work without it like Opera 11).

comment:22 cyberskull3 years ago

The patch I submited doesn't have the -o or -ms versions (as Opera only announced the feature a week or two after I submitted it). As for the -ms, I can toss it in. The prefixless version is included in the patch.

I always include the standard version when I do CSS coding, as then I don't have to re-edit the CSS when it is adopted by someone. The only times I change the standard version is to match what I am doing in the others or if the standard was revised.

I'll update the patch this week to include the prefixes for all the major layout engines then.

I have a question, is there a consensus on whether to keep the images or not?

comment:23 ocean903 years ago

  • Keywords ui-feedback dev-feedback removed

There is already no image in the head, footer, login head and admin bar, so get rid from the other images too.

#16726 has a patch for the admin bar with the new code for gradients.

ocean903 years ago

Gradient update for login.css

ocean903 years ago

Gradient update in fresh and classic stylesheet for head, footer and favorite.

ocean903 years ago

comment:24 ocean903 years ago

16461.complete.patch and 16461_login.patch include now my proposed standard (complemented with the proposed W3C Markup).

Removing the images is harmful for plugins which uses core images.

comment:25 scribu3 years ago

The images that would be removed should not be used by plugins directly. They should just use the 'button' class etc.

Last edited 3 years ago by scribu (previous) (diff)

comment:26 ocean903 years ago

  • Keywords has-patch added; needs-refresh removed

comment:27 aaroncampbell3 years ago

I'm definitely for removing the images. If we don't use them we might as well shrink the package site. Like scribu said, people should be using the css classes not the images directly.

comment:28 jane3 years ago

  • Milestone changed from 3.2 to Future Release

Past freeze. UI style update hit some of this along way. Will punt instead of close so can review anything else that can be improved here in 3.3.

comment:29 ocean903 years ago

  • Keywords needs-refresh added

comment:30 hebbet3 years ago

editor menu: #17720 (has patch)

btw. it it possible to make arrows with css, so we could replace this:
http://core.trac.wordpress.org/browser/trunk/wp-admin/images/menu-arrow-frame.png?rev=17871

example of imageless arrow:
http://helpdesk.wpseo.de/

comment:31 ocean903 years ago

  • Keywords 3.4-early needs-patch added; has-patch needs-refresh removed

comment:32 ocean903 years ago

  • Keywords 3.4-early removed
  • Milestone changed from Future Release to 3.4

comment:33 follow-up: ocean903 years ago

Related: #19233

Quote by duck:

Per http://dev.w3.org/csswg/css3-images/#linear-gradient-syntax should the "proposed W3C Markup" rule use "to top"?

comment:34 in reply to: ↑ 33 cyberskull3 years ago

Replying to ocean90:

Related: #19233

Quote by duck:

Per http://dev.w3.org/csswg/css3-images/#linear-gradient-syntax should the "proposed W3C Markup" rule use "to top"?

I am personally against using that syntax. More syntax means it will be more prone to breaking.

comment:35 sabreuse3 years ago

  • Cc sabreuse@… added

comment:36 DrewAPicture3 years ago

  • Cc xoodrew@… added
  • Keywords has-patch added; needs-patch removed

comment:37 nacin2 years ago

  • Keywords 3.5-early commit added
  • Milestone changed from 3.4 to Future Release

Let's do this 3.5-early. Looks good.

comment:38 nacin2 years ago

  • Milestone changed from Future Release to 3.5

It's time for this one. Is 16461.complete.patch everything, and ready to go?

We should be mindful to keep any images for which plugins may have a legitimate use.

comment:39 helenyhou2 years ago

  • Keywords needs-refresh added

Patch needs a pretty serious refresh. Would also like to see prefixed properties use the "koop-shiny" method of spacing from now on.

comment:40 sabreuse2 years ago

It turns out that a lot of this was done in the 3.2 refresh, and this ticket just wasn't referenced at that time: [17862] [17924] and possibly a couple of small bits and pieces that I haven't tracked down yet.

Last edited 2 years ago by sabreuse (previous) (diff)

comment:41 nacin2 years ago

  • Type changed from enhancement to task (blessed)

comment:42 ocean902 years ago

  • Keywords 3.5-early commit removed

Working on a new patch.

comment:43 follow-up: ocean902 years ago

After a chat with helenyhou and sabreuse our prefred syntax is:

.grad-to-top {	
	background: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(top, #fff, #000);
	background-image:    -moz-linear-gradient(top, #fff, #000);
	background-image:      -o-linear-gradient(top, #fff, #000);
	background-image: linear-gradient(to bottom, #fff, #000);
}

.grad-to-bottom {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(bottom, #fff, #000);
	background-image:    -moz-linear-gradient(bottom, #fff, #000);
	background-image:      -o-linear-gradient(bottom, #fff, #000);
	background-image: linear-gradient(to top, #fff, #000);
}


.grad-to-bottom-with-color-stops {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #000));
	background-image: -webkit-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:    -moz-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:      -o-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image: linear-gradient(to top, #fff 0%, #000 100%);
}

http://jsfiddle.net/wFKYm/1/


References:

Last edited 2 years ago by ocean90 (previous) (diff)

comment:44 in reply to: ↑ 43 azaozz2 years ago

Replying to ocean90:

Small correction: seems that both the -moz- and -o- rules don't work when they are after the old-style -webkit- rule, so the order should be:

.grad-to-top {	
	background-color: #fff;
	background-image: -moz-linear-gradient(top, #fff, #000);
	background-image:   -o-linear-gradient(top, #fff, #000);
	background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000);
	background-image: -webkit-linear-gradient(top, #fff, #000);
	background-image:   linear-gradient(to bottom, #fff, #000);
}
Version 0, edited 2 years ago by azaozz (next)

comment:45 dd322 years ago

Small correction: seems that both the -moz- and -o- rules don't work...

Glad to see it was just a typo. However, for reference, I thought I'd post this link, short story: Opera is aliasing -webkit- to -o- prefixes in the next release, they've got a suggested casscade for the properties listed in the help document related to it, and strangely enough, they're suggesting using the same order as suggested above: http://dev.opera.com/articles/view/opera-mobile-emulator-experimental-webkit-prefix-support/#onlywebkit

comment:46 ocean902 years ago

@azaozz: Oh, sry. thanks for fixing it.

@dd32: Thanks for the info and the link.

I think I get the patch ready by the end of the day.

ocean902 years ago

comment:47 ocean902 years ago

  • Keywords needs-refresh removed

Gradients with 16461.patch.

Changed files:

  • wp-includes/css/editor.dev.css
  • wp-includes/css/admin-bar.dev.css
  • wp-includes/css/wp-pointer.dev.css
  • wp-admin/css/colors-classic.dev.css
  • wp-admin/css/colors-fresh.dev.css
  • wp-admin/css/install.dev.css
  • wp-admin/css/wp-admin.dev.css

Obsolete images:

  • wp-admin/images/blue-grad.png
  • wp-admin/images/button-grad-active.png
  • wp-admin/images/button-grad.png
  • wp-admin/images/gray-grad.png
  • wp-admin/images/white-grad-active.png
  • wp-admin/images/white-grad.png

comment:48 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In [21459]:

Replace last remaining gradients with css, standardize the gradient css cascade, props ocean90, fixes #16461

Note: See TracTickets for help on using tickets.