CSS

O navegador determina quais estilos exibir em um elemento dependendo da especificidade das regras CSS. Assumimos que o navegador já determinou as regras que correspondem a um elemento específico. Entre as regras correspondentes, a especificidade, quatro valores separados por vírgula, a, b, c, d são calculados para cada regra com base no seguinte:

1. a é se estilos inline estão sendo usados. Se a declaração de propriedade for um estilo inline no elemento, a é 1, caso contrário, 0.
2. b é o número de seletores de ID.
3. c é o número de classes, atributos e seletores de pseudo-classes.
4. d é o número de tags e seletores de pseudo-elementos.

A especificidade resultante não é uma pontuação, mas uma matriz de valores que podem ser comparados coluna por coluna. Ao comparar seletores para determinar qual tem a maior especificidade, olhe da esquerda para a direita e compare o maior valor em cada coluna. Assim, um valor na coluna b substituirá os valores nas colunas c e d, não importa quais sejam. Como tal, a especificidade de 0,1,0,0 seria maior do que a de 0,0,10,10.

Nos casos de especificidade igual: a regra mais recente é a que conta. Se você escreveu a mesma regra em sua folha de estilo (independentemente de interna ou externa) duas vezes, então a regra inferior em sua folha de estilo está mais próxima do elemento a ser estilizado, ela é considerada mais específica e, portanto, será aplicada.

Eu escreveria regras CSS com baixa especificidade para que pudessem ser facilmente substituídas, se necessário. Ao escrever código de biblioteca de componentes de UI CSS, é importante que eles tenham baixas especificidades para que os usuários da biblioteca possam substituí-los sem usar regras CSS muito complicadas apenas para aumentar a especificidade ou recorrer a !important.

• Resetar - Resetar significa remover todo o estilo padrão do navegador nos elementos. Por exemplo, margins, paddings, font-sizes de todos os elementos são resetados para serem os mesmos. Você terá que redeclarar o estilo para elementos tipográficos comuns.
• Normalizar - Normalizar preserva estilos padrão úteis em vez de "desestilizar" tudo. Também corrige bugs para dependências comuns do navegador.

Eu escolheria resetar quando eu tiver um design de site muito personalizado ou não convencional, de modo que eu precise fazer muito do meu próprio estilo e não precise que nenhum estilo padrão seja preservado.

Float é uma propriedade de posicionamento CSS. Elementos flutuantes permanecem parte do fluxo da página e afetarão o posicionamento de outros elementos (por exemplo, o texto fluirá ao redor de elementos flutuantes), ao contrário dos elementos com position: absolute, que são removidos do fluxo da página.

A propriedade CSS clear pode ser usada para ser posicionada abaixo de elementos flutuantes left/right/both.

Se um elemento pai contiver apenas elementos flutuantes, sua altura será colapsada para nada. Isso pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do contêiner.

