Funções

Podcast sobre o CSS - 020: funções

Até agora neste curso, você conheceu várias funções CSS. No módulo grid, você conheceu minmax() e fit-content(), que ajudam a dimensionar elementos. No módulo color, Você conheceu rgb() e hsl(), que ajudam a definir cores.

Como muitas outras linguagens de programação, O CSS tem muitas funções integradas que você pode acessar sempre que precisar.

Cada função CSS tem uma finalidade específica, Nesta aula, você vai ter uma visão geral de alto nível, permitindo que você entenda muito melhor onde e como usá-los.

O que é uma função?

Uma função é uma parte de código nomeada e independente que conclui uma tarefa específica. Uma função é nomeada para que você possa chamá-la dentro do código e passar os dados para a função. Isso é conhecido como passagem de argumentos.

Muitas funções CSS são funções puras, o que significa que, se você passar os mesmos argumentos para elas, ela sempre retornará o mesmo resultado, independentemente do que acontece no restante do código. Essas funções geralmente são recalculadas conforme os valores mudam no CSS, semelhantes a outros elementos da linguagem, como valores em cascata calculados, como currentColor.

No CSS, só é possível usar as funções fornecidas, em vez de escrever o seu próprio, mas as funções podem ser aninhadas umas nas outras em alguns contextos, o que lhes dá mais flexibilidade. Vamos falar mais sobre isso mais adiante neste módulo.

Seletores funcionais

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Você aprendeu sobre seletores funcionais no módulo de pseudoclasses quais funções detalhadas, como :is() e :not(). Os argumentos passados para essas funções são seletores de CSS, que são avaliados. Se houver uma correspondência com os elementos, o restante da regra CSS será aplicado a eles.

Propriedades personalizadas e var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Uma propriedade personalizada é uma variável que permite tokenizar valores no código CSS. As propriedades personalizadas também são afetadas pela cascata o que significa que podem ser manipulados ou redefinidos de acordo com o contexto. Uma propriedade personalizada precisa ter dois traços (--) e diferenciar maiúsculas de minúsculas.

O var() recebe um argumento obrigatório: a propriedade personalizada que você está tentando retornar como um valor. No snippet acima, a função var() tem --base-color transmitida como um argumento. Se --base-color for definido, var() retornará o valor.

.my-element {
    background: var(--base-color, hotpink);
}

Também é possível transmitir um valor de declaração de substituição para a função var(). Isso significa que, se --base-color não for encontrado, A declaração transmitida será usada, que neste caso de exemplo é a cor hotpink.

Funções que retornam um valor

A função var() é apenas uma das funções CSS que retornam um valor. Funções como attr() e url() seguem uma estrutura semelhante a var(): transmita um ou mais argumentos e use-os no lado direito da declaração de CSS.

a::after {
  content: attr(href);
}

A função attr() está tomando o conteúdo do atributo href do elemento <a> e defini-lo como content do pseudoelemento ::after. Se o valor do atributo href do elemento <a> mudar, isso será refletido automaticamente no atributo content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

A função url() usa um URL de string e é usada para carregar imagens, fontes e conteúdo. Se um URL válido não for transmitido ou o recurso para o qual o URL aponta não for encontrado, nada será retornado pela função url().

Funções de cor

Você aprendeu tudo sobre as funções de cor no módulo color. Se você ainda não leu um, é altamente recomendável que leia.

Algumas funções de cor disponíveis no CSS rgb(), rgba(), hsl(), hsla(), hwb(), lab() e lch(). Todos eles têm uma forma semelhante, em que os argumentos de configuração são transmitidos e uma cor é retornada.

Expressões matemáticas

Como muitas outras linguagens de programação, O CSS oferece funções matemáticas úteis para auxiliar em vários tipos de cálculos.

calc()

Compatibilidade com navegadores

• 26
• 12
• 16
• 7

Origem

O calc() usa uma única expressão matemática como parâmetro. Essa expressão matemática pode ser uma mistura de tipos, como comprimento, número, ângulo e frequência. As unidades também podem ser combinadas.

.my-element {
    width: calc(100% - 2rem);
}

Neste exemplo, a função calc() é usada para dimensionar a largura de um elemento. como 100% do elemento pai que o contém, e, em seguida, removendo 2rem desse valor calculado.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

A função calc() pode ser aninhada dentro de outra função calc(). Também é possível transmitir propriedades personalizadas em uma função var() como parte de uma expressão.

min() e max()

Compatibilidade com navegadores

• 79,00
• 79,00
• 75,00
• 11,1

Origem

O min() retorna o menor valor calculado de um ou mais argumentos passados. O max() faz o contrário: recebe o maior valor de um ou mais argumentos transmitidos.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Neste exemplo, a largura precisa ser o menor valor entre 20vw (que representa 20% da largura da janela de visualização), e 30rem. A altura precisa ser o maior valor entre 20vh (que representa 20% da altura da janela de visualização) e 20rem.

Observação : abordamos unidades como vw e vh no módulo de unidades de tamanho.

clamp().

Compatibilidade com navegadores

• 79,00
• 79,00
• 75,00
• 13,1

Origem

O clamp() usa três argumentos: o tamanho mínimo, o tamanho ideal e o máximo.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Neste exemplo, a font-size será fluida com base na largura da janela de visualização. A unidade vw é adicionada a uma unidade rem para ajudar no zoom da tela. porque, independentemente do nível de zoom, uma unidade de vw terá o mesmo tamanho. Multiplicar por uma unidade de rem, com base no tamanho da fonte raiz, fornece à função clamp() um ponto de cálculo relativo.

