Stylizer 5 Changes To Per-Property Media Targets

Changes to per-property media targets (5.1.13.523)

Because of the way the code grid works, Stylizer is able to provide a feature to specify a media target for each individual property, which is often a more convenient way of filtering CSS for a specific media type than filtering entire rules. It allows styles which target a specific media type to be written next to the base styles which the override, as opposed to them being in their own section somewhere at the bottom of the style sheet.

Before release 5.1.13.523, all properties with a media target would be moved into a separate rule directly below. The property order was maintained by inserting "placeholder" comments into the CSS. When the file was then loaded again, the placeholder comments would be used to restore the original order. For example, a CSS rule with two properties targeting print media would be displayed like this in the code grid:

.page
    margin: 20px
    margin: 0.3in [PRINT]
    padding: 0px
    color: white
    color: black [PRINT]

But would save like this:

.page {
    margin: 20px;
    /*[ph]0*/
    padding: 0px;
    color: white;
    /*[ph]1*/
}
@media print {
    .page {
        /*[id]0*/margin: 0.3in;
        /*[id]1*/color: black;
    }
}

This system was implemented before media queries existed. In those days, the order of properties
which targeted two different media types was not as important because only one would be used by the browser at a time anyway. Basically, as long as you placed your print styles below your ordinary styles in the rule, there was no issue with ordering. And your output file would have all your print styles cleanly separated into their own rule.

In the world of media queries, however, it is perfectly common to use more than one query per rule—and their order is signficant. For example, given the following code in Stylizer:

.page
    margin: 10px [MIN-WIDTH: 1024px]
    padding: 0
    width: 500px [MIN-WIDTH: 600px]
    width: 900px [MIN-WIDTH: 1024px]

You would likely expect the second "width" property to override then first when the viewport is at least 1024 pixels wide. However, this is the code that would have been generated:

.page {
    /*[ph]0*/
    padding: 0;
    /*[ph]1*/
    /*[ph]2*/
}
@media (min-width: 1024px) {
    .page {
        /*[id]0*/margin: 10px;
        /*[id]2*/width: 900px;
    }
}
@media (min-width: 600px) {
    .page {
        /*[id]1*/width: 500px;
    }
}

Because only one rule was generated for each media query, the order cannot be preserved. The 500px width wins even when the viewport is 1024 pixels wide! The problem gets worse as more and more media queries are used.

The solution (as of release 5.1.13.523) is to throw away the placeholder strategy altogether and generate a separate rule for each group of consecutive properties having the same media target. For the example above, Stylizer will now save:

@media (min-width: 1024px) {
    .page {
        margin: 10px;
    }
}
.page {
    padding: 0;
}
@media (min-width: 600px) {
    .page {
        width: 500px;
    }
}
@media (min-width: 1024px) {
    .page {
        width: 900px;
    }
}

When a CSS file is loaded, Stylizer displays adjacent rules with an identical selector list as a single rule in the code grid. And since all of the rules above have the same selector list (".page"), they will be displayed as a single rule. "Placeholder" comments are no longer necessary.

This is not a breaking change. However, if you have used per-property media targets previously, you may notice that the order in which your properties are displayed in the code grid is different now than it was when you saved the file. This is actually a Good Thing: you are seeing what the browser has always seen.