X

An Oracle blog about NetBeans for PHP

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.

Join the discussion

Comments ( 11 )
  • Honza Marek Tuesday, February 23, 2010

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


  • Bruce Ingalls Tuesday, February 23, 2010

    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.


  • Sergio Medina Tuesday, February 23, 2010

    Hi.

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

    It would be nice to have a color picker.


  • Bruce Ingalls Tuesday, February 23, 2010

    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.


  • php/ajax Tuesday, February 23, 2010

    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.


  • Marek Fukala Wednesday, February 24, 2010

    >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.


  • Marek Fukala Wednesday, February 24, 2010

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

    For comments and enhancements proposals please use the issue 160891


  • Denyerec Friday, February 26, 2010

    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!


  • jeremy clarke Friday, March 12, 2010

    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.


  • En G&uuml;zel Kizlar Tuesday, September 28, 2010

    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.


  • guest Tuesday, October 4, 2011

    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?


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.