How to find out which css property is not supported by a certain browser?

Question

css

Hello.
I'm still learning frontend.
I made a card on codepen , exported the code, opened it in Chrome - everything is fine. I decided to open it in IE11, and for some reason it is stretched vertically.

The question arose, how to check the finished css file for compatibility with a specific browser or browser version?
That is, is there a service where you can upload a .css file (or paste text) and this service will analyze the text / code and issue a report on which browsers and their minimum versions support these properties, and which minimum possible versions support the use of these properties, but with prefixes.
Google manually each property in caniuse or anywhere else, as you know, is extremely inconvenient.
I heard about autoprefixer for PostCSS, but the question is different.

Answer 1

There is a doiuse tool . Integrate it into your build system, give it a list of browsers, and it tells you which properties in your CSS are not supported in those browsers. Technically, he checks this against the caniuse database.
But also do not forget that there are bugs in browsers that are not so easy to check. IE and mobile safari are especially fooling. It is only through experience that problems can be found. But since you are using fancy flex, I advise you to immediately look at flexbugs .

Answer 2

There is also such a service for checking pages for display by browsers: browserstack.com/ .