I have tried to optimize my CSS code by using shorthand , specifically with the background property , the problem occurs when I want to incorporate the background-size property in the shorthand. Please I would appreciate your help since I was investigating and I couldn't find the solution, I don't know if it has much to do with the order in which the values go inside the shorthand.
This is the HTML
<p><a href="mailto:[email protected]">JEAN LEON: Director Comercial.</a></p>
<p><a href="mailto:[email protected]">SHEYLA RIOS: Jefa de Ventas.</a></p>
Here the extended code without using shorthand (validated by the W3C):
a[href^="mailto"] {
background: url("../imagenes/mail.png") left center no-repeat;
background-size: 1.5em;
padding-left: 40px;}
https://jigsaw.w3.org/css-validator/
Using Shorthand returns Error.
a[href^="mailto"] {
background: url("../imagenes/mail.png") 1.5em left center no-repeat;
padding-left: 40px;}
Currently the property
background
accepts the following values:Starting from
CSS3
, it has been proposed to add the propertiesbackground-size, background-origin y background-clip
. Here you can find the draftThe property
background-size
is not yet a valid value that should be set using the shortcutbackground
. That is, it can be set, it will work ( in newer browsers ) but it's not standard yet, so it's not valid.References:
MDN - CSS > Background > Specifications