psudo css file included in pages
HELP
in dreamweaver theres an option to include a css file at design time.. so say you dont include the file via <style .. you include it design time and the definitions are availabe to the auto complete.. does phpstorm have this aswell? im working on a rather big ajax application. the css files are included in the main top level pages.. but 90+% of the time im working on pages that get included.. these dont have the css files attatched. its a deal breaker for me not being able to refrence those css definitions automaticaly, (too may to remember exact spelling etc to type out each time)
regards
william
Please sign in to leave a comment.
Hi William,
PhpStorm will suggest styles (classes & ids) from ALL css files (*.css) within project (such files should be part of the project so that you can see them in Project View panel). As long as file/page is treated as HTML file (for example: html, php, smarty template) the suggestions should work.
If for some reason it does not work as intended, try marking your webroot folder (or just folder(s) with css files) as Resource Root in Settings | Directories.
i have settings > directories set up like this
inside _css theres 2 style sheets.. main.css and style.css.. inside _css is a folder custom-theme.. inside that is another style sheet jquery-ui.css. have i done things incorectly? if it works like you say it does... im hooked on this IDE :D
I'm usually having this folder structure:
So, I just marking httpdocs as Resource root and it works just fine when I'm editing Smarty templates in app\templates folder.
With your project structure (where webroot and project root is the same folder) I do not think that this step is actually required (you can see on your own screenshot that your root folder already has that purple-color icon, so I assume it is already treated as such).
thats actualy me just trying it out.. i origionaly didnt have the project root set as a resource..
niether option changes anything :(
maybe im doing something wrong.. <tag class=" <start typing the class name>
am i ment to press a shortcut or something first?
You can invoke completion popup manually by pressing Ctrl+Space (the default shortcut: see Code | Complete Code | Basic)
If you have set up code completion popup (Settings | Editor | Code Completion --> Autopopup code completion in) then this popup should appear automatically.
thats all set..
hmm so if i include the style sheet directly into the page
<link rel="stylesheet" type="text/css" href="../_css/main.css" media="all">
it also doesnt give code completion help :(
no auto complete the class name and it swears at me that the class isnt defined yet
Unfortunately I cannot tell what may be wrong there (have no more good ideas). I can only suggest the following:
1) Try File | Invalidate Caches... and see if this will help.
2) Create brand new empty project. Create simple HTML & CSS files and try to play around:
*) create 1 or 2 rules for classes & IDs, then try to use them in HTML file
*) if it works, create another css file inside subfolder, add few more class/id definitions and see if PhpStorm will pick them up.
*) if it works -- copy one of css files from your real project and see if the rules (classes/ids) are accessible (shown in completion popup)
P.S.
I hope the HTML files that you were working on are part of the project as well, otherwise it simply may not work.
ok i created a new project.. 2 files..
style.css
index.html
i link to style.css in the head of index.. code complete doesnt pic it up.. im using the EAP version.. updated to latest.
is this maybe just a bug cause of the EAP thing?
thank you for being so helpfull :D
with or without resource set.. it doesnt make a diference
Don't know, but here is what I have done (to test this) and it works (I had them all in one root folder):
test.css
test1.html
test2.html (so it is treated as include scenario)
Try code complete (Ctrl+Space) for class and id in both files -- works fine for me.
i re installed phpstorm. it gives the suggestions now on directly included files <link style etc... not on css files that are in to project..
my problem is.. im working on ajax pages.. i cant include the style sheet on each page. the styles are included on the master page.. all the "sub" pages (those that get included via ajax) dont have any <body> / <head> tags never mind <link styles
Have you tried my examples above? Do they work for you? The test2.html is your case (no head/body tags -- content only).
lol *blush* i didnt.. in my eg it didnt work.. in yours it does :p lol
k i'll go about re-creating the project from scratch..
file > new file for all the css etc,
its probably getting stuck on something from dreamweaver etc. will get abck to you when done (might take a while lol)
wow phpstorm is a potent application..
lol dude!!!! this application is AMAIZING
if the page has a <style> in it.. it doesnt read from the project styles.. if it doesnt have the style... it works as expected.. any way to have it always show the project styles?
this works:
------- style.css -----
#meow {
color : red;
}
.wuf {
color : green;
}
------ test.html ----
<div ></div>
<div id=""></div>
it gives the auto suggest for the styles inside styles.css
this doesnt work:
---- test.html ------
<style type="text/css">
.inpage{
color:#f00;
}
</style>
<div ></div>
<div id=""></div>
just deleted the <style> things inside my pages in the main project and it works fine.. (wow again) but its not always practical to have all the style definitions inside a css file..
Well, I'm not using embedded/in-page styles myself and was unaware of such behavior -- I consider them a bad practice (you serving the same content over and over again when you could save a bit of traffic by putting these declarations into separate file which can be cached on client side). Of course, there always will be some exceptions/situations when such approach is acceptable or even desired.
Any way, the code below will suggest all styles (from css file and in-page style tag):
As for your standalone example (below) -- it does makes sence (to a some degree) -- you have declared local styles so you want to use them not the styles from outside (at least that is the explanation I see behind this behavior):
But yeah -- I think it could be better if PhpStorm would suggest all styles in such situation, not just local -- at least to have an option like this.
Any way -- it is working for you now. If you think you have some good ideas on how to make it better -- feel free to leave your feature requests on Issue Tracker (just search before posting to avoid duplicates): http://youtrack.jetbrains.net/issues/WI#newissue=yes
i actualy agree with what phpstorm is doing.. if not style is declared.. sue the global.. if a style is present.. then use local.. it would be nice if setting a directory (the settings > directories) you could set 1 as css and that is used regardless..
imagine working on a project and all the css files coming in when you've included the only css file you want to sue in the page already.. now to filter all the others out etc.. so would be nice to have an option to enable / disable it.
thank you again for your help
just waiting for the payment stuff to come throuugh and its a sale :D this is 1 awesome piece of software.