Stylizer 7 helps you find and fix hard CSS problems.

This is a brief overview of the new features in this version.

1. HTML Elements Panel

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.

Try it »

2. CSS DOM Viewer

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.

Try it »

3. New Look-and-Feel

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.

Try it »

4. Inline Style Sheets

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.

Try it »

Other Great Improvements

• Customizable Toolbar You can now customize the toolbar to include additional buttons for things like Stakeout, Rulers, and Bookmarks. Right-click on the drop-down button with the browser icon on it to add or remove buttons.
• Single Bullseye Pane Stylizer 7 now displays one persistent Bullseye results pane, anchored to the bottom of the window, and shared between all preview panes. This provides more width to display results for narrow panes, and ensures the preview window stays the same shape when entering and leaving Bullseye.
• Updated Browser Plugins We've updated the browser plugins to Firefox 54 and Chrome 59, with regular updates to follow.
• Stable and Beta Update Channels You can now opt-in to receive Stylizer 7 updates that are marked as "beta" and download and install them the same way you receive other updates. Find the option in the About Stylizer window.
• Windows: 64-bit Binary Stylizer now runs as a 64-bit application on Windows, and the browser plugins have been updated with 64-bit versions as well. (A 32-bit version of Stylizer 7 is also available).
• Windows: Better Compatibility With Anti-Virus Products Because of the unconventional way Stylizer integrates web browsers into its preview panes, it has often been flagged as a "false positive" by anti-virus products. With Stylizer 7, many internal components have been rewritten to significantly reduce the likelihood of a conflict with an anti-virus product.
• Windows: New Installation And Update Engine We've replaced our old installer and automatic updater with a snappy new engine that installs and delivers updates more fashionably and reliably than ever before.
• Mac: Better Error Recovery Stylizer for Mac is now able to recover from many different kinds of errors, and we've improved the error reporting engine too to help us fix problems faster.
• Mac: TLS/1.2 Support Stylizer 7 now works correctly with web servers that require all HTTPS traffic to arrive over TLS/1.2.

Upgrading from a older version?

Here's what was new and exciting in Stylizer 6.

1. Multiple Preview Panes

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.

Try it »

2. Responsive Design

Stylizer 6 now provides comprehensive support for responsive web design:

• Resizing the preview pane now reapplies media queries in Stylizer as it does in an ordinary, modern browser
• The Code Grid has been redesigned to write and edit both media queries (@media) and feature queries (@supports)
• Stakeout now displays outlines for elements which are currently being targeted by the browser—according to its width
• Bullseye displays @media queries in its result list

Try it »

3. Updated Browser Plugins

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.

Try it »

4. Browser-Based Bullseye

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.

Try it »

5. New Real-time CSS Engine

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.

Try it »

6. Native User Interface

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.

Try it »

7. Window Configuration Options

Stylizer 6 offers many new configuration options:

• The Code Grid can be positioned on either the left or right side of the window, or hidden completely to expand the preview pane to the full width of the screen
• The CSS file list can be displayed in a side bar next to the Code Grid—instead of above it—especially useful for websites which link to many CSS files
• The Remote Control can be docked below the Code Grid to provide more working space for keyboard-centric users

Try it »

8. Redesigned Code Grid

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:

• You can drag-and-drop rules and declarations by holding Ctrl (Command on Mac) and dragging the selection; duplicate a selection with Ctrl+Shift+Drag (Command+Shift+Drag on Mac)
• You can even drag-and-drop CSS between applications
• There are new buttons on the Remote Control for border-radius, box-shadow and text-shadow
• You can drag the (+) button on the Remote Control to any location in the rule, effectively allowing you to use the mouse to quickly insert a new row anywhere
• Remote Control buttons insert new properties at the current line if it is blank, which when combined with the new capability of the (+) button above, allows you to insert new declarations created by the Remote Control anywhere in the rule (not just at the end)
• Auto-complete now makes suggestions for keywords and units in shortcut properties as well
• Size Grips now support layered properties, like background and box-shadow, by automatically targeting the numeric values on the layer where the caret is positioned
• Anything can now be commented out (or uncommented) by pressing F8. This makes it much easier to work with code that has been previously commented out in a text editor.
• There is a new Bullseye hotkey, Ctrl+Space, which can be used in any mode to start Bullseye (Space still works too, but only in Block Mode of course).

Try it »

9. CSS Formatting

The CSS Formatting feature has been completely redesigned in Stylizer 6:

• Stylizer 6 uses a heuristic algorithm to automatically detect the CSS formatting style used by a file when it is loaded. Therefore, choosing a CSS formatting style is usually unnecessary when editing existing files.
• Because detection is automatic, Stylizer no longer needs to save a /*[fmt]*/ comment at the top of files which use non-default formatting.
• The user interface allows for more formatting styles to be used, with less clicks. Most common styles can now be created in 3 clicks or less.
• Support for one selector per line and all declarations on the same line styles of CSS formatting.
• When copying to the clipboard, YOUR default format is always used regardless of the formatting of the file being edited. This allows you to practically ignore the formatting style used by the file you are editing, and copy text into and out of the Code Grid using your favorite formatting style.