Right prefixes for break-inside

[paulradzkov]

Currently autoprefixer expands break-inside: avoid; as:

.sample {
    -webkit-break-inside:avoid;
    -moz-break-inside:avoid;
    break-inside:avoid;
}

But working solution at this moment looks like:

.sample {
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid; /* Makes effect only in Firefox v20+ */
                 break-inside: avoid; /* IE10+, Opera 11.1—12.1 */
}

Where webkit prefix has own syntax -webkit-column-break-inside: avoid and Firefox uses for it page-break-inside: avoid since v.20.

Maybe hack required for prefixing break-inside :avoid.

[ai]

Does Firefox not required -moz- prefix for all multicolumn props? Any sources to help me fix Can I Use data?

[ai]

Does there are any other changes in webkit syntax for other multicolumn props? Also maybe there are some links?

[ai]

I try to fix it after 22 of January.

[paulradzkov]

In earlier versions of specification were proposed three properties for managing column breaks: column-break-before,column-break-after and column-break-inside. Later column-break-*, region-break-* and page-break-* prorepties were combined to break-before,break-after and break-inside. So column-break-* is old syntax, actual syntax is break-*. And as mentioned in http://www.w3.org/TR/css3-break/#page-break page-break-* properties are an aliases for break-* properties in compability reasons.

Webkit still uses old syntax for -webkit-column-break-before, -webkit-column-break-after and -webkit-column-break-inside. All the rest column-* properties have prefixed names according actual specification. (bug 61096)

Firefox has no support for break-before, break-after and break-inside at all (1), (2).

But in a case of css columns page-break-inside: avoid; works as break-inside: avoid; (it's a bug or feature, but it works). See demo

Firefox supports page-break-inside since v19.0.

Some links for reference:
Firefox CSS support chart,
Safari,
Opera Presto multicolumn

[ai]

Thanks for good review. I will add hack after finish my education course at 22 of January. Sorry for delay, but I really need any free time to sleep :D.

[ai]

Should I use -moz-page-break-inside for FF >= 20? Because Can I Use says that all Firefoxes require prefix.

[ai]

For FF < 19 I should use -moz-column-break-inside?

[ai]

Hm, seems page-break-inside is only unprefixed multicolumn prop in FF >= 20.

[paulradzkov]

page-break-inside is from CSS 2.1 from paged media. But it was implemented in Firefox only in v.19 and without prefix.

In some strange way page-break-inside: avoid takes effect on css-columns (but shouldn't I think).
So applying it to break css-columns is a hack.

[ai]

Is this rules works with any values of page-break or only with avoid?

[paulradzkov]

CSS 2.1 page-break-inside has only values auto and avoid.

CSS 3 break-inside has values auto | avoid | avoid-page | avoid-column | avoid-region.

But for FF there is no break-inside or -moz-break-inside rules at all. But page-break-inside: auto | avoid works for css-columns in Firefox as break-inside: auto | avoid.

So in my opinion autoprefixer should work this way:

/* before autoprefixer */
.class {
    break-inside: auto;
}
/* after autoprefixer */
.class {
    -webkit-column-break-inside: auto; /* webkit has own -webkit-column-break-inside for css-columns */
              page-break-inside: auto; /* Firefox hasn't -moz property, but page-break-inside (without prefix) affects css-columns */
                   break-inside: auto; /* IE10+, Opera 11.1—12.1 */
}


/* before autoprefixer */
.class {
    break-inside: avoid;
}
/* after autoprefixer */
.class {
    -webkit-column-break-inside: avoid; /* webkit since v.4.0 */
              page-break-inside: avoid; /* Firefox since v.19 */
                   break-inside: avoid; /* IE10+, Opera 11.1—12.1 */
}

/* before autoprefixer */
.class {
    break-inside: avoid-column;
}
/* after autoprefixer */
.class {
    -webkit-column-break-inside: avoid; /* webkit since v.4.0 */
              page-break-inside: avoid; /* Firefox since v.19 */
                   break-inside: avoid-column; /* IE10+, Opera 11.1—12.1 */
}

/* before autoprefixer */
.class {
    break-inside: avoid-page;
}
/* after autoprefixer */
.class {
    page-break-inside: avoid; /* CSS2.1 property fallback. Firefox has support of this since v.19. */
    break-inside: avoid-page; /* IE10+, Opera 11.1—12.1 */
}

/* before autoprefixer */
.class {
    break-inside: avoid-region;
}
/* after autoprefixer */
.class {
    /* situation with regions is even more difficult, so do nothing */
    break-inside: avoid-region;
}

[ai]

Done: 6af1094

[ai]

Does I understand correct, that in future we can remove all page-break-inside and use only break-inside.

Autoprefixer doesn’t support polyfills, and when Firefox will works without prefixes, Autoprefixer will remove all -moz- properties. In this case, Autoprefixer will remove page-break-inside because it will think, that it is outdated -moz- “prefix”.

[paulradzkov]

Does I understand correct, that in future we can remove all page-break-inside and use only break-inside.

Yes, that;s correct.

Thanks for fixing.

[ai]

Will be in 1.1, wich I plan to release tomorrow.

[ai]

Version 1.1 with this fix was released today.