Mélanie  Faria

Mélanie Faria

1656698880

Como Usar Consultas De Subgrade E Contêiner CSS

Se você trabalha com CSS com frequência, pode ter experimentado layouts colocados lado a lado que quebram ou ficam desalinhados quando o tamanho de um lado muda. Quase todo web designer já enfrentou isso, e pode ser frustrante resolver. Felizmente, o CSS possui recursos que permitem criar layouts da Web que mantêm o alinhamento quando seu conteúdo é alterado; elas são chamadas de consultas de subgrade e de contêiner.

As consultas de subgrade e contêiner CSS são dois recursos que podem melhorar muito o design do layout da Web e o desenvolvimento da Web responsivo. Este artigo mergulhará profundamente nas subgrades CSS, fornecendo um tutorial sobre como usá-las perfeitamente com consultas de contêiner.

O que são subgrades CSS?

As subgrades CSS são um recurso relativamente novo no ecossistema CSS, provando ser uma adição significativa às especificações de layout e design da web da grade CSS de nível dois.

Os elementos (componentes filho) que você constrói e ajusta dentro de um contêiner de grade tradicional não herdam diretamente linhas e colunas de seu componente pai. Isso causa dificuldade em alinhá-los consistentemente com a grade pai, pois cada elemento tende a agir de forma independente.

Você então tem que gerenciar duas grades separadas, que podem se tornar redundantes. Você pode resolver esse problema rapidamente adicionando subgridcomo um valor para as propriedades grid-template-rowse grid-template-columns, porque os componentes filho da grade agora podem sincronizar perfeitamente com seu componente pai.

As subgrades CSS permitem que os componentes filhos herdem suas configurações de linha e coluna pai sem manter suas configurações de grade.

Considere as três cartas em um sistema de grade aninhado abaixo:

Cartões em um sistema de grade aninhado

Veja o que acontece quando você aumenta o conteúdo do cartão no centro:

Os cartões de grade aninhados aumentaram o conteúdo central

 

Você pode ver imediatamente que as posições do título e do rodapé ficam comprometidas à medida que o conteúdo aumenta.

Existem várias maneiras de lidar com esse problema. Ainda assim, todos eles acabam com você gerenciando manualmente grades individuais em sistemas de grade aninhados, o que pode ser problemático ao trabalhar em uma base de código maior.

As subgrades agora fornecem uma correção alternativa que permite que linhas e colunas mantenham sua posição inicial no sistema de grade apesar de alterar seu conteúdo.

Do meu exemplo acima, adicionar subgrido valor do grid-template-rows do meu cartão produzirá uma saída diferente:

.card {
  grid-template-rows: subgrid;
}

Aqui está o resultado:

cartões de subgrade

Apesar do aumento de conteúdo do segundo cartão, os elementos de título e rodapé ainda estão perfeitamente posicionados e sincronizados com a grade pai.

Subgrid é uma adição significativa às especificações de layout de grade CSS devido à capacidade dos componentes filho de herdar as propriedades de seus componentes pai e avô. Ele é útil ao construir sistemas de grade aninhados, layouts de formulários perfeitamente alinhados e outros alinhamentos editoriais da web.

Atualmente, apenas o navegador Firefox suporta subgrade CSS, mas outros navegadores populares não ficam muito atrás. Você pode consultar este guia para se aprofundar nas subgrades CSS e suas funções.

O que são consultas de contêiner?

Desde a introdução das consultas de mídia nos navegadores, o web design responsivo deu um passo gigantesco no futuro, pois agora você pode projetar layouts específicos para as janelas de visualização do navegador.

Isso é ótimo, mas as consultas de mídia também expuseram um problema de redundância ao criar estruturas da Web mais complexas. Por exemplo, os componentes envolvidos em uma seção de contenção que precisam ajustar suas propriedades de layout primárias (como largura ou altura) para alinhar com uma alteração na janela de visualização da página da Web podem afetar e interromper o design.

Para resolver esse problema, mantenha as consultas de mídia do componente em sincronia com a seção que o contém para garantir que seu componente fique bem em todos os tamanhos de janela de visualização. Você pode resolver isso facilmente com consultas de contêiner porque, em vez de tamanhos de janela de visualização, agora você projeta elementos com base em suas propriedades reais. As consultas de contêiner permitem que qualquer componente responda por um contêiner especificado.

