XHTML & CSS: How Did They Do That? Xyle Tells.

Mac creativity continues to blossom on OS X with superb applications to build web pages.

So it is with Xyle scope, the perfect tool to examine web pages live and check their XHTML and CSS code. Point and click. What’s the next step?

If you do any web page building at all, you know the tools. Browser. Editor. Rather, browsers and editors, because there’s no single tool that does everything you need to build a web site.

There still isn’t. Yet. Xyle scope is another tool and promises a good future in my design bag of tools.

If you’re like me, you find a web site on the internet, it’s attractive and laid out well, and you wonder, “How did they do that?”

The page may look great, but it’s the underlying code that can get complicated, messy, and take awhile to figure out so it still looks good and yet conforms to XHTML and CSS validation standards.

When you come upon a web page, there’s a multi step process to check the page’s code. First, view source, copy, and save the HTML or XHTML. Second, find the CSS location, view the source, copy, save that in your favorite editor.

See? Lot’s of steps. Plus, you’re not saving anything but the raw code, so you have to scan through hundreds of lines of code just to figure out why and how of the page.

That’s a fantastically royal pain in the patootie. Really. It is.

Even if you view the web page in Mozilla, and save all the graphics, it’s still a multi step process and you have to save and keep track of all the page elements, XHTML and CSS. Painful, painful, painful.

Wouldn’t it be nice if there were an application on the Mac that would view a web page live, and let you click on an element of the page to view the XHTML and CSS components? Then edit those components?

Well, there is. Almost.

Xyle scope does exactly that. It looks like Safari (and uses the browser engine). Enter a URL and go to a web page.

What you see in the browser window to the left is the web page, just as you’d see it in Safari. To the right are other windows.

The bottom windows displays the CSS of a particular element on the page. The middle windows displays the CSS element(s). And the top window displays the corresponding XHTML which holds the CSS elements.

What’s cool about Xyle is the point and click.

In the browser window which displays the web page, point and click on an element of the page. A graphic. A headline. A column of text. Whatever.

Instantly, the windows to the right display the CSS relating to element, or section, that you clicked.

If you’ve ever wondered how a web site designer put together the XHTML and CSS for a web page, but hated the process of scanning through all the code to figure it out, now you don’t have to.

Figuring it out is as easy as entering the URL in a browser window, point and click. It’s that easy.

See the web page in the window, click on a section of the page where you want to see the underlying CSS code, and view it in the display windows.

You can even bookmark specific pages and add to a Bookmark Library.

Xyle scope’s focus is on the CSS portion of a web page. XHTML and CSS have to be combined appropriately to produce standard, validated web pages. This is another tool.

There are two basic modes. Selection mode, and plain Browser mode. In the former, you select the area on a page to view the underlying CSS and XHTML location. In the latter, you browse.

CSS means “cascading” style sheets, and Xyle scope recognizes that by applying the proper ‘cascade’ in the view window. You can also copy whole sections of the CSS in a web page.

While many web pages these days use XHTML and CSS, the code does not always validate.

Xyle scope will transparently convert pages with errors into well-formed XHTML and CSS.

Even better, by using the CSS window to view a CSS style element, you may edit and make instant changes, instantly viewable in the browser window. Even if the web page is not your own.

Of course, you’re not changing the remote web site’s code, but you instantly see changes you make to the CSS.

Wonderful, right? There’s only one thing missing in this excellent application and you’ll notice it about 10-minutes after trying it out. Xyle scope is not an editor for XHTML and CSS, though the authors, Cultured Code promise one later this year.

You can’t use Xyle scope to create a web page using XHTML and CSS, only to view and modify CSS from existing pages.

For now. Xyle scope is a superb tool for that. Just superb.

Click Here to check out the features and download.

Tera Patricks
Awesome. Thanks to one of our readers for tipping us to Xyle scope.

Alexis Kayhill
I tried this. Neat. Bambi, you’re right. 10 minutes after starting Xyle scope you want it to edit everything XHTML and CSS. It’s that easy.

Off Topic Note: Mac360 has discounts and special pricing on Microsoft Office for Mac ($125), Apple’s iWork ‘08 suite ($62), and Adobe Photoshop Elements ($70). Where? At the newly remodeled Mac360 Store. Shopping at our local version of Amazon helps to support Mac360.