O hack .clearfix usa um astuto pseudo seletor CSS (#describe-pseudo-elements-and-discuss-what-they-are-used-for) (::after) para limpar floats. Em vez de definir o overflow no pai, você aplica uma classe adicional clearfix a ele. Em seguida, aplique este CSS:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternativamente, dê a propriedade overflow: auto ou overflow: hidden ao elemento pai, o que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e ele se expandirá para conter seus filhos.

A propriedade z-index em CSS controla a ordem de empilhamento vertical de elementos que se sobrepõem. z-index afeta apenas elementos que possuem um valor de position que não é static.

Sem nenhum valor de z-index, os elementos se empilham na ordem em que aparecem no DOM (o mais baixo no mesmo nível de hierarquia aparece em cima). Elementos com posicionamento não estático (e seus filhos) sempre aparecerão acima de elementos com posicionamento estático padrão, independentemente da hierarquia HTML.

Um contexto de empilhamento é um elemento que contém um conjunto de camadas. Dentro de um contexto de empilhamento local, os valores de z-index de seus filhos são definidos em relação a esse elemento, em vez de em relação à raiz do documento. As camadas fora desse contexto — ou seja, elementos irmãos de um contexto de empilhamento local — não podem ficar entre as camadas dentro dele. Se um elemento B estiver em cima do elemento A, um elemento filho do elemento A, o elemento C, nunca poderá ser superior ao elemento B, mesmo que o elemento C tenha um z-index maior que o elemento B.

Cada contexto de empilhamento é autocontido - depois que o conteúdo do elemento é empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento pai. Um punhado de propriedades CSS dispara um novo contexto de empilhamento, como opacity menor que 1, filter que não é none e transform que não é none.

_Nota: O que exatamente qualifica um elemento para criar um contexto de empilhamento está listado neste longo conjunto de [regras].

Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual CSS de uma página da web na qual as caixas de bloco são dispostas. Flutuantes, elementos posicionados absolutamente, inline-blocks, table-cells, table-captions e elementos com overflow diferente de visible (exceto quando esse valor foi propagado para a viewport) estabelecem novos contextos de formatação de bloco.

Saber como estabelecer um contexto de formatação de bloco é importante, porque, sem isso, a caixa que o contém não [conterá filhos flutuantes]. Isso é semelhante ao colapso de margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.

Um BFC é uma caixa HTML que satisfaz pelo menos uma das seguintes condições:

• O valor de float não é none.
• O valor de position não é static nem relative.
• O valor de display é table-cell, table-caption, inline-block, flex ou inline-flex, grid ou inline-grid.
• O valor de overflow não é visible.

Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contido (para formatação da direita para a esquerda, as bordas direitas se tocam).

As margens verticais entre caixas adjacentes de nível de bloco em um BFC colapsam. Leia mais sobre [colapso de margens].

• Método div vazio - <div style="clear:both;"></div>.
• Método clearfix - Consulte a classe .clearfix acima.
• Método overflow: auto ou overflow: hidden - O pai estabelecerá um novo contexto de formatação de bloco e se expandirá para conter seus filhos flutuantes.

Em grandes projetos, eu escreveria uma classe de utilitário .clearfix e as usaria em locais onde eu precisasse. overflow: hidden pode cortar os filhos se os filhos forem mais altos que o pai e não for muito ideal.

Sprites CSS combinam várias imagens em uma única imagem maior. É uma técnica comumente usada para ícones (o Gmail a usa). Como implementá-la:

1. Use um gerador de sprites que empacote várias imagens em uma e gere o CSS apropriado para ela.
2. Cada imagem teria uma classe CSS correspondente com as propriedades background-image, background-position e background-size definidas.
3. Para usar essa imagem, adicione a classe correspondente ao seu elemento.

Vantagens:

• Reduz o número de requisições HTTP para várias imagens (apenas uma única requisição é necessária por folha de sprite). Mas com HTTP2, carregar várias imagens não é mais um grande problema.
• Download avançado de ativos que não seriam baixados até que fossem necessários, como imagens que só aparecem em pseudo-estados :hover. O piscar não seria visto.

• Depois de identificar o problema e o navegador infrator, use uma folha de estilo separada que só carrega quando esse navegador específico está sendo usado. No entanto, essa técnica requer renderização no lado do servidor.
• Use bibliotecas como o Bootstrap que já lidam com esses problemas de estilo para você.
• Use autoprefixer para adicionar automaticamente prefixos de fornecedor ao seu código.
• Use Reset CSS ou Normalize.css.
• Se você estiver usando Postcss (ou uma biblioteca de transpiladores semelhante), pode haver plugins que permitem que você opte por usar a sintaxe CSS moderna (e até propostas do W3C) que transformarão essas seções do seu código em um código seguro correspondente que funcionará nos alvos que você usou.

• Degradação graciosa (Graceful degradation) - A prática de construir um aplicativo para navegadores modernos, garantindo que ele permaneça funcional em navegadores mais antigos.
• Aprimoramento progressivo (Progressive enhancement) - A prática de construir um aplicativo para um nível base de experiência do usuário, mas adicionando aprimoramentos funcionais quando um navegador o suporta.
• Use [caniuse.com] para verificar o suporte a recursos.
• Autoprefixer para inserção automática de prefixo do fornecedor.
• Detecção de recursos usando [Modernizr].
• Use consultas de recursos CSS [@support]

Essas técnicas estão relacionadas à acessibilidade (a11y).

• width: 0; height: 0. Faz com que o elemento não ocupe nenhum espaço na tela, resultando em não mostrá-lo.
• position: absolute; left: -99999px. Posiciona-o fora da tela.
• text-indent: -9999px. Isso funciona apenas em texto dentro de elementos block. Este é um truque amplamente utilizado e famoso, mas vem com [algumas desvantagens], como causar problemas de desempenho, então você pode considerar usar text-indent: 100% em vez disso.
• Meta tags. Por exemplo, usando Schema.org, RDF e JSON-LD.
• WAI-ARIA. Uma especificação técnica do W3C que especifica como aumentar a acessibilidade de páginas da web.

Mesmo que WAI-ARIA seja a solução ideal, eu optaria pela abordagem de posicionamento absolute, pois ela tem o menor número de ressalvas, funciona para a maioria dos elementos e é uma técnica fácil.

Antes de o Flex se popularizar (por volta de 2014), o sistema de grade baseado em float era o mais confiável porque ainda tinha o maior suporte de navegador entre os sistemas alternativos existentes (flex, grid). O Bootstrap usava a abordagem float até o Bootstrap 4, que mudou para a abordagem baseada em flex. No momento da escrita (2020), flex é a abordagem recomendada para construir sistemas de grade e tem [suporte de navegador decente].

Para os mais aventureiros, eles podem investigar o [CSS Grid Layout], que usa a nova e brilhante propriedade grid; é ainda melhor que o flex para construir layouts de grade e será a maneira de fato de fazê-lo no futuro.

Sim. Um exemplo seria transformar uma navegação empilhada em uma navegação de guia fixa na parte inferior além de um determinado ponto de interrupção.

Sim, existem várias maneiras de colorir formas (incluindo a especificação de atributos no objeto) usando CSS inline, uma seção CSS incorporada ou um arquivo CSS externo. A maioria dos SVGs que você encontrará na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.

O colorimento básico pode ser feito definindo dois atributos no nó: fill e stroke. fill define a cor dentro do objeto e stroke define a cor da linha desenhada ao redor do objeto. Você pode usar os mesmos esquemas de nomes de cores CSS que você usa em HTML, seja nomes de cores (ou seja, red), valores RGB (ou seja, rgb(255,0,0)), valores Hex, valores RGBA, etc.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

O fill="purple" acima é um exemplo de um atributo de apresentação. Curiosamente, e ao contrário de estilos inline como style="fill: purple", que também é um atributo, os atributos de apresentação podem ser [substituídos por estilos CSS] definidos em uma folha de estilo. Portanto, se você fizesse algo como svg { fill: blue; }, ele substituiria o preenchimento roxo que definimos.

Sim, existem quatro tipos de propriedades @media (incluindo screen):

• all - para todos os tipos de dispositivos de mídia
• print - para impressoras
• speech - para leitores de tela que "lêem" a página em voz alta
• screen - para telas de computador, tablets, smartphones, etc.

Aqui está um exemplo de uso do tipo de mídia print:

@media print {
  body {
    color: black;
  }
}

Primeiramente, entenda que os navegadores correspondem os seletores da direita para a esquerda (seletor-chave). Os navegadores filtram os elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pai até a raiz para determinar as correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor. Portanto, evite seletores-chave que sejam seletores de tag e universais. Eles correspondem a um grande número de elementos e os navegadores terão que trabalhar mais para determinar se os pais correspondem.

A metodologia [BEM (Block Element Modifier)] recomenda que tudo tenha uma única classe e, onde você precisa de hierarquia, isso também seja incorporado ao nome da classe, o que naturalmente torna o seletor eficiente e fácil de sobrescrever.

Esteja ciente de quais propriedades CSS [disparam] reflow, repaint e compositing. Evite escrever estilos que alterem o layout (disparam reflow) sempre que possível.

Vantagens:

• O CSS se torna mais fácil de manter.
• Fácil de escrever seletores aninhados.
• Variáveis para temas consistentes. Pode compartilhar arquivos de tema entre diferentes projetos.
• Mixins para gerar CSS repetido.
• Recursos Sass como loops, listas e mapas podem tornar a configuração mais fácil e menos verbosa.
• Dividir seu código em vários arquivos. Os arquivos CSS também podem ser divididos, mas isso exigirá uma solicitação HTTP para baixar cada arquivo CSS.

Desvantagens:

• Requer ferramentas para pré-processamento. O tempo de recompilação pode ser lento.
• Não escreve CSS atualmente e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader] com [webpack], você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo novas habilidades que podem valer a pena se/quando elas se tornarem padronizadas.

