CSS Interview Questions

Vamos também comparar com display: block para completar.

Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas. A maioria dos SVGs que você encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.

A coloração básica pode ser feita 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 nomenclatura de cores CSS que você usa em HTML, independentemente de serem nomes de cores (que é red), Valores RGB (que são rgb(255,0,0)), valores de 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 apresentacional. Curiosamente, e ao contrário de estilos embutidos como style="fill: purple" que também é um atributo, os atributos de apresentação podem ser sobrescritos pelo CSS definidos em uma folha de estilos. Daí se você fez algo como svg { fill: blue; } ele irá substituir o preenchimento roxo que foi definido.

TL;DR

You can manipulate CSS styles using JavaScript by accessing the style property of an HTML element. For example, to change the background color of a div element with the id myDiv, you can use:

document.getElementById('myDiv').style.backgroundColor = 'blue';

You can also add, remove, or toggle CSS classes using the classList property:

document.getElementById('myDiv').classList.add('newClass');
document.getElementById('myDiv').classList.remove('oldClass');
document.getElementById('myDiv').classList.toggle('toggleClass');

Manipulating CSS styles using JavaScript

Accessing and modifying inline styles

You can directly manipulate the inline styles of an HTML element using the style property. This property allows you to set individual CSS properties.

// Select the element
const myDiv = document.getElementById('myDiv');

// Change the background color
myDiv.style.backgroundColor = 'blue';

// Set multiple styles
myDiv.style.width = '100px';
myDiv.style.height = '100px';
myDiv.style.border = '1px solid black';

Using the classList property

The classList property provides methods to add, remove, and toggle CSS classes on an element. This is useful for applying predefined styles from your CSS files.

// Select the element
const myDiv = document.getElementById('myDiv');

// Add a class
myDiv.classList.add('newClass');

// Remove a class
myDiv.classList.remove('oldClass');

// Toggle a class
myDiv.classList.toggle('toggleClass');

Modifying styles using CSS variables

CSS variables (custom properties) can be manipulated using JavaScript. This is particularly useful for theming and dynamic styling.

// Set a CSS variable
document.documentElement.style.setProperty('--main-color', 'blue');

// Get the value of a CSS variable
const mainColor = getComputedStyle(document.documentElement).getPropertyValue(
  '--main-color',
);
console.log(mainColor);

Using external stylesheets

You can also manipulate styles by dynamically adding or removing stylesheets.

// Create a new link element
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

// Append the link element to the head
document.head.appendChild(link);

// Remove the link element
document.head.removeChild(link);

Further reading

• MDN Web Docs: Element.style
• MDN Web Docs: Element.classList
• MDN Web Docs: Using CSS custom properties (variables)
• MDN Web Docs: Document.createElement()

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

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

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

Regras do Modelo da Caixa

• As dimensões de um elemento de bloco são calculadas por meio de width, height, paddings e borders.
• Se nenhum height for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais padding (a menos que existam floats, veja descreva flutuantes e como funcionam).
• Se nenhum width for especificado, um elemento não-float do bloco será expandido para caber a largura do seu pai menos o padding, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
  • Alguns elementos de nível de bloco (por exemplo, table, figure e input) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
  • Nota: span é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
• O height de um elemento é calculado pela height do conteúdo.
• A width de um elemento é calculada pela width do conteúdo.
• Por padrão (box-sizing: content-box), paddings e borders não fazem parte da width e height de um elemento.

Note que margins não são contados para o tamanho real da caixa. Isso afeta o espaço total que a caixa ocupará na página, mas apenas o espaço fora da caixa. A área da caixa para no border — ela não se estende até a margin.

Extra

A propriedade box-sizing, que define como as dimensões totais largura e altura de um elemento são calculadas.

• box-sizing: content-box: Este é o valor padrão de box-sizing e segue as regras mencionadas acima.
• box-sizing: border-box: A width e a height incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem * { box-sizing: border-box; } globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a pergunta sobre o 'box-sizing: border-box' para mais informações.

