CSS Code Completion

Today I don't continue in formatting posts:). I would like to mentioned the CSS code completion in html tags. It's new feature, that is also available in NetBeans 6.9 M1 build. Because the CSS files are now indexed, it allows to provide better support for CSS  in HTML and PHP files as well. The code completion is one of the visible benefit.


The picture above displays a page from WordPress project, where you can see code completion for class attribute of div tag. The code completion window offers all selectors for classes, that were found in the project. A selector in code completion window can have two colors. The green color means that the selector is defined inside the file or in a file which is referred by this one or the style is already used in the file. Selectors that have gray color are available in the project, but don't meet the condition that is mentioned above.

Similarly the code completion is available for id attribute of HTML tags, where the appropriate selectors are offered.

Comments:

What about clicking in html class attribute and jumping to the class definition in css?

Posted by Honza Marek on February 23, 2010 at 08:19 AM CET #

Honza: THE class definition? Remember what the C in CSS means.
If you have
foobar.css:
foo {color:#0;}

foobar.html:
<html><head>...foo {color:#123;}...</head>
<body><!--yet another definition here?-->
<p class="foo" span="color:black;">Is Beautiful</p>
</body></html>

Should we jump to the active definition or the root definition? I'd want to see all definitions! Currently Netbeans's search is fast, especially when limited to \*.css files; I don't think you can do much better.

Posted by Bruce Ingalls on February 23, 2010 at 09:03 AM CET #

Hi.

Very nice feature. I can't wait the final release of this netbeans version.

It would be nice to have a color picker.

Posted by Sergio Medina on February 23, 2010 at 10:11 AM CET #

I thought about the class definition issue some more. It could work, to only jump to the active, most closely cascaded link (akin to the direct parent), as long as all non-root definitions are (dotted) underlined, to provide feedback that they are links, because they are not root nodes.
I'm not sure, how much work this would be to implement.
Note in my example above, that the class foo is overridden by an anonymous style.
This behavior will be missed by lazy coders, over-reliant on their IDE.

Posted by Bruce Ingalls on February 23, 2010 at 02:47 PM CET #

Sergio,

I am in total agreement on the color picker. This is a badly needed feature when editing css files or inline styles. I can't tell how many times I had to load up a separate application to adjust the color of a class.

PS. It would also be great to also have an "eye drop tool" as well.

Posted by php/ajax on February 23, 2010 at 06:55 PM CET #

>What about clicking in html class attribute and jumping to the class definition in css?
That will be done, it's planned. There are some problems mentioned by Bruce though. I'm still not sure what will be the target for the link if there are more declarations.

>I'd want to see all definitions!
Use find usages on the Css selector then.

>Color chooser
Hmm, I'll try to do this one athough I didn't originally planned to do so.

Posted by Marek Fukala on February 24, 2010 at 02:37 AM CET #

I've just added the css color choser to the css completion.

For comments and enhancements proposals please use the issue 160891

Posted by Marek Fukala on February 24, 2010 at 05:47 AM CET #

A piece of software called TopStyle has some excellent colour tools for CSS:

- Ability to adjust lightness of currently selected colour up or down (L value)

- Ability to make such an adjustment throughout the currently open document.

- Palette window showing the colours used in the open document, and the number of times they are used (very handy!)

- Interactivity with the palette window, so you can make global adjustments to the colours in use

That said, the latest announcements for netbeans are a great first step!

Posted by Denyerec on February 26, 2010 at 03:04 AM CET #

Oh baby! I just want to say thanks so much for this feature, it is blowing my mind just thinking about it. NetBeans is now one step closer to ruling the world!

In terms of jumping to a CSS definition I recommend people to just use FireBug in Firefox. It is the perfect way to evaluate CSS and pretty much trumps NB in most other ways for CSS analysis, so just get used to understanding CSS with Firebug and using it to go to the exact file and line it tells you to edit the properties.

Posted by jeremy clarke on March 12, 2010 at 02:55 PM CET #

For comments and enhancements proposals please use the issue 160891
Thank you Admin for opening this topic.
I've just added the css color choser to the css completion.

Posted by En Güzel Kizlar on September 28, 2010 at 10:49 AM CEST #

Hi, thanks for sharing but I can't these features in 7.0.1. Can you please tell me what do I need to install/update/turn on?

Posted by guest on October 04, 2011 at 09:37 PM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This blogs is written by NetBeans developers who contribute to the PHP support mainly.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today