O que gosto:

• Principalmente as vantagens mencionadas acima.
• Menos código JavaScript, o que se encaixa bem com Node.

O que não gosto:

• Eu uso Sass via node-sass, que é um binding para LibSass escrito em C++. Tenho que recompilá-lo frequentemente ao alternar entre as versões do Node.
• No Less, os nomes das variáveis são prefixados com @, o que pode ser confundido com palavras-chave CSS nativas como @media, @import e a regra @font-face.

Use @font-face e defina font-family para diferentes font-weights.

Esta parte está relacionada ao que foi dito acima sobre escrever CSS eficiente. Os navegadores correspondem seletores da direita para a esquerda (seletor-chave). Os navegadores filtram os elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pai até a raiz para determinar as correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor.

Por exemplo, com este seletor p span, os navegadores primeiro encontram todos os elementos <span> e percorrem seus pais até a raiz para encontrar o elemento <p>. Para um <span> específico, assim que ele encontra um <p>, ele sabe que o <span> corresponde e pode parar sua correspondência.

Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica dos elementos selecionados. Eles podem ser usados para decoração (:first-line, :first-letter) ou para adicionar elementos à marcação (combinados com content: ...) sem ter que modificar a marcação (:before, :after).

• :first-line e :first-letter podem ser usados para decorar texto.
• Usado no hack .clearfix, como mostrado acima, para adicionar um elemento de espaço zero com clear: both.
• Setas triangulares em dicas de ferramentas usam :before e :after. Isso promove a separação de preocupações, pois o triângulo é considerado parte do estilo e não realmente do DOM.

