\n
\nAvailable from Cultured Code<\/a> for $19.95.<\/p>\n
Xyle Scope takes the approach of a completely visual CSS editor. Essentially it’s a web browser that enables you to select elements right on the page. The sidebar of the window will “drill-down” and display the HTML and CSS of whatever element you have selected. You are able to make edits right on the fly and see their effects. This is a very powerful feature and is an awesome tool for troubleshooting borked layouts. In fact, Xyle Scope has become my go-to tool for quick troubleshooting.<\/p>\n
<\/p>\n
Xyle Scope has a couple of weaknesses. For one, it’s not really a “CSS Editor”. There is no traditional “code view” and no way to save out CSS that you have edited on a non-local site. This makes it much more a trouble shooting tool than a full blown editor. I think that was kind of the intention, hence “Scope”. The other weakness is that it is basically Safari as far as web rendering goes. So troubleshooting is basically limited to an already-decent browser. Even if you make changes and then “Preview” in a different browser, those changes don’t hold so it’s kind of pointless.<\/p>\n
CSS Edit<\/a><\/strong> The biggest strength<\/strong> of CSS Edit is that it is truly a full-blown feature-rich CSS editing powerhouse. The editing window is the best around, featuring a left sidebar of all your selectors, a middle pane of the “code” view, and a right sidebar of a super easy to use click-buttons-to-edit style editor.<\/p>\n Combining all of this into a single editor window is a great move. I don’t really like the simplified editors if I can’t see what it is actually doing to the code.<\/p>\n CSS Edit is absolutely loaded with cool features like built-in code validation, easy commenting, “grouping” of selectors, search, and milestones management. But what makes CSS Edit great in my opinion is are two big features. Override<\/strong> and Extract<\/strong>. <\/p>\n Override gives you the ability to go to any webpage and start playing around with the CSS right on that site and see the effects. This can be useful on your own sites to do some tweaking and figure out ways to make your site look better, or be used on other people sites to understand their ways and make adjustments. Override is also particularly powerful because it allows you do make edits and changes to CSS that affects dynamic content<\/em> without having to “go commando”.<\/p>\n Extract is similar, it allows you to literally yank the CSS right out of any page on the internet. You can then save it out, and use it however you wish. It’s kind of funny to think about. It kind of feels like it could be a copyright violation, but I don’t think it is as long as you aren’t stealing images along with it. This is a fantastic way to pick apart other peoples techniques and apply then to your own sites. No other software out there makes “extracting” CSS so easy.<\/p>\n The biggest weakness<\/strong> of CSS Edit is that is a full-blown feature-rich CSS editing powerhouse. If you already know what you are doing, sometimes a big heavy application isn’t what you want. Personally, CSS Edit is too much for me, and I only really use it for extractions, getting to know really<\/strong> foreign CSS, and sometimes just for fun =).<\/p>\n Firefox w\/ Firebug<\/a><\/strong> Firebug is a Firefox extension, not independent software. It installs a little icon in the bottom bar of your browser window that is basically in one of two states. A little green checkmark if the page you are viewing is in good shape, or a red X if there are problems with the site. Clicking the icon opens up the editor area.<\/p>\n For being “just a Firefox extension” Firebug is extremely<\/strong> powerful. Much like either of the previous programs, you can go into “inspect” mode which enables you to mouse over page elements and view their HTML and CSS. You can edit EITHER the CSS or the HTML on-the-fly and see the effect on the page. You can view the code in either a drill-down format with little arrows to open and close sections or as-is. You can even view the CSS in “layout” mode so you can see the offset, margin, border, padding and size of any element. I find Firebug amazingly powerful as well as convenient, since you never even have to leave your web browser.<\/p>\n Firebug shares some of the weakness of Xyle Scope. It is limited in it’s preview capacity, since it only runs in Firefox. You can’t save out your modifications. Because of these things, Firebug is much more of a troubleshooting tool than an actual editor. However, because of Firebug’s extra features like DOM analysis, javascript errors and validation Firebug is my troubleshooting tool of choice.<\/p>\n Coda<\/a><\/strong> Coda is the new kid on the block and the big-daddy of web development in my opinion. Coda has a built-in CSS editor much like CSS Edit with the selector area and the click-buttons-to-edit area. There is no split-view for looking at the code at the same time, but it is very easy to pop back and forth between the CSS view and the Edit view.<\/p>\n Coda has nice code-highlighting like the Mac-favorite text editor TextMate. It also sports a built-in preview area for seeing the results of your changes right away. This suites me very well because my preferred CSS editing technique is to look at and edit code in a regular text editor, save it, and see the changes. What really makes Coda shine though is everything else that it does. It is an amazing FTP client with the ability to save your sites in a very visually appealing way. The split-view FTP\/Edit Window was a stroke of genius and is the future of web development. It has a terminal program built right in for shell access to your severs. Last but not least, it has reference manuals for HTML, CSS, JavaScript, and PHP built right in for quick lookups.<\/p>\n Coda is beautifully designed an incredibly adaptable and adjustable. For all these reasons Coda is where I spend 90% of my coding time. Cheers to Panic for this home-run product.<\/p>\n","protected":false},"excerpt":{"rendered":" There is some very nice software out there for creating and editing CSS files. Since I’m mostly a Mac guy, this review is Mac focused, but I would love to hear about Windows CSS editors if anyone has anything to share. It’s all about the best tool for the job, after all. Xyle Scope Available […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":455,"url":"https:\/\/css-tricks.com\/results-of-the-what-do-you-use-to-write-your-css-poll\/","url_meta":{"origin":170,"position":0},"title":"Results of the “What do you use to write your CSS?” Poll","date":"January 17, 2008","format":false,"excerpt":"Wow. That sums up my reaction to all the responses from this article. You guys really had something to say on this subject! As of Wednesday evening, there have been 430 votes on the poll and a whopping 123 comments on the post itself. That's gotta be some kinda record\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351402,"url":"https:\/\/css-tricks.com\/early-days-for-css-scoping\/","url_meta":{"origin":170,"position":1},"title":"Early Days for CSS Scoping","date":"September 6, 2021","format":false,"excerpt":"There is a working draft spec for CSS scoping now. Other than a weird period where
\n
\nAvailable from the MacRabbit Store<\/a> for $29.95.<\/p>\n
<\/p>\n
\n
\nAvailable for FREE<\/a>, by Joe Hewitt.<\/p>\n
<\/p>\n
\n
\nCoda is available from Panic<\/a> for $79.<\/p>\n
<\/p>\n