Less.js: Cores hexagonais com opacidade emaranhados

Criado em 17 jul. 2018  ·  14Comentários  ·  Fonte: less/less.js

Atualizado para [email protected] após o qual colore a opacidade com renderizar como

cor de fundo: # 55555599; -> # 55555599 99; (inválido)
cor de fundo: # 5559; -> # 5559 9; (inválido)

bug medium priority

Comentários muito úteis

Eu atualizei a função color() para reconhecer #RRGGBBAA , bem como fiz algumas atualizações para manter as cores no mesmo espaço de cores. No passado, tudo era convertido para hexadecimal simples (se alfa = 1) ou rgba() para compatibilidade do navegador. Agora, podemos manter o Less mais consistente, preservando os valores das cores usadas. Cores hexadecimais e palavras-chave já foram geradas no estado em que se encontram, mas com meu PR, Less produzirá hsl() e hsla() no estado em que se encontram (exceto ao fixar valores) e até mesmo preservar o espaço de cores após a cor operações como darken() ou spin() .

Todos 14 comentários

O Less era compatível com a notação hex rgba antes?

@rjgotten Não diretamente, não. Mas ele deve apenas pular (preservar) valores não reconhecidos. Provavelmente é a regressão.

@rjgotten @tapsaman Não acho que isso foi uma regressão, por mais que ainda não fosse suportado. No entanto, foram apenas algumas alterações de regex e alterações no nó de cor para oferecer suporte a este formulário. Veja os testes no PR para verificação.

Uma coisa que isso faz é remover cores "inválidas" para compatibilidade futura. Somente quando você tenta usar uma cor "inválida" em uma operação de cores é que deve ocorrer um erro no momento da avaliação. Mas menos no 3.0+ é mais tolerante com os valores nas propriedades, então parecia razoável remover isso.

Uma coisa: Less deveria converter #RRGGBBAA para navegadores incompatíveis? A partir de hoje, o IE / Edge não tem suporte e alguns outros navegadores também não. A Microsoft não deu nenhuma indicação de que irá implementar em breve. No entanto, a razão pela qual eu implementei é porque definitivamente havia um problema com a análise na função de análise de cores. Ele pegava a string inteira e salvava em cores, mas não avançava o analisador se a cor fosse 4 ou 8 caracteres, por isso estava repetindo os últimos dígitos.

EDITAR: O que eu fiz foi permitir a conversão do autor para o formato rgba() via rgba(#55555599) .

Aqui está uma lista de pensamentos que estou tendo em relação a isso.

  • Não tenho certeza se é o trabalho de Less estar ciente do suporte do navegador.
  • A fusão de uma função Less com uma função CSS "parece" perigosa, mas não posso dizer por quê.
  • Nós _DO_ já temos a função argb() destinada a produzir #AARRGGBB .
  • Também temos uma função color() . Ele suporta #AARRGGBB , #ARGB ?
  • color: #AA334455; e color: #A345; são CSS válidos (ou aceitáveis), mesmo se não houver muitos navegadores que _compreendam_ essa forma.
  • Eu me pergunto se rbga() casting é uma ladeira escorregadia. rgb() , hsl() e hsla() são funções CSS.
  • Por outro lado, dado que Less é um superconjunto de CSS, rgba() faz muito sentido.

tl; dr: Acho que minha primeira impressão geral é que devemos garantir que a função color() suporte strings ARGB de 8 e 4 dígitos, uma vez que parece ser seu propósito de qualquer maneira.

A fusão de uma função Less com uma função CSS "parece" perigosa, mas não posso dizer por quê.

Esse navio partiu. rgba() existe há muito tempo como uma função Less. Mas o principal motivo é que você pode passar cores para algo como lighten() . Ou seja, rgba() precisa retornar uma cor internamente. Assim, funções como rgba() _têm de ser funções Less se você quiser realmente usar as funções de cor de Less. (por exemplo, lighten (rgba (50,50,50,0.5), 50%)) Caso contrário, seria apenas uma chamada de função desconhecida. Temos que saber o que a cor realmente _é_, a fim de manipular essa cor.

Eu me pergunto se a conversão de rbga () é uma ladeira escorregadia. rgb (), hsl () e hsla () também são funções CSS.

Sim, eu acho. Mas o elenco é a maneira errada de pensar sobre isso. Também habilita este formulário: rgba(#777777, 0.5) , que é permitido ou será permitido em navegadores. Não o estende para hsla() , isso é verdade, mas a implementação interna é muito mais difícil e também desnecessária se você tiver um método que funcione.

Também temos uma função color (). Suporta #AARRGGBB, #ARGB?

Não, obrigado por apontar isso. Eu posso adicionar isso. Embora eu esteja confuso por que essa função existe?

Ele também ativa este formato: rgba (# 777777, 0.5), que é permitido ou será permitido em navegadores.

Para reformular, este formulário é uma cor válida em CSS: rgba(<Color> [, opacity]) . Portanto, não há razão para não permitir isso.

Nós _DO_ já temos a função argb() destinada a produzir #AARRGGBB .

O pedido ARGB é usado especificamente para filtros legados do DirectShow no Internet Explorer.
A sintaxe hexadecimal de 8 ou 4 dígitos em CSS é uma ordem RGBA.

O suporte a ambos também torna diretamente impossível saber se um #000000FF literal representa um azul totalmente transparente (ARGB) ou um preto totalmente opaco (RGBA).

Meu conselho: abandone o suporte a cores ARGB. Você só precisaria dele para navegadores do IE da idade da pedra que estão há muito fora de uso.

Meu conselho: abandone o suporte a cores ARGB. Você só precisaria dele para navegadores do IE da idade da pedra que estão há muito fora de uso.

Não testamos o suporte em nada menos do que o IE11, então essa é uma boa ideia.

@rjgotten Há algum outro candidato a função (ou recursos) para descontinuação? Ainda estou confuso por que alguém precisaria escrever uma cor como _string_ em Less e depois convertê-la em uma cor usando a função color() . Parece que foi adicionado há 4 anos.

Ainda estou confuso por que alguém precisaria escrever uma cor como uma string em Less e depois convertê-la em uma cor usando a função color ().

A única coisa que posso imaginar são cenários de extração automatizada.
Por exemplo, um plugin complexo que inspeciona imagens de fundo SVG e extrai definições de cores delas para coincidir com o uso de cores em outras regras, ou algo parecido.

Um caso extremo bastante profundo, eu acho.

@rjgotten Infelizmente não consegui encontrar nenhuma história nas edições que explicassem de onde veio.

Eu atualizei a função color() para reconhecer #RRGGBBAA , bem como fiz algumas atualizações para manter as cores no mesmo espaço de cores. No passado, tudo era convertido para hexadecimal simples (se alfa = 1) ou rgba() para compatibilidade do navegador. Agora, podemos manter o Less mais consistente, preservando os valores das cores usadas. Cores hexadecimais e palavras-chave já foram geradas no estado em que se encontram, mas com meu PR, Less produzirá hsl() e hsla() no estado em que se encontram (exceto ao fixar valores) e até mesmo preservar o espaço de cores após a cor operações como darken() ou spin() .

Recuperando, estou a bordo. Acho que a função argb() responde a qualquer necessidade do formato antigo. Esta é uma boa jogada.

Esta página foi útil?
0 / 5 - 0 avaliações