I have a line like the following in my .css:
background-image: url(#{resource['gfx/logos.png']}),url(#{resource['gfx/background.png']});
And the above code works perfectly, but NetBeans 4.0 marks lines with #{} code in them as errors. When I am using JSF that allows dynamic css, is there a way I can configure NetBeans to not consider these lines errors? When I do introduce an error it makes it easy for me to be unaware of the error because of these false errors.
Given the fact that this is actually a CSS validation error which is caused because the url() isn't in the right syntax for an URI, enclosing the entire EL expression in doublequotes should theoretically solve the problem.
Thus, so:
background-image:
url("#{resource['gfx/logos.png']}"),
url("#{resource['gfx/background.png']}");
Related
I am using Visual Studio Code for a pure HTML, JavaScript and CSS project. I imported a CSS file from an old project that was provided to me by a colleague and a few of the lines in the CSS file are marked as having an error in VS Code, such as this one:
.some-class .some-sub-class {
padding-left: calc(~"50px + .75rem");
}
VS Code notes two errors here:
) expected (squiggly line under the tilde)
at-rule or selector expected (squiggly line under the closing bracket)
I was able to determine that both errors were caused by the tilde ~ character, since removing it suppresses the errors, but I need the tilde for those CSS rules.
The file is just a .css file if that's relevant, and simply closing it doesn't show any error anymore.
Is there an extension I should add, remove, or configure to make that error go away?
here are the extensions I have installed so far. The issue was happening before I installed any of them:
This is not valid CSS format, this seems to be LessCSS, which means you'd have to select proper filetype: Less.
I hope you're gonna be able to help me. I am using VS Code and "Live Sass Compiler" by Ritwick Dey.
I was coding a grid and tried to add a background-image in scss to seperate items. Nothing fancy actually.
Grid
For example:
.item-2 {
grid-area: assessTheRightTime;
background-image: url(images/Weight\ loss.jpg);
}
When I saved after I uploaded all the images, I got an error notification. So in fact the code from scss did not transfer to css sheet - and to the browser.
When I went to generated style.css and put there directly the lines of code, it worked out automatically.
Btw The file path is correct
*UPDATE: It works for an image with a single name like: "weight".
What if an image file's name is "Weight Loss" ? Does scss requires some specific syntax? I added %20 between "Weight and Loss" and it works. Is it obligatory or is there any way around? I mean what's going on with that :)
background-image: url(images/Weight%20loss.jpg);
So how to apply properly an image name with space character ? I am confused as scss bases on css syntax.
Am I missing something ? I spent a couple of hours trying to spot the problem. Thank you in advance :)
Error notification VS Code
2nd question: Is it normal that VS Code shows tons of Errors & Warnings on CSS sheet, being aware that it's compiled from scss ? I know that CSS doesn't accept some syntax (for example square bracket) that scss generates but what's the truth?
Errors & Warnings
Thank you, Maciej
I think it encountered errors because your file name has spaces. It may have something to do with the missing apostrophe. Try adding "" or '', for example url("images/Weight loss.jpg"). References: w3schools.com/cssref/pr_background-image.asp
As for the second error, its probably because of the linter. What is your project's linter settings? Have you configured VSCode to lint/prettify on save? github.com/prettier/prettier-eslint
I have a website, where we are using a tool to minimize and compress css code. It is called JCH, it is a plugin for Joomla, I think you can use it on Drupal too. I have an issue this css code:
#sp-user3 .help-menu .nav.menu :not(.user-menu){
display: inline-flex;
}
It is being converted to:
#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}
As you can see ".nav.menu :not" is converted to ".nav.menu:not" which causes the css rule to not be applied as intended.
This can be an error on the tool. How can i rewrite it or add a character to avoid that confusion? any ideas are welcome.
This is indeed a bug, and this is not the first time I encountered it.
The StackSnippet editor on this site used to have the very same bug in its Tidy button. See my bug report. It was fixed soon after.
So you can file a bug report with JCH and then wait for it to be fixed as well.
Meanwhile, you can insert a * before the : in the CSS as a workaround.
:not() is a shorthand for *:not() anyway, so you won't be changing the meaning of the selector, just writing out in full what was implied.
It's a definitely tool issue, web minifiers like Minify generating correct code.
#sp-user3 .help-menu .nav.menu :not(.user-menu){display:inline-flex}
I'm testing stylus and I'm surprised that the compiler transforms almost everything I type like:
mivar = blackredgrenn
body
margin 0f
background-color #323242342332423123
werewers
color red
&:first-child
color mivar
whatever assa hj
into
body{margin:0 f;}
body background-color #323242342332423123 werewers{color:#f00;whatever:assa hj}
body background-color #323242342332423123 werewers:first-child{color:blackredgrenn}
Is this the way it should work? is there any option to make the compiler to stop and show error like in less? I'm compiling with grunt, is the common practice to run afterwards csslint to spot there the errors? what alternative do we have?
No, there is no option to show errors, as this code is not an error as Stylus sees it.
Stylus' syntax is very flexible now, and it is based on indents, this way you can't write some properties after other ones with an increased indent, as Stylus would interpret then the first part with lesser indent as a selector (that's what happens in your example), and as CSS could always get new properties, there is no list of “known” properies, so whatever is also printed as is.
If you're not sure you're writing a proper indented code, then the best option is either to use a linter to check CSS validity, or to write everything in CSS syntax using curly braces and semicolons.
Hi I would like to know how to easily prevent dropped errors from appearing from debugging software such as webdeveloper plugin in Firefox. I get errors such as:
Warning: Error in parsing value for 'filter'. Declaration dropped.
Warning: Error in parsing value for 'font'. Declaration dropped.
I understand I get these errors because Firefox does not support these CSS properties, but how do I drop them before hand so Firefox does not attempt to read them in the first place? I know I can create a separate style sheet for every browser but that is a inconvenience. Is there a simple solution?
I'd always put or import IE-specific styles inside a conditonal comment;
as standard CSS FF should be fine with 'font', so just check your syntax e.g. font: bold 12px/30px Georgia, serif; values separated by spaces, multi-word font names in quotes, etc.
If you are using an IE-specific declaration (like filter), put it in an IE-specific stylesheet. It is simple and easy, and I don't really understand why it would be an incovenience (the inconvenience is IE itself).
Hiding an error does not mean the error is solved (and actually if FF shows an error in font it should be taken care of).