The new Handcraft is here!

CSS code completion in your browser

It’s been three days since we introduced Common Sense Code Completion, the HTML code completion addon to CodeMirror for speeding up your browser based editing experience. Today we’re adding CSS support using the same common sense approach as last time.

There’s a video for you to check out, demo to play with and source code to grab. And there was much rejoicing.

What does it do?

CodeMirror already provided the ability to highlight HTML, CSS and Javascript syntax as you type, but Common Sense Code Completion only had code completion for HTML tags, attributes and values. Now it knows when you’re editing CSS and offers help in writing its declarations.

Something quick and simple that adds a lot of value is how we show you fonts:

Font suggestions in their respective font families.

Fonts suggested when you type "font-family" are rendered as the font

Just like before, we used common sense when designing the CSS completion rules. You’ll find small details that will speed up the things that you regularly do. For instance, we offer different units such as px, em or % while entering the numerical value for something like width or margin, so when you simply type a value such as “20″ and hit Enter, you’re done.

Providing help for what you do frequently.

Providing help for what you do frequently.

Here’s a demo of me using Common Sense Code Completion while writing a demo about Common Sense Code Completion (seems like another Yo Dawg):

Want to give it a try?

Here’s the demo: http://quplo.com/demos/cscc
Here’s the source: http://quplo.com/demos/cscc/cscc-1.1.zip

And here’s where you sign up for the Quplo beta in case you’re a developer or web designer and you’re curious as to why we’re doing all this in the first place.

11 Comments

Ping RSS

  • Works great! Very nice!

    by Jan Willem Tulp • Jun 24th 2010 • 16:06

  • [...] this article: CSS code completion in your browser « quplog This entry was posted on Thursday, June 24th, 2010 at 1:24 pm and is filed under Uncategorized. [...]

    Pingback

    by CSS code completion in your browser « quplog | My Blog • Jun 24th 2010 • 17:06

  • These links are broken:
    http://quplo.com/demos/cscc/
    http://quplo.com/demos/cscc/cscc-1.1.zip

    By the way, autocompletion is neat. I like what you use CodeMirror, instead of writing completion from scratch.

    by Nikita Vasilyev • Jul 19th 2010 • 08:07

  • Hi Nikita,

    Yeah, those URLs belong to q42.nl, to which quplo.com redirected before we launched our site. We need to get Google to update those links. Thanks for reporting them!

    by Rahul • Jul 19th 2010 • 09:07

  • It does not complete values for shorthand properties, like “background” and “font”. For instance, when I type “background: url(pict.png) no-r” it does not suggest me “no-repeat”.

    by Nikita Vasilyev • Jul 19th 2010 • 09:07

  • When I type “background: url(pict.png) no-r|” in Firebug’s styles tab, it suggests “no-repeat”. Alas, Firebug has a weak spot: https://bug-41414-attachments.webkit.org/attachment.cgi?id=60177 . It’s much better than nothing anyway.

    I’m working on CSS autocompletion for WebKit Web Inspector https://bugs.webkit.org/show_bug.cgi?id=41414 . So I’m interested in good CSS completion solutions.

    by Nikita Vasilyev • Jul 19th 2010 • 09:07

  • Hey Nikita,

    Thanks for the feedback. Our CSS code completion is incomplete; we wanted to launch it and get feedback on how it works and then work to make it complete for different specific cases like that. So we’ll be working on introducing more accurate completion over time. Check back soon; we’ll tweet, post or add support updates in quplo when we implement new changes!

    by Rahul • Jul 19th 2010 • 09:07

  • Hello,

    Before anything: Nice work!

    I have some ideas.

    - I think each thing about code type (xml/css) should be separated: dictionaries, cscc.update function,… It will improve other code completion dev.
    About that, i am interest by dev. the php completion if nobody is working on it.

    - A little improve can be the click support in completion.

    Good work; continue!

    by Rapotor • Aug 2nd 2010 • 08:08

  • We have implemented this in the template editor of our CMS webEdition. Here is a live demo of our modifications: http://we.willrockyou.net/webEdition-editor-demo/ It’s not perfect but a very good start.

    A few changes in our implementation:
    - Updated to CM 0.8
    - Uses CM’s own way to find cursor coords
    - Reconfigured directory structure: CSCC is now located in CM’s contrib folder
    - Click support in suggestion box
    - Basic support for namespaced tags like
    - Injected Code Completion for our project specific we:tags
    - Scrollable suggestions with max-height

    For updates on this follow me on twitter @we_willRockYou

    Looking forward to collaborate with you. :-)

    by Daniel • Aug 10th 2010 • 11:08

  • are you planning to build a CSCC for codemirror 2?

    by rob • Jul 31st 2012 • 05:07

  • Hey Rob, yep! A new CSCC is in the works for CodeMirror 2 as part of the next version of Handcraft.

    by Rahul • Aug 28th 2012 • 18:08

  • Leave a reply