Saiba mais sobre as funções min(), max() e clamp() em este artigo.

Formas

A clip-path, offset-path e shape-outside As propriedades CSS usam formas para recortar visualmente a caixa ou fornecer uma forma para o conteúdo fluir.

Há funções de forma que podem ser usadas com essas duas propriedades. Formas simples, como circle(), ellipse() e inset() pegar argumentos de configuração para dimensioná-los. Formas mais complexas, como polygon() pegar pares de valores de eixos X e Y separados por vírgula para criar formas personalizadas.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Como polygon(), também existe uma função path() que usa uma regra de preenchimento SVG como argumento. Isso permite formas altamente complexas que podem ser desenhadas em uma ferramenta gráfica como Illustrator ou Inkscape e copiá-las para seu CSS.

Transformações

Por último, desta visão geral das funções CSS são as funções de transformação, que inclinam, redimensionam e até alteram a profundidade de um elemento. Todas as funções a seguir são usadas com a propriedade transform.

Rotação

Compatibilidade com navegadores

• 1
• 12
• 3,5
• 3,1

Origem

É possível girar um elemento usando o método rotate() que gira um elemento em seu eixo central. Você também pode usar o rotateX(), rotateY() e rotateZ() para girar um elemento em um eixo específico. Você pode passar unidades de grau, rotação e radiano para determinar o nível de rotação.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

O rotate3d() usa quatro argumentos.

Compatibilidade com navegadores

• 12
• 12
• 10
• 4

Origem

Os três primeiros argumentos são números, que definem as coordenadas X, Y e Z. O quarto argumento é a rotação, que, assim como as outras funções de rotação, aceita graus, ângulos e voltas.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Escala

Compatibilidade com navegadores

• 1
• 12
• 3,5
• 3,1

Origem

Para mudar o dimensionamento de um elemento, use transform e as scale(). A função aceita um ou dois números como um valor que determina uma escala positiva ou negativa. Se você definir apenas um argumento numérico, os eixos X e Y terão a mesma escala e definir ambos é uma abreviação de X e Y. Assim como rotate(), existem scaleX(), scaleY() e scaleZ() para dimensionar um elemento em um eixo específico.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Também como a função rotate, há uma scale3d(). Esse processo é semelhante a scale(), mas usa três argumentos: os fatores de escala X, Y e Z.

Traduzir

Compatibilidade com navegadores

• 1
• 12
• 3,5
• 3,1

Origem

O translate() movem um elemento enquanto ele mantém sua posição no fluxo do documento. Eles aceitam valores de comprimento e porcentagem como argumentos. A função translate() traduz um elemento ao longo do eixo X se um argumento for definido. e converte um elemento ao longo dos eixos X e Y se ambos os argumentos estiverem definidos.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Assim como em outras funções de transformação, é possível usar funções específicas para um determinado eixo, usando translateX, translateY e translateZ. Você também pode usar translate3d que permite definir a translação X, Y e Z em uma função.

Distorção

Compatibilidade com navegadores

• 1
• 12
• 3,5
• 3,1

Origem

É possível distorcer um elemento usando o método skew() funções que aceitam ângulos como argumentos. A função skew() funciona de maneira muito semelhante à translate(). Se você definir apenas um argumento, ele só afetará o eixo X. Se você definir ambos, isso afetará os eixos X e Y. Você também pode usar skewX e skewY para afetar cada eixo de maneira independente.

.my-element {
  transform: skew(10deg);
}

Perspectiva

Compatibilidade com navegadores

• 36
• 12
• 16
• 9

Origem

Por último, você pode usar o Propriedade perspective que faz parte da família de transformação de propriedades para alterar a distância entre o usuário e o plano Z. Isso dá a sensação de distância e pode ser usado para criar uma profundidade de campo nos seus designs.

Este exemplo de David Desandro, de seu artigo muito útil, mostra como pode ser usado, junto com as propriedades perspective-origin-x e perspective-origin-y para criar experiências verdadeiramente 3D.

Funções de animação, gradientes e filtros

O CSS também tem funções que ajudam a animar elementos, aplicar gradientes a eles e usar filtros gráficos para manipular a aparência deles. Para manter este módulo o mais conciso possível, elas são abordadas nos módulos vinculados. Todas seguem uma estrutura semelhante às funções demonstradas neste módulo.

Teste seu conhecimento

Teste seu conhecimento sobre funções

As funções CSS podem ser identificadas por quais caracteres?

[]

Esses caracteres são para matrizes em JavaScript.

{}

Esses caracteres unem as regras no CSS.

()

As funções usam esses caracteres para unir argumentos.

::

Esses caracteres são para pseudoelementos em CSS.

:

Esses caracteres são para pseudoclasses em CSS.

O CSS tem funções matemáticas integradas?

Verdadeiro

Há muitos deles e muitos outros estão sendo adicionados às especificações e aos navegadores!

Falso

Tente novamente.

Uma função calc() pode ser colocada dentro de outra calc(), como font-size: calc(10px + calc(5px * 3));.

Verdadeiro

🎉

Falso

Tente novamente.

Quais das opções a seguir são funções de forma CSS?

ellipse()

🎉

square()

Tente novamente.

circle()

🎉

rect()

Tente novamente.

inset()

🎉

polygon()

🎉