🥧 🤟🏻 🚤 Funções CSS min (), max () e clamp () 👼 👨🏻‍✈️ 📞

Suporte para CSS comparação funções min(), max()e clamp()apareceu no Firefox em 8 de abril de 2020. Isso significa que esses recursos agora são suportados em todos os principais navegadores. Esses recursos de CSS ampliam nossa capacidade de criar layouts dinâmicos e projetar componentes mais flexíveis do que antes. Eles podem ser usados para ajustar o tamanho dos elementos do contêiner, fontes, recuos e muito mais. É verdade que um web designer que cria layouts de página levando em consideração a possibilidade de usar essas funções incríveis pode precisar aprender a pensar de uma nova maneira. Hoje, quero falar sobre os recursos dessas funções, explicar tudo o que pode ser incompreensível nelas e dar exemplos práticos de seu uso.

Suporte do navegador

Primeiro, eu gostaria de tocar no suporte ao navegador para as funções min(), max()e clamp(). No entanto, eles apareceram relativamente recentemente. Deve-se notar que as funções min()e max()usam o mesmo nível de suporte ao navegador.

Suporte para a função min () (as informações de suporte max () também se parecem com isso)

A seguir, são fornecidas informações sobre o suporte para a funçãoclamp().

Suporte à função Clamp ()

Funções de comparação CSS

A especificação CSS nos diz que não há comparação funções min(), max()e clamp()nos permitem comparar os valores de expressões e representam um deles. O valor retornado por uma função depende de seus recursos. Explore esses recursos.

Função Min ()

Uma função min()pega um ou mais valores, separados por vírgula, e retorna o menor deles. Esta função é usada para limitar os valores das propriedades CSS a um nível máximo estritamente especificado.

Considere o seguinte exemplo. Precisamos que a largura máxima do elemento não exceda 500px.

.element {
    width: min(50%, 500px);
}

Com uma largura de janela de 1150px, que é maior que 1000px, o item terá uma largura de 500px. O

navegador precisará selecionar o menor valor entre50%e500px. A largura da viewport afeta o resultado da seleção. Se 50% da largura da viewport for maior que500px, esse valor será ignorado e a função retornará500px.

Caso contrário, se 50% da largura da viewport for menor500px, o valor resultante será usado para ajustar a largura do elemento. O que você acha, em que largura da área de visualização 50% de sua largura não excederá500px? Isto é obviamente1000px. Com essa largura, os dois valores passados para a função serão os mesmos. Se a largura da viewport for menor1000px, será usado para ajustar a largura do elemento.

Se a largura da viewport for menor que 1000px, 50% dessa largura será usada para ajustar a largura do elemento.Espero

que eu tenha conseguido explicar claramente tudo isso. Pensei na função por um longo tempomin(), tentando penetrar em sua essência. Portanto, eu gostaria muito de falar claramente sobre isso. Aqui está um vídeo demonstrando os resultados do uso desse recurso.

A largura do item é limitada a 500 pixels.

Aqui está um exemplo interativo usado para gravar o vídeo acima. Para ver a funçãomin()em ação, tente redimensionar a janela do navegador.

Função max ()

A função max()pega um ou mais valores, separados por vírgulas, e retorna o maior deles. Esta função é usada para fixar o valor mínimo que uma propriedade CSS pode receber.

No exemplo a seguir, precisamos que a largura do elemento seja pelo menos 500px.

.element {
    width: max(50%, 500px);
}

Se 50% da largura da viewport for maior que 500px - esse valor será usado para ajustar a largura do elemento.O

navegador precisa selecionar o valor máximo de50%e500px. A escolha depende da largura da janela de visualização. Se 50% da largura da viewport for menor que500px, o navegador ignorará esse valor e o usará500px.

Se 50% da largura da viewport for maior500px, a largura do elemento será configurada igual a esse valor. Como você pode ver, uma funçãomax()é o oposto de uma funçãomin().

Para entender melhor isso, dê uma olhada nesta demonstração interativa.

Função Clamp ()

A função clamp()permite limitar o intervalo de variação de um determinado valor, definindo seus limites inferior e superior. São necessários três parâmetros: o valor mínimo, o valor calculado (recomendado) e o valor máximo. Se o valor calculado não exceder os limites limitados pelos valores mínimo e máximo passados para a função, ele retornará esse valor.

Aqui está um exemplo.

