CSS Override mit dem zweiten Stylesheet

Question

Ich arbeite an einer ziemlich großen Website, die bereits ein großes Stylesheet auf der Website hat. Wir arbeiten mit diesem großen Unternehmen zusammen, das nur begrenzt in der Lage ist, Änderungen vorzunehmen (kein vollständiger Zugriff).

Wir werden einige neue Styles für einen bestimmten Abschnitt auf der Website anwenden und uns wurde grünes Licht gegeben, falls nötig ein zweites Override-Stylesheet (zusätzlich zu dem globalen) hinzuzufügen.

Meine Frage ist dies. Gibt es Probleme mit der Browser-Inkompatibilität, die wir beachten müssen, wenn wir diese Methode verwenden? Aufgrund der Popularität dieser Website und der Anzahl der Aufrufe, die sie täglich erhalten, müssen wir so kompatibel wie möglich sein und ich möchte nur sicherstellen, dass unsere CSS-Überschreibungen für die Abschnitte, mit denen wir arbeiten, ohne eine Ausnahme ablaufen hitch.

Ich habe von einigen Gerüchten gehört, dass IE die Überschreibungen nicht korrekt behandeln kann. Hier ist ein Beispiel für die Art der Stilüberschreibungen, die wir machen werden ...

wenn ich einen Körper habe {Farbe: Blau; } und body {font-weight: fett; } in der zweiten CSS-Datei, werden wir blau und fett, richtig?

Answer 1

Was Sie mit Ihrem CSS beschreiben, ist die Vererbung, und im Wesentlichen wird es Ihre css-Definitionen "stapeln", so wie Sie das Beispiel von body {color: blue}, body {font-weight: bold; } Sie werden mit beiden Werten für Körper über Vererbung enden (nicht überschreiben!)

Um die Vererbung zu begegnen, müssen Sie die primäre CSS-Blattdefinition auf Null setzen oder entfernen.

also, wenn Sie das Beispiel hatten:

body { padding: 5px; color: red } 

und Sie wollten einen 3px Rand mit Schriftfarbe blau in Ihrem 2ndary Blatt haben, würden Sie folgende entgegen dem Erbe

body {padding: 0px; margin: 3px; color: blue } 

tun Auf diese Weise würden Sie das Padding auf null setzen (auf 0, wenn Sie dies wünschen, um es effektiv zu löschen). Die Farbe würde überschrieben und der Rand wäre der neue Wert.

Ich würde vorschlagen (wenn Sie bereits nicht), Firefox mit Firebug aktiviert zu verwenden (Doppelbildschirme helfen hier sehr, aber nicht benötigt). Firebug zeigt Ihnen, welche Zeilen aufgrund von Vererbung gelöscht werden und im Wesentlichen überschrieben werden.

Sie können auch Ihre eigenen Klassen und doppelt (oder mehr) bis auf die Klassendefinition verwenden wie so:

.red { color: red; } 
.center { text-align: center; } 
.w500px { width: 500px; } 

<div class="red center w500px">This text is red and centered</div> 

Auf diese Weise können nur die Werte in einem kombinieren. Könnte Ihnen eine andere Idee geben, wie Sie etwas anders machen können.

Hoffe, dass hilft.

Answer 2

Es gibt keine inhärenten Probleme mit der Browserinkompatibilität, die ich kenne. Stellen Sie nur sicher, dass Sie in allen Browsern, die Ihnen wichtig sind, mit jedem Schritt testen, und Sie sollten in Ordnung sein.

Ihr Beispiel für "fettes Blau" ist korrekt. Es sollte so funktionieren.

Sie sollten sich einen Moment Zeit nehmen und etwas über CSS-Spezifität und Vererbung lesen. Diese Links erklären, wie CSS-Werte zwischen mehreren Regeln für denselben Selektor "zusammengeführt" werden.

• http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
• http://www.w3.org/TR/CSS2/cascade.html

Answer 3

Ich glaube nicht, gibt es Unverträglichkeiten. Stellen Sie nur sicher, dass die Spezifität Ihrer Überschreibungen größer ist als die der "Originale" oder wenn sie die gleiche Spezifität haben, wird die Überschreibung nach dem "Original" deklariert.

Mehr über Spezifität: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

Wenn es zuzufügen Stile dann könnte man die Verwendung

body { 
    color: #000 !important; 
} 

wichtig überschreibt den Stil!. Leider unterstützt IE dies jedoch nicht.

Answer 5

Wenn jemand anderes dieses Problem hat, hier ist eine Lösung, die ich nützlich gefunden habe.

sagen, dass ich eine Klasse in meiner ursprünglichen style.css-Datei wie folgt:

.menu-bar { width: 100%; } 

ich folgend in meinem IE Sheet durch Referenzierung Körper dann Klassennamen

body .menu-bar { width: 90%; } 

wie so außer Kraft setzen kann Versuchen Sie, das übergeordnete div zu greifen, und referenzieren Sie es im ie Stylesheet. Kasse nachstehendes Beispiel

<div class="parent"> 
<div class="children"> 
    <div class="grandchildren"> 
    </div><!-- end grandchildren --> 
</div><!-- end children --> 
</div><!-- end parent --> 

können Sie die Eltern oder Großeltern Klasse verweisen, wie so in Ihrem IE Sheet

body .parent { css properties here } 
body .parent .children { css properties here } 
body .parent .children .grandchildren { css properties here }