browser error while declaring CSS3 variables, Expected RBRACE, This rule looks for recoverable syntax error - html

I am trying to use variables in my CSS3 file, I have used following code
:root{
--nvc-theme: green;
--nvc-themelite: grey;
}
this is the css I am using to declare two variables in my project but when I compile CSS with csslint it is showing error
ERROR: Expected RBRACE at line 17, col 3. This rule looks for recoverable syntax
errors. (errors) Browsers: All
and it is also showing
WARNING: Rule is empty. Rules without any properties specified should be removed.
(empty-rules) Browsers: All
I know this warning because in the root element I have used only variables I didn't declare any css properties just variables so it is showing a warning, but how can I overcome this situation. Any solution helps a lot. Thank you

Given an outstanding issue on github for this problem, and another issue asking "Is anyone here?" with no response from the devs and no real way to merge fix in, it doesn't seem this will be fixed any time soon.
So your only real option is to migrate to a different lint such as stylelint

Related

Unescaped '#' characters in a data URI body deprecated; How to find in project?

I'm getting this warning from Chrome in my Angular 2+ application. Ok, so how am I supposed to go about finding where this issue is occurring in my project with so many data URIs? Wait for it to fail, I suppose? Yikes.
[Deprecation] Using unescaped '#' characters in a data URI body is
deprecated and will be removed in M67, around May 2018. Please use
'%23' instead. See
https://www.chromestatus.com/features/5656049583390720 for more
details.
Seems like they should point to the source somehow. Any ideas?
If you have inline SVG, look at color references and replace #rrggbb with rgb(R, G, B). It should help.
Source: https://github.com/stylus/stylus/issues/2379
In my situation, I noticed that the message was fired when filling a input. So I came up with jquery-validation, disabling it didn't fire the message.
Finally I found out that it is in the bootstrap framework. When an input is validated, a checkbox or cross is added to the HTML. This is done base on a SVG, which holds an attribute fill='#3cb85c'
The hashtag in the fill attribute triggers the message in my situation! Changing the # to %23 fixes the issue.

Polymer-IE11 compatibility, new get keyword before function name

My website works fine in Chrome.
I am trying to get it working in IE11 as well.
But see an error message at this line of code.
When i go in, i see that it is due to below line of code in paper-button element.
From past experience i know that polymer doesn't work in IE11 if i don't use colon separator and use function keyword to declare a function in javascript. e.g. as shown below.
_onDownKey: function(event) {}
I am using Polymer 1.9.3
Need guidance on understanding this new get keyword.
What is this new get keyword in front of the function name, what it does and how to make polymer elements compatible with IE11 as well if possible ?
Information about get can be found here. Obviously IE is not able to use this, thats why you have to transpile your code from es6 to javascript/es5. You can use polymer build for this. Also if you transpiled your code and if you have included the webcomponents polyfill it will work in IE11. Hope this helps!

Using simple Razor code inside JavaScript

