I've got a number of CSS styles in my site's stylesheet that use the following, or variations of:
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.0, #585858),
color-stop(1.0, #ACACAC)
);
background: -moz-linear-gradient(
center bottom,
#585858 0%,
#ACACAC 100%
);
My problem is that when it comes to validating the CSS using the W3C Validator, I get the following error:
Value Error : background -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac)) is not a background value : -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac)) -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac))
As far as I'm aware, the CSS is fine...is this a problem with the validator I should make the testing team I work with aware of?
You are using vendor specific experimental implementations of CSS properties. They aren't valid CSS.
One of the options for the validator will allow you to downgrade vendor extensions from errors to warnings in the reports (so if you are choosing to use them on a production site you can find any errors that aren't related to using non-standard extensions).
Related
In Visual Studio, I create a new ASP.NET project. It creates a basic construct that one can then go in and edit.
In the Site.css file, there are these calls, I'm guessing each is valid for a different type of browser:
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
Believe it or not, I can't seem to find a single entry on the entire Internet for -ms-linear-gradient, -o-linear-gradient, -webkit-gradient, or -webkit-linear-gradient.
I'm just trying to find some documentation on what sort of parameters each of these functions is expecting. If they are like javascript, then they accept multiple versions of parameters.
Would someone mind linking or posting a little documentation on here?
Primary Resource: http://www.w3.org/TR/css3-images/
Secondary Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Tips: https://css-tricks.com/css3-gradients/
Compatibility: http://caniuse.com/#feat=css-gradients/
According to CanIUse.com, you can use one ruleset without the vendor prefixes (i.e. just use linear-gradient)
ms: microsoft
o: opera
webkit: standards driven (think chrome and safari)
moz: mozilla/firefox
I've got the following piece of code online:
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
Which works fine.
Now I'm no CSS-expert but I notice that all of those are prefixed. Is it wise to add a prefix-less version as well? What would it be?
Is it wise to add a prefix-less version as well?
Yes, you should always provide the un-prefixed version of any prefixed CSS code you use.
What would it be?
In the case of gradients, the version you have is the same as the standard; just drop the prefix.
But note that there was also an earlier variant of the webkit syntax for gradients, which you may also want to specify if you want to support older webkit browsers.
You should also include a plain colour background as a fallback for unsupported browsers.
If you're in any doubt about these things, consult sites like CanIUse or MDN.
If you want to get really cross-browser compatible, you may also note the IE9 and earlier do not support CSS gradients at all (with or without prefix). The plain colour fallback will work, but if you want a gradient there are alternative solutions (my preferred option is generally CSS3Pie, but there are pure CSS options if you prefer; they're not nice though).
The unprefixed, W3C standard, name is linear-gradient.
I am always using the Ultimate CSS Gradient Generator. It works just perfectly.
Your example would result in:
background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%);
To future proof the linear gradient just add at the end of your existing code this:
background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
Like this when the browsers drop the prefix it will still be able to use the generic code.
I have a CSS stylesheet used in one of my web forms in an ASP.NET project.
I am working in Visual Studio 2008
Many times, when I make some change to it, it changes one of my CSS classes, resulting in some ugly borders.
For example: I make a change, save the stylesheet, continue working on some other page, then I notice the stylesheet needs to be saved again. I have to go back to the stylesheet, press Undo and then save it again.
I was curious about what changes, so I copied and compared the text before and after the undo, this is what changes:
EDIT: Right now, the moment I open the .css file by double clicking it in the solution explorer, it immidiately changes my css and needs to be saved. Extremely annoying.
What now follows is not my answer, but it is the best possible thing I could find, and now guess were I found it? Yes, right here in StackOverFlow
Here's the Link: Visual Studio (2012 and lower) deletes CSS properties
I really hope it helps
"
The existence of the "filter:" style is what's causing all of the "background-image:" styles to disappear except the last one listed. It's not that it's removing what it doesn't know, it's just removing all but the last "background-image" style listed. Must be Microsoft (intended) way of making filter and an MS specific background-image style play nicely together, however they didn't code it up very well. Definitely a MS VS defect. To repro, just right click in the CSS class that has code similar to this:
background-color: #EBEBEB; /* Fallback background color for non supported browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);
filter: progid:DXImageTransform.Microsoft.gradient(startCol
orStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
and then select "Build Style...". Then click "OK" without changing anything and watch it remove all but the last background-image left. Try changing the order of the "background-image styles and leave webkit last and then see for yourself.
You'll notice that if you remove the "filter:" style the problem goes away, however we need that (for this example) so the solution seems to be moving the "filter:" style above all the "background-image:" lines. Once you do that, it leaves them alone and the problem goes away.
Changing the above CSS to this seems to aleviate the problem:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
background-color: #EBEBEB; /* Fallback background color for non supported browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);
UPDATE: The workaround above only works for when VS applies formatting when you're using the "Build Style..." --> "Modify Style" dialog because I just saw it again with the fix above in place so it must be from somthing else.
"
Have you tried another Visual Studio version. Like 2010 or 2012.
Here the problem is that is reordering a few lines of code, but it seems here to be a problem from something else then Visual Studio. Try a reinstall. If you like VS style so much you could try a higher version. Advantages: A lot of bug fixed and lots of features added.
My recommendation: Try SublimeText2 for a while and see if you like it. I love it and it is a lot faster than VS. Give it a try. It worth.
I don't know your environment, so I can't say if something else is changing your CSS. If I were you, I would try opening the file with another editor, maybe two, just to find out if the blame is on Virtual Studio 2008.
If it turns out it is Virtual Studio's fault and you don't have an ultimate need to stick to using it, I would recommend Sublime Text. It's very powerful and it's free.
Try this:
From the toolbar,
Options->HTML Designer->CSS Styling, change "Auto Style Application" to "Manual Style Application"
In case anyone is as dense as me.
I had the same issue and it was because I had opened the css from the bin folder!
While using the W3 CSS validator i get this error
Value Error : background linear-gradient(top,#fefefe,#dddddd) is not a
background-color value : linear-gradient(top,#fefefe,#dddddd)
for this line:
background: linear-gradient(top, #fefefe, #dddddd);
as well as:
background: -webkit-linear-gradient(top, #fefefe, #dddddd);
and other lines when I try to use gradient.
The gradients works, but am I using the wrong syntax?
CSS3 has not been finalized yet, meaning the validator is likely not validating against the latest working draft of CSS3. Also, the validator will probably not validate vendor specific css like -moz-* or -webkit-*
see the most recent draft from w3 for the specification on using linear gradients.
BTW, I believe "top" in your code should be "to top" as the direction of the gradient. Example 12 from the draft:
Below are various ways of specifying a basic vertical gradient:
linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);
What version of CSS are you choosing on the validator? Is it set to CSS3? I've known the validator to throw weird errors when in fact there was nothing wrong with my code.
Try the following generator:
http://www.colorzilla.com/gradient-editor/
This will give you the correct syntax for all browsers.
The w3c's validator uses the recommendations of the w3c. linear-gradient has not become a recommendation from the w3c, and therefore it is not technically "valid". The other browser vendors have went ahead and implemented what is specified in the working draft (hoping that it won't change much from now until when the w3c finalizes the specification). This is why you need the vendor prefixes for it to work.
As long as gradients are not part of a final specification, the w3c validator will throw an error for this. don't rely on the validator for "experimental" features in draft state.
so, you're fine with your syntax, but beware of different implementations in browsers.
Value Error : width Parse Error - 90px)
width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px);
I am a web developer, I recently looked at GMAIL's new LOGIN PAGE preview and there is a Sign In button, I was really excited about its UI. I did some surgery of Page's CSS and found some properties like:
**background-color: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);**
Now can anyone please tell me how can I maximize the page's optimization for all popular browsers using these kind of CSS extension properties. I mean is there any reference link for these extensions or some other good stuff.
Thanks.
You should use google to find such information, a lot of it has been around since early 2010.
but here are some examples of browser specific gradient codes:
.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Taken from here.
To find out which browser supports which selector has a lot to with testing.
If you just need cross-browser-gradients, use http://www.colorzilla.com/gradient-editor/ (supports also IE6-9).
To find out, which technique is supported by which browser http://caniuse.com is a good resource.
There is a pretty comprehensive list of Mozilla's CSS extensions (or simply things that haven't been fully standardized yet) here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
There is also an attempt to list all vendor-specific CSS properties under http://webdesign.about.com/od/css/a/css-extensions.htm but it is probably pretty incomplete and outdated - this area changes fast. In the end, you should better look at CSS3. Either a feature is already listed there which means that vendor prefixes will likely be dropped soon - or it is not and then using this feature in a production webpage isn't recommendable (its meaning might change significantly or browsers might stop supporting it altogether).
This is a list that I keep on me all times as a point of reference.
I hope this is of some use to you
http://qooxdoo.org/documentation/general/webkit_css_styles