Linear gradients overwritten

• 

  codereadrblog · Member · Mar 1, 2012 at 6:49 pm

  • Copy link
  • Add topic to favorites

  Hello –

  WordPress is automatically rewriting and invalidating my linear gradient CSS.

  My code:

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51,51,51,0.98)), to(rgba(0,0,0,0.98)));
background-image: -webkit-linear-gradient(top, rgba(51,51,51,0.98), rgba(0,0,0,0.98));
background-image: -moz-linear-gradient(top, rgba(51,51,51,0.98), rgba(0,0,0,0.98));
background-image: -ms-linear-gradient(top, rgba(51,51,51,0.98), rgba(0,0,0,0.98));
background-image: -o-linear-gradient(top, rgba(51,51,51,0.98), rgba(0,0,0,0.98));
background-image: linear-gradient(to bottom, rgba(51,51,51,0.98), rgba(0,0,0,0.98));

  The CSS WordPress delivers to the blog:

  background-image:linear-gradient(tobottom,rgba(51,51,51,0.98), rgba(0,0,0,0.98));

  Notice that “tobottom” is one word, invalidating the code. I attempted to use the standards-based option as defined in the current Editor’s Draft of the W3C spec: (http://dev.w3.org/csswg/css3-images/#linear-gradients)

  
background-image: linear-gradient(270deg, rgba(51,51,51,0.98), rgba(0,0,0,0.98));


  This resulted in WordPress delivering this CSS to the blog:

  
background-image: 0;


  Please detail the exact syntax required to enable linear gradients on a WordPress.com blog. Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  codereadrblog · Member · Mar 1, 2012 at 6:50 pm

  • Copy link

  I should also add that I attempted to replace my rgba values with standard hexadecimal notation (even though it shouldn’t matter), and the problem still occurs.

• 

  designsimply · Member · Mar 2, 2012 at 8:09 pm

  • Copy link

  I’m so sorry but linear gradients are not supported for the Custom Design upgrade on WordPress.com yet. But it is a planned update!

  Please keep in mind that linear gradients are not even finalized in the CSS3 spec (you linked to a developer editor draft) and the only support for linear gradients in browsers so far is for vendor prefixed versions of the property and not the actual “linear-gradient” property ( source: http://caniuse.com/#search=linear-gradient ). Even though CSS3 itself is not yet an approved spec and has varying support in the most recent versions of browsers, we have plans to update the WordPress.com CSS editor to be able to handle advanced properties like linear gradients as soon as we can.

• 

  designsimply · Member · Mar 2, 2012 at 8:19 pm

  • Copy link

  As a side note, I was actually able to save the following linear-gradient example you posted:

  #header {
  background-image:linear-gradient(270deg,rgba(51,51,51,0.98), rgba(0,0,0,0.98));
  }

  It just seems it’s not supported by any browser yet, and the WordPress.com editor doesn’t have support for linear-gradient vendor prefixes at this time.

  I see your point about “to bottom” becoming “tobottom” and I’ve noted that as something for our developers to check as soon as they are able to work on adding more extensive CSS3 support to the WordPress.com Custom Design upgrade.