When I write CSS in Notepad++, the color coding sometimes seems inconsistent. Normally, selectors are shown in light purple but sometimes they are black for 1 or more lines consecutively. I don't see anything wrong with such lines. Why are they black? What am I missing here?
i'm not sure why that happened to you!?
but you can add keywords to notepad++ :
Setting => Style Configurator ..
Select your language and Style.
Add your keyword like color and etc , separated by space :
Usually, that sort of coloring indicates that the CSS rule immediately preceding the affected one hasn't been closed. Here's an example where I remove the closing brace from a rule in normalize.css, which affects the one that immediately follows in exactly the same way (ignoring the comment and the lack of bold type, of course):
Presumably then, the reason why the "first" declaration after that selector is affected but the subsequent ones are not is because the semicolon from the first declaration tells the syntax coloring parser to terminate the nonsensical statement which is formed by the selector. But I'm just blindly guessing.
If you're sure that the preceding rule has been closed properly, then the syntax coloring parser may have been confused. Try simply highlighting the rule, deleting it, and undoing; that usually works for me.
Since Notepad++ recognizes color of codes based on the language type, you can't able to view multiple languages with color codes in a same file. Even though CSS is a part of web designing, it is still a unique language. If you want to display the CSS codings inside the HTML to color, just change the language type to CSS (only for temporarily purpose). But, don't forget to revert the language conversion back to HTML before saving the file.
Steps: Language -> C -> CSS
Related
I have css file. I want to set prettier vs code so that after writing a comma, the selector I wrote remained in line with the previous selector. But when i save the file, the selector will be entered to next line
I want to save the code like this (my expectation)
But prettier set the code like this (h3 entered to next line)
How to fix this problem? I set trailling comma to none but it doesn't work.
I think that config you changed only applies to JavaScript files (notice the reference to ES5).
As far as CSS, prettier is opinionated and they decided that each selector should have its own line (this PR implements that behaviour). I don't think there's a config to change that behaviour.
When looking at the elements of a page that I am analyzing using Chrome DevTools, I am seeing the following weird display:
What is that "(1)" in the end? Since the source is user agent stylesheet, I can't drill down any further.
In the Elements panel, I see similar weirdness:
I thought parentheses were not permitted in CSS selector names. What is the "primaryNavId:(primaryLi1)" being used above?
UPDATE:
A more detailed screencap of the "inherited from" line (Styles pane):
When I click on the "inherited from" line, I get the following in the Styles pane:
UPDATE 2 - FIREFOX INSPECT:
Firefox displays the same information in the Elements pane for the item in question, but the Styles panel shows it differently, as follows:
What a mess. Now I understand why you tagged your original question (and this one) css-selectors.
To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.
It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.
What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)
As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).
I want to write a style the affects all websites I visit.
If I open the style with something like this,
#-moz-document url("") {
I can save my style, and Stylish puts the words "Can affect anything" under the saved style. But in practice, it doesn't seem to affect anything.
I can actually affect everything by changing the line to this:
#-moz-document regexp("*") {
But then when I click save, it refuses to save. The save button doesn't gray out, and if I close the stylish editor, the style isn't saved.
It appears to be specific to having regexp in there... anything else saves normally.
I read somewhere I could edit the file stylish.sqlite in my profiles folder directly, without an SQlite database editor, because the style is in plain text. So I tried doing that in notepad and saving. But then stylish just gives an error when I start firefox, about "Stylish is having problems opening its database".
How can I just make a style that affects every url?
A regex * is not valid since it is a quantifier without the pattern itself. You ask to match nothing/undefined value zero or more times.
A symbol matching any character but a newline is .. Thus, you could try
#-moz-document regexp(".*")
However, a regex that may match empty string can lead to unexpected results.
I suggest using
#-moz-document regexp(".+")
It will match 1 or more characters other than a newline.
Just create a global stylesheet with style rules not wrapped in any #-moz-document.
Brackets seems nice, but I'm encountering two problems using it :
First, I usually autocomplete tags this way : div.class - PRESS TAB -becomes<div class="class"></div>
I can't achieve that... I tried downloading a bunch of plugins, nothing works...
Second problem :
#container
h3
color: $ltGreen
text-transform: uppercase
font-size: em(24)
margin-bottom: 0.5em
font-weight: bold
In this example, if I press Enter/Return key wherever in that part of code, the cursor comes back to the beginning of the line... So I have to press tab lot of time each time I press enter/return...
Is it possible to do that in Brackets ? How ?
For the first issue, try the Emmet extension. It lets you use that exact CSS-like shorthand and auto-expand it to HTML code.
For the second issue, what type of file are you in? Brackets uses "smart indent" to position the cursor on new lines based on the syntax of the code. If you're in an HTML file, it will follow the nesting level of the tags surrounding the cursor to decide how far to indent (since the code above isn't proper HTML syntax, it won't use it as a cue for indentation - it will treat it as plain text content, to be ignored). If you're in a plain text file, it will just follow the indent of nearby lines (so the problem you're describing won't happen).
It looks like you might actually be writing "classic"-style Sass code in this case? If so, just ensure you're using standard .sass file extension and newlines should get the correct indent level automatically.
Here's what a .sass file should look like before pressing Enter:
And after pressing Enter - note the cursor is correctly indented:
Try Shift+Enter when the tag is suggested.
Does anyone know of a command (not a macro) for Textmate / E Text Editor / Redcar / etc. that will collapse a multi-line CSS rule down to one line OR, if the rule is already on one line, expand it out to multi-line? I already know about code folding and that's not what I require - I need to be able to toggle the rules between single and multi-line and have them be edited and saved like that.
For example, if I have this:
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
I would like to be able to place my cursor anywhere within the rule, hit a keyboard shortcut and it would turn into this:
h1 {
font-size:3em;
line-height:1;
margin-bottom:0.5em;
}
On hitting the shortcut again, it would convert back into single-line.
Does anything like this exist? Does anyone have any code that does something similar I could repurpose (ideally Ruby)? Does anyone know if this is even possible in Textmate?
Update: it seems that CSS rule collapsing and expanding is implemented as a pair of macros in Textmate. However, this isn't toggling and it also doesn't work in E Text Editor (which doesn't support macros). Not sure whether it works in Redcar. Is it possible to implement something similar as a command that can do toggling?
I ended up creating my own command to do this. Grab it here.
There is a limitation in that for the command to work, the cursor has to be in whitespace within a rule declaration; i.e., not in a property/value pair scope. I've found placing the cursor just inside the opening brace to be a good place to trigger the command from.
If anyone knows how to select a parent scope that would be neat.
Using the CSS bundle ctrl + opt + Q will collapse the currently selected rule into 1 line.
Appending to Mark Story's answer, ctrl + Q does the opposite, turning a single line of CSS into nicely formatted CSS.