WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#40940 new defect (bug)

Twenty Twelve uses invalid linear-gradient() syntax

Reported by: vrubleg Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.5
Component: Bundled Theme Keywords:
Focuses: Cc:
PR Number:

Description

Twenty Twelve theme uses such construction for gradients:

	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);

Notice this obsolete syntax:

linear-gradient(top, #f4f4f4, #e6e6e6)

And compare it to the specification:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

It has to use "to" before the direction. So, it has to be:

linear-gradient(to bottom, #f4f4f4, #e6e6e6)

or like this:

linear-gradient(180deg, #f4f4f4, #e6e6e6)

It works now just because browsers parse this property from prefixed linear gradient, and prefixed linear gradient allows to omit "to", and it is actually parsed as "from". It will stop work when support of obsolete prefixed properties will be removed. And we have to replace all "top" to "to bottom" or to "180deg".

Change History (2)

#1 @vrubleg
2 years ago

MDN even provides a similar example:

.grad { 
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

Yeah, and maybe it will be better to remove all prefixed versions. All browsers support it for years, even IE10 and IE11 support it. No any reason to keep this obsolete stuff.

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

#2 @vrubleg
2 years ago

Also I figured out that this huge style isn't used at all:

.comments-area article header h4 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
	padding: 0.428571429rem 0.857142857rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	font-weight: normal;
	color: #fff;
	background-color: #0088d0;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #009cee, #0088d0);
	background-image: -ms-linear-gradient(top, #009cee, #0088d0);
	background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
	background-image: -o-linear-gradient(top, #009cee, #0088d0);
	background-image: linear-gradient(top, #009cee, #0088d0);
	border-radius: 3px;
	border: 1px solid #007cbd;
}

So, linear gradients are really used only for buttons (in 3 places). That's it.

Also the author forgot to put "button," here:

.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {

It has to be just after the ".menu-toggle,", like in the next styles:

.menu-toggle:hover,
.menu-toggle:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {

And:

.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {

And the last. In the first style for buttons this part is useless:

.bypostauthor cite span

It is overwritten completely in further CSS rules which reset all values, remove shadow, etc. So, the same thing could be done without this unnecessary redundancy.

Note: See TracTickets for help on using tickets.