Referências

• O modelo de caixa | MDN

* { box-sizing: border-box; } faz com que cada elemento na página use a abordagem box: border-box para calcular os elementos height e width.

Qual é a diferença?

Por padrão, os elementos têm box-sizing: content-box aplicado, e apenas o tamanho do conteúdo está sendo contabilizado se um elemento tem height e width especificados. box-sizing: border-box altera como a width e height dos elementos estão sendo calculadas, a border e o padding também são incluídos no cálculo. O height de um elemento é agora calculado pelo conteúdo height + padding vertical + border horizontal. A width de um elemento é agora calculada pela width do conteúdo + padding horizontal + largura da horizontal border.

A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo box-sizing:

Vantagens

Levar em consideração paddings e borders como parte do modelo de caixa é mais coerente com a forma como os designers imaginam o conteúdo em grades. Essa é uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente * { box-sizing: border-box; } para que todos os elementos usem esse modelo de caixa por padrão.

Referências

• Box Sizing CSS-Tricks

Os valores comuns para a propriedade display: none, block, inline, inline-block, flex, grid, tabela, table-row, table-cell, table-cell, list-item.

Para uma lista completa de valores para a propriedade display, consulte CSS Display | MDN.

Referências

• CSS Display | MDN

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

• static: A posição padrão; o elemento irá fluir na página como normalmente faria. As propriedades top, right, bottom, left ez-index não se aplicam.
• relative: A posição do elemento é ajustada em relação a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se não tivesse sido posicionado).
• absolute: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao ancestral posicionado mais próximo se houver, ou em relação ao bloco inicial de contêiner. Caixas posicionadas absolutamente podem ter margens e não se sobrepõem com outras margens. 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 específica em relação à janela de visualização e não se move quando a página é rolada.
• sticky: O posicionamento "sticky" é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado relative até atravessar um limite específico, momento em que é tratado como posicionado fixed.

Estas duas abordagens não se excluem mutuamente. Tornar um site responsivo significa que alguns elementos irão responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, através de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.

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

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

Uma estratégia mobile-first também é responsiva, no entanto, ela define todos os estilos para dispositivos móveis como padrão e adiciona regras específicas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:

.min-classe {
  font-size: 12px;
}

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

Uma estratégia mobile-first tem as seguintes principais vantagens:

• É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
• Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.

Existem quatro tipos de propriedades @media (incluindo screen):

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

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

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

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

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

Se um elemento pai não conter nada além de elementos flutuantes, sua altura será desmoronada a nada. Ele pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do container.

O hack do Clearfix

O hack .clearfix usa um CSS inteligente pseudo-element (::after) para limpar floats. Ao invés de definir o excesso de fluxo no pai, você aplica uma classe adicional clearfix para ele. Em seguida, aplique este CSS:

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

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

Trívia

Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade float para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, não há muita necessidade de usar a propriedade float.

Referências

• Clearfix: Uma Lição em Desenvolvimento Web Evolução

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

• ::first-line e ::first-letter podem ser usados para decorar o texto.
• Usado no truque .clearfix conforme mostrado acima, para adicionar um elemento de espaço zero com clear: both.
• As setas triangulares em tooltips utilizam ::before e ::after. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.

Notas

• Pseudo-elementos são diferentes de pseudo-classes, que são usados para estilizar um elemento baseado em seu state (como :hover, :focus, etc).
• Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.

Referências

• Pseudo-elements - CSS | MDN

Gostei

• A maioria das vantagens mencionadas em "Quais são as vantagens/desvantagens de usar pré-processadores CSS?".
• Less é escrito em JavaScript, o que o torna compatível com o Node.

Não gostei

• Sass depende de node-sass, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
• No Less, os nomes de variáveis são prefixados com @, o que pode ser confundido com palavras-chave nativas do CSS, como a regra @media, @import e @font-face.

