Dicas de CSS que você provavelmente não encontrará nos tutoriais

Existem certas regras CSS que podem ser encontradas em qualquer tutorial. Mas também existem regras CSS que você não encontrará nos tutoriais, mas você as encontrará assim que começar a escrever o código. Tenho certeza de que você já descobriu como alinhar um elemento verticalmente ou criar um layout complexo. Nós não vamos falar sobre isso.

Finalmente, existem regras de CSS que você provavelmente não verá nos manuais e das quais talvez não esteja ciente. Por algum tempo coletei essas dicas e agora decidi escrever um artigo na esperança de que elas fossem úteis.



Abaixo está o que os tutoriais de CSS não me ensinaram.

Propriedade padding-top relativa à largura do elemento pai

Com que frequência você usou unidades relativas em CSS? Sou um grande fã deles, porque eles permitem que você crie um site responsivo sem se aprofundar nas consultas de mídia. Se você deseja definir a altura do elemento para metade da altura do pai, basta escrever height: 50% .

Você pode usar unidades relativas em qualquer lugar. Se você deseja adicionar a distância entre dois elementos verticais, pode escrever na margin-top: 15% e um recuo externo será exibido. A distância será 15% da altura original. Acho que todos sabem disso e não vou perder seu tempo. Mas talvez você não saiba que nem tudo é tão simples.

Em algumas situações, é melhor usar preenchimento em vez de margem . Mas quando você ajusta o padding-top: 15% ... Que diabos? ..

A propriedade não funciona como o esperado. Ele não define parâmetros em relação à altura do pai. O que está havendo?

Explicação

Ele define os parâmetros em relação à largura do pai. Você precisa de uma demo? Aqui:


Apenas brinque de mudar a largura dos pais e veja como isso afetará o recuo interno da criança. À primeira vista, isso pode parecer estranho, mas, de fato, há uma boa razão para isso acontecer. Você o encontrará lendo a especificação CSS ...

Não, estou brincando - não há explicação para isso acontecer. Pelo menos não consegui encontrar uma explicação em lugar algum. Apenas acontece, tenha isso em mente.

Embora não entendamos por que os desenvolvedores fizeram isso, podemos usar esse recurso para nossa vantagem. Para o nosso item, definimos o seguinte:

 .parent { height: auto; width: 100px; } .child { padding-top: 100%; } 

Então a altura do elemento será igual à altura da criança, embora tenhamos definido height: auto . Por outro lado, a altura da criança será igual à largura do pai, pois definimos padding-top: 100% . O resultado é um quadrado e o elemento manterá essa proporção em qualquer tamanho.

Aqui está um exemplo de trabalho:


Se você alterar padding-top: 100% para qualquer outra porcentagem, obterá um retângulo. Se você alterar a largura, a proporção ainda será preservada.

Transformação pode acumular regras

Se você estudou ciência da computação, provavelmente se lembra dessa tartaruga terrível e de sua alça em movimento. Esse conceito educacional é mais conhecido como gráficos de tartarugas , cujo objetivo é guiar a tartaruga ao longo do caminho com instruções simples - “20 passos adiante”, “rotação de 90 graus” e similares.

E se, usando CSS, você pudesse dar o comando "20 pixels à direita" em relação à posição atual do elemento, em vez de sua posição inicial? E se eu disser que você pode fazer isso usando a propriedade transform ?

Muitos desenvolvedores não sabem que a propriedade transform pode acumular regras e a regra n + 1 se refere à posição alcançada na enésima regra e não à posição original.

Esta confuso? Talvez este exemplo o ajude a recuperar:


Observe que não usamos nenhuma variável JavaScript para salvar a posição atual ou a rotação atual. Esta informação não é armazenada em nenhum lugar! A solução é simples se você escrever:

 transform: translateX(20px); 

E adicione a seguinte regra:

 transform: translateX(20px) translateX(40px) 

A segunda regra não substituirá a primeira - elas serão aplicadas sequencialmente. O fato de serem aplicados de forma consistente é importante. Ao girar o elemento, você altera o quadro de referência e outras regras serão aplicadas ao novo quadro de referência. Portanto, esta entrada:

 transform: rotateZ(20deg) translateX(30px) 

será diferente disso:

 transform: translateX(30px) rotateZ(20deg) 

Você também pode combinar unidades diferentes. Por exemplo, você pode centralizar um elemento do tamanho 600 da seguinte maneira:

 transform: translateX(50vw) translateX(-300px) 

Mas se você não quiser animar, talvez calc () seja a melhor alternativa.

Se você está preocupado com a tartaruga, criei outro fragmento que recria a dinâmica:


Infelizmente, ela ainda não desenha. Mas, se você quiser, sempre poderá implementar a função de desenho.

As margens externa e interna são contadas no sentido horário

É fácil e muitas pessoas pensam que estou escrevendo coisas banais, mas vi tantas pessoas lutando com os quatro que parei de dar como certo.

Muitos desenvolvedores não sabem que quase todas as propriedades CSS têm uma alternativa abreviada. Outros desenvolvedores sabem disso, mas continuam usando as versões completas porque nunca se lembram do pedido.

Deixe-me dar uma dica:
Recuos e bordas seguem no sentido horário

Vou explicar de maneira mais simples. Você pode usar com confiança:

 padding-top: 3px; padding-left: 6px; padding-right: 6px; padding-bottom: 3px; 

