Skip to content

Latest commit

 

History

History
139 lines (100 loc) · 2.13 KB

css.md

File metadata and controls

139 lines (100 loc) · 2.13 KB

css

Texto perfeito na caixa:

p { text-box: trim-both cap alphabetic }

Scrollbar com cores:

div { scrollbar-color: blue transparent }

Nova formatação hsl:

div { background: hsl(10 10 10) }

Misturas de cores:

div { background: color-mix(in srgb blue, white 10%) }

Justificação avançada:

p { text-wrap: balance }
p { text-wrap: pretty }

Validações melhores:

input:user-valid { border-color: green }
input:user-invalid { border-color: red }

Atributo existe:

[data-value]

Atributo que possuí o valor exato:

```css
[data-value='foo']

Atributo cujo valor contém este trecho em algum lugar:

[data-value*='foo']

Atributo que possuí este valor em uma lista separada por espaços:

[data-value~='foo']

Atributo cujo valor começa com isto:

[data-value^='foo']

Atributo cujo valor começa com isto em uma lista separada por hífen:

[data-value|='foo']

Atributo cujo valor termina com isto:

[data-value$='foo']

Múltiplos valores:

clamp(min, val, max)

Múltiplas cores baseadas em esquema de cores:

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Reset (normalização de estilos):

*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  line-height: 1.5;
}

canvas, img, picture, svg, video {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mostrar outline de foco apenas quando o usuário estiver navegando com tab (não ao clicar) /
/ Exceto para input e textarea */
*:focus:not(:is(input, textarea)) {
  outline: none;
}

Links