Como fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula? – html css html5

Imagine que eu tenha uma situação onde eu precise estilizar vários links da minha página, mas só os links que terminem em .html, porém reparei que ao tentar pegar o atributo href, eu só consigo pegar os que terminam exatamente com .html, se for .HTML ou .Html por exemplo o link não pega o estilo. Eu não gostaria que esse acontecesse, eu quero pegar o link independente se está ou não com letra maiúscula.

Exite alguma forma de corrigir isso? Fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?

Segue um exemplo do problema:

a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}

[href*="html"] {
  color: green;
}

<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>

Aparentemente o seletor CSS de atributos segue o padrão:

[attr operator value i]

Onde i é uma flag indicando se é ascii case insensitive. Ou seja, apenas caracteres entre a-z e A-Z são case-insensitive. Então

a[href$=".html"]

funcionará com .html, .HTML, etc.. Porém

a[href$=".fóo"]

não funcionará com .FÓO por Ó não fazer parte da tabela ASCII.

Então, trocando seu seletor para

[href*="html" i]

funcionará como o esperado.

Ou ainda [href$="html" i] para casar apenas no fim do href.

Edit

Como sugerido fui buscar nas specs sobre uma padronização se o valor do seletor é case sensitive ou não.

Após uma boa passeada por várias versões e drafts acabei descobrindo que a flag i no seletor de atributos faz parte do draft do módulo de seletores, que por ser um trabalho em andamento, seu suporte ainda não é completo.

Porém, com exceção do Internet Explorer, Microsoft Edge e Opera Mini, os browser modernos já suportam esta feature, como mostrado no Can I Use.

Vendo a versão 3 dos seletores CSS temos:

Attribute values must be CSS identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Que em tradução livre significa:

Valores de atributos devem ser identificadores CSS ou strings. O case-sensitivity dos nomes de atributos e dos valores nos seletores dependem da linguagem do documento.

Como nosso documento é HTML, na sessão de Case-Sensitivity e Comparação de Strings da versão 5.2 temos:

Except where otherwise stated, string comparisons must be performed in a case-sensitive manner.

Em tradução livre:

A menos que especificado o contrário, comparações de strings devem ser feitas de maneira case-sensitive.

E como não há especificação no spec atual, isso explicaria o porquê de ser case-sensitive por padrão nos navegadores.

Código funcionando:

a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}

[href*="html" i] {
  color: green;
}

<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>

Apenas com CSS não sei se é possível fazer, mas criei uma solução usando jquery. Não sei se é o que estas a buscar, é apenas uma ideia de como poderia ser feito.

Deixei o código todo comentado, caso tenha dúvidas, pergunte.

$('a').each(function(){ //para cada link
   var attr = $(this).attr('href'); //pega o atributo
   var lower = attr.toLowerCase(); // transforma todos em minusculo 
   var html = lower.indexOf('.html'); //pega todos link que contem .html
   
   if(html != -1) { // aplica a todos links que tiverem .html
      $(this).css('color', 'green')
   }   
});

a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>
<a href="pagina.Htmlx">link terminando em .Htmlx</a>
<a href="pagina.xml">link terminando em .xml</a>