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.
Related
Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {? I can't find any info on that. I find it surprising that it doesn't exist, didn' find any answer when I google it...
VS Code does this:
.auto_curly_braces{}
And I'm looking for this: (with cursor under the selector)
.auto_curly_braces {
}
Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {?
No. VS Code will automatically add the closing curly brace, but it will not automatically create a new line for declarations inside the rulset's body.
But all you need to do to get that is to press enter after typing {.
As far as I know, it is not configurable to skip pressing enter to get to that text state. And it's not universally, objectively accepted as a good thing to always have each CSS declaration in its own line (especially when there's only one declaration in the ruleset), which is probably part of the reason why.
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.
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
I met a person who can't stop writing everything in uppercase in the internet. She has eye problems and just doesn't want to zoom in and out all the time to read lowercase.
I would like to write a CSS style sheet that converts all the text in a page to uppercase. With some googling I can do this alone, but if anyone can help me here that would be useful.
Most important, I want to apply this CSS sheet to the browser: is this possible?
To make everything uppercase use * {text-transform:uppercase;}
jsFiddle example
It's possible to change the browser's default style sheet however each browser has a different way of doing this.
One of the simplest ways is probably to use Stylish in Firefox. It lets you add a style sheet to be applied on all pages, in a manner that is easy to switch off then needed. And you could simply write
* { text-transform: uppercase !important; }
Without the !important specifier, the style sheet would be ineffective as regards to elements that have text-transform set in page style sheet.
Note that this only changes the display of characters. When typing text in a textbox, without using the shift key, it would be displayed in upper case but, upon form submission, as well as in any scripted processing in the browser, it would still be in lower case.
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.