Em um sistema de grade, por exemplo, os componentes filhos podem se alinhar com seu contêiner e determinar seu comportamento e capacidade de resposta. Você pode modificar seus estilos dependendo de sua posição no contêiner (não na viewport). Embora você ainda possa estruturar páginas da Web com um layout de grade responsivo, o uso de consultas de contêiner é uma abordagem mais direta para o design da Web responsivo.

Como funcionam as consultas de contêiner?

A primeira coisa a entender sobre consultas de contêiner CSS é que, enquanto “contêineres” são os elementos que estão sendo consultados, as regras nas consultas de contêiner afetam apenas os descendentes de contêiner. Por exemplo, se você consultar um main, section, ou talvez um divcomo seu contêiner de destino, as consultas de contêiner permitirão que você defina regras sobre como os elementos dentro deles mudam à medida que o tamanho do contêiner muda.

Você pode criar uma consulta de contêiner com @container. Ele procura o contexto de contenção mais próximo:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

O código acima é uma ilustração do trabalho com consultas de contêiner. Ele simplesmente instrui o navegador a alterar o valor da flex-directioncoluna do cartão para rowse a largura do contêiner for de pelo menos 450px.

As consultas de contêiner foram especificadas para serem incluídas no CSS containment. Três propriedades os acompanham:

primeiro.container-type

Essa propriedade atribui um contêiner de consulta a um elemento para que seus componentes filho possam consultar vários aspectos de seus recursos de layout.

  • sizecria um contêiner de consulta para consultas dimensionais de eixo em bloco e em linha. A contenção de layout, estilo e tamanho é aplicada ao elemento
  • inline-sizecria um contêiner de consulta para consultas dimensionais no eixo embutido do contêiner. O layout, o estilo e a contenção de tamanho embutido do elemento são aplicados
  • block-sizecria um contêiner de consulta para consultas dimensionais no eixo de bloco do contêiner. Layout, estilo e contenção de tamanho de bloco são aplicados ao elemento
  • styleé para consultas de estilo e cria um contêiner de consulta
  • statecria um contêiner de consulta para consultas de estado

2.container-name

Uma propriedade opcional que especifica ainda mais o nome do contêiner. Este atributo atua como uma saída de escape quando não queremos direcionar o container pai mais próximo.

Considere o código abaixo:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

O CSS acima gera um container com um nome especificado ( sidebar) que contém apenas conteúdo no eixo inline, o que significa que o conteúdo pode crescer o quanto for necessário no eixo do bloco. Você pode consultar esse contêiner específico com o seguinte container-name:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Essa propriedade é frequentemente usada como uma propriedade abreviada que você pode usar para definir ambas container-typee container-nameem uma instrução.

Casos de uso para consultas de contêiner

As consultas de contêiner são apropriadas para componentes altamente reutilizáveis ​​com um layout dependente do espaço de contêiner disponível. Eles podem ser usados ​​em várias situações ou adicionados a vários contêineres na página.

Outros casos de uso de consulta de contêiner incluem:

  • Layouts adaptáveis
  • Cartões, elementos de formulário, banners e outros componentes modulares
  • Experiências de redimensionamento CSS
  • Paginação mobile e desktop com funcionalidades distintas

A maioria dos navegadores ainda não oferece suporte a consultas de contêiner, mas você pode testar prontamente seus recursos no Google Chrome Canary. Vá para chrome://flagse habilite CSS Container Queries:

Ativando consultas de contêiner css

Você também pode experimentar consultas de contêiner no Mozilla Firefox acessando about:confige ativando layout.css.container-queries:

habilitando consultas de contêiner firefox

As consultas de contêiner estão atualmente em seu primeiro rascunho de trabalho público, mas é um recurso que se mostrou útil e provavelmente será incorporado em todas as versões do navegador.

Usando subgrades CSS com consultas de contêiner

Subgrades CSS e consultas de contêiner são dois recursos CSS fascinantes que acho que mudarão sua abordagem ao design de layout de página da Web e estilo responsivo, mas como podemos combiná-los?

