Stylizer 7 now provides a real-time view of the HTML DOM. Use it to drill down into elements that are invisible or difficult to hit with Bullseye, to quickly highlight and Bullseye adjacent elements, and to understand the overall structure of the page.
The Elements panel can be quickly toggled on and off when you need it. Each preview pane has its own panel, and you can dock them against any edge.
Stylizer 7 can show you a real-time tree of the browser's view of your style sheets—the CSS DOM. Due to differences between browsers, the CSS you write almost never ends up being interpreted by the browser exactly as you wrote it. The CSS DOM pane not only reveals which rules and declarations were accepted by the browser, it's even smart enough to recognize which declarations in your source code produced which declarations in the DOM.
The CSS DOM viewer is linked in real-time to the Code Grid, highlighting and updating as you work.
In the screenshot above, notice how Stylizer has identified the first two declarations in the DOM rule (on the left) as being produced by the
border-left declaration currently selected in the Code Grid (on the right).
The CSS DOM viewer is an integrated part of the HTML Elements panel. If you have multiple preview panes open at once, the Code Grid will be linked to all of them, revealing subtle differences between browsers that are often the reason some problems take hours instead of minutes to fix.
We've redrawn the user interface from the top of the menu to the bottom of the breadcrumb to give it a subtle, lightweight, more modern feel. The application-wide dark theme has now returned as an option in Stylizer 7. We hope you'll find it pleasing whether you're using a Retina Mac, HiDPI Windows computer, or just an ordinary display.
Style sheets embedded within your HTML in
<style> tags are now a part of Bullseye. Rules in these style sheets appear alongside other Bullseye results, and the style sheets themselves can be opened into the CSS DOM viewer.
In the screenshot above, notice the rules affecting the selected CSS "color" property are being sourced from (1) an external CSS file (2) a rule in a
<style> tag, and (3) an inline style declaration.
Stylizer 6 can display up to three preview panes at once, in six different configurations. Each preview pane can use a different browser plugin, offering direct comparisons between browser engines. Stylizer aggregates the style sheets linked to all open pages into a single list, and connects everything together so that changes to a CSS file are reflected in all preview panes where it is linked.
Stylizer 6 now provides comprehensive support for responsive web design:
@media) and feature queries (
@mediaqueries in its result list
Stylizer 6 features updated browser plugins, including support for the latest versions of Firefox, Chrome, and Internet Explorer. It also offers real-time preview in Firefox and Chrome on Mac in addition to Safari.
Note that Stylizer 6 now provides plugins only for the latest version of each browser it embeds. The legacy browsers in Stylizer 5, like IE 6-8 and old versions of Firefox, are no longer supported.
Bullseye has been updated to use the browser itself to determine which CSS rules are being applied to an element and in which order.
@media rules are also taken into account, so two Bullseye clicks for the same page (at different widths, or in different preview panes) could potentially return a different result set. This also means that any CSS selector that the browser recognizes—even future and experimental syntax which Stylizer does not recognize yet—will still be included in the results.
This is in contrast to Stylizer 5, which naïvely ignored the browser and ordered results by specificity using its own internal algorithm, which often differed from the browser in practice.
Cleanser is history. All CSS now loads directly into the Code Grid, even files with errors or unrecognized CSS rules. We've also added syntax highlighting for CSS keywords, and a real-time Warnings list that updates as-you-type.
Stylizer's new CSS engine has been rewritten from scratch for improved performance, better compatibility, and the flexibility we need to quickly react to future changes in the CSS specification.
Great pains have been taken to rethink the Stylizer user interface, making it look and feel much more like a native application on both Windows and Mac. Stylizer now includes a traditional menu bar, supports multiple windows, and works just as well as an offline editor for unlinked CSS files as it does when it is used for previewing live websites.
Stylizer 6 offers many new configuration options:
The Code Grid has been redesigned to improve productivity, simplify common actions, and work even with unrecognized CSS.
The Code Grid now stays in Edit Mode (the caret continues to blink) even when changing rows. Unlike Stylizer 5, Escape does not cancel your changes—pressing Escape switches between Edit Mode and Block Mode. You can also just drag a selection while editing and the Code Grid will switch into Block Mode automatically when necessary.
These changes make the editing experience more consistent and provide much of the flexibility of a text editor, while retaining the productivity characteristics of a grid. For example, pressing Enter now always inserts a new row, regardless of the current mode. Ctrl+Z (Command+Z on Mac) always undoes your changes, regardless of the current mode. And pasting a block of CSS can now be done from either mode.
The spread sheet editing behavior from previous versions of Stylizer is still available in Stylizer 6 as an option (View, Code Grid, Spread Sheet Mode).
Here are some other nice things about new Code Grid:
box-shadow, by automatically targeting the numeric values on the layer where the caret is positioned
The CSS Formatting feature has been completely redesigned in Stylizer 6:
/*[fmt]*/comment at the top of files which use non-default formatting.