.element {
    width: clamp(200px, 50%, 1000px);
}

Aqui ajustamos a largura do elemento, que não deve ser menor 200pxe mais 1000px. Se o valor em 50%não exceder esses limites, esse valor será usado. Aqui está como fica.

Se 50% da largura da janela de visualização cair no intervalo de 200px-1000px - esse valor será usado para definir a largura do elemento. Nesse caso, são 575 px.

Vamos examinar este exemplo:

A largura de um elemento nunca será menor 200px.
O segundo parâmetro da função, definido como 50%, será usado apenas se a largura da viewport for maior 400pxe menor 2000px.
A largura do item não excederá 1000px.

Como resultado, podemos dizer que a função clamp()permite especificar o intervalo em que o valor calculado transmitido a ela pode mudar.

Aqui você pode experimentar a página estilizada usando esta função.

▍Como são calculados os resultados da função clamp ()?

Você pode encontrar informações no MDN que, quando uma função é usada como o valor de uma propriedade CSS clamp(), é equivalente à construção na qual as funções max()e são aplicadas min(). Veja o seguinte exemplo:

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

O valor 50%depende da largura da área de visualização do navegador. Imagine que a largura da viewport é 1150px.

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

MattersO contexto importa

O valor calculado depende do contexto. Se você especificar um valor calculado, você pode usar diferentes unidades de medida: %, em, rem, vw/vh. Mesmo que o valor seja expresso como uma porcentagem, ao calculá-lo, a largura da janela de visualização pode ser usada - se o elemento estiver na tag <body>ou a largura de outro elemento que é o contêiner do elemento.

Expressões matemáticas

Vale dizer que, ao usar uma função, clamp()você pode passar expressões matemáticas para ela, o que nos impede de precisar usar uma função calc(). A especificação nos diz que clamp()expressões matemáticas completas podem ser usadas em cada um dos argumentos . Portanto, não há necessidade de funções aninhadas calc(). Além disso, se você precisar aplicar várias restrições ao valor final, poderá passar mais de dois argumentos para a função.

Veja o seguinte exemplo:

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

O que as funções de comparação de CSS mudarão na maneira como criamos layouts de página?

Muitas vezes acontece que um designer, projetando uma página, se concentra em dispositivos móveis e de desktop, contando com dois cenários para seu uso. E ao trabalhar em alguns projetos, mais cenários precisam ser levados em consideração.

Eu vejo essa situação como mostrado abaixo.

No andar de cima é como as páginas são projetadas hoje. Abaixo está o que você pode esperar no futuro: a

parte superior da ilustração é como as páginas são projetadas atualmente. Aqui você pode ver várias etapas que representam diferentes áreas de visualização nas quais a página deve ser projetada. Essas etapas podem, por exemplo, representar o valor de uma propriedade. A parte inferior da ilustração mostra uma faixa contínua de valores que podem ser obtidos limitando esse valor a um determinado mínimo e máximo. Acredito que, no futuro, por exemplo, ao definir o tamanho da fonte, os designers farão algo semelhante ao mostrado abaixo.

Os valores mínimos, recomendados e máximos da propriedade.Para

mim, isso é simplesmente maravilhoso. Admiro a ideia de trabalhar em projetos cujos componentes precisam de alguma flexibilidade. Obviamente, nem todos os componentes precisam ser dinâmicos, mas alguns deles podem muito bem ser.

Casos de uso

▍ Barra lateral e área da página principal

À esquerda está o painel lateral. À direita está a área principal da página.Em

geral, os painéis laterais das páginas têm uma largura fixa e a largura das áreas principais se ajusta de forma flexível à área de visualização. Podemos expandir os recursos da barra lateral e torná-la mais dinâmica, tornando-a, com uma área de visualização suficientemente grande, ocupando mais espaço. A fim de conseguir isso, você precisa para limitar o tamanho da largura mínima da barra lateral usando a funçãomax().

Considere o seguinte exemplo.

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

A largura mínima do elemento asideserá 150px. O tamanho será maior 30vwse a largura da viewport for maior 500px(500 * 30% = 150).

→ Aqui está um exemplo

Size Tamanho da fonte do cabeçalho

Ajuste flexível do tamanho da fonte do cabeçalho

Um excelente script para usar a funçãoclamp()é o ajuste flexível do tamanho da fonte do cabeçalho. Imagine que precisamos que o tamanho mínimo da fonte do cabeçalho seja16pxe o máximo -50px. Graças ao uso da função,clamp()podemos fazer com que o tamanho da fonte esteja dentro desses valores sem diminuir ou aumentar.