Digamos que temos uma seção contendo três artigos no seguinte formato:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Agora vamos colocar esses artigos em um sistema de grade aninhado onde subgrades e consultas de contêiner podem desempenhar suas funções:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

A partir do código CSS acima, fizemos com que as duas primeiras colunas ocupassem tanto espaço em um sistema de grade de duas colunas quanto a terceira, que está logo abaixo. Em seguida, criamos uma subgrade dentro do artigo para garantir que os elementos internos estejam sincronizados e não possam quebrar, mesmo quando o conteúdo do artigo for aumentado.

exemplo de sistema de grade de cartão

Para tornar esse sistema mais responsivo, tivemos que direcionar a seção e definir algumas regras de consulta de contêiner que se aplicam aos artigos como seus descendentes. Você pode notar que consultamos a inline-sizepropriedade da seção porque queremos que os componentes do artigo (filho) cresçam ou diminuam em linha com a largura da seção (contêiner).

Neste caso, fizemos a flexão dos artigos na direção da coluna quando a largura da seção é no máximo 80ch. Isso permite que nossos artigos respondam não ao tamanho da janela de visualização, mas à largura do contêiner.

Aqui está o resultado:

subgrades de consultas de contêiner trabalhando juntas

Conclusão

Este artigo abordou subgrades CSS e consultas de contêiner, seu funcionamento e casos de uso. Também pudemos experimentar os dois conceitos e combiná-los para criar um layout responsivo. Consultas de contêiner e subgrades CSS estão atualmente em seu primeiro rascunho de trabalho público, mas são recursos que se mostraram úteis e provavelmente serão incorporados na maioria das novas versões de navegadores.

Espero que este artigo tenha sido valioso para você. Boa codificação!

Fonte: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

What is GEEK

Buddha Community

Como Usar  Consultas De Subgrade E Contêiner CSS
Mélanie  Faria

Mélanie Faria

1656698880

Como Usar Consultas De Subgrade E Contêiner CSS

Se você trabalha com CSS com frequência, pode ter experimentado layouts colocados lado a lado que quebram ou ficam desalinhados quando o tamanho de um lado muda. Quase todo web designer já enfrentou isso, e pode ser frustrante resolver. Felizmente, o CSS possui recursos que permitem criar layouts da Web que mantêm o alinhamento quando seu conteúdo é alterado; elas são chamadas de consultas de subgrade e de contêiner.

As consultas de subgrade e contêiner CSS são dois recursos que podem melhorar muito o design do layout da Web e o desenvolvimento da Web responsivo. Este artigo mergulhará profundamente nas subgrades CSS, fornecendo um tutorial sobre como usá-las perfeitamente com consultas de contêiner.

O que são subgrades CSS?

As subgrades CSS são um recurso relativamente novo no ecossistema CSS, provando ser uma adição significativa às especificações de layout e design da web da grade CSS de nível dois.

Os elementos (componentes filho) que você constrói e ajusta dentro de um contêiner de grade tradicional não herdam diretamente linhas e colunas de seu componente pai. Isso causa dificuldade em alinhá-los consistentemente com a grade pai, pois cada elemento tende a agir de forma independente.

Você então tem que gerenciar duas grades separadas, que podem se tornar redundantes. Você pode resolver esse problema rapidamente adicionando subgridcomo um valor para as propriedades grid-template-rowse grid-template-columns, porque os componentes filho da grade agora podem sincronizar perfeitamente com seu componente pai.

As subgrades CSS permitem que os componentes filhos herdem suas configurações de linha e coluna pai sem manter suas configurações de grade.

Considere as três cartas em um sistema de grade aninhado abaixo:

Cartões em um sistema de grade aninhado

Veja o que acontece quando você aumenta o conteúdo do cartão no centro:

Os cartões de grade aninhados aumentaram o conteúdo central

 

Você pode ver imediatamente que as posições do título e do rodapé ficam comprometidas à medida que o conteúdo aumenta.

Existem várias maneiras de lidar com esse problema. Ainda assim, todos eles acabam com você gerenciando manualmente grades individuais em sistemas de grade aninhados, o que pode ser problemático ao trabalhar em uma base de código maior.

