Pixels Mortos: Por que Você Deve Parar de Usar Pixels Em CSS

você quer projetar websites como ele, de 1999, de novo? Os Pixels são o caminho a seguir. Vá retro, mantenha as normas porque o que você sabe já funciona e enquanto ele funciona fique em seu gramado e agitar seu punho vigorosamente…

este artigo não é sobre os pequenos pixels vermelho verde e azul que você vê em sua tela, não se preocupe eles estão bem. Isto é sobre o uso de pixels dentro do HTML & CSS. Não há necessidade de teoria, em CSS pixels Não #f-ing escala, roll créditos!

Deve Haver Uma Boa Razão para que…

A web é baseada em 21 anos, com padrões que não são projetados para o mundo de hoje

Êxodo 12:8

Naquela mesma noite eles estão a comer a carne assada ao fogo

A Bíblia sugere que devemos comer carne de um animal no dia da matança. Mas agora temos frigoríficos, congeladores e alimentos enlatados como soluções para problemas novos e antigos.CSS1 diz:

os ecrãs são praticamente todos do mesmo tamanho, pelo que utilizam fontes estáticas

as nossas exigências mudaram desde 1996. Temos agora uma variedade muito maior de dispositivos, resoluções e rácios de exibição a considerar. Apesar de introduzir novas características, ao contrário da indústria alimentar, a tecnologia subjacente não mudou devido ao:

compatibilidade reversa

e com direito porque agora todos nós temos que suportar a miséria da internet.

Os mal-Entendidos Do Tamanho do tipo de Letra

No passado eu ter discutido o tema da font-size equívocos com vários desenvolvedor e designer colegas.

A reação que eles normalmente dão é como se eu estou dizendo-lhes Papai Noel não é real para a primeira vez…

tamanho do tipo de Letra não especificamente correlacionar tamanho do pixel na tela

  • Uma font-family em 16px poderia ter um “Um” char 24px alta, outra fonte-família 16px poderia ter um “Um” char 26 de pixels de altura.
  • não tendo em conta a forma como os navegadores e sistemas operacionais lidam com as relações de kerning, suavização e, mais importante ainda, com os pixels do dispositivo de diferentes formas.
  • os agentes utilizadores têm cada um um um conjunto diferente de valores por omissão.

Então, encerrar qualquer discussão sobre “pixel perfect” na web, não é possível a menos que você apontar para a concepção de uma página estática para um único navegador em um único tamanho de tela para um único tipo de dispositivo.

NUNCA MAIS USE PIXELS PARA IMPLEMENTAR WEBSITES!

eu não sou a primeira nem será a última para vomitar isso para fazer check-out dos outros pecadores, antes de atirar a primeira pedra. Respira fundo….

  • precisão da vírgula flutuante: Todas as unidades de fonte em CSS (incluindo px) são capazes de lidar com flutuadores em navegadores modernos. Normalmente, se 1px é “assumido” o tamanho equivalente de um pixel de Tela (O que é incorreto), pode parecer inútil usar decimais ao projetar para um dispositivo com uma razão de pixel de 1. Se se observar essas métricas num dispositivo com um DPR De 2 / 3 ou 4, perde-se uma quantidade aparente de precisão devido à eliminação das casas decimais. REM e EM “incentivam” mais precisão através do uso decimal.
  • é uma ilusão: Pixels em CSS não são pixels de tamanho real. Na verdade, são unidades ópticas de referência. Esta confusão às vezes empurra “profissionais” e desenvolvedores experientes da web para fazer coisas tolas como criar mixins de conversão pixels-para-em para pré-processadores CSS. Pode ser por isso que alguns passam tanto tempo discutindo com designers UX sobre pequenas diferenças de margem/ enchimento. A relação de pixels do dispositivo mostra o tamanho da unidade de referência óptica e isso depende apenas do dispositivo ou do nível de zoom do ecrã definido pelo utilizador.
  • px resulta em mais manutenção: não dizer nada de novo aqui, mas é geralmente muito mais fácil de manter porcentagens vs recipientes do tamanho de pixels.
  • ajuste relativo escala de dimensões com tamanho de letra: utilize sempre unidades REM ou EM em locais onde normalmente necessita de definir uma largura ou altura fixas. Os recipientes com dimensões EM São relativos ao tamanho da fonte. Com as unidades EM, se actualizar o tamanho de letra de um Contentor de texto, a largura ou a altura (definida no EMs) irá escalar proporcionalmente, o que significa que só irá modificar 1 valor em vez de 3 ao usar pixels. Com o REM isto é verdadeiro se você mudar o tamanho de letra do texto raiz do documento.