.title {
    font-size: clamp(16px, 5vw, 50px);
}

A função clamp()é a solução perfeita para o problema acima. Ele permite que você defina o tamanho da fonte para que o texto permaneça acessível e fácil de ler em diferentes tamanhos da área de visualização. Se aqui, por exemplo, você usar a função min(), perderemos o controle sobre o tamanho da fonte na página exibida em pequenas áreas de visualização.

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

A seguir, é uma ilustração dessa idéia.

O uso da função min () faz o texto parecer muito pequeno na tela

pequena.Na tela do dispositivo móvel, o tamanho da fonte é muito pequeno. Portanto, não é recomendável usar apenas uma função para definir tamanhos de fontemin(). Obviamente, o tamanho da fonte pode ser reconfigurado usando uma consulta de mídia, mas o significado do uso das funções de comparação CSS é completamente perdido.

Como já mencionado, uma funçãomin()pode ser usada dentro de uma funçãomax(). Isso permite reproduzir os recursos da funçãoclamp().

.title {
    font-size: max(16px, min(10vw, 50px));
}

Aqui você pode experimentar um exemplo.

Quero observar que, depois da discussão no Twitter, não é correto usar 10vwo tamanho da fonte como um valor calculado. Ou seja, estamos falando sobre o fato de que isso causará problemas de acessibilidade se o usuário ampliar o navegador.

Portanto, é melhor fazer isso:

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

Aqui, a expressão é especificada como o tamanho da fonte calculado (1rem + 5vw). Isso resolve o problema.

▍ Cabeçalhos decorativos

Cabeçalho translúcido decorativo exibido usando uma fonte muito grande.Você

vê um texto translúcido grande localizado sob o cabeçalho? Este é um título decorativo, cujas dimensões devem ser consistentes com o tamanho da viewport. Para formar um cabeçalho, você pode usar a funçãomax()com um valor expresso em unidades de medida passadas para elevw. Isso tornará possível garantir que o tamanho da fonte não seja menor que o valor especificado.

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

→ Aqui está um exemplo de trabalho

▍ Crie gradientes suaves em diferentes áreas de visualização

Ao ajustar gradientes usando CSS, pode ser necessário ajustá-los dinamicamente para tornar os gradientes exibidos em telas móveis mais suaves. Veja o exemplo a seguir. Existe esse gradiente:

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

O gradiente na tela do celular é caracterizado por uma transição muito nítida entre as cores.

Observe que, na tela do celular, a borda da separação de cores é claramente visível. Isto é mau. Você pode corrigir a situação com a ajuda de uma boa e antiga investigação da mídia. (Ops, parece que eu já considero as consultas de mídia "boas tecnologias antigas".)

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

Embora essa seja uma maneira normal de resolver o problema, em uma situação semelhante, podemos usar a função CSS min().

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

O resultado é o que é mostrado abaixo.

O gradiente parece suave quando visualizado em qualquer tela

→ Aqui está uma demonstração dessa ideia

Gradient Gradiente translúcido

Quando você precisar colocar texto em cima de uma fotografia, abaixo dela deve ser "colocado" um gradiente. Isso facilitará a leitura de texto. Como no exemplo anterior, os parâmetros de gradiente devem depender do tamanho da viewport. Veja a figura a seguir.

Configurações flexíveis de gradiente em telas de tamanhos diferentes

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

Graças a essa pequena melhoria, o gradiente em dispositivos móveis ficará muito melhor do que antes. Se o tamanho do gradiente for igual, na tela da área de trabalho, 50% do elemento pai, então no dispositivo móvel ele já deve estar na região de 30%. Você pode definir o valor mínimo do tamanho gradiente usando a função max().

→ Aqui está um exemplo

Margens externas dinâmicas

Personalizando o recuo

Você pode usar unidades associadas às características da viewport para ajustar o recuo dinâmico dos elementos. No entanto, essa abordagem nem sempre se mostra bem. O fato é que o usuário pode visualizar a página na tela girada de um dispositivo móvel com uma altura vertical muito grande. Veja como resolver esse problema usando consultas de mídia:

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

Embora esse código funcione corretamente, o mesmo efeito pode ser alcançado com apenas uma linha de código:

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