Antes de Flex se tornar popular (por volta de 2014), o sistema de grid baseado em float era o mais confiável porque ainda tem maior suporte dos navegadores entre os sistemas alternativos (flex, grid). Bootstrap estava usando a abordagem float até o Bootstrap 4 que mudou para a abordagem flex.

Hoje, flex é a abordagem recomendada para construir sistemas de grid e tem suporte bom para os navegadores (99.64%).

Para os aventureiros, vocês podem dar uma olhada no CSS Grid Layout, que usa a mais nova propriedade grid. Grid é um sistema de layout bidimensional baseado em grade, em comparação com o Flexbox, que é unidimensional.

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

Flexbox resolve muitos problemas comuns no CSS, como centralização vertical de elementos dentro de um contêiner, rodapé fixo, etc. Frameworks CSS famosos como Bootstrap e Bulma são baseados em Flexbox, e Flexbox ainda é a maneira testada e comprovada de criar layouts.

Grid é, de longe, a abordagem mais intuitiva para criar layouts baseados em grade, mas o suporte dos navegadores ainda não é tão amplo no momento. Muitos problemas de layout já podem ser resolvidos com Flexbox, então não há uma grande necessidade do Grid.

Um exemplo seria transformar uma navegação em forma de pilha em uma navegação de abas fixas na parte inferior, além de um determinado ponto de interrupção.

Primeiramente, entenda que os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar 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 ou universais. Eles correspondem a um grande número de elementos e os navegadores terão que fazer mais trabalho para determinar se os pais correspondem.

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

Esteja ciente de quais propriedades CSS trigger reflow, repaint, e compositing. Evite escrever estilos que alteram o layout (fator reflow) quando possível.

Vantagens

• O CSS é fica mais fácil de ser mantido.
• Mais fácil escrever seletores aninhados.
• Variáveis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso não é necessariamente útil com propriedades personalizadas CSS (frequentemente chamadas de variáveis CSS).
• Mixins para gerar CSS repetido.
• Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configuração mais fácil e menos verbosa.
• Dividindo o seu código em vários arquivos durante o desenvolvimento. 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. Tempo de recompilação pode ser lento.
• Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como postcss-loader com o 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 uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.

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

Tamanho pequeno/zero

width: 1px; height: 1px e uma combinação do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espaço na tela.

Usar a largura: 0; altura; 0 não é recomendado porque os motores de busca podem penalizar isso, pensando que tem uma intenção maliciosa, como encher de palavras-chave (keyword stuffing).

Posicionamento absoluto

position: absolute; left: -99999px posicionará um elemento fora da tela. No entanto, de acordo com o artigo da WebAIM:

Elementos navegáveis, como links e controles de formulário, não devem ser escondidos fora da tela. Eles ainda seriam navegáveis por usuários de teclado com visão, mas não seriam visíveis para eles, a menos que sejam estilizados para se tornarem visíveis quando receberem foco do teclado.

Use isso apenas quando seus conteúdos contiverem apenas texto.

Indentação de texto

text-indent: -9999px. Isso só funciona em texto dentro dos elementos block. Semelhante à técnica de posicionamento absoluto mencionada acima, os elementos focalizáveis com esse estilo ainda poderão ser focalizados, causando confusão para os usuários com visão que usam a navegação por teclado.

Formas incorretas

As seguintes maneiras estão incorretas porque escondem o conteúdo do usuário E dos leitores de tela, o que é incorreto se o objetivo é expor apenas aos leitores de tela.

• display: none
• visibility: hidden
• hidden attribute

Técnicas no mundo real

Idealmente, é recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.

Em vez de implementar sua própria maneira de remover um elemento da árvore de renderização e da árvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.

Tailwind CSS