I'm using Visual Studio 2012 RC with ASP.NET MVC 4. This is driving me crazy, and I know this has been asked several times, but I can't find a solution for MVC 4, and no unified solution for MVC 3. I must be missing something...
All I want to do is output a c# variable in a block of javascript. This should be trivial, and is a necessity to be able to do, but despite all of the workaround/hacks I've tried, nothing will get rid of the "Conditional compilation is turned off " error. This would be fine if it was just a warning, but it's an error. If I close the view inside of visual studio it compiles and works fine, but if it's open I can't even compile, and that isn't acceptable.
I've tried using /*#cc_on #*/ and /*#("#cc_on #")*/ to turn conditional compilation on to no avail. Doing #(serverVar) gives an invalid character error (#). I've also tried #Html.Raw and several other things.
The only way I include razor code without an error is if the razor code is inside quotes, which works well for strings, but not for int and bool.
#{
int serverVar = 5;
}
<script>
var obj = { jsVar: #serverVar };
</script>
I've searched everywhere for this, and can't find an agreed upon solution. Am I missing something? Any help is greatly appreciated.
Use JavaScriptModel ( http://jsm.codeplex.com )
This way you can transfer easily server-side variables to javascript without annoying inline javascript.
You would just have to write the following code in your controller action:
this.AddJavaScriptVariable("VariableNameInJavaScript", serverVar);
If you want several variables to be set on every page use a filter like it's documented here:
http://jsm.codeplex.com/wikipage?title=Use%20JavaScriptModel%20in%20a%20global%20filter&referringTitle=Documentation
Edit:
If you have a lot of variables, you should categorize them and Add them in different literals.
E.g.
this.AddJavaScriptVariables("Config.UserId", userId,
"Config.SomeOtherConfig", someOtherConfigValue,
"MyGoogleMapController.Pushpins", GetMapPushpins());
Umm I guess there is no way to get rid of this error, and since it still compiles everything is just fantastic.
I solved it by using below trick.
var supportedNumber = Number(#TempData["supportedNumber"]);

Missing dependencies in Mootools' OverText?

http://jsfiddle.net/AB5LK/2/
For the life of me, I can't get OverText working in the above example. I overrode the JSFiddle Mootools libraries (since they contain everything by default!) and inserted the ones I am using on my website, and have determined that the libraries are the ones causing the problems.
I use a slimmed-down MooTools library.
It looks as though while I selected OverText in the "More builder", there is still something missing in my libraries that causes the overtext to only become a label, and not a proper overtext.
Short of trial-and-error, does someone know which feature I am missing that will turn this overtext from a label on the right of the input box, to a proper OverText?
perhaps you need to reconsider your 'slimming down':
this.getStyle is not a function
[Break On This Error] return(d&&d.returnPos)?c:this.setStyle...urn this.getStyle("display")!="none";
Removing Element.Style is just silly, unless you're using MooTools for server side js like node and have no DOM.

IE8 claims my page has an error, firefox doesn't, and I can't find any error. Help!

This is something of a follow-up question to my question here. You can find the HTML source in a text file here.
When I load that page in IE8, I get the "Done, but with errors on page." message in my status bar. The detail view shows
Expected identifier
sms Line: 147
Code: 0 Char: 67
and I see absolutely no problems anywhere near there. In IE8, the page is still behaving erratically w/r/t the randomly losing focus as mentioned in my other question.
When I load the same exact page in Firefox (using Firebug) the console shows no errors and the page works perfectly. Any thoughts on what's going on here? This is driving me nuts and making me want to give up on even trying to write an IE friendly page.
Edit: Thanks for all the comments! This page is written as a JSP, so I edit in Eclipse. I found an Eclipse warning about the onblur event for the username field. I switched it from
onblur="alert(document.activeElement + ' class:' + document.activeElement.class)"
to
onblur="alert(document.activeElement)"
and that made the bizarre IE page error vanish. I had been trying to give more info (namely, its CSS class) about specifically which element is stealing focus - to my own detriment, apparently, since Javascript was interpreting the '.class' part in the Java(script) sense there is no class property (I should have been using className).
And, no, the page doesn't validate. But the errors were mostly/all ones that just didn't make sense to me, such as
Line 14, Column 41: Attribute "LANGUAGE" is not a valid attribute. Did you mean "language"?
But I'm still stuck trying to figure out why, as I enter text in the username & password fields, focus randomly switches to a div (working on figuring out which div currently).
Edit 2: It's the div between the two "global nav" comments, at the very top of the body. Still no idea why it's happening, though.
The problem appears to be the line
onBlur="alert(document.activeElement + ' class:' + document.activeElement.class)"
when you take off the ".class" it loads without issue. Are you sure ".class" is valid?
Does your HTML validate?
I agree, IE does a terrible job giving developers information about page errors. I only support IE on the principle that users shouldn't have to download twenty-odd browsers to go to their favorite websites. Web developers have a responsibility to make it "just work". Browser developers have a responsibility to communicate with each other and conform to standards.
Run your javascript through JSLint. You probably have a missing semicolon somewhere or a comma at the end of an object property that shouldn't be there. Firefox is more forgiving than IE when it comes to those types of syntax errors.
Edit: The inline js in your page seems to be OK. Check the contents of qm_scripts.js.
When I remove the .class from document.activeElement.class the error goes away.
The real issue is that you need to be able to debug your JS in IE 8, correct? There is a tool for that! :)