Определить, поддерживает ли браузер "@supports"?
Я понимаю, что это может быть глупый вопрос, потому что я все равно возвращаюсь к веб-разработке через некоторое время, поэтому, пожалуйста, не стесняйтесь просветить меня! Мне кажется, что искусство css-хаков (например, когда-то, чтобы вынюхивать старые браузеры IE) можно было бы использовать, чтобы заполнить пробел между новыми запросами @supports и старыми браузерами, которые не поддерживают эти особенности. Есть ли возможность избавить себя и свой сайт от большого количества JavaScript? Даже помощь в отказе от javascript в небольших проектах. Кто-нибудь знает о подобных проектах? Также возможно, что я не смог выполнить поиск по правильным ключевым словам ...
Не ответ, но хорошая новость в том, что почти все браузеры поддерживают @supports. caniuse.com/#feat=css-featurequeries. Только ~ 2% пользователей все еще имеют IE и столкнутся с проблемами: w3schools.com/browsers/browsers_explorer.asp
Все это очень полезно, в моем случае это помогает мне пока создавать / проектировать по-старому, а затем приступить к «модернизации» моего CSS отдельным файлом, когда я буду готов. В конце концов, это просто для тренировок, пока я не почувствую себя более комфортно. Чистый каскад - это, очевидно, путь, когда у вас есть все функции. Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Да, вы можете сделать это с помощью следующих команд:
Действительны все следующие примеры:
@supports not (not (transform-origin: 2px)) - для тестового браузера при отсутствии поддержки
или же
@supports (display: grid) - для тестового браузера на поддержке
или же
@supports (display: grid) and (not (display: inline-grid)). - для тестирования обоих
См. MDN для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
<!-- legacy cascade --> <link rel = "stylesheet" href = "legacy.css"> <!-- modern cascade, overwrites legacy if argument is satisfied --> @supports ( color: rgb(255,255,255,0.5) ) { @import url("modern.css"); @media ... @supports ... ... } В этом случае я проверяю, принимаются ли современные цвета с альфа (прозрачностью), а затем безопасно применяю более современный сахар, правильно? @BoltClock
Это не взлом как таковой, просто используйте каскад, как всегда. Связанные вопросы: stackoverflow.com/questions/21257329/…stackoverflow.com/questions/16584228/…