CSS editing on Mac OS X just got better!
July 5th, 2007

For a while now, one of my indispensable tools for working with CSS has been Xyle scope
This application saves me so much time when it comes to editing CSS. I can immediately see the changes I’m making, I can tweak everything until I’m happy, and then save my changes. Often, I will try out different ideas and scrap them. I’ve been very happy using Xyle scope.
The one major gripe I’ve always had with it though, is that I could only edit CSS properties that were already there. If an element did not already have a margin property defined, then I would have to fire up my text editor and add that property before I could tweak it in Xyle scope. I lived with that because I was happy enough with the app otherwise.
I no longer have to live it! I’m thrilled with the new 1.2 version of Xyle (currently in beta). The developer has added a bunch of features that make it soooo much better. I’m loving it! Let me tell you about the new features that I’m loving. It’s kinda like a review, but not really.
Add properties and rules
Version 1.18 of Xyle scope required you to have your external text editor always open with your style sheets so that you could add properties and style rules manually and then tweak them in Xyle. This slowed everything down and often caused problems when I would tweak things in Xyle and forget to save before I went into the text editor to add something new. This caused me to have to reconcile two different versions of the style sheet I was working on.
With the new version of Xyle, I never have to worry about reconciling any more! I don’t even have to open up my style sheets in a text editor at all. What can I do now that I couldn’t do before?
- I can find an HTML element with no style rules at all and create one for it in the CSS
- I can delete style rules completely
- I can add new properties for any style rule
- I can delete any property
The only reasons left for opening up the style sheet in the text editor are to add comments and delete rules that don’t have any corresponding page elements. (you can only edit things that relate to elements on the page)
Edit a remote site and save changes locally
This is fantastic for me. Often my work flow involves developing a template for a site in XHTML + CSS then converting it to use special template codes and uploading it to a server. By the time it gets to the server it’s about 90% complete, and needs some final tweaking to get everything done.
Up until now, that last bit of tweaking generally meant Xyle scope got dropped at the wayside and I did my final tweaking manually. Not so anymore! I can now load up the external site in Xyle and link it to style sheets that live locally. I can then tweak the CSS to my hearts content and upload the sheets to the server when I’m done. Joy!
Miscellaneous bug fixes
There were also a few little annoyances with version 1.18 that are fixed in 1.20. I wish I had more time to write a thorough review because I’m so happy with Xyle scope right now.
Sorry, comments are closed for this article.