O modelo de caixa CSS descreve as caixas retangulares que são geradas para elementos na árvore do documento e dispostas de acordo com o modelo de formatação visual. Cada caixa possui uma área de conteúdo (por exemplo, texto, uma imagem, etc.) e áreas opcionais de padding, border e margin ao redor.

O modelo de caixa CSS é responsável por calcular:

• Quanto espaço um elemento de bloco ocupa.
• Se as bordas e/ou margens se sobrepõem ou colapsam.
• As dimensões de uma caixa.

O modelo de caixa tem as seguintes regras:

• As dimensões de um elemento de bloco são calculadas por width, height, padding, borders e margins.
• Se nenhuma height for especificada, um elemento de bloco terá a altura do conteúdo que contém, mais padding (a menos que haja floats, para os quais veja abaixo).
• Se nenhuma width for especificada, um elemento de bloco não flutuante se expandirá para preencher a largura de seu pai menos padding.
• A height de um elemento é calculada pela height do conteúdo.
• A width de um elemento é calculada pela width do conteúdo.
• Por padrão, paddings e borders não fazem parte da width e height de um elemento.

• Por padrão, os elementos têm box-sizing: content-box aplicado, e apenas o tamanho do conteúdo está sendo contabilizado.
• box-sizing: border-box altera como a width e height dos elementos estão sendo calculadas, border e padding também estão sendo incluídas no cálculo.
• A height de um elemento agora é calculada pela height do conteúdo + padding vertical + largura da border vertical.
• A width de um elemento agora é calculada pela width do conteúdo + padding horizontal + largura da border horizontal.
• Levar em consideração paddings e borders como parte do nosso modelo de caixa ressoa melhor com a forma como os designers realmente imaginam o conteúdo em grades.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Descrição | | :-- | :-- | | none | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento | | block | O elemento consome a linha inteira na direção do bloco (que geralmente é horizontal) | | inline | Os elementos podem ser dispostos um ao lado do outro | | inline-block | Semelhante a inline, mas permite algumas propriedades block como definir width e height | | table | Comporta-se como o elemento <table> | | table-row | Comporta-se como o elemento <tr> | | table-cell | Comporta-se como o elemento <td> | | list-item | Comporta-se como um elemento <li> que permite definir list-style-type e list-style-position |

