Autoprefixer: -webkit-box-orient

[Eugeno]

Rule box-orient doesn't transform into -webkit-box-orient.
Rule -webkit-box-orient doesn't copy, it simply disappears.

[ai]

Autoprefixer inserts only necessary prefixes for target browsers. Default target browsers doesn't need a -webkit- prefix for flexbox (you don't need it for most of cases).

If you are sure that you need it, set your target browsers by Browserslist config.

[Eugeno]

Let me clarify. I'm using snippet for truncate multiline text:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Seems, it doesn't work without -webkit-box-orient, with display: flex, etc.
This snippet works well in all browsers, that I support in current project. And I don't want change Browserslist config for tons of unnecessary prefixes.
So, maybe I can add only that one rule to exceptions?

[ai]

What browsers are stopping to work if you change all prefixed versions to unprefixed?

[Eugeno]

Not really sure, that I understood question correctly... Last Chrome, for example doesn't work with line-clamp or box-orient without prefix.

[ai]

Unprefixed version of -webkit-box-orient is not box-orient 😉.

Just found some new snippet and don't believe in any snippets without unprefixed versions.

[Eugeno]

Да простит меня англоязычная публика.. =) Но что-то тяжело формулируется.
Окей, вполне верю что версия без префикса не та, что я предположил по наитию, убрав -webkit.
Да, возможно это не самое прекрасное решение, основанное на подобных свойствах, но оно работает, работает ожидаемо в браузерах, что необходимо поддерживать. К сожалению, других адекватных решений не нашёл, кроме как использовать javascript, но в данной ситуации это кажется избыточным. Хаки с перекрытием текста не подходят, когда фон не является сплошным цветом.
В этом и вопрос: можно ли добавить свойство в исключение, чтобы оно не удалялось? И буду благодарен за ссылку на какой-то новый вариант решения без js и серверной стороны.

[ai]

А как он у тебя работал во всех браузерах, если свойства только для Вебкита? 😉

[Eugeno]

Легко, если поддерживаешь только вебкит-браузеры :)
Сложно такое сходу представить, но если делать гибридное приложение (сайт внутри приложения) для айоса, то достаточно поддержки мобильным Сафари.

[Eugeno]

Btw, вроде вполне box-orient: https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

[ai]

1. В таком случае тебе не нужен Автопрефиксер.
2. На указанной тобою странице огромный красный блок говорит, что это свойство нестандартное (то есть только с префиксом).
3. Тебе не замену -webkit-box-orient искать нужно, всё равно остаётся -webkit-line-clamp 😉

[Eugeno]

1. Думал об этом, сейчас он по сути добавляет мне одну строку в нормалайз: -webkit-text-decoration: underline dotted;
2. Ну да-а, не стандарт, завтра может и не будет работать, всё такое. Но так хотелось 😆
   Что ж, пойду джаваскриптить, спасибо за фидбек =)

[tysonmatanich]

People using sites like https://codepen.io don't have the ability to change their settings. This is impacting for both Safari and Chrome.

This breaks the many sites using the following line clamp solution:
https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5

[ai]

@tysonmatanich does line clamps is webkit-only solution bad for the ecosystem? ;)

[tysonmatanich]

@ai, Yes its webkit/blink only. However, being bad for the ecosystem would depend on how a site makes use of it (people should use progressive enhancement). It just seems inconsistent to decide to remove this property as its still used in the latest versions of webkit/blink and there isn't a new comparable style (let me know if there is). There are TONS of other browser prefixed styles that aren't removed so why this one?

[ai]

@tysonmatanich yeap, Autoprefixer try to detect when you are using the prefix as hack and do not remove it.

But sometimes prefixes logic become so complicated, so I can't support any edge cases.

Autoprefixer removes this prefix, because this prefix one of the complected one. One uprefixed flexbox property generates two prefixed property. And this property is one of these two. So it is all custom logic.

If you really care about this case I
Will be happy for PR. You can checklib/hacks files and add some extra logic to lib/prefixer.js or to hack themselves. If you will have any questions about PR feel free to write me. We even have a sitter chat for quick questions.

[tysonmatanich]

I appreciate the context. Thanks!

[ai]

Fixed by 69ed8a0 and released in 9.6.1.