Nov 19
CSSEdit 2
2006 at 07.00 pm posted by Veerle Pieters
Belgium isn’t exactly the Mecca for great software development but since a few years I’ve been a fan of MacRabbit’s CSSEdit, a pretty cool app for visual editing CSS, designed and developed by Jan Van Boghout. Almost 2 weeks ago version 2.0 was released and I had the pleasure of beta testing this little gem the last few months.
My thoughts on CSSEdit 2.0
CSSEdit is the cleanest, simplest, easiest-to-use CSS editor that I know of because it appeals to both aspiring web designers and pros with its intuitive visual controls and a powerful source environment. I like the way the collapsable inspectors are anchored in the editing window and the fact that you can view both the source code and the inspectors at the same time. It shows only one inspector by default, but that's easy to adjust in the Preference pane. Just uncheck this option and you're done.
When beta-testing CSSEdit, I've used the Preview feature a lot, a feature I never used in the previous version. In version 2 it has improved so much that it became indispensable in my workflow. Every time I edit the CSS it's adjusted in the Preview window in real time. This makes my working process much more productive. I especially like the X-Ray feature which shows you the complete DOM and CSS path of a selected element in the page. It reminds me a bit of a tool called Xyle scope, which is totally focussed on this task. Below is a screenshot to show you what I mean:
One thing that bugged me though was the permission error I got each time I wanted to save the changes I made to an (X)HTML page located on our Xserve here at Duoh!. This happens in BBEdit or DreamWeaver if the file is open in the Preview window. Even closing the file wasn't enough, I had to quit the application.
As far as I know the permission on the file is set correctly. It's only when I use TextMate that I don't have this issue. I recently downloaded this app and still have to experiment with it, but the first impression of this app is that it is more aimed to programmers than designers.
There are other features that I find very handy in CSSEdit 2 such as the Validate and the Milestones button. I always use the Milestones feature if I need to experiment a bit to fix a bug. This way I can always go back to my previous step(s). A full copy of the CSS file is saved to ~/Library/EditMilestones together with notes. What I can't miss most of all is its intelligent CodeSense. It even remembers what you type most. Then there is of course also the flexible source formatting and the fact that you can group your styles into folders. Last but not least, I hope I made my small contribution to quickly comment and un-comment CSS code, using command slash :)
Any questions you've always liked to ask the developer?
In a next post I'll interview the creator of CSSEdit 2 and I was wondering if you had some questions in mind for him. I'll pick a few of the best and add them to the ones I already had in mind.
63served
1
To be honest, I never saw the merit of the single-purpose CSS/HTML editing programs, since I often dabble in PHP and Javascript. Using one program has always worked for me ...
But I am definitely going to look into this program. The milestones feature looks waaaay too handy. It looks like it gives better code colouring than BBedit, too. :D
I hope they have a demo, if so ... I’ll try it out right now.
Wooo!
2
I have been using the demo at work, and loving it. I’m sure I will end up buying it.
My question would be: Do you have any plans to incorporate HTML editing as well as CSS? That would be ideal for me—I really like the convenience of only having to use 1 app when I’m working on sites.
But CSSEdit is nice enough that I will probably get over that… :)
3
I’ve been told by everyone this is quite an App… I’ll have to try the demo now. Great review!
4
Veerle, I’m so glad you brought up that error. I quit using the program last spring because it was a waste of my time (and sanity) to keep restarting the program. If I had time to find a way to fix or get around that, I might give it another shot, but you know, billable hours… not getting paid for that time. :)
5
I bought it 2 weeks ago, and love it. Kicks ass
6
I too have been beta testing this thing for what seems like forever. I am so excited for Jan to see that he was finally able to push out a final release of it. I love the updates.
I’ve always used the app as just a really nice CSS text editor, but like you, now that the preview feature is so nicely integrated, it’s become a part of my daily workflow as well.
Plus, I’m partial to Mac apps that not only do their job, but do it with style, and Jan certainly knows a thing or two about that. He’s really got some astonishing designs packed in this app. I think Adam Betts had a hand in a couple of the things as well.
I’d certainly recommend this app to anyone and everyone, beginners and experts.
7
This app is and still is indespensible for me. I’ve used this app so long that I couldn’t dream of creating a website without it.
Preview in the Ver 1 was actually very well done. But the new features are so incredible; X Ray, milestones, live overriding of ANY site, etc.
For the price, it’s hands down the most important app I use for the visual side of designing and developing creative sites with the efficient use of CSS (hey, i try, okay?).
My request would be to find out his future plans for the app. Will he integrate with one of the many Code Editors out there? Will he make plugins for other apps? Will he integrate snippets or CSS templates into the next upgrade? He’s in such safe territory being way out in front of every other CSS app!
8
Wow, CSSEdit 2 came out and I missed this somehow? I love that app!
....runs off to get the new version.
9
I’ve been meaning to check CSSEdit out for awhile now, and this post finally pushed me over the edge. I’ve been pretty pleased so far with just a couple minutes tinkering around in the trial version. Thanks
10
Nice review.
I’m also giving CssEdit 2 a try in these weeks. Its UI is great and very well organized.
I think it will become my default app for Css coding.
Bye!
11
Sounds nice but I agree: it needs to integrate HTML, PHP, ASP code-colouring/code-completion also - and one thing I’d really like when left with the tedious task of content population - a spell-checker, maybe with code-spell-checking support (it once took me two hours to find positoin: absolute, though in hindsight I could’ve validated it) :D
12
Holy crap! Take my money!
13
Lately I’ve been working on a project where I have to change the CSS of a rather complicated website without FTP access and no permission to change the associated HTML, JavaScript or content.
Suddenly, as in the famous Lucky Luke comic, CSSEdit 2 appeared like the Cavalry.
Great tool! I love it.
14
Thanks for the review. I will definitely have a look into CssEdit 2. Since I’m using Xyle scope as well, a quick note: I find it somehow misleading to describe it as “showing the CSS path of a selected element”. What it does, among other things, is computing the complete cascade of a selected element showing effectively CSS inheritance - which rules are applied, which are overridden by more specific ones (having selectors with higher specificity). I also love selector matching in Xyle scope. Any plans to integrate something similar in CssEdit?
15
The live preview with over-riding styles has changed my life (in a minor way, lets keep perspective). I upgraded from v1 within hours of using the demo after coding in Textmate for the last few months. Now I’m back with CSSEdit, and agree this is a fantastic bit of software
My question would be - or feature request perhaps, I have multiple CSS files for one site, could I open them all in a ‘site styles’ in one window, a bit like a higher level groups. Any plans?
16
John Gruber mentioned this link where the icon is being explored. Inside jokes, you gotta love them :)
17
I use CSSEdit on and off; I think it would be 100% useful if you could also edit the html page you are working on as well.
I usually create the html page in DW, then use CSS Edit to build the CSS.
I especially like the live update feature, very useful for tweaking!
Great tool, move over Dreamweaver (almost)
18
The new version is a massive improvement over the old one. The only thing that bugs me is that for some reason I can’t edit my CSS files stored in an expression engine template and stored as a text file on the server.
19
I’ve been using cssEdit1 since forever (or that’s what it feels like), ignoring the couple of minor bugs it had. I upgraded to v2 as soon as heard of it. It does one thing, and it does it great. Paired with XyleScope I’m ruling the styles!
20
This will no doubt sound like blasphemy to many fanatic die-hards, but it seems a wonderful program that also Windows users could use.
So my question for the developer: any idea of also serving the Windows users?
21
yes, a windows version would be great !
Maybe if we all send a nice friendly mail asking for a port ... ;)
22
Herman, Tom, and any other Windows users I have a feeling you will be waiting for a very long time. CSSEdit is based on the Safari/Webkit rendering.
Also, the company MacRabbit says:
All the more reason to switch perhaps ;)
23
Now, I would love a more in depth review from someone, but if Veerle has favorable things to say about this program, then I might want to give it a shot. For the price, it seems like a good deal.
For those wanting a Windows version, I think the developer makes it clear on his/her site that they do NOT port for Windows. The reason why is that a lot of their programs take advantage of the built in Services in Mac OSX that are virtually impossible to implement using a Windows client.
24
I’m trying to find my way as a new Mac User and as a CSS neophyte. I recently bought CSSEdit and like it very much…though, I’m not sure how to go about the workflow. What page editor would you recommend, BBEdit or Textmate. Do you first create the html page using the editor and then open CSSEdit to create the CSS file? Is there a way to tie CSSEdit to an editor?
For the windows users, have you given TopStyle a look?
25
Alan:
Go with TextMate. It is cheaper, but has a better interface and is far more extensible through various extensions bundles.
As for workflow, use CSSEdit’s preview mode. CSSEdit applies the active CSS document to the active preview, regardless of whether or not they are actually linked. This is great for editing existing style sheets as well, because it allows you to make changes to a live style sheet without actually saving them, and therefore making them public.
If you make changes to the document’s HTML, PHP, XHTML, whatever, hit refresh in CSSEdit and see the changes. This works for local and remote pages.
26
Thanks Scott. I think I understand. Textmate it is.
27
Question for creator:
How have you applied your experiences from using Version 1 to make improvements in Version 2?
28
It’s a shame it doesn’t work on 10.3.9. I will update but first CS3 has to run native on Intel :).
29
FUNNY:
http://www.thehardsix.com/archives/2006/11/06/cssedit-2/
30
I’m looking forward to your interview with JVB. Will you ask him what tools he used when creating CSSEdit 2? Did he use Xcode? What other tools? I think I read on his site that testing took a long time. I’m wondering why and if it paid off? I mean did he discover a lot of bugs in the testing phase. I’d also like to hear how sales are going with Version 2 and if he’s able to make a living off his independent software efforts. I’m even curious about his hardware. What computers does he use?
thanks, IL
31
I like to edit some websites by using the “Edit in BBEdit” function in CaptinFTP. This way, when I save the edited file it is automatically uploaded. Does CSSedit plan to intergrate FTP?
This would be very handy.
32
Boz - I’m not familiar with CaptainFTP, but in Transmit you have the option to choose your flavor of editor depending on the file extension. I’m using BBEdit for html and php, and CSSEdit for css. And Voila! -Transmit takes care of the FTP integration, automaticly uploading and all.
OT: veerle, I just found about Digital Web’s compation for Web Directions North. Seminar with great speakers pluss riding in Whistler? I’m so excited I forgot how to use the spellchekker!
33
I want CSSEdit2 for Windows XP or later Vista.
34
I loved the software the moment I tried it.
In terms of a few ideas for an update, this is kind of minor, but when typing in the source editor and having the “auto semicolon” feature on it would be nice if it placed the cursor after the semicolon so you could just hit return and continue typing.
Also for EE coding, it would be great if the program could open and save files that didn’t necessarily have the .css extension. EE saves it’s files as .php when saving page templates is turned on.
35
I bought this program and it is very nice. However, I too, wish it had HTML editing integrated into it. I currently use dreamweaver(i know…) and would like to get away from it and be able to do everything in CSSEdit. Anyway, great program, really slick!
36
No, no, please don’t integrate any (HTML)-Editor-Capabilities to CSSEdit. Just add the possibility to specify your editor of choice and a plain button in CSSEdit’s toolbar to switch to the editor (bring it to front). Focus on CSS-editing-features, not on other stuff where others are much better. ;-)
37
code_happy = (TextMate + CSSEdit)
The reason why CSSEdit is so amazingly good is because it’s the oposite of TextMate. TextMate is for any and all types of code.
CSSEdit is a complete refined and solid solution to a single type of code.
They complement eachother wonderfully. CSSEdit was modified to work with TextMates “Edit in TextMate” InputManager.
38
Exactly, I work alot with Transmit (the “open in BBEdit/Textmate/etc…) and opening a EE template in CSSEdit just does not work. It’s the only thing stopping me from switching over from Stylemaster completely. Maybe in a next update?
39
Thank you all for you feedback and the questions for Jan. He’llwill be glad his application is so well received.
Thomas Aylott said:
That’s totally correct and that’s probably why TextMate needs so much getting use to for me. You have to turn it around first so it works completely how you like it to work. I still haven’t found my way in it and I get a bit agitated because of that, but that’s me again being inpatient :) I guess a programmer plays with this app for a second and he’s off loving it. TextMate it’s just a bit overwhelming for a designer, well at least for me it is.
40
Check out skedit for nice html editor to compliment cssedit.
http://www.skti.org/skEdit.php
41
skEdit is nice indeed, although I don’t feel it has that same instant likeability as CSSEdit 2. For pure HTML editing I prefer Smultron. Smultron is also, like skEdit and CSSEdit, native OSX Cocoa. And it’s free.
Smultron
42
Great review.
After rave review this program receives, I bought the license and it’s looks amazing.
There’s just one minor detail that frustrates the heck out of me and I’m actually amazed that no one had mentioned this(maybe I’m just missing some option but I’ve read all the doc, help and FAQ with no answer).
I don’t like to have all the code aligned to the left but to have it go in steps so it’s easier to see the relation of parts of code. So when I move the start of the next line one step to the right with tab button and insert the bracket, the closing bracket moves all the way back to the left.
I know this is minor detail but currently it makes this program un-usable for me and it’s frustrating to have a great program laying around unused.
I mailed the program support and it’s been two days with no answer. Any thoughts on how to fix this? Or am I just missing something.
43
I think Jan is going for an Apple Award ;)
44
Isko said:
You can set your preferred spacing in the Preferences : Preferences > Source Editing > Default Spacing. I have added a left tab and it works perfectly fine.
I guess it’s probably because Jan does all of it on his own and he is at uni, studying hard at the moment. In the meantime I hope I helped you out ;)
45
I’ve tried to adjust the spacing from the Default Spacing but it doesn’t work. I don’t know how to but this in words so here a picture:
Link to photo
On the left is how I’d like the output to be and on the right is what I get.
That’s totally understandable. And this issue is nothing urgent, it’s just driving me insane in “am I really this stupid” kind of way.
46
@Isko, I see what you mean. I don’t think this is actually possible, but then again I wonder why you want to indent each style further to the right instead of having them begin nicely on the left side? You must end up with a pretty wide page and a horizontal scroll if you have a big large stylesheet :) I don’t see the advantage of doing it like this. If you want to organize your styles, just put them into separate folders like “navigation”, “text styles” etc. or use comments for each group of styles. This indenting doesn’t make sense to me really.
47
Are there any plans to integrate the Preview and Editor Windows further? I’d like to be able to click on an element in the Preview Window (X-Ray enabled) and get a break-down of all the rules which apply to that element. I’d also like to be able to do the opposite; see which elements are being affected by the rule I’m currently editing.
48
@Daniel:Xyle scope has got what you’re looking for.
49
@eyestein. Thanks, however Xylesope is not a CSS editor as much as it as a document explorer.
50
Heh, no I didn’t mean that I indet every style further to the right. Just made the screenshot to be in three steps to bring more ‘umph’ to my point.
Let’s say you have three ‘primary’ div’s: header, page-content and footer. ‘Inside’ page-content div you have (just to make an example) sidebar-A and sidebar-B div’s. In stylesheet, I align the primary div’s to the left and then sidebar-A and -B one step to the right, to show that they are ‘inside’ the page-content div. This way all the rules that apply only to the sidebars would be one step to the right and easy to find with one look. Don’t know if this makes any sense so here’s a photo.
Usually I end up with no more than five to six steps and with wide screen display, it’s not an issue. To me this is a natural way to organize my code, with a quick look I can find what I’m looking for by knowing its relation to the other content. (Let’s say I want to change the sidebar-A’s headers font size, I know by it’s relation to others how far right it is.)
I could use the folders or comment but I find pressing the tab key faster.
But my main point is that any of this shouldn’t matter. With a program full of such innovative features (milestones,live preview..), I should be able to choose how my code is laid out. I’m not trying to say this is a bad program, no, quite the opposite. I’m just sad that I can’t use it the way I would like to. To me it’s important that you enjoy working with the programs you spend a lot of time with.
Since it’s already at version 2.0 and no one else seem to have a problem with this ‘issue’, I guess i’ll just have to bite the bullet and start learning Textmate for my CSS needs.
51
Isko, I understand your point. But consider this: I’ve also changed the lay-out of the coding to my liking.
One good thing about CSSEdit 2 is that it ‘respects’ this lay-out. I mean to say that it won’t alter your favourite display as soon as you save the document, as so many other apps do.
It means that you can alter your CSS’s lay-out manually and thereafter proceed with your work. It’s not *exactly* what you want, but it comes somewhat close.
52
That’s exactly why it’s so frustrating. It’s like having you dream car but only to be able to make left turns with it. I love all the features in CSSedit and it’s not like I’m asking it to dance Cha-Cha or cure the world hunger. It offers so much more than other editor only to miss on such a tiny detail.
um, not sure what editors do this, never experienced such a behavior.
It’s great that CSSedit works for you and so many others.
53
I understand you’re a bit challenged by Textmate, I’ve been there myself.
Hang in there and you’ll be rewarded by great power and flexibility.
I’d recommend checking out James Edward Gray’s book on Textmate from pragmaticprogrammer.com
OT: Noticed you’re relaxing with your Turkey (on Twitter) :-)
54
Isko writes: [altering hand written code]
FeedForAll (XML editor for RSS feed) does this.
55
Oooh! Am learning CSS and I think the Extraction tool will be very useful.
Patiently awaiting the download…...
56
Stumbled across you guys today and I’m sold on acquiring CSSedit but I’m only running OS 10.3.9. Will this still work?
57
Hey . THanks for telling me about this nice tool .
I have largely been attracted to it .
But my problem , is that , i just have windows .
Can u please suggest me a windows equivalent ???
58
@BooTCaT
Buy a mac ;)
59
Just another thing to add to my ever growing list of reasons I need to buy a MAC.
60
Dear Veerle,
I’ve received a few emails from you stating that there are responses to my question about using CSSedit on a Mac running OS 10.3.9.
I’ve returned several times, hit “refresh” and still see none of your posts or posts from others who are in the know. Sorry to bother you but I’ve a job now that could really profit from the workflow solutions you’ve outlined for CSSedit. Can it actually run on TIGER?
Thanks so much,
Frederick Park
61
@Frederick Park, if I surf to the CSSEdit page on MacRabbit I see “Mac OS X 10.4 or higher.” So sorry I’m afraid it won’t work on 10.3.9. My apolgies I didn’t see your question up here earlier.
62
I’ve bought CSSEdit after reading this review and I so love it. Thanks!
63
You say in the intro “Belgium isn’t exactly the Mecca for great software development”.
Actually, one of the most amazing pieces of software ever made comes from Belgium.
I speak of FL Studio, one of the most powerful music sequencers on the market.
And good value as well.
Didier Dambrin is a very clever developer…..
Commenting is not available on this article.