Carregando...

Interface de utilizador CSS

Optional Advanced acabou de pôr um estêncil numa foto. Esta sessão é outra caixa de ferramentas: interface de utilizador. Muda o ponteiro, o caret e o cromo nativo do widget. Não fura o hero nem parte o artigo em colunas de jornal.

Resposta direta

As propriedades de interface CSS sugerem interação. cursor escolhe a forma do rato (pointer, wait, help, not-allowed…). resize deixa arrastar um canto — em geral num textarea. outline com outline-offset desenha um anel de foco que não ocupa espaço de layout (já viu outline no modelo de caixa; aqui é o hábito de teclado). user-select limita o destaque acidental. caret-color pinta a barra de inserção. appearance (e -webkit-appearance) pode tirar a pele nativa para restilizar o controlo. Mantenha o foco visível. Não transforme a página inteira num poster não selecionável.

Porque não é máscara nem coluna

Uma máscara decide que píxeis de uma caixa ficam visíveis. Várias colunas fragmentam um fluxo de texto. As propriedades de UI não fazem nenhuma das duas. Largura e altura ficam, salvo se entrar resize. Filtros e mask-image continuam arte. Aqui a pergunta é: «Parece clicável? Posso escrever? Posso aumentar a caixa? O teclado vê onde está?»

Cursor — diga a verdade

cursor é uma promessa. pointer significa «isto é clicável». Em botões e ligações reais. Não ponha uma mão num título que não faz nada.

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default é a seta. text é o I sobre texto selecionável. grab / grabbing servem pegas de arrasto. Cursores url(...) personalizados devem ser pequenos e ter sempre uma palavra-chave de recurso. Um cursor mentiroso é pior do que nenhum: as pessoas clicam num slogan e nada acontece.

Resize — aumente uma caixa, não o layout

resize funciona em caixas com overflow. Uso quotidiano: um campo de notas:

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

Valores: none, both, horizontal, vertical. Junte overflow diferente de visible ou a pega pode não aparecer. Não espalhe resize: both em todos os cartões. min-height / max-width impedem o campo de colapsar ou explodir.

Outline como anel de foco

No modelo de caixa o outline fica fora da borda e não ocupa espaço. Na caixa de UI conserva esse anel para foco de teclado — muitas vezes com :focus-visible para o rato não enquadrar cada clique:

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

Nunca envie *:focus { outline: none; } global sem um substituto tão visível. outline-offset afasta o anel sem mover vizinhos. Isto não é border (muda o tamanho) nem um fade de máscara no rótulo do botão.

user-select — menos destaque acidental

Selecionar é uma funcionalidade. Reduza só onde um duplo clique não deve pintar azul — rótulo de barra, chip de arrasto — não o artigo.

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none bloqueia o destaque. text é o predefinido legível. all seleciona o elemento inteiro num clique. Ainda há prefixos (-webkit-user-select) em WebKit antigo. Não desative a cópia em texto legal, preços ou erros.

caret-color — pinte a marca de inserção

O caret é a barra a piscar no campo. Alinhe-o à marca sem o esconder:

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto segue a cor do texto. caret-color: transparent «para um look limpo» é uma armadilha. Não é color da página toda nem mask-image no glifo.

appearance — volte a vestir o widget nativo

Os browsers pintam caixas de verificação e campos de pesquisa com cromo nativo. appearance: none (e -webkit-appearance: none se preciso) tira essa pele:

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

Depois de none você deve uma borda, um estado marcado e um anel de foco. Uma caixa invisível não é um controlo personalizado. O suporte varia; teste o widget real. appearance não repara uma máscara nem substitui colunas.

UI versus máscara, colunas e outline de caixa

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced usou colunas para prosa e máscaras para fotos. A interface é a camada de controlo. column-count num formulário de definições ou mask-image no botão enviar não torna o formulário «mais UI».

O que não deve apagar

Não retire todas as pistas nativas. Barras de deslocamento, carets e anéis de foco existem porque são precisos. Se o controlo está desativado, cursor: not-allowed mais o atributo real disabled é mais calmo do que uma máscara que esconde o rótulo.

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

Se o problema é a borda de uma foto, volte à máscara. Se é um artigo longo, às colunas ou ao fluxo de bloco. Se «não parece clicável», comece por cursor e um controlo verdadeiro, não um filtro decorativo.

Experimente

  1. cursor: pointer num <button> real e not-allowed em [disabled].
  2. A um textarea, resize: vertical, min-height e overflow: auto.
  3. Outline com :focus-visible e outline-offset — chegue com Tab.
  4. user-select: none só num chip de barra; o artigo continua selecionável.
  5. Pinte caret-color num input. Não mascare o campo nem ponha column-count.

Erros comuns

  • cursor: pointer em texto que não é ligação nem botão
  • resize: both em cartões de layout e barras de navegação
  • outline: none global sem substituto :focus-visible
  • user-select: none em páginas inteiras, preços ou erros
  • caret-color: transparent «para um look limpo»
  • appearance: none sem borda, estado marcado nem anel de foco
  • Tratar uma máscara ou várias colunas como polimento de interface

Resumo

  • O CSS de interface sugere interação: ponteiro, resize, caret, cromo nativo
  • cursor deve dizer a verdade; resize é para campos, não para a casca da página
  • Conserve um anel de foco visível; user-select e caret-color com mão leve
  • appearance: none só quando restiliza o widget por completo
  • Nem estêncil de máscara nem colunas de jornal
  • Optional Advanced segue com transforms 3D (transforms-3d)

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 75 de 76
Css Tutorial