As subgrades agora fornecem uma correção alternativa que permite que linhas e colunas mantenham sua posição inicial no sistema de grade apesar de alterar seu conteúdo.

Do meu exemplo acima, adicionar subgrido valor do grid-template-rows do meu cartão produzirá uma saída diferente:

.card {
  grid-template-rows: subgrid;
}

Aqui está o resultado:

cartões de subgrade

Apesar do aumento de conteúdo do segundo cartão, os elementos de título e rodapé ainda estão perfeitamente posicionados e sincronizados com a grade pai.

Subgrid é uma adição significativa às especificações de layout de grade CSS devido à capacidade dos componentes filho de herdar as propriedades de seus componentes pai e avô. Ele é útil ao construir sistemas de grade aninhados, layouts de formulários perfeitamente alinhados e outros alinhamentos editoriais da web.

Atualmente, apenas o navegador Firefox suporta subgrade CSS, mas outros navegadores populares não ficam muito atrás. Você pode consultar este guia para se aprofundar nas subgrades CSS e suas funções.

O que são consultas de contêiner?

Desde a introdução das consultas de mídia nos navegadores, o web design responsivo deu um passo gigantesco no futuro, pois agora você pode projetar layouts específicos para as janelas de visualização do navegador.

Isso é ótimo, mas as consultas de mídia também expuseram um problema de redundância ao criar estruturas da Web mais complexas. Por exemplo, os componentes envolvidos em uma seção de contenção que precisam ajustar suas propriedades de layout primárias (como largura ou altura) para alinhar com uma alteração na janela de visualização da página da Web podem afetar e interromper o design.

Para resolver esse problema, mantenha as consultas de mídia do componente em sincronia com a seção que o contém para garantir que seu componente fique bem em todos os tamanhos de janela de visualização. Você pode resolver isso facilmente com consultas de contêiner porque, em vez de tamanhos de janela de visualização, agora você projeta elementos com base em suas propriedades reais. As consultas de contêiner permitem que qualquer componente responda por um contêiner especificado.

Em um sistema de grade, por exemplo, os componentes filhos podem se alinhar com seu contêiner e determinar seu comportamento e capacidade de resposta. Você pode modificar seus estilos dependendo de sua posição no contêiner (não na viewport). Embora você ainda possa estruturar páginas da Web com um layout de grade responsivo, o uso de consultas de contêiner é uma abordagem mais direta para o design da Web responsivo.

Como funcionam as consultas de contêiner?

A primeira coisa a entender sobre consultas de contêiner CSS é que, enquanto “contêineres” são os elementos que estão sendo consultados, as regras nas consultas de contêiner afetam apenas os descendentes de contêiner. Por exemplo, se você consultar um main, section, ou talvez um divcomo seu contêiner de destino, as consultas de contêiner permitirão que você defina regras sobre como os elementos dentro deles mudam à medida que o tamanho do contêiner muda.

Você pode criar uma consulta de contêiner com @container. Ele procura o contexto de contenção mais próximo:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

O código acima é uma ilustração do trabalho com consultas de contêiner. Ele simplesmente instrui o navegador a alterar o valor da flex-directioncoluna do cartão para rowse a largura do contêiner for de pelo menos 450px.

As consultas de contêiner foram especificadas para serem incluídas no CSS containment. Três propriedades os acompanham:

primeiro.container-type

Essa propriedade atribui um contêiner de consulta a um elemento para que seus componentes filho possam consultar vários aspectos de seus recursos de layout.

  • sizecria um contêiner de consulta para consultas dimensionais de eixo em bloco e em linha. A contenção de layout, estilo e tamanho é aplicada ao elemento
  • inline-sizecria um contêiner de consulta para consultas dimensionais no eixo embutido do contêiner. O layout, o estilo e a contenção de tamanho embutido do elemento são aplicados
  • block-sizecria um contêiner de consulta para consultas dimensionais no eixo de bloco do contêiner. Layout, estilo e contenção de tamanho de bloco são aplicados ao elemento
  • styleé para consultas de estilo e cria um contêiner de consulta
  • statecria um contêiner de consulta para consultas de estado

2.container-name

