Teste se um navegador suporta um seletor de CSS
Realmente simples: como faço para testar com mais precisão se um navegador tem suporte para um determinado seletor de CSS?
Atualmente, tenho algum código CSS que torna a página um pouco mais interativa usando o método:checked
seletor em CSS, mas quero criar um script de fallback que faça a mesma coisa com JavaScript, mas apenas se o navegador do usuário não tiver suporte para o:checked
seletor.
Minha pergunta é: como faço para testar com mais precisão se o navegador do usuário suporta um determinado seletor de CSS?
Aqui está o código em que eu gostaria de usá-lo:
HTML:
<label class="coolbox">
<input type="checkbox"/>
<span>I want to eat some caek.</span>
</label>
CSS:
.coolbox input {display:none;}
.coolbox span::before {
content: "";
display:inline-block;
width:10px;
height:10px;
margin-right:5px;
border:1px solid black;
}
.coolbox:hover span::before {border:1px solid #555;}
.coolbox:active span::before {border:1px solid #999;}
.coolbox span::before {background-color:#F77;}
.coolbox input:checked + span::before {background-color:#4A4;}
PS: Prefiro não usar apenas comentários condicionais, porque gostaria de seguir o padrão de detecção de recursos em vez de navegadores.