Page MenuHomePhabricator

Aurora skin uses data URIs for gradients instead of using CSS gradients
Open, NormalPublic

Description

They should be using CSS gradients instead. So far, the ones that I found that use data URIs currently are: #head, #foot, #full-search. There's probably some more that I'm unaware of.

jack added a comment.Jan 15 2017, 1:51 PM

There are four gradient-* images in /skins/Aurora/resources/images, and four respective CSS rules in /skins/Aurora/resources/aurora.css which use 'em:

  • gradient-body.png (CSS rule which uses this: #content-inner)
  • gradient-footer.png (CSS rule: #foot)
  • gradient-header.png (CSS rule: #head)
  • gradient-input.png (CSS rule: #full-search)

(As a slight factual correction: yes, the end-user gets served data URIs by ResourceLoader. However the source CSS file — /skins/Aurora/resources/aurora.css — uses the ResourceLoader /* @embed */ technique instead of directly embedding a data URI. In practise this doesn't matter much unless you're a developer working with these files. I know of one notable MediaWiki-based site where the developers do embed direct data URIs into the .css files and I think it's somewhat confusing, but that's just my $0.02 on this.)

Any thoughts on this @isarra? btw, here's the gradients that I managed to create after converting them to CSS (the #head and #foot needs borders but the gradients can be modified again to keep the psuedo-border, or we can also use the border property too)

aurora.css
#head {
	background: #737373;
	background: -moz-linear-gradient( top, #737373 0%, #2a2a2a 100% );
	background: -webkit-linear-gradient( top, #737373 0%, #2a2a2a 100% );
	background: linear-gradient( to bottom, #737373 0%, #2a2a2a 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#737373', endColorstr='#2a2a2a', GradientType=0 );
}

#content-inner {
	background: #f4f4f4;
	background: -moz-linear-gradient( top, #f4f4f4 0%, #e6e6e6 100% );
	background: -webkit-linear-gradient( top, #f4f4f4 0%, #e6e6e6 100% );
	background: linear-gradient( to bottom, #f4f4f4 0%, #e6e6e6 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e6e6e6', GradientType=0 );
}

#foot {
	background: #555555;
	background: -moz-linear-gradient( top, #555555 0%, #282828 100% );
	background: -webkit-linear-gradient( top, #555555 0%, #282828 100% );
	background: linear-gradient( to bottom, #555555 0%, #282828 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#282828', GradientType=0 );
	border-top: 1px solid #636363;
}

#full-search {
	background: #125a8f;
	background: -moz-linear-gradient( top, #125a8f 0%, #156cac 100% );
	background: -webkit-linear-gradient( top, #125a8f 0%, #156cac 100% );
	background: linear-gradient( to bottom, #125a8f 0%, #156cac 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125a8f', endColorstr='#156cac', GradientType=0 );
}
lewiscawte triaged this task as Normal priority.Mar 13 2017, 1:45 PM