Uma propriedade opcional que especifica ainda mais o nome do contêiner. Este atributo atua como uma saída de escape quando não queremos direcionar o container pai mais próximo.

Considere o código abaixo:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

O CSS acima gera um container com um nome especificado ( sidebar) que contém apenas conteúdo no eixo inline, o que significa que o conteúdo pode crescer o quanto for necessário no eixo do bloco. Você pode consultar esse contêiner específico com o seguinte container-name:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Essa propriedade é frequentemente usada como uma propriedade abreviada que você pode usar para definir ambas container-typee container-nameem uma instrução.

Casos de uso para consultas de contêiner

As consultas de contêiner são apropriadas para componentes altamente reutilizáveis ​​com um layout dependente do espaço de contêiner disponível. Eles podem ser usados ​​em várias situações ou adicionados a vários contêineres na página.

Outros casos de uso de consulta de contêiner incluem:

  • Layouts adaptáveis
  • Cartões, elementos de formulário, banners e outros componentes modulares
  • Experiências de redimensionamento CSS
  • Paginação mobile e desktop com funcionalidades distintas

A maioria dos navegadores ainda não oferece suporte a consultas de contêiner, mas você pode testar prontamente seus recursos no Google Chrome Canary. Vá para chrome://flagse habilite CSS Container Queries:

Ativando consultas de contêiner css

Você também pode experimentar consultas de contêiner no Mozilla Firefox acessando about:confige ativando layout.css.container-queries:

habilitando consultas de contêiner firefox

As consultas de contêiner estão atualmente em seu primeiro rascunho de trabalho público, mas é um recurso que se mostrou útil e provavelmente será incorporado em todas as versões do navegador.

Usando subgrades CSS com consultas de contêiner

Subgrades CSS e consultas de contêiner são dois recursos CSS fascinantes que acho que mudarão sua abordagem ao design de layout de página da Web e estilo responsivo, mas como podemos combiná-los?

Digamos que temos uma seção contendo três artigos no seguinte formato:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Agora vamos colocar esses artigos em um sistema de grade aninhado onde subgrades e consultas de contêiner podem desempenhar suas funções:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

A partir do código CSS acima, fizemos com que as duas primeiras colunas ocupassem tanto espaço em um sistema de grade de duas colunas quanto a terceira, que está logo abaixo. Em seguida, criamos uma subgrade dentro do artigo para garantir que os elementos internos estejam sincronizados e não possam quebrar, mesmo quando o conteúdo do artigo for aumentado.

exemplo de sistema de grade de cartão

Para tornar esse sistema mais responsivo, tivemos que direcionar a seção e definir algumas regras de consulta de contêiner que se aplicam aos artigos como seus descendentes. Você pode notar que consultamos a inline-sizepropriedade da seção porque queremos que os componentes do artigo (filho) cresçam ou diminuam em linha com a largura da seção (contêiner).

Neste caso, fizemos a flexão dos artigos na direção da coluna quando a largura da seção é no máximo 80ch. Isso permite que nossos artigos respondam não ao tamanho da janela de visualização, mas à largura do contêiner.

Aqui está o resultado:

subgrades de consultas de contêiner trabalhando juntas

Conclusão

Este artigo abordou subgrades CSS e consultas de contêiner, seu funcionamento e casos de uso. Também pudemos experimentar os dois conceitos e combiná-los para criar um layout responsivo. Consultas de contêiner e subgrades CSS estão atualmente em seu primeiro rascunho de trabalho público, mas são recursos que se mostraram úteis e provavelmente serão incorporados na maioria das novas versões de navegadores.

Espero que este artigo tenha sido valioso para você. Boa codificação!

Fonte: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Syu Swiy

Syu Swiy

1641443740

E-BOOK PDF FREE FOR LEARN CSS - CSS Essentials

THIS BOOK IN TEXT ENGLISH

Buku PDF Gratis buat belajar CSS - CSS Essentials 
 

https://artinfo.my.id/baca/MTEyNE1LNA==/buku-pdf-gratis-buat-belajar-css-css-essentials

#css #css_essentials #buku_pdf #pdf_gratis #belajar_css #css_dasar #buku_css #pdf_css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css