Lasciare alcuni valori invariati quando si usano le proprietà stenografiche dei CSS

Question

Questa domanda compare di tanto in tanto nella mia mente, ma poiché la soluzione è così semplice, non mi sono mai preoccupato di dedicare del tempo per approfondire ulteriormente. Oggi ho pensato di vedere cosa Stack Overflow ha da dire in merito.

Diciamo che ho questo:

/* Selector setting up shared properties for some elements */ 
#header, #main, #footer { 
    margin: 0 5%; 
} 

Ora assumere vorrei ignorare margin-top e margin-bottom di #header. In cima alla mia testa di solito farei lo margin: 1em 0; (dimenticando la regola precedente), ma ovviamente sostituiremo anche margin-right e margin-left. Quello che vorrei è un modo per specificare che un certo valore di una proprietà stenografica non dovrebbe cambiare affatto, è possibile? Queste sono le opzioni a cui sono venuto a pensare:

#header { 
    margin: 1em 0; /* Will remove left/right margin */ 
    margin: 1em auto; /* Will revert to default left/right margin */ 
    margin: 1em inherit; /* Will inherit left/right margin from parent */ 
    margin: 1em no-change; /* This is what I'm after: shorthand property to set only 2 of 4 values */ 

    /* And this is how I end up solving it */ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

Answer 1

Attualmente non è possibile, purtroppo. Dovrai continuare ad assegnare rispettivamente margin-top e margin-bottom.

Una proprietà di stenografia modifica sempre i valori di tutti le sue proprietà componente (di tipo longhand). Vale a dire, qualsiasi valore omesso in una proprietà abbreviata verrà impostato su initial per le rispettive proprietà, a meno che non venga risolto da cascading o da alcune altre regole che dipendono dalla proprietà di stenografia. Ad esempio, i seguenti risultati dei margini auto su tutti i lati tranne fondo a causa del margin-bottom Longhand visualizzato dopo la scorciatoia:

#header { 
    /* 
    * Note: this is short for margin: auto auto auto auto; 
    * none of the longhands are set to initial! Different shorthands 
    * have different rules, but a shorthand always changes the values 
    * of all its longhands. 
    */ 
    margin: auto; 
    margin-bottom: 1em; 
} 

Se ci fossero abbreviazioni separate per margini orizzontali e margini verticali, si sarebbe in grado di fai questo senza doversi preoccupare di mantenere specifici valori a mano lunga, ma al momento non esistono tali abbreviazioni.

Come ho detto nel mio commento, margin: 1em inherit non è valido, come le parole chiave a livello di CSS inherit (insieme ad altri initial e introdotti nelle norme successive) può apparire solo per se stessi nelle dichiarazioni di proprietà, e questo include le dichiarazioni stenografia. Anche se margin: 1em inherit ha funzionato, l'elemento sarebbe ereditare i margini orizzontali dal suo elemento genitore e non dalla propria cascata (poiché ciò non è il significato dell'ereditarietà). Non è possibile recuperare un valore in cascata o specificato per una proprietà su un dato elemento, ed essere in grado di farlo sarebbe quasi certamente soggetto ad errori a causa del fatto che la dichiarazione più in basso dal selettore più specifico che contiene il valore risolto potrebbe essere ovunque.