Encontrei o seguinte seletor CSS na folha de estilo do agente do usuário do Google Chrome:

[type="checkbox" i]

O que isso isignifica?

Conforme mencionado nos comentários, é para correspondência de atributos que não diferencia maiúsculas de minúsculas. Este é um novo recurso nos seletores CSS de nível 4.

Atualmente, está disponível no Chrome 49+, Firefox 47+, Safari 9+ e Opera 37 + *. Antes disso, ele estava disponível apenas nos estilos de agente do usuário do Chrome a partir do Chrome 39, mas podia ser habilitado para conteúdo da web definindo o sinalizador de recursos experimentais.

* Versões anteriores do Opera também podem suportá-lo.

Exemplo de trabalho / teste de navegador:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

O quadrado acima será verde se o navegador oferecer suporte a esse recurso, vermelho se não for.

Esse é o sinalizador que não diferencia maiúsculas de minúsculas para seletores de atributo, apresentado em Seletores 4 . Aparentemente, eles introduziram uma implementação desse recurso no Chrome já em agosto de 2014.

Resumindo: este sinalizador diz ao navegador para combinar os respectivos valores para o typeatributo sem distinção entre maiúsculas e minúsculas. O comportamento de correspondência do seletor padrão para valores de atributo em HTML faz distinção entre maiúsculas e minúsculas , o que geralmente é indesejável porque muitos atributos são definidos para ter valores que não diferenciam maiúsculas de minúsculas, e você deseja ter certeza de que seu seletor seleciona todos os elementos corretos, independentemente de maiúsculas e minúsculas. typeé um exemplo de tal atributo, porque é um atributo enumerado , e se diz que os atributos enumerados têm valores que não diferenciam maiúsculas de minúsculas .

Aqui estão os commits relevantes:

• 179370 - implementação
• 179401 - alterações nas folhas de estilo do UA como mostrado na imagem da pergunta

Observe que ele está oculto no sinalizador "Ativar recursos experimentais da plataforma da Web", que você pode acessar em chrome: // flags / # enable-experimental-web-platform-features. Isso pode explicar por que o recurso passou despercebido - os recursos ocultos atrás desse sinalizador só podem ser usados ​​internamente e não em código voltado ao público (como folhas de estilo do autor), a menos que esteja habilitado, porque eles são experimentais e, portanto, não estão prontos para uso em produção.

Aqui está um caso de teste que você pode usar - compare os resultados quando o sinalizador está ativado e desativado:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Observe que eu uso um atributo de dados personalizados em vez de typemostrar que ele pode ser usado com praticamente qualquer atributo.

Não estou ciente de quaisquer outras implementações até o momento em que escrevo, mas espero que outros navegadores se atualizem em breve. Esta é uma adição relativamente simples, mas extremamente útil para o padrão e espero poder usá-la no futuro.