CSS tem alguns recursos menos conhecidos, mas úteis. Examinaremos alguns deles.

1. Propriedade CSS scroll-snap-type e propriedade scroll-snap-stop

rolagem-snap-stop

Quando esta propriedade é definida para cada elemento filho no elemento pai, quando você rola rapidamente a tela, o próximo elemento é impedido de passar durante a rolagem rápida com um trackpad ou tela sensível ao toque.

Gifs:

Exemplo :

Valor :

• Normal: é o valor padrão. Rolar é o comportamento padrão

• Sempre: depois de deslizar rapidamente com o touchpad ou tela sensível ao toque, a rolagem para e o próximo elemento entra em foco.

propriedade scroll-snap-type

Arraste o controle deslizante horizontalmente, solte-o e você verá o efeito.
O efeito ocorre quando você clica em uma caixa e navega usando as teclas de seta para esquerda e direita

Gifs:

Exemplo :

Valor :

• Nenhum: este é o valor padrão

• X : O efeito é definido no eixo x

• Y : O efeito é definido no eixo y

• Ambos : o efeito é definido no eixo x e no eixo y

• Obrigatório : Após a conclusão da rolagem, a rolagem se move automaticamente para o ponto de captura

2. Propriedade de itens de local CSS

O valor definido para a propriedade place-items será aplicado às propriedades align-items e justificar-items.

Exemplo :

Valor :

• Iniciar: Alinhe os itens no início da célula da grade

• Fim: Alinhe os itens no final da célula da grade

• Centro: Alinha os itens ao centro da célula da grade

3. CSS todas as propriedades

Altera todas as propriedades aplicadas ao elemento ou seu pai para seus valores iniciais

Exemplo :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Valor :

• Unset: altera todas as propriedades aplicadas ao elemento ou ao pai do elemento para seu valor pai se forem herdáveis ​​ou para seu valor inicial se não

4. Propriedade de seleção do usuário CSS

Impede que os usuários selecionem textos

Exemplo:

The text of this div element cannot be selected.

5. Propriedade CSS-color

Altera a cor do cursor (caret) nos campos de entrada de texto.

6. Propriedade CSS text-decoration-skip-ink

A propriedade CSS text-decoration-skip-ink especifica como o overline e o sublinhado são desenhados ao passar o glifo sobre linhas e sublinhados.

Valor :

• Nenhum:

Exemplo :

text-decoration-skip-ink: none;

• Automático:

Exemplo :

text-decoration-skip-ink: auto;

7. Propriedade de eventos de ponteiro CSS

A propriedade pointer-events define se um elemento reage ou não a eventos de ponteiro.

Exemplo :

Google


 Google

Valor:

• Nenhum : Padrão

• Auto: O elemento não reage a eventos de ponteiro

Conclusão

Examinamos os recursos pouco conhecidos do CSS. Aprendemos os recursos que serão úteis em suas aplicações.