I'm using ST3 and trying to create a snippet to quickly output the first child selector. I have saved the file with a .sublime-snippet extension in the Packages/User location. My snippet code:
<snippet>
<content><![CDATA[
:first-child {}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>first</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css</scope>
<description>first-child</description>
</snippet>
So when I type div and then the tabTrigger text, the new snippet does not appear in a list or when I press the Tab key. What do I have to do to get it working?
( Note: I've noticed that it works only inside curly braces but this is useless as it needs to work for the CSS selectors which are outside the braces! )
Unfortunately, you can’t easily combine ST and Emmet snippets in CSS due to some technical problems. As a workaround, you can create snippets right in Emmet:
http://docs.emmet.io/customization/snippets/
https://github.com/sergeche/emmet-sublime#extensions-support
There is a way and it is as follows (using a Mac with OS X):
1) Download and install Package Resource Viewer
2) Open the Command Palette within ST3 (accessed typing Command+Shift+P in Mac, or Ctrl+Shift+P in Windows)
3) Type PackageResourceViewer: Extract Package
4) Select the CSS option
5) Now in the menu go to Sublime Text / Preferences / Browse Packages (a folder window will pop up)
6) Go to the CSS folder within the Packages folder
7) Select the file named Completion Rules.tmPreferences and drag it to ST3 so that it opens it
8) One line says <string>source.css meta.selector</string>. What you have to do is to delete source.css meta.selector, so that you now have <string></string>
9) Save
10) Quit ST3 and re-open it
Now you are done and your snippet should work.
I was having a similar issue where Sublime Text 3 was not expanding my snippets in CSS, they would work with a tab inside Sass or Scss files, but not CSS. They would expand, however, by pressing Ctrl+Space (on Mac)
The above answer, updating the CSS package, broke my intelliSense (autocomplete no longer worked)
However leaving <string>source.css</string> and simply removing meta.selector fixed both issues for me
Related
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
How do I display all changes which I made using Chrome Developer tools?
Example:
open a website.
open Chrome Developer Tool.
change style attribute of a tag.
add new style to some css file.
change a JavaScript function.
How to see those changes? Something like:
page.html:56 Change style attribute of foo to bar.
page.css:21 Lines added: 21,22,23,24.
page.js:12 Line modified.
As of Chrome 65 there is a changes tab!!
Yes really, it is amazing :)
Open Dev Tools > Ctrl+Shift+P > Show Changes
https://developers.google.com/web/updates/2018/01/devtools#changes
So, local modifications work for any changes to the files that you make, but they don't help you if you add inline styles or change your DOM in any way.
I like to use a method where I capture the DOM before and after my changes.
copy(document.getElementsByTagName('html')[0].outerHTML)
That places the current state of the DOM into the copy buffer.
Paste this in the left hand column of a diff tool like vimdiff, http://www.mergely.com/ or Meld.
Then I finish my modifications and run the copy command again. I paste that into the right hand column of the diff tool, then I can see my changes.
Full article here: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
You may want to try the Local Modifications feature:
The DevTools also maintains a revision history of all changes made to
local files. If you've edited a script or stylesheet and saved changes
using the Tools, you can right-click on a filename in Sources (or
within the source area) and select "Local modifications" to view this
history.
Local modifications panel will appear displaying:
A diff of the changes
The time the change was made at
The domain under which a file was changed
With the basic Sublime Text 2 build, I am getting CSS value autocompletion only when I type the first letter of the value, as seen in the image below.
However, I've been watching the Tuts HTML+CSS web tutorials (here is an example video), and his Sublime Text build shows all possible CSS for a given attribute. Below is a screenshot from the linked example video.
My question is what setting or package allows for the display of all possible CSS values for a given attribute?
No additional packages or specific settings were needed to solve this issue. The Ctrl/Cmd+Space keyboard shortcut natively displays all possible completions.
Try different plugins through Package Control.
Specifically trying these may work for you:
CSS Completions
Emmet CSS Snippets
CSS Extended Completions (requires ctrl/cmd + space)
There is no package needed in Sublime Text 2 to display all possible completions, e.g. all possible values for a CSS property, but LaceLafontaine's answer is no longer current. Cmd+Space doesn't work on Macs, partially because it's a shortcut for a spotlight search.
Currently the shortcut to display the completions in OSX is Ctrl+Space. I believe it's the same for both Mac and PC. The issue was discussed here: https://github.com/processing/processing/issues/2699
Linux Users
For me it worked when I config using this:
"auto_complete_triggers":
[
{
"characters": ": ",
"selector": "source.css",
},
],
And then you use Space as trigger.
There is an additional space before every value, but Minify or HTML-CSS-JS Prettify will delete all these spaces
I have no idea how to fix this.
VS keeps opening css file in some text editing mode, see the picture below.
I have already tried to set it manually to open using css editor, right-click on css file and select "Open with..."
When I click OK here, it opens my css file in CSS source editor fine,
but every next time it opens again in that text mode, like it completely ignores that it has to open it using css editor :(
Of course I installed and reinstalled Web Standards Update a thousand times.
Nothing helps.
The damn thing keeps opening them in that ugly text mode :(
Hmmm. Have you tried looking under the view menu? It's been a while since I've used it, but I remember different views being under the view menu bar.
If that doesn't work then I'd always try creating a new .css file and copy and pasting all the information; after you copy and paste, overwrite the pre-existing corrupt file.
Where can I add CSS to the page I'm viewing? I don't want to add style to one element directly, I want to add a 'document' to a page to debug changes before editing the site's style.css.
Note, there are lots of questions here about 'injecting CSS from a chrome extension', but specifically I want to do it via the 'Chrome Developer Tools' thingy.
I'm not sure if it works, but you'd have to try.
Pressing F12/ (Cmd + opt + I on Mac) to open up the Developer Console and go to the Console tab.
Copy paste the following code (edit the path):
$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');
Alternatively, you could edit one property so the inspector-stylesheet.css is created by Chrome, and copy past your CSS source there.
There are multiple ways to do that, and they are also very easy.
First way, inspector-stylesheet:
Open Inspect Element (F12 Or Ctrl+ Shift+I)
Go to Elements tab (Ctrl+ Shift+ P and type show elements), if you are not already there, see the Styles tab, now see on right corner, there would be a + icon, click it (or long press that icon if it doesn't automatically add inspector-stylesheet), it will add selector of currently highlighted element, just next to the selector, there will a link/button inspector-stylesheet, click it, it will take you a window, where you can add styles.
Second way, Edit as HTML
Open Inspect Element (F12 Or Ctrl+ Shift+I)
Go to element panel (Ctrl+ Shift+ p and type show element panel).
Scroll to the head element right click on the element and choose Edit as HTML, go to the bottom of that element (Ctrl+ End), add your <style></style> element there add your style in that element, and hit Ctrl+ Enter.
Third way, Snippet:
Open Inspect Element (F12 Or Ctrl+ Shift+I)
Go to the Source tab, go to the Snippets tab, click on the + New snippet, name it whatever you want, and add this:
Create new snippet Ctrl+ Shift+ P type Create new snippet hit Enter , rename the snippet if you want to, and add this (edit the style) :
(function(){
let style = `<style>
/*change your style here*/
body{
display:none;
}
</style>`;
document.head.insertAdjacentHTML("beforeend", style);
})();
Save it, run it (Ctrl+Enter).
You can also run the snippets by doing this: Ctrl+ p type ! it will show your saved snippets, choose the one you want to run.
To edit or see your snippets, Ctrl+ Shift+ P type show snippets.
In FireFox it's even easier:
Open Inspect Element (F12)
Go to Style Editor, click the + icon and you will be able to edit the style; You can also, import styles, just by clicking the icon next to the +.
To begin with, this is one reason why I use Firefox for teaching and my own development work. The answer is built in.
As a variation to the above answers, using modern JavaScript, you can add a hard-coded style as follows:
document.head.insertAdjacentHTML('beforeend','<style> … </style>');
or you can add an external style sheet as follows:
document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');
The beforeend argument is to help the injected CSS to override previously loaded styles.
If you’re going to do this repeatedly, you can then add it as a bookmarklet, using something like Bookmarklet Crunchinator.
The technique is similar to one I teach in a JavaScript class, where I use afterbegin to inject some default CSS, but allow user style sheets to override the defaults.
Why not a kind of simple framework agnostic one-liner like this?
document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())
Seems to work like a charm...
Since 2018 in Chrome (65) the browser's integrated DevTools has a feature called Local Overrides 1. As such, there is no need for an add-on or extension like StyleBot, Stylish or Greasemonkey.
Local Overrides allow rewrites of CSS, JS and DOM on any live site. Changes are saved in a local folder and they override the contents of the live environment.
This can be accessed under Developer Tools > Sources >> Overrides
This allows you to select a custom local folder that will contain CSS and JS that will override the current website's own CSS and JS.
This should work (paste into console, edit arguments in the last line as needed):
(function(i,n,j,e,c,t,css){
css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');
This will insert a <link>
with an href //fonts.googleapis.com/css?family=Roboto
before the closing </head>
If there's no head tag in the document you're trying to add a css file to, try body as the last argument:
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
You can inject CSS using snippets in Chrome Devtools. Save and execute the snippet and then invoke it in the console or in another snippet:
function insertCss(code) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { // IE
style.styleSheet.cssText = code;
} else { // Other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
// run the snippet as follows:
insertCss('span { color: red !important; }');
Go to the sources tab in dev tools and right click in the left column, then add folder to workspace and use file explorer to select the folder that contains your css file. You will have to allow to make changes, once you do this you will see your folder in the sources tree(MAKE SURE YOU SELECT FILESYSTEM TAB UNDER SOURCES TAB), open your folder find the file and right click on the your css file and select map to network resource. Once you map the file you can open and see it in the workspace and from that file any change made will affect the page styles. So basically your styles will over ride the served styles.
Is this what you're after?: "How to Edit Source Files Directly in Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/
From that article:
Step 1: Launch Developer Tools. Go to View -> Developer -> Developer Tools. Navigate to "Sources"
Step 2: Click the Filesystem tab, then click + Add folder to workspace. You’ll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access.
Step 3: Edit and Save Your Code and refresh the browser to see your changes