Как сверстать сайт кроссбраузерно?

Question

[Web Developer]

Я в верстке новичок, но понял, что браузеры сейчас поддерживают много (ну да, кроме IE)).

Тут наверняка есть профи в верстке. Нужны ли сейчас префиксы?

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

Я не говорю конкретно о флексах, это просто пример.

Comments

[sim3x]

Укажите версии браузеров

[Rustam Bainazarov]

Зависит от требуемой поддержки браузеров в плане версий и используемых свойств.

Answer 1

[2bllk]

Говорю со своей дилетантской точки зрения: в зависимости от количества браузеров и их версий, которые должен поддерживать твой веб-сайт/приложение, определяется, нужны ли префиксы. Например, тот же самый flex: когда-то, когда версия, например, Chrome была 21.0, тогда использовался префикс -webkit, но в новых версиях он "улетучился". Если хочешь, чтоб твой сайт поддерживал версию Chrome 21.0, то необходимо указать еще и -webkit-flex.

Answer 2

[SagePtr]

autoprefixer используйте, не прописывайте префиксы руками. Там же в опциях и указывайте, насколько древние браузеры стоит поддерживать.

Answer 3

[alex-1917]

Еще есть такая метода, аналогично бутстрапу - класс отвечает за требуемое css-свойство
т.е. ты пишешь вот это ОДИН раз, для примера три свойства:

.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;
}

и далее присваиваешь этот класс df необходимым элементам.
Количество кода уменьшается на 10-20% и не нужны никакие autoprefixer )))

Answer 4

[Александр]

Они желательны.
Лишним не будет, в любом случае.