New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right prefixes for break-inside #177

Closed
paulradzkov opened this Issue Jan 15, 2014 · 16 comments

Comments

Projects
None yet
2 participants
@paulradzkov

paulradzkov commented Jan 15, 2014

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

This comment has been minimized.

Member

ai commented Jan 15, 2014

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

@ai

This comment has been minimized.

Member

ai commented Jan 15, 2014

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

@ai

This comment has been minimized.

Member

ai commented Jan 15, 2014

I try to fix it after 22 of January.

@paulradzkov

This comment has been minimized.

paulradzkov commented Jan 17, 2014

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

This comment has been minimized.

Member

ai commented Jan 17, 2014

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

This comment has been minimized.

Member

ai commented Feb 11, 2014

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

@ai

This comment has been minimized.

Member

ai commented Feb 11, 2014

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

@ai

This comment has been minimized.

Member

ai commented Feb 11, 2014

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

@paulradzkov

This comment has been minimized.

paulradzkov commented Feb 11, 2014

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

This comment has been minimized.

Member

ai commented Feb 17, 2014

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

@paulradzkov

This comment has been minimized.

paulradzkov commented Feb 17, 2014

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

This comment has been minimized.

Member

ai commented Feb 17, 2014

Done: 6af1094

@ai ai closed this Feb 17, 2014

@ai

This comment has been minimized.

Member

ai commented Feb 17, 2014

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”.

@ai ai added the 1.1 label Feb 17, 2014

@paulradzkov

This comment has been minimized.

paulradzkov commented Feb 17, 2014

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

This comment has been minimized.

Member

ai commented Feb 17, 2014

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

@ai

This comment has been minimized.

Member

ai commented Feb 18, 2014

Version 1.1 with this fix was released today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment