Ripristino delle proprietà predefinite dopo l'applicazione di un ripristino CSS globale

Question

Alcuni codici legacy che devo sviluppare, mi fanno davvero sentire the cons of global CSS reset.

ho il vecchio foo.css che inizia con

* {margin:0; padding:0;} 

e ho usato per copiare un file diverso bar.css, modificarlo anche le mie esigenze (con il CSS resettare), e usarlo per sostituire foo.css solo nel codice che sto scrivendo. Lo faccio per non preoccuparmi della retrocompatibilità con le vecchie sezioni del sito.

Ora questo è piuttosto ingombrante: per i cambiamenti globali devo ricordare di modificare entrambi i file. Così ora il mio bar.css sta estendendo foo.css, a partire da:

@import url("style.css"); 

Il problema è che ora ho anche ereditare il reset CSS.

C'è un modo (†) per portare le margin & padding proprietà di alcuni elementi (intestazioni, liste, ecc) ai valori predefiniti - quelli prima che è stato applicato il reset?

(†) diversa impostazione manualmente ogni proprietà indietro al suo valore iniziale, come definito nelle specifiche CSS.

Answer 1

C'è il valore proposto initial per l'impostazione di una proprietà sul valore iniziale, senza trovare il valore esplicito. Ma è ancora molto bozza e difficilmente implementabile in qualsiasi browser.

Inoltre, probabilmente non è nemmeno quello che vorresti ottenere. Se ti capisco correttamente, vorrai impostare per es. i margini superiore e inferiore degli elementi h2 al valore predefinito del browser . Non penso che ci sia nemmeno un modo proposto di farlo in CSS. Le specifiche non definiscono le impostazioni predefinite del browser. Il valore iniziale di, ad esempio, la proprietà margin è 0. Il motivo per cui le intestazioni hanno il margine superiore e inferiore per impostazione predefinita è che il browser applica, almeno concettualmente, un foglio di stile del browser. Le specifiche CSS suggeriscono un foglio di stile del browser predefinito, ma non ne impongono uno, e il browser potrebbe (e in effetti fare) deviare dai suggerimenti.

In pratica, lo scatto migliore nella situazione data sarebbe il controllo dello Appendix D della specifica CSS 2.1 e utilizzare i valori indicati in tale posizione. Per cose come i margini, questo per lo più crea l'effetto dell'uso delle impostazioni predefinite del browser.

Answer 2

penserei * {margin: auto} sarebbe ripristinare il margine (o h1 {margin: auto} se solo questo elemento è essere ripristinato.), Ma questo non funzionerà per imbottitura. Tecnicamente, la specifica è che il padding sia già zero, tuttavia, se un browser lo implementa in altro modo, non penso che ci sarebbe un modo per resettarlo.

Answer 3

Invece di desiderare di tornare ai valori predefiniti del browser, perché non impostarne uno proprio?

Tutto quello che avrebbe bisogno di fare è aggiungere le dichiarazioni sotto la reimpostazione CSS globale:

* { margin: 0; } 
h1 { margin: 10px 0; } 

Il h1 ha la precedenza sul selettore globale *.

Ciò aiuterebbe normalize your CSS.