How to make a website cross-browser?

Question

Layout

I'm new to layout, but I realized that browsers now support a lot (well, yes, except for IE)).
There are probably pros in layout here. Are prefixes needed now?

.someBlock{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

I'm not talking specifically about flex, it's just an example.

Answer 1

I speak from my amateur point of view: depending on the number of browsers and their versions that your website / application must support, it is determined whether prefixes are needed. For example, the same flex: once, when the version of, for example, Chrome was 21.0, then the -webkit prefix was used, but in new versions it "vanished". If you want your site to support Chrome version 21.0, you must also specify -webkit-flex.

Answer 2

use autoprefixer, don't write prefixes by hand. In the same place in the options and indicate how ancient browsers should be supported.

Answer 3

There is also such a method, similar to bootstrap - the class is responsible for the required css property
i.e. you write this ONCE, for example, three properties:

.df{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fdc{
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
}
.aic{
  align-items: center
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

and further you appropriate this class df to necessary elements.
The amount of code is reduced by 10-20% and no autoprefixer is needed)))

Answer 4

They are desirable.
It won't hurt, in any case.