Как узнать какое css свойство не поддерживается определенным браузером?

Question

[Drovosek01]

Здравствуйте.
Пока только учусь фронтенду.
Сверстал карточку на codepen, экспортировал код, открыл в Chrome - все норм. Решил открыть в IE11, а там она почему-то растянута по вертикали.



Возник вопрос, как готовый css файл проверить на совместимость с определенным браузером или версией браузера?
То есть, есть ли такой сервис, в который можно загрузить .css файл (или вставить текст) и этот сервис проанализирует текст/код и выдаст отчет о том какие браузеры и их минимальные версии поддерживают данные свойства, а какие минимально возможные версии поддерживают использование этих свойств, но с префиксами.

Гуглить вручную каждое свойство в caniuse или где-нибудь еще, как вы понимаете, крайне неудобно.
Про autoprefixer для PostCSS слышал, но вопрос в другом.

Comments

[alex]

с чего вы взяли что растянутая картинка это признак того, что осел что то там не поддерживает? у него просто корявая реализация флексбоксов

[Drovosek01]

Alex, то есть если верстать "на flexbox'ах", то о поддержке IE можно вообще забыть? ((

[alex]

Drovosek01, нет, просто в некоторых моментах с ie11 нужно хорошо погуглить и потанцевать с бубном

[freekir]

Drovosek01, про баги не так уж и плохо тут описано https://css-live.ru/articles/uporyadochivanie-bago...

Answer 1

[Ivan Bogachev]

Есть инструмент doiuse. Интегрируете его в свою систему сборки, задаете список браузеров и он говорит какие свойства в вашем CSS не поддерживаются в этих браузерах. Технически он проверяет это как раз по базе caniuse.

Но также не стоит забывать, что есть баги в браузерах, которые так просто не проверить. Особенно голову морочат IE и мобильный сафари. Здесь только опытным путем можно находить проблемы. Но раз уж вы используете модный flex - советую сразу посмотреть на flexbugs.

Comments

[Drovosek01]

Спасибо за ссылки.

А подскажите, есть ли какой-нибудь способ верстать с таким же удобством как с flexbox'ами, но менее забагованное и не менее поддерживаемое браузерами?
А то к flexbox привык, но не ожидал такого ножа в спину.

Answer 2

[Дмитрий Шмаков]

Есть еще такой сервис проверки страниц на предмет отображения браузерами: browserstack.com/.