color-scheme
- Mesmo quando um site oferece suporte ao modo escuro, pode acontecer de a barra de rolagem continuar branca e brilhante
- Ao definir a propriedade
color-scheme como dark light, você informa ao navegador que a página consegue lidar tanto com o modo escuro quanto com o modo claro, e a barra de rolagem também fica escura
- É possível aplicar
color-scheme ao documento usando uma meta tag, permitindo que o navegador conheça a preferência do usuário antes mesmo de o CSS ser carregado
- Quando usada junto com o recurso de mídia
prefers-color-scheme, é possível controlar perfeitamente quais partes devem mudar de acordo com a preferência do usuário
- Usando o seletor
:has(), é possível aplicar a propriedade color-scheme ao elemento raiz quando o body tiver a classe dark
text-wrap
- Às vezes, títulos ou legendas quebram de forma estranha e deixam apenas uma palavra na última linha
- Ao usar o valor
balance na propriedade text-wrap, é possível equilibrar melhor os títulos do site
- Esse recurso independe do navegador, funciona bem em configurações modernas e ainda degrada de forma elegante em ambientes mais antigos
Scroll-margin
- Ao usar links âncora em uma página, pode acontecer de o elemento de destino ficar escondido por causa de um cabeçalho fixo
- Esse problema pode ser resolvido com a propriedade CSS
scroll-margin, ajustando scroll-margin-top para corresponder à altura do cabeçalho fixo
- Com o seletor
:is, é possível aplicar o mesmo tratamento a vários elementos, como h2, h3 e h4, e usar unidades como ex ou lh para definir um espaçamento dinâmico
4 comentários
Essa é realmente uma ótima dica, obrigado.
A barra de rolagem ficou boa.
A barra de rolagem branca chama bastante atenção. No GeekNews também apliquei imediatamente para dark/light. Então havia um jeito fácil.
Comparando com o Naver, a diferença é grande. O GeekNews conseguiu fazer algo que nem o Naver consegue(?)...!