Vou adicionar uma comparação com block para um bom complemento.

| | block | inline-block | inline | | --- | --- | --- | --- | | Tamanho | Preenche a largura de seu container pai. | Depende do conteúdo. | Depende do conteúdo. | | Posicionamento | Começa em uma nova linha e não tolera elementos HTML ao lado (exceto quando você adiciona float) | Flui junto com outros conteúdos e permite outros elementos ao lado. | Flui junto com outros conteúdos e permite outros elementos ao lado. | | Pode especificar width e height | Sim | Sim | Não. Irá ignorar se for definido. | | Pode ser alinhado com vertical-align | Não | Sim | Sim | | Margens e preenchimentos | Todos os lados respeitados. | Todos os lados respeitados. | Apenas os lados horizontais são respeitados. Os lados verticais, se especificados, não afetam o layout. O espaço vertical que ele ocupa depende do line-height, embora a border e o padding apareçam visualmente ao redor do conteúdo. | | Float | - | - | Torna-se como um elemento block onde você pode definir margens e preenchimentos verticais. |

Um elemento posicionado é um elemento cuja propriedade position computada é relative, absolute, fixed ou sticky.

• static - A posição padrão; o elemento fluirá para a página como normalmente faria. As propriedades top, right, bottom, left e z-index não se aplicam.
• relative - A posição do elemento é ajustada em relação a si mesmo, sem alterar o layout (e, portanto, deixando um espaço para o elemento onde ele estaria se não tivesse sido posicionado).
• absolute - O elemento é removido do fluxo da página e posicionado em uma posição especificada em relação ao seu ancestral posicionado mais próximo, se houver, ou de outra forma em relação ao bloco contendo inicial. As caixas posicionadas absolutamente podem ter margens, e elas não colapsam com nenhuma outra margem. Esses elementos não afetam a posição de outros elementos.
• fixed - O elemento é removido do fluxo da página e posicionado em uma posição especificada em relação à viewport e não se move quando rolado.
• sticky - O posicionamento sticky é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado relative até que cruze um limite especificado, momento em que é tratado como posicionado fixed.

• Bootstrap - Ciclo de lançamento lento. O Bootstrap 4 está em alfa há quase 2 anos. Adicionar um componente de botão giratório, pois é amplamente utilizado.
• Semantic UI - A estrutura do código-fonte torna a personalização do tema extremamente difícil de entender. Seu sistema de tematização não convencional é uma dor para personalizar. Caminho de configuração codificado dentro da biblioteca do fornecedor. Não é bem projetado para substituir variáveis, ao contrário do Bootstrap.
• Bulma - Muitas classes e marcações não semânticas e supérfluas são necessárias. Não é compatível com versões anteriores. A atualização de versões quebra o aplicativo de maneiras sutis.

Sim. Flexbox é principalmente para layouts unidimensionais, enquanto Grid é para layouts bidimensionais.

Flexbox resolve muitos problemas comuns em CSS, como centralização vertical de elementos dentro de um contêiner, sticky footer, etc. Bootstrap e Bulma são baseados em Flexbox, e é provavelmente a maneira recomendada de criar layouts atualmente. Já experimentei Flexbox antes, mas encontrei alguns problemas de incompatibilidade de navegador (Safari) ao usar flex-grow, e tive que reescrever meu código usando inline-blocks e matemática para calcular as larguras em porcentagens, não foi uma experiência agradável.

Grid é de longe a abordagem mais intuitiva para criar layouts baseados em grade (é melhor que seja!), mas o suporte do navegador não é amplo no momento.

Observe que essas duas abordagens não são exclusivas.

