Mais uma vez, quero falar sobre os resultados de um estudo de design de site que atraiu minha atenção. A última vez que escrevi sobre os mecanismos CSS subjacentes ao novo design do Facebook. E agora estou curioso para explorar o CSS do Twitter. O novo design do Twitter apareceu quase um ano atrás. Encontrei muitas coisas interessantes no CSS CSS: algo me pareceu bem e algo estranho.
Proporção de aspecto de avatares de usuários
Percebi uma implementação interessante do avatar do usuário na página de perfil. Esta implementação usa uma técnica CSS para preservar a proporção de um elemento.Avatar do usuário na página de perfilO código HTML e CSS a seguir ilustra a implementação do avatar.<a href="#" class="avatar">
<div class="avatar-aspect-ratio"></div>
<img alt="" src="me.jpg">
</a>
.avatar {
position: relative;
width: 25%;
display: block;
}
.avatar-aspect-ratio {
width: 100%;
padding-bottom: 100%;
}
.avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
A técnica de preservar a proporção de um elemento funciona devido ao fato de que quando um elemento tem um recuo vertical (propriedade padding-bottomou padding-top), o recuo depende da largura do elemento. Veja o seguinte exemplo:.element {
width: 250px;
padding-bottom: 100%;
}
O valor calculado padding-bottomé igual 250px. Isso significa que temos um quadrado perfeito. A equipe do Twitter usou a mesma técnica, mas aplicada a um elemento <img>que, em relação ao elemento pai, está absolutamente posicionado. Por quê? Aqui está o motivo.Algo está errado com o avatar.Quandoa imagem não está posicionada absolutamente, o avatar se parecerá com o mostrado na figura anterior. A imagem deve ser posicionada usando um valor100%para largura e altura. Com essa abordagem, seu tamanho será definido de acordo com o tamanho do elemento wrapper.Agora que descobrimos a ideia por trás dessa solução, voltemos ao modo como essa ideia foi implementada no Twitter.A propriedade éwidth: 25%baseada na largura do elemento wrapper. Na minha tela é -600px. Eu me perguntava por que essa técnica foi escolhida. Depois de aprender mais sobre o código CSS, notei que o mesmo componente é usado na janela modal Editar perfil. É verdade que o elemento aqui é menor devido ao uso do seguinte estilo:.avatar {
max-width: 8rem;
}
Eu realmente gosto da idéia de gerenciar imagens, influenciando apenas a propriedade width. Aqui está um vídeo que ilustra essa ideia.Controle de largura da imagemAqui você pode encontrar um projeto de demonstração para esta seção.Percentual de recuo superior
Para que o avatar do usuário se sobreponha à foto localizada na parte superior da página de perfil, é usado um recuo externo negativo especificado em porcentagem:.avatar {
margin-top: -18%;
}
É verdade que, na janela modal Editar perfil, o design já é usado para ajustar o recuo superior margin-top: -3rem. Observe que o recuo na janela modal é definido usando unidades rem. As mesmas unidades são usadas para definir a propriedade max-width.Uso estranho da função CSS calc ()
Notei que o seguinte CSS é usado para estilizar alguns botões:.button {
min-width: calc(45.08px)
}
Por que passar funções um calc()único valor? Eu não vejo o ponto. Talvez eles quisessem arredondar o número 45.08? Mas com essa abordagem, não é arredondado para 45. A largura do botão é muito pequena. O botão, ao traduzir o aplicativo para um idioma RTL, como o árabe, será muito pequeno.Um botão muito pequenoA funçãocalc()aparece no CSS embutido. Portanto, acredito que este é o resultado do estilo dinâmico do botão usando o React.Misture fundos CSS e imagens HTML
Em muitos lugares do site, encontrei uma mistura de imagens de fundo definidas por imagens CSS e HTML. Veja o seguinte exemplo:<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">
Vi isso no perfil do usuário e no componente usado na formação do layout da grade. Curiosamente, o opacityelemento de propriedade é <img>definida como 0. A fonte da imagem ativa é uma propriedade background-image. Além disso, aqui é usada uma propriedade background-size: coverque evita distorção da imagem.Tentei fazer o oposto, ou seja, exibir o elemento <img>e ocultar o plano de fundo do CSS e comparei os layouts de grade. Os resultados desta comparação são mostrados abaixo.À esquerda está a opção que usa a imagem de plano de fundo e à direita está a opção que usa a imagem HTML.Obviamente, a imagem à direita está distorcida! Não sei por que a equipe de desenvolvimento não usou a propriedade CSSobject-fit: coverpara evitar distorções. E eu gostaria de saber por que duas imagens são usadas aqui.Redefinir estilos
Percebi um padrão, que é o uso constante da classe CSS adicionada aos elementos <div>. Aqui está o CSS relevante:.css-1dbjc4n {
align-items: stretch;
border: 0 solid black;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
z-index: 0;
}
Esse estilo se aplica literalmente a todos os elementos <div>da página. Por quê? A redefinição de estilos CSS não é suficiente aqui?Alguns dos estilos descritos acima são bastante compreensíveis para mim, uma min-width: 0vez que existe alguma conexão com o Flexbox. Mas e quanto à indentação, indentação, fronteiras? Por que um elemento <div>precisa ser redefinido de estilos, considerando que esse elemento não possui as propriedades apropriadas?Flexbox e largura mínima: 0
O valor padrão da propriedade min-widthé auto, que acaba sendo zero. Quando algo é exibido como um elemento flexível, o valor de sua propriedade min-widthé igual ao tamanho do seu conteúdo. Permitir esse comportamento pode violar o layout se o conteúdo do elemento for maior que ele.Para evitar esse problema, você precisa redefinir a propriedade min-widthpara descendentes de elementos flexíveis.Elemento flexível e wrapper FlexboxO layout mostrado acima mostra o que pode acontecer se o conteúdo do elemento flexível for muito longo. Observe que o texto ultrapassa os limites do elemento wrapper. Mas o que acontece quando se utiliza a propriedademin-width: 0.O conteúdo não vai além do elemento flexUsando a posição: propriedade pegajosa
Percebi o uso da propriedade position: stickyna barra lateral direita do Twitter (onde são exibidas as tendências de mídia e recomendações sobre os usuários a seguir). Pareceu-me interessante como o trabalho com valores de propriedade foi organizado bottome topdurante a rolagem. Os valores padrão são os seguintes:.sidebar {
position: sticky;
width: 350px;
bottom: -470.5px;
}
Quando a página rola para baixo, a propriedade bottomé substituída pela propriedade top: -480.5px. Eu acho que os designers fizeram isso para permitir que o usuário chegasse ao final da barra lateral primeiro. A propriedade é topadicionada depois disso.Elementos separadores
Assim como no design do Facebook que analisei anteriormente, no design do Twitter, em muitos lugares, elementos separadores são usados. Todos estes elementos são flexíveis, cuja largura é definida usando a propriedade flex-basis.Elementos separadoresO primeiro elemento mostrado na imagem anterior usa a propriedade ao definir o elemento separadorflex-grow: 1. O segundo usa uma largura fixa especificada em pixels.Criando conteúdo de Tweet
O Tweetacima é criado por mim no tweet. À primeira vista, pode parecer que temos diante de nós um elemento<p>ou<span>no qual o texto é adicionado. Mas, como se viu, cada smiley é representado por uma tag separada<span>e, se o texto estiver entre dois desses elementos, também será interpretado como tag<span>.O design do texto doEmoticon do tweet - este<span>, no qual existe um elemento<div>,<div>contém duas imagens. Um é o background CSS, o segundo é a imagem HTML.Como a primeira frase está envolto em uma tag<span>, deve haver separadores entre ela e elementos do mesmo nível. Os designers adicionaram uma nova linha no início da segunda frase para separar as frases.Segunda fraseUsando valores calculados para separar itens
Botão VoltarAo realizar uma pesquisa no Twitter ou ao abrir uma página de perfil, um botão pode ser vistomargin-left: -4px, especificando um recuo externo esquerdo negativo. Eu estava interessado no procedimento para calcular esse valor..back-button {
margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}
Os cálculos acima resultam em um valor -4px. Por que não perguntar -4px? Neste caso, é melhor do que usar uma função calc()?Largura dos links de navegação
Links de navegaçãoDesde o primeiro dia, quando me deparei com um painel de links de navegação, notei que quando você passa o mouse sobre eles, a largura deles é igual ao conteúdo. Eu me perguntava por que não fazer o ícone e o rótulo cobrirem toda a largura do elemento de navegação.Aqui, minha atenção foi atraída para o uso de uma propriedadeflex-direction: columnpara cada elemento da barra de navegação. Por quê? Isso é necessário em uma situação em que apenas uma criança é usada aqui?Recuo externo adicionado apenas no caso
O recuo em questão está presente no design para impedir o comportamento indesejado do layout da página. Chamei a atenção para dois exemplos do uso de recuo adicionado aos elementos, por assim dizer, “por precaução”. Vamos olhar para eles.Recuo adicionado aos elementos "apenas por precaução". À esquerda está o conteúdo normal do elemento. À direita, o conteúdo é visivelmente mais longo que onormal.Preste atenção ao que acontece quando o conteúdo do elemento é visivelmente mais longo que o conteúdo normal. Ou seja, o seguinte ocorre aqui:- O texto é cortado.
- Há um recuo entre os elementos.
O recuo externo desempenha o papel de um espaço reservado, o que impede que o elemento ocupe todo o espaço. Se você levar isso em consideração a tempo, poderá evitar problemas inesperados que possam surgir durante o projeto. É recomendável que você sempre teste layouts de página usando um conteúdo maior que o tamanho "normal".Janelas modais em pequenas áreas de visualização
Examinei a janela de edição de perfil modal. Verificou-se que, a uma certa altura da área de visualização, o botão Savedessa janela não está disponível. Aqui está como fica.Botão Salvar inacessívelComo a janela modal não suporta rolagem,Savenão foi possível acessaro botão. Mas a janela usada para controlar a aparência dos elementos suporta alterações dinâmicas de altura e rolagem.Uma janela que suporta alterações dinâmicas de alturaPor que uma janela suporta rolagem e a outra não? É interessante saber qual, de acordo com os designers do Twitter, é mais importante? Quanto a mim - esta é exatamente a janela usada para editar o perfil.Você planeja adotar alguma idéia do design do Twitter?