Funções

O Podcast do CSS - 020: funções

Até agora neste curso, você conheceu várias funções CSS. No módulo de grade, você conheceu minmax() e fit-content(), que ajudam a dimensionar elementos. No módulo de 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 podem ser acessadas sempre que necessário.

Cada função CSS tem um propósito específico. Nesta lição, você terá uma visão geral de alto nível, explicando melhor onde e como usá-las.

O que é uma função?

Uma função é um trecho de código nomeado e independente que completa uma tarefa específica. Uma função é nomeada para que você possa chamá-la no seu código e transmitir dados para ela. Isso é conhecido como passar argumentos.

Muitas funções CSS são funções puras, o que significa que, se você transmitir os mesmos argumentos para elas, elas sempre vão retornar o mesmo resultado, independentemente do que estiver acontecendo no restante do seu código. Essas funções geralmente são recalculadas à medida que os valores mudam no CSS, de maneira semelhante a outros elementos na linguagem, como valores em cascata calculados, como currentColor.

No CSS, você só pode usar as funções fornecidas em vez de escrever suas próprias funções. No entanto, elas podem ser aninhadas umas nas outras em alguns contextos, proporcionando mais flexibilidade. Vamos saber 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 que detalhou funções como :is() e :not(). Os argumentos transmitidos 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 seu código CSS. As propriedades personalizadas também são afetadas pela cascata, o que significa que elas podem ser manipuladas ou redefinidas contextualmente. Uma propriedade personalizada precisa ter dois traços (--) antes do início e diferenciar maiúsculas de minúsculas.

A função var() usa um argumento obrigatório: a propriedade personalizada que você está tentando retornar como um valor. No snippet acima, a função var() transmitiu --base-color como um argumento. Se --base-color estiver definido, var() vai retornar o valor.

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

Também é possível transmitir um valor de declaração substituta para a função var(). Isso significa que, se --base-color não for encontrado, a declaração transmitida será usada, que, neste caso, é 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(). Você transmite um ou mais argumentos e os usa no lado direito da declaração CSS.

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

A função attr() usa o conteúdo do atributo href do elemento <a> e o define como content do pseudoelemento ::after. Se o valor do atributo href do elemento <a> mudar, isso será refletido automaticamente nesse atributo content.

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

A função url() recebe 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. Recomendamos que você leia esse artigo caso ainda não o tenha lido.

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

Expressões matemáticas

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

calc()

A funçã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() está sendo usada para dimensionar a largura de um elemento como 100% do elemento pai. Em seguida, removemos 2rem do 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()

A função min() retorna o menor valor calculado de um ou mais argumentos transmitidos. A função max() faz o oposto: conseguir o maior valor de um ou mais argumentos transmitidos.

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

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

clamp();

A funçã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 rem para ajudar no zoom da tela, porque, independentemente do nível de zoom, uma unidade vw terá o mesmo tamanho. A multiplicação por uma unidade 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() neste artigo.

Formas

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

Existem funções de forma que podem ser usadas com essas duas propriedades. Formas simples, como circle(), ellipse() e inset(), usam argumentos de configuração para dimensioná-las. Formas mais complexas, como polygon(), usam pares separados por vírgula de valores dos eixos X e Y 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%);
}

Assim como polygon(), há também 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 o Illustrator ou o Inkscape, e depois copiadas para o CSS.

Transformações

Todas as funções abaixo são usadas com a propriedade transform.

Rotation

É possível girar um elemento usando a função rotate(), que faz com que ele seja girado no eixo central. Também é possível usar as funções rotateX(), rotateY() e rotateZ() para girar um elemento em um eixo específico. Você pode passar unidades de graus, de giro e de radiano para determinar o nível de rotação.

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

A função rotate3d() usa quatro argumentos.

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

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

Escalonamento

É possível alterar o dimensionamento de um elemento com transform e a função scale(). A função aceita um ou dois números como valor que determina um dimensionamento positivo ou negativo. Se você definir apenas um argumento numérico, os eixos X e Y serão dimensionados da mesma forma, e definir ambos é uma abreviação de X e Y. Assim como rotate(), existem as funções scaleX(), scaleY() e scaleZ() para dimensionar um elemento em um eixo específico.

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

Além da função rotate, existe uma função scale3d(). Isso é semelhante a scale(), mas requer três argumentos: os fatores de escala X, Y e Z.

Tradutor

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

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

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

Distorção

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

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

Perspectiva

Por fim, use a propriedade perspective, que faz parte da família de propriedades de transformação, 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 em seus designs.

Este exemplo do David Desandro, do artigo muito útil, mostra como ele pode ser usado, com as propriedades perspective-origin-x e perspective-origin-y para criar experiências realmente em 3D.

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

O CSS também oferece funções para 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, eles são abordados nos módulos vinculados. Todas elas seguem uma estrutura semelhante às funções demonstradas neste módulo.

Teste seu conhecimento

Teste seu conhecimento sobre funções