Compiling Vendor Prefixes with AnyMod from SCSS to CSS Code

Questions
#1

After compiling from SCSS to CSS, the below MOD seems to not provide all of the nessesary vendor prefixes, but instead just some of them.

While I have not provided vendor prefixes to the SCSS, I expected the compiled CSS to have more vendor prefixes added automatically.

As a reference, please check the below MOD.

I pasted the rules for this selector [lllmal] {} testwise on AutoPreFixer:
https://autoprefixer.github.io/

Any advice is highly appreciated.

I hope I am not mistaken on my end. Not sure ; )

Mod: lllmal on 8P24PE

https://skysails.info/marine_performance/index.html

WpI2mf.jpg3838×2060 864 KB

External anymod CSS File wanted - for 15 Mods used within the same project
#2

this issue is especially important to me .

I will start to deb some IPAD Issues on Safari IOS tomorrow.

Those issues might very well be related to the way Anymod compiles the sass code into plain Css.

I do not have an ipad in my office, thus testing is a bit cumbersome .

It would be great to know if there is an error with the way sass is including Vendor prefixes when the SASS is complied !

See above for detailed Example Selector with missing Vendor prefixes please

#3

I can confirm that this is not currently a feature. However it is a great feature request and should be straightforward for us to implement it, so we will try to follow up on it quickly!

#4

Hi Stefan, we’ve added this feature. Now when you save a mod, it will add vendor prefixes :+1:

Thank you for your suggestion!

#5

Cool! Would be fabulous to have. I will have to do it manually for all mods this time :slight_smile:

#6

Also, the anymod.namespaced.a01.bootstrap-v4.1.css
makes very little use of vendor prefixes as well.

For example Display: flex; is suggested to have some vendor prefixes when it is entered into https://autoprefixer.github.io/ but there are no such rules inside of:

https://cdn.anymod.com/anymod.namespaced.a01.bootstrap-v4.1.css

Is there something I should do to improove the CSS? The reason why I am asking is I am confronted with some css issues on IPAD on Safari. And as I do not own a device of my own, I am havig some trouble to identify the cause of some css-issues I am currently facing. My CSS-Debugging is pretty much trial and error for the Ipad at the moment.

Under theese circumstances I today stumbled upon the above mentioned “problem”.
I am greateful for any advice you might be able to provide to improove vendor prefixes on the anymod-bootstrap css file. And does that css-file need improovement at all or is it fine the way it is?

#7

We probably won’t plan to autoprefix the Bootstrap file, as that is a very highly tested framework, and modifying it would lead to unexpected behavior. I would guess that your iPad compatibility problems are not being caused by Bootstrap, but of course it is possible.

It’s also worth noting that flex appears to be fully supported in iOS Safari for several years now:
https://caniuse.com/#search=flex

#8

Okay understood and agreed :wink: For sure the bootstrap-css-file will be perfect, if this is the bootstrap standard-file. I was just estranged about display:flex not having vendor prefixes while the online-autoprefixer suggested it should have them. I felt it might not be the standard file, or it still needed to be compiled. That was why I brought the topic up. Just wanted to ask about it. Okay. Basically, you were right. I was able to solve my ipad issues without adding vendor prefixes to any bootstrap selectors. Thank you again!

#9

Okay, I will need to drop you another line with regard to the vendor prefixes. And I hope I am not mistaken (again) this time ; ) This is the suprizing situation I found :

I manually added vendor Prefixes to the selector called .list-group . But as soon as I look at the rendered html result, thos vendor prefixes are NOT displayed inside the set of rules for that selector. It seems to me as though they where COMPILED AWAY by the mod? I know this sounds very strange, but… I tested my finding as far as I was able to investigate into it. Chrome should display those (vendor-prefix-)rules even if they are not relevant in destop enviromnent. I cannot see any other reason why those rules are not added to the selector, other than the MOD compiling them away, sort of ; ) No idea as to why this happens. See screenshot might help you to better work your way into this issue:

image
image.png3838×2037 893 KB

image
image.png3435×1926 690 KB

#10

We are still investigating, but I believe it’s because -webkit-box and -ms-flexbox are no longer relevant to browsers since flex is so widely supported. In that case it makes sense for the prefixer to take those out to reduce file size.

Are you finding that those rules affect your layout?

#11

I added some rules, and apparently they do not exist anymore on the live page. They are lost. Thus: I wonder why that happens and just how many css-rules might get lost on live pages magically with anymod. Thus my core question here is if you can confirm the error description I described further below.Whether or not the result is actually affected might not even be the core question here.

#12

We are using autoprefixer (https://github.com/postcss/autoprefixer) for this, so any magic changes are coming from there. It seems to be well-vetted, but if we find it is causing problems we can remove it.

my core question here is if you can confirm the error description I described further below

Would you mind clarifying what the error is?

#13

Actually it looks like we can disable removal of prefixes so that it will only add the missing ones and not remove anything. Then you should be able to add whatever you want, even if it’s not used. We’ll try to get that implemented soon. :+1:

#14

I used the online version of the same autoprefixer as well! While I did not investigate into this again today, I still feel it is safe to claim the following: Your current system seems to delete some of those vendor-prefixes the online-autoprefixer generates. I used this one with standard-preferences: https://autoprefixer.github.io/.
Then I injected the prefixes suggested by that tool into my Mods-CSS-Section. To my suprize I realized SOME of the vendor prefixes are beeing deleted by anymod again. I am very much looking forward to those prefixes beeing used. Even though I can at the same time confirm I did not stumble upon any error directly caused by missing vendor prefixes within my current project (at least on those devices I tested the result with). I was able to circumvent all errors establishing (or changing) other rules. Still, as mentioned, glad to see the vendor-prefixes in alignment with the Online-Autoprefixer - nice to know this is comming soon ; )

#15

I will be greateful for your feedback after this change is established

I will test the result once your team has implemented the fix.

#16

This is on our near-term roadmap, so it should be out soon!

1 Like
#17

AnyMod might want to disable the following setting in their Autoprefixer settings: " ‘removal of prefixes’ ".

Your Autoprefixer seems to not add vendor prefixes at all. At least not the way autoprefixer.github.io would do : https://autoprefixer.github.io/

For Example: display: flex should output

 .example { display: -webkit-box; display: -ms-flexbox; display: flex; }

see for yourself:

I added Tyler to the team

https://skysails-group.de/autoprefixer.html

user: sky
pass: group

https://anymod.com/mod/autoprefixer-test-banold

https://anymod.com/projects/87M4M7

#18

Hi Stefan, the autoprefixer appears to be working normally (e.g. add user-select: none; to see the prefixes).

The difference is likely the “Last 4 versions” that you highlighted. We are using the default setting, which covers the last 2 versions of any browser with > 0.5% market share.

#19

I looked at my new website with my fathers old IPAD and there where some styling-errors, most likely due to missing vendor prefixes for display:flex elements.

Thank you for your feedback nevertheless: It is a good approach to test with user-select: none

I knew there was that line …
I was on the lookout for that line, but as I did not find it, I dropped the search :wink:

Thanks

#20

if you open the page: browserl.ist and scroll down to the bottom of the document you will find the so called “Global coverage” value

The Global coverage is at 84.56% if you choose the last+2+versions for autoprefixer:
https://browserl.ist/?q=last+2+version

The Global coverage is at 91.8%% if you choose the last+4+versions
https://browserl.ist/?q=last+4+version

I feel if might be advisable to cover at least 95% of all browsers.
Why not even go for 95.12% with the last 10 versions? Is it costly?

I would prefer to see anymod cover at least the last 4 versions.