I just tried validating a large css file and ended up with 89 errors! To save time I tried using a cross browser gradient generating tool at color zilla. These generated gradients ended up causing about 90% of my errors:
background: rgb(56,115,160); /* Old browsers */
background: -moz-linear-gradient(top, rgba(56,115,160,1) 0%, rgba(55,107,147,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,115,160,1)), color-stop(100%,rgba(55,107,147,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(56,115,160,1) 0%,rgba(55,107,147,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(56,115,160,1) 0%,rgba(55,107,147,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(56,115,160,1) 0%,rgba(55,107,147,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(56,115,160,1) 0%,rgba(55,107,147,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3873a0', endColorstr='#376b93',GradientType=0 ); /* IE6-9 */
My errors read:
391 #nav Value Error : background Too many values or values are not recognized : -moz-linear-gradient(top,rgba(21,60,91,1 ) 0%,rgba(43,63,81,1 ) 100% )
392 #nav Value Error : background Too many values or values are not recognized : -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(21,60,91,1 ) ),color-stop(100%,rgba(43,63,81,1 ) ) )
393 #nav Value Error : background Too many values or values are not recognized : -webkit-linear-gradient(top,rgba(21,60,91,1 ) 0%,rgba(43,63,81,1 ) 100% )
394 #nav Value Error : background Too many values or values are not recognized : -o-linear-gradient(top,rgba(21,60,91,1 ) 0%,rgba(43,63,81,1 ) 100% )
395 #nav Value Error : background Too many values or values are not recognized : -ms-linear-gradient(top,rgba(21,60,91,1 ) 0%,rgba(43,63,81,1 ) 100% )
396 #nav Value Error : background Too many values or values are not recognized : linear-gradient(top,rgba(21,60,91,1 ) 0%,rgba(43,63,81,1 ) 100% )
397 #nav attempt to find a semi-colon before the property name. add it
397 #nav Property progid doesn't exist : DXImageTransform
397 #nav Parse Error DXImageTransform.Microsoft.gradient( startColorstr='#153c5b', endColorstr='#2b3f51',GradientType=0 );
The gradients look great across all browsers. Should I be concerned about these errors?
If so, what's my best option here?
You shouldn't be worried about those errors. Because they're vendor-specific they won't validate. I'd suggest not checking for vendor-specific prefixes next time you validate.
Don't expect your CSS to fully validate with a W3C validator. See http://na.isobar.com/standards/#_css_validation
Related
Thank you so much for taking your time to read this.
Heres the code the colorzilla gradient generator created for me:
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
**background**: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
Next to the line of the bolded background text, I get the following error:
Expected (<filter-function-list> | none) but found 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 )'
I hope someone will be kind enough to help a programming idiot such as myself.
Line
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
is incorrect, according to definition of filter property (1, 2), it can take following values:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"
None of them are responsible for gradient, so you can just remove this line from your code.
Also I don't know what is the purpose of double asterisks around **background**, but them break css code, so you probably should remove them too, and it will be like this:
.gradient {
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
background: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
}
.wide {
width: 100%;
height: 100px;
}
<div class="wide gradient">
</div>
I'm just kind of curious as to why I need so many different lines of CSS code to make my gradient compatible with most browsers. Isn't this something that should be universal?
Correct me if I'm wrong, but if something this simple is this not universal, I'm surprised that we don't need browser specific code for font-size, padding, margin, etc.
div.myQuestion {
width: 250px;
height: 100px;
background: #7d7e7d;
/* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
/* IE6-9 */
}
<div class="myQuestion"></div>
That's because gradients are complicated.
You don't need prefixes for padding and margin because they were defined in CSS 2.1, and are simple enough.
However, gradients were defined much later, in CSS3. Moreover, the syntax changed multiple times. The behavior also changed. Some people were still arguing relatively recently to change the space of colors in which the color stops are interpolated (it's not obvious when you take transparency into account).
Then, lots of people don't update they browsers. So they are stuck with these preliminary implementations.
Now most browsers have realized vendor prefixes are a nightmare and they decided to avoid using them for new properties.
Whats wrong with this? is raising a linter error:
.scrollbar-light > .scroll-element .scroll-element_size {
background: #dbdbdb;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
c+);
background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
}
I've tried adding quotes, same result.
The url is in multiple lines, change it to a single line
You are not supposed to break the dataURI into different lines. The following CSS should work:
.scrollbar-light > .scroll-element .scroll-element_size {
background: #dbdbdb;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
}
The CSS Lint shows only one warning:
Require all gradient definitions
Missing vendor-prefixed CSS gradients for Webkit (Safari 5+, Chrome), Opera 11.1+.
.scrollbar-light > .scroll-element .scroll-element_size {
Question: Can I add a softer CSS style to a cell back colour?
Issue: Gridview highlights in Red/Yellow/Green if something needs doing. As you can imagine this looks a bit garish at the moment.
What I want to do is add a soft edge around each cell. So I have two schools of thought but don't know enough about CSS to find the answer (I could be searching for the wrong keyword)
1) Add a soft edge around the cell colour
2) Create a 'soft padding' for each gridline that takes the edge of the colours like a mask.
The code!
CSS code I use at the moment to change the cell colour:
e.Row.Cells(iLoopColumn).BackColor = Color.Green
I have found colour gradient at www.colorzilla.com/gradient-editor but how do I merge the two, if that is the right route.
background: #f0b7a1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-8 */
Here's a solution that gives entire rows in a table a soft-edge effect. The key points are
Give the targeted rows a class so you can target them with the css
Apply the disply: block style to force colouring the row (it also
removes default padding between cells)
Use 2 different classes - one to apply the soft-edge effect, the
other to set the colour of the row.
Note: only tested with Google Chrome Version 32.0.1700.76 m
<!DOCTYPE html>
<html>
<head>
<style>
.softEdge
{
display: block;
box-shadow: inset 0 0 20px rgba(255,255,255,1.0);
}
.red{ background-color: #F00;}
.green{ background-color: #0F0;}
.blue{ background-color: #00F;}
</style>
</head>
<body>
<table>
<tr class='softEdge red'><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr class='softEdge green'><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr class='softEdge blue'><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
</body>
</html>
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.