Testes de suportes em navegadores

[neysimoes]

Testei principalmente o collapse e consegui fazer rodar do IE9, obviamente precisei usar um fallback JS para o IE entender o :ckecked, mas fora isso o outro problema é que o IE9 não entende o atributo hidden, por isso o input radio (ou check) fica aparecendo.

A solução foi adicionar:

.collapse-open {
  display: none;
}

E também o http://selectivizr.com/ como fallback caso o navegador seja IE9 ou inferior.

Eu sei que a idéia é fazer Pure CSS, porém o fallback é apenas para forçar ao navegador entender alguns seletores CSS3 como o :checked. Acredito que com isso possamos extender o suporte dos componentes.

[felipefialho]

@neysimoes, chegou a fazer algum commit com as modificações?

Acho que podemos sim manter um fallback para navegadores antigos, desde que seja completamente desacoplado para não carregar em navegadores modernos.

Abraços.

[neysimoes]

@LFeh não fiz commit, acho que poderiamos fazer um JS de fallback para o IE8 e talvez 9 se precisar também. Só tenho utilizado realmente o collapse, então só fiz para ele.

Esse fallback testei no IE8 e funcionou perfeitamente, no IE9 nem precisa de fallback. Só precisei adicionar um script apenas para o IE8-. Eu fiz usando o Head.js, mas pode se fazer com comentário condicional também.

$(".collapse-btn").on('click', function() {
    var
        $this = $(this),
        openTab = $this.parent().find('.collapse-painel'),
        inputRadio = $this.parent().find('.collapse-open');
    if (inputRadio.checked) {
        inputRadio.prop('checked', false);
        openTab.hide();
        // console.log('close');
    } else {
        inputRadio.prop('checked', true);
        openTab.show();
        // console.log('open');
    }
});

[felipefialho]

Perfeito @neysimoes, vou estudar se implemento esse fallback.

Quando a questão do IE9, na verdade já era pra eu ter adicionado a classe que você sugeriu desde o inicio, mas acho que esqueci, haha.

Abraços!