CSS Mastering Box Model,Units,Positions part-1
Cascade ,specificity,inheritance
Os princípios fundamentais da linguagem: a cascata, o modelo de caixa e a ampla variedade de tipos de unidade disponíveis. A maioria dos desenvolvedores web conhece a cascata e o modelo de caixa. Eles conhecem unidades de pixel e podem ter ouvido que “deveriam usar ems”. A verdade é que há muito o que aprender sobre esses tópicos, e uma compreensão superficial deles só te leva até certo ponto. Se você quer realmente dominar o CSS, primeiro precisa conhecer os fundamentos e conhecê-los profundamente.
Não é uma linguagem de programação, rigorosamente falando, mas requer pensamento abstrato. Não é puramente uma ferramenta de design, mas requer alguma criatividade. Ele fornece uma sintaxe declarativa aparentemente simples, mas se você já trabalhou com ela em grandes projetos, sabe que pode se tornar uma complexidade difícil de manejar.
The cascade(Understanding)
magine o CSS como um jeito de dar ordens pro navegador. A gente define as regrinhas: “Se essa classe for colocada naquele elemento, aplica esses estilos aqui”. Ou então, “Se o elemento X for filho do elemento Y, usa esses estilos nele”. O navegador pega essas instruções, vê quais valem pra cada pedacinho da página e monta tudo direitinho na tela.
Parece fácil né? Funciona numa boa pra exemplos rapidinhos. Mas aí a coisa pega: conforme a sua folha de estilos vai ficando grandona, ou você usa ela em um monte de páginas diferentes, o código começa a virar uma bagunça complexa do dia pra noite.
code example (Markup for the page header) header.html:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Something Coffee Roasters</title> </head>
<body>
<header class="page-header">
<h1 id="page-title" class="title">Something Coffee Roasters</h1>
<nav>
<ul id="main-nav" class="nav">
<li><a href="/">Home</a></li>
<li><a href="/coffees">My Coffees</a></li>
<li><a href="/brewers">Brewers</a></li>
<li><a href="/specials" class="featured">Specials</a></li>
</ul>
</nav>
</header>
</body>
</html>Em CSS, pode haver conflitos quando duas ou mais regras se aplicam ao mesmo elemento da página. Essas regras podem conter declarações contrastantes. O exemplo a seguir demonstra essa situação. Nele, três conjuntos de regras definem estilos de fonte diferentes para o título da página. Obviamente, o título não pode ter três fontes simultâneas. Qual regra será aplicada? Adicione este código à sua folha de estilo CSS para testar.
css example:
/* More specific selectors (id and class) come first */
#page-title {
font-family: sans-serif;
}
.title {
font-family: monospace;
}
/* Less specific selector (tag) comes last */
h1 {
font-family: serif;
}Aqui está a tradução para o português do texto fornecido:
Um Conjuntos de regras conflitantes podem aparecer um após o outro ou estarem espalhados por toda a sua folha de estilos. De qualquer forma, dado o seu HTML, todos eles têm como alvo o mesmo elemento.
Todos os três conjuntos de regras tentam definir uma família de fontes diferente para este título. Qual deles vai vencer? Para determinar a resposta, o navegador segue um conjunto de regras, tornando o resultado previsível. Neste caso, as regras ditam que a segunda declaração, que possui um seletor de ID, vence; o título terá uma fonte sem serifa .
A cascata é o nome desse conjunto de regras. Ela determina como os conflitos são resolvidos e é uma parte fundamental do funcionamento da linguagem. Embora a maioria dos desenvolvedores experientes tenha uma noção geral da cascata, algumas partes dela às vezes são mal compreendidas.
Entendendo a origem das folhas de estilo
As folhas de estilo que você adiciona à sua página web não são as únicas aplicadas pelo navegador. Existem diferentes tipos, ou origens, de folhas de estilo. As suas são chamadas de estilos de autor; também existem estilos de agente do usuário, que são os estilos padrão do navegador. Os estilos de agente do usuário têm menor prioridade, portanto, seus estilos os substituem.
Os estilos de agente do usuário variam um pouco entre os navegadores, mas geralmente fazem as mesmas coisas: títulos (<h1> a <h6>) e parágrafos (<p>) recebem margem superior e inferior, listas (<ol> e <ul>) recebem preenchimento à esquerda e as cores dos links e os tamanhos de fonte padrão são definidos.
!important declaration
Existe uma exceção às regras de origem do estilo: declarações marcadas como importantes. Uma declaração pode ser marcada como importante adicionando
!importantao final da declaração, antes do ponto e vírgula:
color: red !important;
Declarações marcadas com !important são tratadas como uma origem de prioridade mais alta. Portanto, a ordem geral de preferência, em ordem decrescente, é:
1- Author important ;
2 -Author
3 -User agent
Understanding specificity
Se conflitos de declaração não puderem ser resolvidos com base na origem, o navegador tentará resolvê-los a seguir analisando a especificidade. Compreender a especificidade é essencial. Você pode percorrer um longo caminho sem entender a origem da folha de estilo porque 99% dos estilos do seu site vêm da mesma origem. Mas se você não entender a especificidade, ela vai te pegar. Infelizmente, muitas vezes é um conceito negligenciado.
O navegador avalia a especificidade em duas partes: estilos aplicados inline no HTML e estilos aplicados usando um seletor.
Inline styles
Se você usar um atributo de estilo HTML para aplicar estilos, as declarações serão aplicadas apenas a esse elemento. Essas são, na verdade, declarações “com escopo”, que substituem quaisquer declarações aplicadas a partir de sua folha de estilo ou de uma tag <style>. Estilos inline não possuem seletor porque são aplicados diretamente ao elemento que eles direcionam. like below
<li>
<a href="/specials" class="featured"
style="background-color: orange;">
Specials
</a>
</li>Para sobrepor declarações inline em sua folha de estilo, você precisará adicionar
!importantà declaração, elevando-a a uma origem de prioridade mais alta. Se os estilos inline forem marcados como importantes, nada poderá substituí-los. É preferível fazer isso a partir da folha de estilo. Desfaça essa alteração e veremos abordagens melhores.ESPECIFICIDADE DO SELETOR
A segunda parte da especificidade é determinada pelos seletores. Por exemplo, um seletor com dois nomes de classe tem uma especificidade maior do que um seletor com apenas um. Se uma declaração define um plano de fundo como laranja, mas outra com especificidade mais alta define como azul-petróleo, o navegador aplica a cor azul-petróleo.
Inheritance
Existe uma última maneira pela qual um elemento pode receber estilos: herança. A cascata é frequentemente confundida com o conceito de herança. Embora os dois tópicos estejam relacionados, você deve entender cada um individualmente.
Se um elemento não possui um valor em cascata para uma determinada propriedade, ele pode herdá-la de um elemento ancestral. É comum aplicar uma
font-familyao elemento<body>. Todos os elementos ancestrais dentro dele herdarão essa fonte; você não precisa aplicá-la explicitamente a cada elemento da páginaNo entanto, nem todas as propriedades são herdadas. Por padrão, apenas algumas o são. Em geral, essas são as propriedades que você deseja que sejam herdadas. Elas são principalmente propriedades relativas ao texto:
color,font,font-family,font-size,font-weight,font-variant,font-style,line-height,letter-spacing,text-align,text-indent,text-transform,white-spaceeword-spacing.Algumas outras também herdam, como as propriedades de lista:
list-style,list-style-type,list-style-positionelist-style-image. As propriedades de borda da tabela,border-collapseeborder-spacing, também são herdadas; observe que elas controlam o comportamento da borda das tabelas, e não as propriedades mais usadas para especificar bordas em elementos genéricos.
Use as Ferramentas de Desenvolvimento!(DevTools)
Um emaranhado complicado de valores herdando e sobrescrevendo uns aos outros pode rapidamente se tornar difícil de controlar. Se você ainda não está familiarizado com as ferramentas do desenvolvedor do seu navegador, crie o hábito de usá-las.
As Ferramentas de Desenvolvimento fornecem visibilidade sobre quais regras exatamente estão sendo aplicadas a quais elementos e por quê. A cascata e a herança são conceitos abstratos; as Ferramentas de Desenvolvimento são a melhor maneira que conheço de me orientar.
Abra-as clicando com o botão direito do mouse em um elemento e escolhendo “Inspecionar” ou “Inspecionar elemento” no menu de contexto. acima está um exemplo do que você verá.
Special values
Existem dois valores especiais que você pode aplicar a qualquer propriedade para ajudar a manipular a cascata: inherit e initial.
Vamos dar uma olhada neles.
Using the inherit keyword
Às vezes, você deseja que a herança ocorra quando um valor em cascata a impede. Para fazer isso, você pode usar a palavra-chave
inherit. Você pode substituir outro valor com ele, e isso fará com que o elemento herde esse valor de seu elemento pai.Suponha que você adicione um rodapé cinza claro à sua página. No rodapé, pode haver alguns links, mas você não quer que eles se destaquem muito porque o rodapé não é uma parte importante da página. Então, você deixará os links do rodapé em cinza escuro.
<footer class="footer">
© 2018 Something to test now—
<a href="/terms-of-use">Terms of use</a>
</footer>/* Most specific selector (targets links within a footer class) */
.footer a {
color: inherit;
text-decoration: underline;
}
/* Less specific selector (targets all links) */
a:link {
color: blue;
}
/* Less specific selector (targets the footer class) */
.footer {
color: #666;
background-color: #ccc;
padding: 15px 0;
text-align: center;
font-size: 14px;
}O terceiro conjunto de regras aqui substitui a cor azul do link, dando ao link no rodapé um valor em cascata de
inherit. Portanto, ele herda a cor de seu elemento pai,<footer>.A vantagem aqui é que o link do rodapé mudará junto com o resto do rodapé caso algo o altere. (Editar o segundo conjunto de regras pode fazer isso, ou outro estilo em outro lugar pode substituí-lo.) Se, por exemplo, o texto do rodapé em algumas páginas for um cinza mais escuro, o link mudará para corresponder.
Você também pode usar a palavra-chave
inheritpara forçar a herança de uma propriedade não herdada normalmente, como borda ou preenchimento.
Using the initial keyword
Às vezes, você encontrará estilos aplicados a um elemento que deseja desfazer. Você pode fazer isso especificando a palavra-chave
initial. Cada propriedade CSS possui um valor inicial ou padrão. Se você atribuir o valorinitiala essa propriedade, ela efetivamente será redefinida para o seu valor padrão. É como uma reinicialização forçada desse valor. A Figura 1.11 mostra como o seu rodapé é renderizado se você atribuir a ele um valor deinitialem vez deinherit.AVISO: A palavra-chave
initialnão é suportada em nenhuma versão do Internet Explorer ou Opera Mini. Ela funciona em todos os outros navegadores principais, incluindo o Edge, sucessor da Microsoft para o IE11.
.footer a {
color: initial;
text-decoration: underline;
}Shorthand properties
Propriedades abreviadas são propriedades que permitem definir os valores de várias outras propriedades ao mesmo tempo. Por exemplo, font é uma propriedade abreviada que permite definir várias propriedades de fonte. Esta declaração especifica font-style (estilo da fonte), font-weight (peso da fonte), font-size (tamanho da fonte), line-height (altura da linha) e font-family (família da fonte):
font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;De maneira semelhante:
backgroundé uma propriedade abreviada para várias propriedades de plano de fundo:background-color(cor do fundo),background-image(imagem de fundo),background-size(tamanho do fundo),background-repeat(repetição do fundo),background-position(posição do fundo),background-origin(origem do fundo),background-clip(clipe do fundo) ebackground-attachment(fixação do fundo).borderé uma abreviação paraborder-width(largura da borda),border-style(estilo da borda) eborder-color(cor da borda), cada uma delas também sendo uma propriedade abreviada.border-widthé uma abreviação para as larguras das bordas superior, direita, inferior e esquerda.
Propriedades abreviadas são úteis para manter seu código sucinto e claro, mas algumas peculiaridades sobre elas não são facilmente aparentes.
Tenha cuidado com propriedades abreviadas sobrescrevendo estilos silenciosamente
A maioria das propriedades abreviadas permite omitir certos valores e especificar apenas os trechos que lhe interessam. É importante saber, no entanto, que fazer isso ainda define os valores omitidos; eles serão definidos implicitamente para o valor inicial. Isso pode silenciosamente sobrescrever estilos que você especifica em outro lugar.
Por exemplo, digamos que você tenha definido uma cor de borda vermelha em todo o seu site, mas em uma página específica deseja que um elemento tenha uma borda azul sólida de 2px. Você pode tentar usar a propriedade abreviada
border: 2px solid blue;.Parece que isso deveria funcionar, mas o problema é que a propriedade abreviada
borderdefine implicitamente todos os valores da borda. Nesse caso, o estilo de cor de borda vermelha definido em outro lugar seria substituído pelo valorinitialpara a cor da borda, que geralmente é preto ou transparente. O resultado final seria uma borda sólida azul de 2px, mas sem a cor vermelha que você esperava.Para evitar esse problema, é melhor especificar explicitamente todos os valores da propriedade que você deseja alterar e deixar os valores que deseja permanecer como estão intocados. No exemplo acima, a maneira correta de definir uma borda azul sólida de 2px seria:
border: 2px solid blue; /* Define todos os valores da borda */border-color: blue; /* Define apenas a cor da borda */Understanding the order of shorthand values
Propriedades abreviadas tentam ser flexíveis quando se trata da ordem dos valores que você especifica. Você pode definir
border: 1px solid blackouborder: black 1px solide ambos funcionarão. Isso porque fica claro para o navegador qual valor especifica a largura, qual especifica a cor e qual especifica o estilo da borda.Mas existem muitas propriedades onde os valores podem ser mais ambíguos. Nestes casos, a ordem dos valores é significativa. É importante entender essa ordem para as propriedades abreviadas que você usa.
por exemplo: margin, border-radius
padding : top, right, bottom, and left padding
padding: 10px 15px 0 5px;Propriedades cujos valores seguem esse padrão também suportam notações truncadas. Se a declaração termina antes que um dos quatro lados receba um valor, esse lado assume o valor do lado oposto. Especifique três valores, e os lados esquerdo e direito usarão o segundo. Especifique dois valores, e o superior e inferior usarão o primeiro. Se você especificar apenas um valor, ele se aplicará a todos os quatro lados. Portanto, todas as declarações a seguir são equivalentes:
padding: 1em 2em;
padding: 1em 2em 1em;
padding: 1em 2em 1em 2em;Algumas propriedades de CSS aceitam valores abreviados. Por exemplo, se definir apenas um valor para margin ou padding, ele será aplicado aos quatro lados (superior, direito, inferior, esquerdo) do elemento.
Se definir dois valores, o primeiro será aplicado em cima e embaixo, e o segundo na direita e na esquerda.
Se definir três valores, o primeiro será aplicado em cima e embaixo, e o segundo nos lados direito e esquerdo. O valor do terceiro lado será igual ao segundo. Veja alguns exemplos:
margin: 10px- margem de 10px em todos os ladospadding: 10px 20px- padding de 10px em cima e embaixo, 20px na direita e esquerdapadding: 10px 20px 30px- padding de 10px em cima e embaixo, 20px na direita e esquerda, 30px no lado direito (igual ao terceiro valor)
Dessa forma, você pode escrever menos código e deixar seu CSS mais enxuto.
Em resumo do topico acima
Working with relative units(Lidando com unidades relativas)
what we're gonna learn
- Como usar ems e rems sem se perder
- Usando unidades relativas à viewport
- Uma introdução às variáveis CSS,Calc, Clamp function(var,calc,clamp)
O poder dos valores relativos
Quando se trata de especificar valores, o CSS oferece uma ampla variedade de opções. Uma das mais familiares e provavelmente a mais fácil de trabalhar é o pixel(px). Essas unidades são conhecidas como unidades absolutas; ou seja, 5 px sempre significa a mesma coisa. Outras unidades, como em e rem, não são absolutas, mas sim relativas. O valor das unidades relativas muda com base em fatores externos; por exemplo, o significado de 2 em muda dependendo do elemento (e às vezes até da propriedade) em que você a está usando. Naturalmente, isso torna as unidades relativas mais difíceis de trabalhar.
Desenvolvedores, mesmo os experientes em CSS, muitas vezes não gostam de trabalhar com unidades relativas, incluindo a notória unidade em. A forma como o valor de um em pode mudar faz com que pareça imprevisível e menos claro do que o pixel. Neste capítulo, eliminaremos o mistério em torno das unidades relativas. Primeiro, explicarei o valor único que elas trazem ao CSS e, em seguida, ajudarei você a entendê-las. Explicarei como elas funcionam e mostrarei como domar sua natureza aparentemente imprevisível. Você pode fazer com que os valores relativos funcionem para você e, usados corretamente, eles tornarão seu código mais simples, mais versátil e fácil de trabalhar.
O poder dos valores relativos
O CSS traz uma aplicação tardia de estilos para a página web: o conteúdo e seus estilos não são reunidos até que a criação de ambos esteja concluída. Isso adiciona um nível de complexidade ao processo de design que não existe em outros tipos de design gráfico, mas também oferece mais poder — uma folha de estilo pode ser aplicada a centenas, até milhares, de páginas. Além disso, a renderização final da página pode ser alterada diretamente pelo usuário, que pode, por exemplo, alterar o tamanho de fonte padrão ou redimensionar a janela do navegador.
No desenvolvimento inicial de aplicativos de computador (assim como na publicação tradicional), os desenvolvedores (ou editores) conheciam as restrições exatas de seu meio. Uma janela de programa específica pode ter 400 px de largura por 300 px de altura, ou uma página pode ter 10 cm de largura por 16,5 cm de altura. Consequentemente, quando os desenvolvedores definiam o layout dos botões e do texto do aplicativo, eles sabiam exatamente o quão grandes poderiam fazer esses elementos e exatamente quanto espaço isso lhes deixaria para trabalhar com outros itens na tela. Na web, esse não é o caso.
A luta pelo design com pixel perfeito
No ambiente web, o usuário pode ter a janela do navegador definida para qualquer número de tamanhos, e o CSS precisa se aplicar a ele. Além disso, os usuários podem redimensionar a página depois que ela é aberta, e o CSS precisa se ajustar às novas restrições. Isso significa que os estilos não podem ser aplicados quando você cria sua página; o navegador deve calculá-los quando a página é renderizada na tela.
Isso adiciona uma camada de abstração ao CSS. Não podemos estilizar um elemento de acordo com um contexto ideal; precisamos especificar regras que funcionem em qualquer contexto em que aquele elemento possa ser colocado. Com a web de hoje, sua página precisará ser renderizada em uma tela de celular de 4 polegadas, bem como em um monitor de 30 polegadas.
Por muito tempo, os designers mitigaram essa complexidade focando em designs “pixel perfect”. Eles criavam um contêiner bem definido, geralmente uma coluna centralizada com cerca de 800 px de largura. Então, dentro dessas restrições, eles iriam projetar mais ou menos como seus predecessores faziam com aplicativos nativos ou publicações impressas.
O fim da web com pixel perfeito
À medida que a tecnologia melhorou e os fabricantes introduziram monitores de alta resolução, a abordagem pixel perfect lentamente começou a se desintegrar. No início dos anos 2000, houve muita discussão sobre se nós, desenvolvedores, poderíamos projetar com segurança para monitores de 1.024 px de largura em vez de 800 px de largura. Então, teríamos a mesma conversa novamente para 1.280 px. Tínhamos que fazer julgamentos. Era melhor tornar nosso site muito largo para computadores antigos ou muito estreito para os novos? Com o surgimento dos smartphones, os desenvolvedores foram forçados a parar de fingir que todos poderiam ter a mesma experiência em seus sites. Quer amássemos ou odiássemos, tínhamos que abandonar.
Responsividade
Em CSS, responsivo se refere a estilos que “respondem” de maneira diferente, com base no tamanho da janela do navegador. Isso envolve a consideração intencional de telas de celular, tablet ou desktop de qualquer tamanho. na parte 2 daremos um deep overview sobre .
Unidades de comprimento absolutas em CSS
O CSS oferece várias unidades de comprimento absolutas para especificar dimensões. A unidade mais fundamental e amplamente usada é o pixel (px). Ele representa um único ponto ou o menor elemento endereçável no visor.
Embora menos comuns, o CSS também suporta outras unidades absolutas como milímetros (mm), centímetros (cm) e polegadas (in). Essas unidades são baseadas em medidas do mundo real e podem ser úteis para cenários de design específicos.
Unidades tipográficas: pontos e picas
Para elementos tipográficos como tamanhos de fonte, os designers costumam usar pontos (pt) e picas (pc). Um ponto é uma unidade tipográfica equivalente a 1/72 de polegada(in), e existem 12 pontos em uma pica. Essas unidades têm uma base histórica na impressão tradicional, mas ainda são relevantes no design web.
Conversões de unidades e considerações
É importante observar que um pixel CSS não corresponde diretamente a um pixel físico da tela, especialmente em telas de alta resolução. Os navegadores modernos podem dimensionar as medidas CSS até certo ponto, mas a conversão exata pode variar dependendo do navegador, sistema operacional e hardware do dispositivo. Como regra geral, 96 px é geralmente considerado próximo de 1 polegada na tela, mas isso pode diferir em dispositivos específicos ou com configurações de resolução ajustadas pelo usuário.
Concluindo, embora o CSS ofereça várias unidades absolutas, os pixels continuam sendo a escolha mais predominante para o desenvolvimento web devido à sua estreita associação com a resolução da tela. A compreensão de pontos e picas pode ser benéfica ao colaborar com designers que podem usar essas unidades para elementos tipográficos.
Ems: Unidades relativas baseadas na fonte
Ems (em), a unidade de comprimento relativo mais comum, é uma medida usada em tipografia, referenciando o tamanho de fonte definido. Em CSS, 1em significa o tamanho de fonte do elemento atual; seu valor exato varia dependendo do elemento ao qual você o está aplicando. exemplo abaixo mostra uma div com padding de 1em.
<div class="padded"> para ver o resultado no seu navegador..padded {
font-size: 16px;
padding: 1em;
}Como as unidades em são relativas, o padding de 1em na div será igual ao tamanho de fonte definido para essa div específica. Se a fonte da div for definida como 16px, o padding será de 16px. Se a fonte da div for definida como 20px, o padding será de 20px e assim por diante.
Isso pode ser útil para criar espaçamentos e indentações que se ajustem proporcionalmente ao tamanho do texto. Por exemplo, você pode definir o padding de todos os parágrafos (<p>) como 1em, o que criará um espaçamento uniforme em torno do texto, independentemente do tamanho da fonte usada em cada parágrafo.
No entanto, é importante observar que o uso excessivo de ems pode tornar seu código CSS difícil de manter, pois o valor real de 1em pode ser difícil de rastrear em toda a sua folha de estilo. É por isso que, em muitos casos, as unidades rem são preferidas.
Rems: Unidades relativas à fonte raiz
Rem, abreviação de “root em” (em de raiz), é uma unidade de comprimento relativo baseada no tamanho de fonte do elemento raiz do documento (elemento <html>). Ao contrário dos ems, que são relativos ao tamanho de fonte do elemento em que são aplicados, os rems são sempre relativos ao tamanho de fonte definido na raiz.
Quando o navegador analisa um documento HTML, ele cria uma representação na memória de todos os elementos da página. Essa representação é chamada de DOM (Document Object Model — Modelo de Objeto de Documento). É uma estrutura em árvore, onde cada elemento é representado por um nó. O elemento <html> é o nó de nível superior (ou raiz). Abaixo dele estão seus nós filhos, <head> e <body>. E abaixo deles estão seus filhos, e assim por diante.
O nó raiz é o ancestral de todos os outros elementos no documento. Ele possui um seletor pseudo-classe especial (:root) que você pode usar para direcioná-lo. Isso é equivalente a usar o seletor de tipo <html> com a especificidade de uma classe em vez de uma tag.
Resumindo, 1.2rem sempre terá o mesmo valor computado, independentemente de onde você o aplique no documento: 1.2 vezes o tamanho de fonte definido para o elemento <html>. O código a seguir define o tamanho de fonte da raiz e, em seguida, usa rems para definir o tamanho de fonte para listas não ordenadas (<ul>) em relação a ele.
:root {
font-size: 1em;
}
ul {
font-size: .8rem;
}Neste exemplo, o tamanho de fonte da raiz é o padrão do navegador, que é 16 px (um em no elemento raiz é relativo ao padrão do navegador). As listas não ordenadas (<ul>) têm um tamanho de fonte especificado de 0.8rem, o que é calculado como 12.8px. Como isso é relativo à raiz, o tamanho da fonte permanecerá constante, mesmo se você aninhar listas.
Nota:
Acessibilidade: use unidades relativas para o tamanho da fonte
Para garantir que seu site seja acessível a todos os usuários, é importante definir o tamanho da fonte usando unidades relativas. Alguns navegadores oferecem duas maneiras para o usuário personalizar o tamanho do texto: zoom e um tamanho de fonte padrão.
Zoom: Pressionando Ctrl + (+) ou Ctrl — (–), o usuário pode ampliar ou reduzir a página. Isso dimensiona visualmente todas as fontes e imagens, tornando geralmente tudo na página maior ou menor. Em alguns navegadores, essa alteração só é aplicada à guia atual e é temporária, o que significa que não é transferida para novas guias.
Tamanho de fonte padrão: Definir um tamanho de fonte padrão é um pouco diferente. Além de ser mais difícil encontrar a opção para defini-lo (geralmente na página de configurações do navegador), as alterações nesse nível são permanentes, até que o usuário retorne e modifique o valor novamente. O problema é que essa configuração não redimensiona fontes definidas usando pixels ou outras unidades absolutas.
Como um tamanho de fonte padrão é crucial para alguns usuários, especialmente aqueles com deficiência visual, você deve sempre especificar o tamanho da fonte com unidades relativas ou porcentagens.
Escolhendo entre rems, ems e pixels
Rems simplificam muitas das complexidades envolvidas com ems. Na verdade, eles oferecem um bom meio-termo entre pixels e ems, fornecendo os benefícios de unidades relativas, mas sendo mais fáceis de trabalhar. Isso significa que você deve usar rems em todos os lugares e abandonar as outras opções? Não.
Em CSS, a resposta geralmente é “depende”. Rems são apenas uma ferramenta na sua caixa de ferramentas. Uma parte importante do domínio do CSS é aprender quando usar cada ferramenta. Minha recomendação padrão é usar:
- Rems: para tamanhos de fonte
- Pixels: para bordas
- Ems: para a maioria das outras medidas, especialmente paddings, margens e raio da borda (embora eu prefira o uso de porcentagens para larguras de contêiner, quando necessário)
Dessa forma, os tamanhos de fonte são previsíveis, mas você ainda obtém o poder dos ems para dimensionar o padding e as margens, caso outros fatores alterem o tamanho da fonte de um elemento. Pixels fazem sentido para bordas, especialmente quando você deseja uma linha fina e bonita. Essas são as minhas unidades preferidas para as várias propriedades, mas, novamente, elas são ferramentas e, em algumas circunstâncias, uma ferramenta diferente pode fazer o trabalho melhor.
DICA: Em caso de dúvida, use rems para tamanho de fonte, pixels para bordas e ems para a maioria das outras propriedades.
Stop thinking in pixels
Antipadrão de redefinir o tamanho de fonte da raiz
Um padrão recorrente, ou melhor, um antipadrão, comum nos últimos anos, é redefinir o tamanho da fonte da raiz da página para 0.625em ou 62,5%.
html {
font-size: .625em;
}Eu não recomendo isso. Isso pega o tamanho de fonte padrão do navegador, 16 px, e o reduz para 10 px. Esta prática simplifica a matemática: se o seu designer lhe disser para fazer a fonte em 14 px, você pode facilmente dividir por 10 na sua cabeça e digitar 1.4 rem, tudo isso enquanto ainda usa unidades relativas.
Inicialmente, isso pode ser conveniente, mas há dois problemas com essa abordagem.
- Primeiro, isso obriga você a escrever muitos estilos duplicados. Dez pixels é muito pequeno para a maioria dos textos, então você terá que sobrescrevê-lo por toda a página. Você se verá configurando parágrafos para 1.4 rem, asides para 1.4 rem, links de navegação para 1.4 rem e assim por diante. Isso introduz mais lugares para erros, mais pontos de contato no seu código quando ele precisar ser alterado e aumenta o tamanho do seu stylesheet.
- O segundo problema é que, quando você faz isso, você ainda está pensando em pixels. Você pode digitar 1.4 rem no seu código, mas na sua mente, você ainda está pensando “14 pixels”. Na web responsiva, você deve se sentir confortável com valores “fuzzy”. Não importa quantos pixels 1.2 em avalia; tudo o que você precisa saber é que é um pouco maior do que o tamanho de fonte herdado. E, se não parecer como você quer na tela, mude. Isso leva a um pouco de tentativa e erro, mas, na realidade, o mesmo acontece com pixels.
Ao trabalhar com ems, é fácil se perder obsessivamente sobre exatamente quantos pixels as coisas vão avaliar, especialmente tamanhos de fonte. Você vai se enlouquecer dividindo e multiplicando valores em conforme avança. Em vez disso, desafio você a se acostumar a usar ems primeiro. Se você está acostumado a usar pixels, usar valores em pode levar prática, mas vale a pena.
Isso não quer dizer que você nunca terá que trabalhar com pixels. Se você estiver trabalhando com um designer, provavelmente precisará falar em alguns números concretos de pixels, e isso está tudo bem. No início de um projeto, você precisará estabelecer um tamanho de fonte base (e frequentemente alguns tamanhos comuns para cabeçalhos e notas de rodapé). Valores absolutos são mais fáceis de usar ao discutir o tamanho das coisas.
Converter para rems envolverá aritmética, então mantenha uma calculadora à mão. (Eu pressiono Command-Space no meu Mac e digito a equação no Spotlight.)
Colocar um tamanho de fonte raiz(root) em vigor define um rem. A partir desse ponto, trabalhar com pixels deve ser a exceção, não a norma.
Definindo um tamanho de fonte padrão razoável
Vamos supor que você queira que seu tamanho de fonte padrão seja 14 px. Em vez de definir um padrão de 10 px e depois sobrescrevê-lo por toda a página, defina esse valor na raiz. O valor desejado dividido pelo valor herdado — neste caso, o padrão do navegador — é 14/16, o que equivale a 0.875. Adicione a seguinte listagem ao topo de uma nova folha de estilos, pois você irá construir sobre ela. Isso define o tamanho de fonte padrão na raiz (<html> ou :root).
Exemplo de Código:
html {
font-size: 0.875rem; /* 14px / 16px = 0.875 */
}
ou
:root{
font-size: 0.875rem;
}Explicação:
- Definir a Fonte na Raiz:
- Ao definir o tamanho da fonte na raiz, você assegura que todas as unidades rem no documento sejam relativas a essa definição inicial. Isso torna o cálculo de tamanhos de fonte subsequentes mais intuitivo.
- O valor
0.875remé obtido dividindo o tamanho de fonte desejado (14 px) pelo tamanho de fonte padrão do navegador (16 px).
2. Cálculo de Tamanhos de Fonte:
- Com essa configuração, qualquer valor de tamanho de fonte que você definir usando rem será relativo a 14 px. Por exemplo, se você definir
font-size: 2rem, o tamanho de fonte resultante será 28 px (2 * 14 px).
Outros Exemplos:
Exemplo 1:
Definindo um tamanho de fonte padrão de 18 px:
html {
font-size: 1.125rem; /* 18px / 16px = 1.125 */
}
ou
:root {
font-size: 1.125rem; /* 18px / 16px = 1.125 */
}Aqui, 1.125rem ajusta o tamanho de fonte base para 18 px, o que significa que font-size: 1rem será igual a 18 px.
Exemplo 2:
Definindo um tamanho de fonte padrão de 12 px:
html {
font-size: 0.75rem; /* 12px / 16px = 0.75 */
}
ou
:root {
font-size: 0.75rem; /* 12px / 16px = 0.75 */
}Com 0.75rem, o tamanho de fonte base se torna 12 px, e font-size: 1rem será igual a 12 px.
Exemplo 3:
Definindo um tamanho de fonte padrão de 20 px:
html {
font-size: 1.25rem; /* 20px / 16px = 1.25 */
}
:root {
font-size: 1.25rem; /* 20px / 16px = 1.25 */
}Neste caso, 1.25rem ajusta o tamanho de fonte base para 20 px, então font-size: 1rem será igual a 20 px.
Em resumo…
Definir o tamanho da fonte na raiz permite um controle mais fácil e uma aplicação mais consistente de tamanhos de fonte em todo o documento. Isso simplifica a manutenção e a escalabilidade do seu CSS, além de facilitar a adaptação para diferentes tamanhos de tela e dispositivos.
Agora vamos criar varios labs(exercicios) para praticar
Vamos criar o painel mostrado na imagem abaixo. Você construirá este painel com base no tamanho de fonte de 14 px, usando medidas relativas.
<div class="panel">
<h2>Single-origin</h2>
<div class="panel-body">
We have built partnerships with small farms around the world to
hand-select beans at the peak of season. We then carefully roast
in <a href="/batch-size">small batches</a> to maximize their
potential.
</div>
</div>usaremos ems para o padding e o border-radius, rem para o tamanho da fonte do título(font-size), e px para a borda. Aqui vai o seu stylesheet.
.panel {
padding: 1em;
border-radius: 0.5em;
border: 1px solid #999;
}
.panel > h2 {/* panel > h2 significa class panel que contem um h2*/
margin-top: 0;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}ste código coloca uma borda fina ao redor do painel e estiliza o título. Optei por um cabeçalho que é menor, mas em negrito e todas as letras maiúsculas. (Você pode torná-lo maior ou usar um tipo de fonte diferente se o seu design exigir isso.) O > no segundo seletor é um combinador de descendente direto. Ele seleciona um h2 que é um elemento filho de um elemento .panel. Veja o apêndice A para uma referência completa de seletores e combinadores.
adicionei uma classe panel-body ao corpo principal do painel para maior clareza, mas você notará que não precisou usá-la no seu CSS. Como este elemento já herda o tamanho da fonte raiz, ele já aparece como você quer que ele apareça.
Fazendo o painel responsivo
Você pode usar algumas media queries para alterar o tamanho da fonte base, dependendo do tamanho da tela. Isso fará com que o painel seja renderizado em tamanhos diferentes com base no tamanho da tela do usuário.
Dicas Adicionais:
media query — Uma regra @media usada para especificar estilos que serão aplicados apenas a certos tamanhos de tela ou tipos de mídia (por exemplo, impressão ou tela). Este é um componente chave do design responsivo.
- @media screen: Use para aplicar estilos específicos para telas (monitores, smartphones, tablets).
- @media print: Use para aplicar estilos específicos para impressão.
- @media (orientation: landscape): Use para aplicar estilos específicos para orientação paisagem.
- @media (min-resolution: 300dpi): Use para aplicar estilos em dispositivos com alta resolução.
As media queries são essenciais para criar designs responsivos e garantir que sua página web tenha uma boa aparência em todos os dispositivos e tipos de mídia.
continuando com o lab…
vamos aplicar design responsivo para antigir esse objectivo ,ou seja vamos ajustar o painel de modo a ser compativel com diferentes resoluções
:root {
font-size: 0.75em;
}
@media (min-width: 800px) {
:root {
font-size: 0.875em;
}
}
@media (min-width: 1200px) {
:root {
font-size: 1em;
}
}Desafio 1: Explicar o seguinte codigo e sua devida saída
.panel {
font-size: 1rem;
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}Viewport-relative units
Você aprendeu que em e rem são definidas em relação ao tamanho da fonte, mas essas não são as únicas unidades relativas. Existem também unidades relativas ao viewport para definir comprimentos relativos ao viewport do navegador.
Dica:
o que é viewport — A área enquadrada na janela do navegador onde a página web é visível. Isso exclui a barra de endereço do navegador, barras de ferramentas e barra de status, se presentes.
Se você não está familiarizado com as unidades relativas ao viewport, aqui está uma breve explicação:
- vh — 1/100 da altura do viewport.
- vw — 1/100 da largura do viewport.
- vmin — 1/100 da menor dimensão, altura ou largura (O IE9 suporta
vmem vez devmin). - vmax — 1/100 da maior dimensão, altura ou largura (não suportado no IE ou, no momento da escrita, no Edge).
Por exemplo, 50vw é igual à metade da largura do viewport, e 25vh é igual a 25% da altura do viewport. vmin é baseado em qual das duas dimensões (altura ou largura) é menor. Isso é útil para garantir que um elemento se ajuste à tela, independentemente da orientação: Se a tela estiver em paisagem, será baseado na altura; se retrato, será baseado na largura.
A imagem abaixo mostra um elemento quadrado como ele aparece em vários viewports com diferentes tamanhos de tela. Ele é definido com uma altura e largura de 90vmin, que é igual a 90% da menor das duas dimensões—90% da altura em telas de paisagem ou 90% da largura em retrato.
.quadrado {
width: 90vmin;
height: 90vmin;
background-color: #369;
}A classe .quadrado utiliza unidades relativas ao viewport para definir suas dimensões. Este exemplo mostra como essas unidades podem ser usadas para criar elementos que se ajustam dinamicamente ao tamanho do viewport.
Explicação das Unidades Utilizadas:
vmin:
90vminsignifica 90% da menor dimensão entre a altura e a largura do viewport.- Isso garante que o quadrado se ajustará proporcionalmente ao tamanho da tela, mantendo suas proporções e ocupando 90% da menor dimensão da tela, seja ela a altura ou a largura.
Exemplo Completo em HTML e CSS , Qual será o resultado?:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Unidades Relativas ao Viewport</title>
<style>
.quadrado {
width: 90vmin;
height: 90vmin;
background-color: #369;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="quadrado">90vmin</div>
</body>
</html>Saída Esperada:
Este exemplo cria um quadrado grande que ocupa 90% da menor dimensão do viewport (altura ou largura). O quadrado será centralizado na tela e terá um fundo azul-escuro com o texto “90vmin” centralizado em branco.
Uso das Unidades Relativas ao Viewport:
As unidades relativas ao viewport são excelentes para criar elementos como uma imagem grande de destaque (hero image) que preenche a tela inteira. Mesmo que sua imagem esteja dentro de um contêiner longo, ao definir a altura da imagem para 100vh, você garante que ela terá exatamente a altura do viewport.
Exemplo de Imagem Hero Utilizando vh:
vamos criar uma hero image
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagem Hero com `vh`</title>
<style>
.hero {
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="hero"></div>
</body>
</html>Usando vw para Tamanho de Fonte
Uma aplicação para as unidades relativas ao viewport que pode não ser imediatamente óbvia é o tamanho da fonte. Na verdade, acho esse uso mais prático do que aplicar vh e vw às alturas ou larguras dos elementos.
Explicação:
Considere o que aconteceria se você aplicasse font-size: 2vw a um elemento. Em um monitor de desktop com 1.200 px, isso avalia a 24 px (2% de 1.200). Em um tablet com uma largura de tela de 768 px, isso avalia a cerca de 15 px (2% de 768). E o interessante é que o elemento escala suavemente entre esses dois tamanhos. Isso significa que não há mudanças bruscas nos pontos de interrupção; ele transita incrementalmente à medida que o tamanho do viewport muda.
Infelizmente, 24 px é um pouco grande demais em uma tela grande. E pior, escala até 7,5 px em um iPhone 6. O que seria bom é esse efeito de escalonamento, mas com extremos um pouco menos severos. Você pode conseguir isso com a função calc() do CSS.
Exemplo Completo em HTML e CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonte Relativa ao Viewport</title>
<style>
.texto {
font-size: 2vw;
}
.texto-calc {
font-size: calc(1rem + 1vw);
}
</style>
</head>
<body>
<div class="texto">Este texto usa <code>font-size: 2vw</code>.</div>
<div class="texto-calc">Este texto usa <code>font-size: calc(1rem + 1vw)</code>.</div>
</body>
</html>Explicação da Função calc():
calc(1rem + 1vw):1remdefine uma base constante (por exemplo, 16 px).1vwadiciona uma parte variável, baseada na largura do viewport.- A combinação resulta em um tamanho de fonte que cresce com a largura do viewport, mas nunca fica tão pequeno a ponto de ser ilegível ou tão grande a ponto de ser desproporcional.
Exemplos Adicionais com calc():
Combinação com Unidades Fixas e Relativas:
.titulo {
font-size: calc(2rem + 0.5vw);
}.box {
width: calc(50% + 100px);
padding: calc(1em + 2vw);
}Números Sem Unidade e lign-height
Algumas propriedades permitem valores sem unidade (ou seja, um número sem uma unidade especificada). Propriedades que suportam isso incluem line-height, z-index e font-weight (700 é equivalente a "bold"; 400 é equivalente a "normal", e assim por diante). Você também pode usar o valor sem unidade 0 em qualquer lugar onde uma unidade de comprimento (como px, em ou rem) seja necessária porque, nesses casos, a unidade não importa—0 px é igual a 0% é igual a 0 em.
Exemplo 1: line-height
p {
font-size: 16px;
line-height: 1.5; /* Sem unidade */
}Descrição:
Aqui, line-height: 1.5 define a altura da linha como 1,5 vezes o tamanho da fonte. Como não há unidade especificada, o valor é relativo ao tamanho da fonte do elemento.
Saída:
O parágrafo terá uma altura de linha de 24 px (1.5 vezes o tamanho da fonte de 16 px).
Exemplo 2: z-index
.box {
position: absolute;
z-index: 10; /* Sem unidade */
}Descrição:
O z-index define a ordem de empilhamento de elementos posicionados. Um valor mais alto significa que o elemento ficará mais acima na pilha de renderização.
Saída:
O elemento com a classe .box será renderizado acima de outros elementos com um z-index inferior a 10.
Exemplo 3: font-weight
h1 {
font-weight: 700; /* Sem unidade, equivalente a "bold" */
}
p {
font-weight: 400; /* Sem unidade, equivalente a "normal" */
}Descrição:
O font-weight define a espessura da fonte. Valores comuns são 400 para "normal" e 700 para "bold".
Saída:
Os cabeçalhos <h1> terão um peso de fonte "bold", enquanto os parágrafos <p> terão um peso de fonte "normal".
Exemplo 4: 0 sem unidade
.container {
margin: 0; /* Sem unidade */
padding: 0; /* Sem unidade */
}Descrição:
Quando se trata de 0, a unidade não importa. 0px é o mesmo que 0% ou 0em.
Saída:
O elemento .container não terá nenhuma margem ou preenchimento aplicado.
Variáveis Personalizadas (também conhecidas como Variáveis CSS)
Em 2015, uma aguardada especificação CSS intitulada “Custom Properties for Cascading Variables” foi publicada como uma Recomendação de Candidatura. Esta especificação introduziu o conceito de variáveis na linguagem, permitindo um novo nível de estilos dinâmicos baseados no contexto. Você pode declarar uma variável e atribuir a ela um valor; então você pode fazer referência a esse valor em todo o seu stylesheet. Você pode usar isso para reduzir a repetição em seu stylesheet, bem como algumas outras aplicações benéficas, como você verá em breve.
Exemplo de Uso:
:root {
--cor-destaque: #ffcc00;
}
.destaque {
color: var(--cor-destaque);
background-color: rgba(var(--cor-destaque), 0.1);
border: 1px solid var(--cor-destaque);
}Benefícios das Variáveis Personalizadas:
sintax
:root {
--cor-destaque: #ffcc00;
--yellow-color: yellow;
--red-color: red;
--white-color: white;
--main-font: Helvetica, Arial, sans-serif;
--brand-color: #369;
}
body{
color: var(--red-color)
}- Redução de Repetição:
- Você pode definir uma variável uma vez e usá-la em vários lugares, evitando a repetição de valores.
2. Facilidade de Manutenção:
- Se precisar mudar uma cor ou outro valor, basta alterar o valor da variável em um único lugar, em vez de buscar e alterar cada instância manualmente.
3. Estilos Dinâmicos:
- As variáveis podem ser modificadas via JavaScript, permitindo que você altere dinamicamente os estilos com base em eventos ou condições específicas.
Desafio reproduzir o cenario abaixo:
Alterando Propriedades Personalizadas Dinamicamente
Até agora, os exemplos mostraram que as propriedades personalizadas são apenas uma conveniência agradável; elas podem economizar muito repetição em seu código. Mas o que as torna particularmente interessantes é que as declarações das propriedades personalizadas cascata e herdam: você pode definir a mesma variável dentro de vários seletores, e a variável terá um valor diferente para várias partes da página. Você pode definir uma variável como preta, por exemplo, e depois redefinir como branca dentro de um contêiner específico. Em seguida, quaisquer estilos baseados nessa variável serão resolvidos dinamicamente como preto se estiverem fora do contêiner e como branco se estiverem dentro.
Exemplo:
:root {
--cor-texto: black;
}
.container {
--cor-texto: white;
}
.texto {
color: var(--cor-texto);
}Descrição:
:root: Define a variável--cor-textocomo preta para toda a página..container: Define a variável--cor-textocomo branca para todos os elementos dentro do contêiner.container..texto: Aplica a cor definida pela variável--cor-textoaos elementos com a classe.texto.
Saída Esperada:
- Todos os elementos com a classe
.textoterão a cor do texto preta, exceto aqueles que estão dentro do.container, que terão a cor do texto branca.
Em resumo:
O uso de unidades relativas ao viewport (vh, vw, vmin, vmax) é crucial para criar layouts responsivos que se adaptam automaticamente às dimensões da tela, proporcionando uma experiência de usuário consistente e otimizada em diferentes dispositivos e orientações de tela.
Take your time to read now about part-2