Tornar um site responsivo significa que alguns elementos responderão adaptando seu tamanho ou outra funcionalidade de acordo com o tamanho da tela do dispositivo, tipicamente a largura da viewport, através de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Uma estratégia mobile-first também é responsiva, no entanto, ela concorda que devemos padronizar e definir todos os estilos para dispositivos móveis, e só adicionar regras responsivas específicas para outros dispositivos mais tarde. Seguindo o exemplo anterior:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Uma estratégia mobile-first tem 2 vantagens principais:

• É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas contra nenhuma media query.
• Força a escrever um código mais limpo em relação às regras CSS responsivas.

Ambos, design responsivo e adaptativo, tentam otimizar a experiência do usuário em diferentes dispositivos, ajustando para diferentes tamanhos de viewport, resoluções, contextos de uso, mecanismos de controle e assim por diante.

O design responsivo funciona com o princípio da flexibilidade - um único site fluido que pode ficar bom em qualquer dispositivo. Sites responsivos usam media queries, grades flexíveis e imagens responsivas para criar uma experiência de usuário que se adapta e muda com base em uma infinidade de fatores. Como uma única bola crescendo ou encolhendo para caber em vários aros diferentes.

O design adaptativo é mais como a definição moderna de aprimoramento progressivo. Em vez de um único design flexível, o design adaptativo detecta o dispositivo e outros recursos e, em seguida, fornece o recurso e o layout apropriados com base em um conjunto predefinido de tamanhos de viewport e outras características. O site detecta o tipo de dispositivo usado e entrega o layout pré-definido para esse dispositivo. Em vez de uma única bola passando por vários aros de tamanhos diferentes, você teria várias bolas diferentes para usar dependendo do tamanho do aro.

Ambos os métodos apresentam alguns problemas que precisam ser ponderados:

• O design responsivo pode ser bastante desafiador, pois você está essencialmente usando um único layout, embora responsivo, para se adequar a todas as situações. Como definir os pontos de interrupção da media query é um desses desafios. Você usa valores de ponto de interrupção padronizados? Ou usa pontos de interrupção que fazem sentido para o seu layout específico? E se esse layout mudar?
• O design adaptativo geralmente requer a detecção do agente do usuário ou detecção de DPI, etc., o que pode se mostrar não confiável.

Retina é apenas um termo de marketing para se referir a telas de alta resolução com uma proporção de pixels maior que 1. O principal a saber é que usar uma proporção de pixels significa que essas telas estão emulando uma tela de resolução mais baixa para mostrar elementos com o mesmo tamanho. Atualmente, consideramos todos os dispositivos móveis telas retina de fato.

Os navegadores, por padrão, renderizam elementos DOM de acordo com a resolução do dispositivo, exceto para imagens.

Para ter gráficos nítidos e bonitos que aproveitem ao máximo as telas retina, precisamos usar imagens de alta resolução sempre que possível. No entanto, usar sempre as imagens de maior resolução terá um impacto no desempenho, pois mais bytes precisarão ser enviados pela rede.

Para superar esse problema, podemos usar imagens responsivas, conforme especificado em HTML5. Isso requer disponibilizar diferentes arquivos de resolução da mesma imagem para o navegador e deixá-lo decidir qual imagem é a melhor, usando o atributo html srcset e, opcionalmente, sizes, por exemplo:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

É importante notar que os navegadores que não suportam o srcset do HTML5 (ou seja, IE11) irão ignorá-lo e usarão src em vez disso. Se realmente precisamos dar suporte ao IE11 e queremos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, por exemplo.

Para ícones, eu também optaria por usar SVGs e fontes de ícones sempre que possível, pois eles renderizam muito nitidamente independentemente da resolução.

translate() é um valor de transform CSS. Alterar transform ou opacity não aciona reflow ou repaint do navegador, mas aciona composições; enquanto a alteração do posicionamento absoluto aciona reflow. transform faz com que o navegador crie uma camada de GPU para o elemento, mas a alteração das propriedades de posicionamento absoluto usa a CPU. Portanto, translate() é mais eficiente e resultará em tempos de pintura mais curtos para animações mais suaves.

Ao usar translate(), o elemento ainda ocupa seu espaço original (meio que como position: relative), ao contrário de quando se altera o posicionamento absoluto.