Come interrompere l'ereditarietà CSS?

Ho creato un widget web. Il mio cliente ha inserito i loro siti web. Fondamentalmente sul carico chiama webservice e carica i dati specifici del client.Come interrompere l'ereditarietà CSS?

Di conseguenza sembra che:

<div class="widget"> 
    <div class="container"> 
    </div> 
</div>

dinamicamente ho applicare stili CSS per la mia classe di widget. Per essere coerenti con il nostro stile aziendale.

Il problema si verifica quando gli stili dell'applicazione client sovrascrivono lo stile applicato al runtime.

Per esempio, se cliente ha, sovrascrive i miei stili:

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
}

Esiste un modo per rompere l'eredità? Solo per dire qualunque div con gli stili del widget di classe non ha ereditato gli stili genitore.

fonte

2012-08-07 German

Si consiglia di provare il tag! Important su ogni parte del CSS. Sovrascriverà tutto ciò che non è importante. – ntgCleaner

Basta eseguire il widget in un iframe – Esailija

Non penso che si possa interrompere l'ereditarietà CSS per dire, ma si può provare ad aggirarlo seguendo le regole della specificità CSS.

Un buon articolo Specificità

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Prova ad aggiungere !important agli stili nel widget per dargli una specificità superiore gli stili predefiniti.

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
}

EDIT

Se il client è anche utilizzando !important potrebbe causare problemi. Se si potesse configurare jsFiddle.com con un esempio, potremmo aiutare a trovare il problema.

Spero che questo aiuti!

EDIT2

nota, andare via di aggiungere !important dovrebbe essere l'ultima risorsa in quanto è il 'asso nella manica' di regole di stile.

fonte

2012-08-07 17:03:23 jmbertucci

Ho provato ad aggiungere il tag più importante ai miei stili, ma gli stili client hanno ancora la precedenza sui miei. – German

Questo potrebbe ancora arrivare a problemi di specificità. Aggiornerò la mia risposta un po 'con ulteriori spiegazioni. Ma consiglierei di dare a quell'articolo una lettura veloce. Ti aiuterà a calcolare la specificità dei tuoi file CSS e renderla più alta rispetto agli stili del client. – jmbertucci

Non puoi rompere l'ereditarietà dello stile come tale, ma puoi assicurarti che i tuoi stili siano più importanti o caricati nell'ordine giusto, in modo che il tuo venga fuori.

Dai un'occhiata al tag !important.

In alternativa, se caricate i fogli di stile dopo di loro, il vostro avrà la precedenza (a meno che non sia in linea). Puoi usare Javascript per caricare i tuoi stili dopo che il corpo è stato caricato (ma poi otterrai un effetto "sfarfallio").

fonte

2012-08-07 17:03:09

Ho provato ad aggiungere tag importanti ai miei stili, ma gli stili client hanno ancora la precedenza sui miei. – German

Se stanno anche usando il tag importante allora sfortunatamente ho paura di usare JavaScript per rimuovere i loro stili. –

Non si può costringere gli elementi per non eredita stili genitore.

È tuttavia possibile ignorare tutti gli stili possibili che non si desidera modificare. Se la tua specificità CSS è superiore alla specificità del cliente, i tuoi stili saranno dominati/espressi sulla pagina.

Vedi:

CSS Specificity via css-tricks.com

Per il vostro esempio usando il codice seguente sarebbe più specifico rispetto alla dichiarazione body e quindi sovrascrivere:

.widget .container { 
    font-family: Arial; 
}

fonte

2012-08-07 17:08:48 PJH

Si potrebbe anche provare inline styling. Lo stile in linea ha la massima priorità. Ciò funzionerà se le sostituzioni client utilizzano un foglio di stile importato.

Come altri hanno già menzionato, un'altra opzione è !important.

È inoltre possibile leggere le specifiche relative al http://www.w3.org/TR/CSS2/cascade.html se riprendono esattamente come cascata. Se i trucchi sopra menzionati non funzionano, forse le specifiche ti daranno un indizio o saprai per certo che questo non è possibile.

fonte

2012-08-07 17:10:40 Nasir

L'utilizzo dell'attributo! Css importante è considerato una cattiva pratica. Perché introduce il potenziale per i conflitti di precedenza e rende estremamente difficile la risoluzione dei problemi di css a lungo termine.

Un approccio meno invasivo a questo problema è quello di delimitare il tuo widget con un ID, e nel foglio di stile, per ripristinare alcune delle dichiarazioni di stile più importanti utilizzando il selettore "universale", come ad esempio:

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
}

Ad esempio. Quindi, definisci le tue override in modo specifico.

fonte

2015-10-22 07:49:05 Argo

Come interrompere l'ereditarietà CSS?

risposta

Problemi correlati