Advanced source code formatting

Xylescope not only helps in understanding and utilizing web standards, it also uses web standards to achieve its magic. Xylescope's source views are taking advantage of Safari's rendering engine to achieve their unique formatting.

While Xylescope transparently converts source code into richly structured HTML, the formatting of the source views is completely governed by style sheets that can be modified by the user! Every single detail of the way source code is presented is completely under your control. This might seem mind-boggling at first but you will soon become familiar with the new power it provides.

True to ancestors and authors

In Cascade mode, Xylescope displays - unlike any other tool - not only the style rules that apply to the currently selected element, but also all rules applying to ancestors of the selected element. This is important since the presentation of a given HTML element cannot be understood without the knowledge of rules applied to its ancestors.

When preparing the Cascade, Xylescope always honors the exact wording found in author style sheets. This is quite different from tools such as Firefox's DOM Inspector, that converts many CSS values (e.g. colors, margins and paddings) into its own internal representations of their intended effect, which obscures what's actually written (see Web Page, Mutated on meyerweb.com for further discussion).

Utilizing the Safari DOM

Xylescope transparently converts source code into well-formed XHTML. It does so by loading the given page into Safari's rendering engine. Safari will interpret possibly malformed HTML code and build a consistent internal representation called the DOM or Document Object Model. Xylescope uses the DOM to generate the display of its HTML source view and as an input to its pretty printer when exporting HTML source code.