.sr-only {
  posição: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: oculto;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Bootstrap CSS

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Referências

• CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela

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

Em projetos grandes, ter uma classe utilitária .clearfix será muito útil. overflow: hidden pode cortar os filhos se eles forem mais altos que o pai, e isso não é muito ideal.

• Bootstrap: Ciclo de lançamento lento. Bootstrap 4 está em alfa há quase 2 anos. As versões futuras do Bootstrap deveriam incluir um componente de botão spinner, já que ele é amplamente utilizado.
• Semantic UI:: A estrutura do Código Fonte torna a personalização do tema extremamente difícil de entender. Seu sistema de theming não convencional é difícil de personalizar. Caminho de configuração hardcoded dentro da biblioteca do fornecedor (vendor). 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. Atualizar as versões do Bulma pode quebrar o aplicativo de maneiras sutis.

O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras de 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, a, b, c, d são calculados para cada regra com base nos seguintes:

1. a é se estilos inline estão sendo usados. Se a declaração de propriedade é um estilo embutido no elemento, a é 1, senão 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 única pontuação numérica, mas uma matriz de valores que podem ser comparados por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhar da esquerda para a direita e comparar o maior valor em cada coluna. Portanto, um valor na coluna 'b' irá substituir valores em colunas 'c' e 'd', não importa o que eles possam ser. Como tal, especificidade de 0, 1, 0, 0 seria maior que um de 0, 0, 10, 10.

Nos casos de igual especificidade: a última regra é a que conta. Se você escreveu a mesma regra em sua folha de estilo (independente da sua folha interna ou externa) duas vezes, então a regra inferior na sua folha de estilo está mais próxima do elemento a ser estilizado, Considera-se mais específico, pelo que será aplicado.

É uma melhor prática escrever regras de CSS com baixa especificidade, para que elas possam ser facilmente substituídas se necessário. Ao escrever o código da biblioteca de componentes CSS UI, é importante que eles tenham poucas especificidades, para que os usuários da biblioteca possam substituí-las sem usar regras CSS muito complicadas só para aumentar a especificidade ou recorrer a !important.

Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual do CSS em uma página da web, no qual os blocos são organizados. Elementos flutuantes, posicionados absolutamente, inline-blocks, table-cells, table-captions e elementos com overflow diferente de visible (exceto quando esse valor foi propagado para a área visível) estabelecem novos contextos de formatação de bloco.

Saber estabelecer um contexto de formatação de blocos é importante, porque sem fazer isso, a caixa de contenção não conterá filhos floated. Isso é semelhante ao colapso das margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.

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

• O valor de float não é none.
• O valor de posição não é static nem relative.
• O valor de display é table-cell, table-caption, inline-block, flex, or inline-flex, grid, or inline-grid.
• O valor de float não é none.

Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (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 em margens de recolhimento.

A propriedade z-index no CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. 'z-index' afeta apenas elementos posicionados (elementos que têm um valor de 'posição' que não é 'static') e seus descendentes ou itens flexíveis.

Sem qualquer valor de z-index, pilha de elementos na ordem de exibição no DOM (o menor nível abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento não estático (e seus filhos) sempre aparecerão no topo dos elementos com posição estática padrão, independente da hierarquia HTML.

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

Cada contexto de empilhamento é auto-contido - após o conteúdo do elemento ser empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam 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-se como um elemento para criar um contexto de empilhamento está listado neste longo conjunto de rules.

Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS background-image, background-position e background-size para selecionar uma parte específica da imagem maior como a imagem desejada.

Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).

Vantagens

• Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
• Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados :hover. O piscar não seria visto.

Como implementar

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

A folha de estilos gerada pode parecer algo como:

.icon {
  background-image: url('https://example.com/images/spritesheet.png');
  width: 24px;
  height: 24px;
}

.icon-cart {
  background-position: 0 0;
}

.icon-arrow {
  background-position: -24px 0;
}

E pode ser usado no HTML como tal:

<span class="icon icon-cart"></span>

<span class="icon icon-arrow"></span>

Referências

• Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN

Esta pergunta está relacionada com a pergunta sobre escrever um CSS eficiente. Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar 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 um 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 determinado <span>, assim que ele encontrar um <p>, ele sabe que o <span> corresponde ao seletor e pode parar de atravessar seus pais.

Retina é apenas um termo de marketing usado para se referir a telas de alta resolução com uma proporção de pixels maior do que 1. O ponto chave a saber é que o uso de uma taxa de pixels significa que essas telas estão emulando uma tela de resolução mais baixa para mostrar elementos com o mesmo tamanho. Hoje em dia, consideramos todos os dispositivos móveis retina por padrão.

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

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

Para superar esse problema, podemos usar imagens responsivas, como especificado no HTML5. Ele 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) vão ignorá-lo e usar o src em vez disso. Se realmente precisarmos oferecer suporte ao IE11 e quisermos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, como o Picturefill.

Para ícones, é recomendado usar SVGs sempre que possível, pois eles são renderizados com muita nitidez independentemente da resolução.

Técnicas

• Degradação graciosa: A prática de construir uma aplicação para navegadores modernos, garantindo que ela permaneça funcional em navegadores mais antigos.
• Aprimoramento progressivo: A prática de construir uma aplicação para um nível base de experiência do usuário, mas adicionar aprimoramentos funcionais quando um navegador a suporta.
• Use caniuse.com para verificar o suporte de recursos.
• Autoprefixer para inserção automática de prefixo do fornecedor (vendor).
• Detecção de recursos usando Modernizr.
• Use as consultas CSS de recursos via `@support``

Tanto o design responsivo quanto o design adaptável tentam otimizar a experiência do usuário em diferentes dispositivos, ajustando-se a diferentes tamanhos de viewport, resoluções, contextos de uso, mecanismos de controle e assim por diante.

O design responsivo funciona com base no princípio da flexibilidade - um único site fluido que pode ter uma boa aparência em qualquer dispositivo. Sites responsivos usam consultas de mídia, grades flexíveis e imagens responsivas para criar uma experiência do usuário que se flexiona e muda com base em uma infinidade de fatores. Como uma bola única que cresce ou diminui para se ajustar a vários aros diferentes.

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

Ambos esses métodos têm alguns problemas que precisam ser avaliados:

• 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. Definir os pontos de interrupção de consulta de mídia é um desses desafios. Você usa valores padronizados de ponto de quebra? Ou, você utiliza pontos de interrupção que fazem sentido para o layout específico do seu site? E se o layout mudar?
• O design adaptável geralmente requer a detecção de agente do usuário ou detecção de DPI, etc., todos os quais podem se mostrar pouco confiáveis.

• Depois de identificar o problema e o navegador problemático, use uma folha de estilo separada que só é carregada quando aquele navegador específico está sendo usado. Essa técnica requer renderização do lado do servidor.
• Use bibliotecas como Bootstrap que já lidam com esses problemas de estilo para você.
• Use o autoprefixer para adicionar automaticamente prefixos de vendors ao seu código.
• Use Reset CSS or Normalize.css.
• Se você estiver usando o PostCSS (ou uma biblioteca semelhante de transpilação CSS), pode haver plugins que permitam que você opte por usar a sintaxe CSS moderna (e até mesmo as propostas W3C) que transformará aquelas seções do seu código em código compatível com versões anteriores que funcionarão nos destinos que você definiu.

translate() é um valor possível da propriedade CSS transform. Ao usar traduzir(), o elemento ainda ocupa seu espaço original (mais ou menos como o position: relative). Mas ao mudar o posicionamento absoluto dos elementos, os elementos são removidos do fluxo da página e o posicionamento dos elementos ao redor será afetado. Portanto, o layout da página terá que ser recalculado.

Mudar transform ou opacity não aciona reflows ou repaints no navegador, mas aciona composições; Por outro lado, mudar o posicionamento absoluto aciona um reflow. transform faz com que o navegador crie uma camada GPU para o elemento, mas mudar as propriedades de posicionamento absoluto usa a CPU. Portanto, translate() é mais eficiente e resultará em tempos de pintura mais curtos para animações mais suaves.

Qual escolher e por quê?

Escolha redefinir quando precisar de um design de site muito personalizado ou não convencional, de tal forma que você precise fazer muitos estilos próprios e não precise preservar nenhum estilo padrão.