CSS => Normalizzazione degli stili del browser

introduzione

Ogni browser ha un set predefinito di stili CSS che utilizza per il rendering di elementi. Questi stili predefiniti potrebbero non essere coerenti tra i vari browser perché: le specifiche della lingua non sono chiare, quindi gli stili di base sono interpretabili, i browser potrebbero non seguire le specifiche fornite o i browser potrebbero non avere stili predefiniti per gli elementi HTML più recenti. Di conseguenza, le persone potrebbero voler normalizzare gli stili di default su quanti più browser possibile.

Osservazioni

Il reset di Meyer, se efficace, apporta le stesse modifiche a quasi tutti gli elementi comunemente usati. Questo ha il risultato di inquinare le finestre di ispezione del browser Web con gli stessi stili applicati più e più volte e crea più lavoro per il browser (più regole da applicare a più elementi). La tecnica Normalize, d'altra parte, è molto più focalizzata e meno una tecnica a pennello largo. Ciò semplifica il lavoro sulla parte del browser e risulta meno ingombrante negli strumenti di ispezione del browser.

normalize.css

I browser hanno un set predefinito di stili CSS che usano per gli elementi di rendering. Alcuni di questi stili possono anche essere personalizzati utilizzando le impostazioni del browser per modificare, ad esempio, le definizioni predefinite di faccia e dimensioni dei caratteri. Gli stili contengono la definizione di quali elementi dovrebbero essere a livello di blocco o in linea, tra le altre cose.

Poiché questi stili predefiniti hanno un certo margine di manovra secondo le specifiche del linguaggio e poiché i browser potrebbero non seguire correttamente le specifiche possono differire da browser a browser.

È qui che entra in gioco normalize.css . Sovrascrive le incoerenze più comuni e corregge i bug noti.

Che cosa fa

Preserva i valori predefiniti utili, a differenza di molti resettaggi CSS.
Normalizza gli stili per una vasta gamma di elementi.
Corregge bug e inconsistenze comuni del browser.
Migliora l'usabilità con modifiche sottili.
Spiega quale codice utilizza i commenti dettagliati.

Quindi, includendo normalize.css nel tuo progetto, il tuo design apparirà più simile e coerente tra i diversi browser.

Differenza di reset.css

Potresti aver sentito di reset.css . Qual è la differenza tra i due?

Mentre normalize.css fornisce consistenza impostando proprietà diverse su valori predefiniti unificati, reset.css raggiunge la coerenza rimuovendo tutto lo stile di base che può essere applicato da un browser. Anche se all'inizio potrebbe sembrare una buona idea, in realtà ciò significa che devi scrivere tutte le regole tu stesso, il che è contrario al fatto di avere uno standard solido.

Approcci ed esempi

I ripristini CSS adottano approcci separati ai valori predefiniti del browser. Reset CSS di Eric Meyer è in circolazione da un po 'di tempo. Il suo approccio annulla molti degli elementi del browser che sono noti per causare problemi fin da subito. Quanto segue è tratto dalla sua versione (v2.0 | 20110126) Reset CSS.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Ripristina CSS di Eric Meyer

Normalizza i CSS sull'altro e tratta molti di questi separatamente. Quello che segue è un esempio della versione (v4.2.0) del codice.

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Normalizza CSS

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

CSS
Normalizzazione degli stili del browser

Ricerca…