(Yes EM is more advanced than REM despite being older, also EM works better for media-query breakpoints than REM across browsers for some reason).

existem poucas circunstâncias em que pixels são necessários e dessas circunstâncias poucas são para construir um layout real.

EM vs REM

O mais triste uso de imagens de sempre.

Veja o que eu fiz?

um tamanho de letra usando EM é relativo ao tamanho de letra do seu recipiente original. Mas às vezes a composição é indesejável e mais difícil de manter. As unidades REM são relativas ao documento. Em caso de dúvida, use REM (IE9+) para simplicidade.

usando unidades REM

se você está vindo do mundo antigo de pixels você pode achar difícil de, de repente, começar a usar unidades REM. Aqui estão algumas dicas.

  1. claro que 1rem é 16px em CSS: mas 16px em CSS não é uma métrica real em pixels de tela especialmente com tamanho de letra. Portanto, o uso REM requer o mesmo jogo de tentativa e adivinhação de erros que você tem feito ao longo de pixels.
  2. ±0.5 depois de ±0,25: Se você estiver guesstimating qualquer tipo de comprimento, logo que você chegar razoavelmente próximo, incrementar ou decrementar a 0,5 e, em seguida, novamente por 2,5 antes de fazer mais específicos palpites. Isto normalmente poupa tempo.
  3. Use uma calculadora: a barra de endereços é uma calculadora em chrome, duh!

O Futuro É Cartesiano-Como

Exemplo usando MIMÉTICA.js utilizando unidades rem e percentagens.

CSS via HTML já usa um sistema de coordenadas cartesianas, não é isso que estou discutindo aqui. O problema é que em geral está faltando o ingrediente chave “proporção”. Todos os elementos podem ser em proporção em relação ao viewport usando %, vw ou vh, com exceção da propriedade de tamanho de letra. Nem mesmo as unidades REM podem ajudar. as unidades VW e vh são ignoradas à medida que quebram a acessibilidade de ampliação nos navegadores do ambiente de trabalho quando usadas com o tamanho de letra.

CSS & HTML em conjunto compõem um quadro 2D impuro

este não é o caso da SVG. Mas o SVG ainda não possui um pacote de texto ou um modelo de formatação.Estamos presos em 1996. Para mover o web design para o século XXI, precisamos, pelo menos, de um sistema 2D proporcional para o tamanho da fonte.

precisamos preservar tudo no eixo x (largura da janela) proporcionalmente. Isto também faz os elementos da escala do eixo y proporcionalmente, mas a escala do eixo y não afetará a escala do eixo x.

tem havido algumas tentativas JavaScript para fazer escala de fontes proporcionalmente no navegador, alguns usam pixels e alguns usam unidades em / rem. Os que usam pixels têm falhas.Então Porque É Que Os Pixels Estão Mortos?

  • Eles são estáticos (Mas, tecnicamente, assim como a maioria dos outros)
  • Eles não respeitam a raiz-tamanho do tipo de letra depois de alterações (Que não são verdadeiramente relativo à raiz tamanho do tipo de letra como o REM e EM unidades)
  • Propriedades, tais como margens, preenchimento e linha-altura não escala, naturalmente, quando re-em-linha.
  • eles são assumidos como inteiros, o que geralmente resulta em implementações menos precisas em uma variedade de diferentes proporções de pixels.
  • aparentemente, o Bootstrap 4 está a largar pixels para a REM.
  • Pixels criam a ilusão de ser igual a pixels na tela, o que leva a equívocos e a longo prazo torna-se confuso para novos desenvolvedores.
  • Pixels é improvável que se tornem uma solução viável para Fontes de escala no futuro, uma vez que o design é abrangente sobre proporções.

esta é a minha opinião sobre o porquê de não haver um futuro sério para os pixels no web design!

Obrigado por tolerar 😉

Deixe uma resposta

O seu endereço de email não será publicado.