Mas da mesma maneira, você pode usar uma alternativa mais curta:

 padding: 3px 6px 3px 6px; 

A ordem é fácil de lembrar - basta olhar para este relógio:



Comece às 12:00 e continue no sentido horário. Você receberá a ordem correta.

Se você usar apenas dois valores:

 padding: 2px 4px; 

O navegador irá expandi-lo repetindo os parâmetros:

 padding: 2px 4px 2px 4px; 

Se você usar três valores:

 padding: 2px 4px 6px; 

O navegador usará a média para as bordas esquerda e direita, como se você tivesse escrito:

 padding: 2px 4px 6px 4px; 

O plano de fundo suporta várias imagens

Essa é uma das propriedades menos conhecidas, embora seja amplamente suportada.

Você sabe que pode especificar o URL da imagem dentro da propriedade background , mas se necessário, poderá inserir quantas imagens desejar. Tudo o que você precisa fazer é separá-los com uma vírgula:

 background: url('first-image.jpeg') top left, url('second-image.jpeg') bottom right; 

Por que isso pode ser útil? O que você acha de Linus Torvalds contra um nascer do sol gerado por CSS?


Você também pode enquadrar uma imagem retangular adicionando as bordas sombreadas que são tão populares no Instagram. Para fazer isso, repeti a mesma imagem duas vezes, aumentando a imagem de fundo 5 vezes:

Detecção de dispositivo de toque

Graças a consultas de mídia, podemos flexibilizar sites e adaptar layouts a telas de vários tamanhos. Mas isso não basta!

Smartphones, tablets e computadores pessoais clássicos diferem na natureza. Não se trata do tamanho da tela.

Você usa gestos de tela em um dispositivo com tela de toque e ferramentas como o HammerJS ajudam. Com o mouse, você clica apenas, mas com maior precisão. Se você adaptou seu site a telas de tamanhos diferentes, pode estar pensando em sua flexibilidade em outras direções e no suporte a vários tipos de entrada!

Você não precisa de código JavaScript complexo para definir um user agent. Tudo o que você precisa está em CSS:

 @media (any-pointer: fine) { /* These rules will be applied to not-touchscreen devices */ } @media (any-pointer: coarse) { /* These rules will be applied to touchscreen devices only */ } 

Aqui está um exemplo:


Dica : você não precisa de um smartphone para verificar. Você pode simular um dispositivo de toque usando as ferramentas do Google Chrome simplesmente clicando neste ícone:



É muito útil e não sei por que não é comum, embora seja decentemente suportado. Por exemplo, usei-o em um carrossel para ocultar ícones da divisa em dispositivos de tela de toque para uma aparência mais natural.

No final, você pode fornecer um arquivo touchscreen.css e importá-lo, se necessário:

 @import url('touchscreen.css') screen and (any-pointer: coarse); 

Nota : No momento, o Firefox não é suportado, como você pode ver em caniuse.com .

Recuo recua

^{“E observe as escadas. Eles gostam de mudar. ”(Percy Weasley para Harry Potter)}

Gosto de CSS - é uma linguagem limpa, precisa e elegante, com tudo o que os desenvolvedores precisam.

Você aplica a regra e ela funciona. Mas quando eu pensei que sabia tudo sobre CSS, isso aconteceu:


Que diabos está acontecendo? Você provavelmente espera que o texto esteja dentro do campo do cabeçalho, mas o título está na parte inferior. Eu não queria essa situação. Mais tarde, descobri que o recuo é confuso.

O que isso significa? Suponha que desejemos criar um layout como este:



Criamos a marcação para os três elementos e definimos uma altura diferente para a borda superior de cada um deles. Tudo parece funcionar? Não.

Se você fizer isso, o navegador notará três campos adjacentes e desejará combiná-los em um único bloco grande.

O resultado será semelhante a este:



O que aconteceu Eu não sei Esse é um recurso histórico do CSS. Acho que, quando o CSS foi padronizado, os campos não eram um problema e os layouts não eram tão complicados quanto são agora. Portanto, os desenvolvedores decidiram que esse é um recurso útil. Mas agora não faz sentido.

Se você trabalha com CSS há muitos anos e nunca encontrou esse problema, isso ocorre porque o recuo é combinado apenas quando:

• os campos são verticais (isso não acontece com os campos horizontais);
• elementos externos não contêm texto ou outro conteúdo;
• nenhum recuo ou borda é definido;
• a propriedade display é definida como "bloco";
• a propriedade overflow é diferente de "inicial";
• recuo não é negativo.

E a lista continua. Se você encontrar esse problema, você pode simplesmente excluir uma dessas condições (exceto a primeira), e o recuo retornará ao normal. Você também pode evitar o uso de margin-top e usar top e padding-top .

Observe que isso pode acontecer para elementos do mesmo nível. Se você tiver dois elementos relacionados, um acima do outro e definir a margin-bottom: 30px para a primeira e margin-top: 60px para a segunda, haverá problemas com o menor. Os recuos, como resultado, não serão iguais a 30 + 60 = 90 pixels, mas serão iguais ao maior valor (30, 60) = 60 pixels.

Considerações finais

Isso é tudo! Espero não estar desperdiçando meu tempo com o artigo e que tenha sido útil para você.

Dê uma olhada no VPS.today , um site para encontrar servidores virtuais. 1500 tarifas de 130 hosts, uma interface conveniente e um grande número de critérios para encontrar o melhor servidor virtual.