Usando a função, min()configuramos o valor máximo de indentação para 2.75rem. Como você pode ver, é muito simples e conveniente.

→ Aqui está um exemplo de trabalho

▍ Largura do contêiner

Ajustando dinamicamente a largura de um contêiner

Suponha que precisamos de um elemento de contêiner cuja largura deve ser 80% da largura do seu elemento pai. A largura do contêiner não deve exceder780px. Como criar um contêiner semelhante? Geralmente nessa situação, eles fazem algo assim:

.container {
    max-width: 780px;
    width: 80%;
}

Mas o uso da função min()permite limitar a largura máxima do contêiner assim:

.container {
    max-width: min(80%, 780px);
}

→ Aqui está um exemplo de trabalho

▍ Recuo vertical

clamp()Gosto da função , pois é ideal para limitar o tamanho do recuo das seções da página. Dê uma olhada no exemplo a seguir, que mostra a configuração da parte superior da página (seção herói).

Definindo o recuo da seção localizada na parte superior da página Você pode

ajustar de forma flexível o recuo de uma seção usando apenas uma linha de código CSS.

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

→ Aqui está um exemplo

Limites e Sombras

Aqui está um vídeo que mostra um elemento que tem uma borda larga.

Elemento com uma borda larga

Em alguns casos, o design das páginas usa elementos com bordas amplas e com grandes raios de raio. Ao exibir esses elementos em telas móveis, seus limites precisam ser menores. O mesmo vale para os raios dos cantos. O uso da funçãoclamp()permite ajustar dinamicamente os parâmetros da borda, amarrando-os à largura da área de visualização.

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

Aqui você pode experimentar um exemplo de trabalho.

Distância entre células do layout da grade

Layout da grade

Uma maneira interessante de usar a funçãoclamp()é definir a propriedadegrid-gapnos layouts da grade. Em particular, estamos falando do fato de que, nas telas móveis, a distância entre as células da grade seria menor do que nas telas de desktop.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

Se você estiver interessado em usar funções de comparação de CSS ao criar layouts de grade, dê uma olhada neste bom artigo.

→ Aqui está um exemplo para esta seção

▍Use nas funções CSS para comparar valores sem unidades

Ao experimentar as funções CSS, decidi descobrir o que acontece se você passar as funções clamp()como o valor mínimo 0. Aqui está o que parece no código:

.element {
    width: clamp(0, 10vmax, 10rem);
}

Isso é CSS ruim. Eu acredito que o fato é que números sem unidades de medida não devem ser usados aqui.

Mechanisms Mecanismos redundantes para navegadores que não suportam min (), max () e clamp ()

Como é o caso com quaisquer outras características CSS novos, aplicando funções min(), max()e clamp(), você precisa cuidar dos mecanismos de backup. Para criar esses mecanismos, você pode usar uma das seguintes abordagens.

1. Configuração manual do mecanismo de backup

Aqui, a configuração manual é entendida como adicionando ao código uma propriedade que possui amplo suporte ao navegador. Esta propriedade deve ser colocada na frente da propriedade que usa funções de comparação CSS. Aqui está o que pode parecer:

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Aqui, os navegadores de suporte clamp()ignoram a primeira expressão. E aqueles que não suportam essa função usarão a primeira maneira de ajustar o recuo.

2. Usando a diretiva CSS apoia

Uma diretiva @supportsprojetada para testar o suporte do navegador para várias tecnologias pode ser usada para descobrir se o navegador pode funcionar com funções de comparação de CSS. Prefiro usar esta solução em vez da manual descrita no primeiro parágrafo. O fato é que qualquer navegador que suporte funções de comparação também deve suportar a diretiva @supports.

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

▍Sobre a disponibilidade de conteúdo

Embora os recursos de comparação de CSS nos forneçam uma nova maneira de criar páginas da Web mais flexíveis usando-os, é preciso ter cuidado. Por exemplo, usar uma função sozinha min()para definir uma propriedade font-sizenão é suficiente. O fato é que, em dispositivos móveis, uma fonte cujo tamanho é definido usando apenas essa função pode ser muito pequena. Ao configurar conteúdo de página particularmente importante, lembre-se de limitar as configurações mínima e máxima. Caso contrário, isso pode piorar a experiência do usuário ao trabalhar com o projeto.

Você usa funções do CSS min(), max()e clamp()?

Funções CSS min (), max () e clamp ()