CSS reset moderno (generatore)

CSS reset moderno (generatore): a cosa serve

Ogni progetto inizia correggendo sempre le stesse cose: margini predefiniti, box-sizing, immagini che sforano il layout, campi dei moduli con un altro font e parole lunghe che rompono lo schermo sul telefono.

Seleziona le regole che vuoi e copia un reset breve e commentato, con box-sizing border-box, altezza minima in dvh, media responsive, font: inherit nei moduli, overflow-wrap, text-wrap balance e pretty nei titoli e nei paragrafi, scorrimento fluido solo per chi non ha chiesto meno movimento e disattivazione delle animazioni per chi l’ha chiesto.

Come si usa

1. Seleziona le regole che vuoi usare.
2. Leggi il commento di ciascuna.
3. Copia o scarica il reset.css e mettilo all’inizio del CSS.

Quando usarlo

• Iniziare un sito da zero.
• Uniformare i progetti del team.
• Capire cosa fa ogni regola di reset.

Domande frequenti

Cos’è un CSS reset?

Un piccolo insieme di regole messo all’inizio del CSS per eliminare differenze e comportamenti fastidiosi dei browser, come i margini sul body, le immagini che sforano il layout e i campi dei moduli con un altro font. Rende più facile scrivere il resto del CSS.

Reset o normalize?

Normalize.css conserva gli stili predefiniti e corregge solo le differenze tra browser; un reset moderno va un po’ oltre e rimuove ciò che quasi sempre si sovrascrive. I browser attuali sono molto più simili tra loro, quindi i reset brevi come questo sono diventati i più usati.

Perché lo scorrimento fluido sta dentro una media query?

Lo scorrimento animato può dare nausea a chi è sensibile al movimento. Dentro prefers-reduced-motion: no-preference viene attivato solo per chi non ha chiesto meno movimento nel sistema.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili