zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Firefox ignoriert Kaskade im CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.02.2017, 10:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard Firefox ignoriert Kaskade im CSS

Ist das neu, das der Firefox die IDs und Classen ignoriert wenn eine weitere CSS dazu kommt, dort z.B. nur eine Klasse gesetzt wird.

Im Chrom ist es absolut korrekt, ich hab Beispielsweise eine Überschrift H1
die von CSS1 auf font size 25px steht. In CSS2 steht diese auf 50px.

Steht nur beides mit je einer Klasse im CSS ist klar, dass das CSS sticht was als letztes geladen wird. Sprich in dem Fall sticht CSS2 die Angaben von CSS1. Alles so weit richtig.

Schreibe ich aber nun bei CSS1 eine ID oder eine weitere Klasse zu der H1 hinzu.
Sticht im Chrom ganz klar die CSS Anweisung die mehr Kaskaden hat als andere, somit ist die eingebundene Reihenfolge egal, da in CSS1 die H1 mit id und Klasse, die H1 aus CSS2 mit nur einer Klasse überschreibt.

Im Firefox ist das aber nicht mehr relevant, hier überschreibt mein CSS2 mit einer Klasse, sämtliche Angaben aus CSS1 das IDs und Klassen enthält.
IE arbeitet wie Chrom meiner Meinung nach korrekt.

War das verständlich ?

Fragt erst garnicht wieso ich das nicht in eine CSS packe oder mehrmals schreibe, wir haben eine sehr große Seite.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.02.2017, 10:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Dafür gibt es die Webdeveloper-Tools, die zeigen einem genau, welches CSS hier geladen wird und warum welche Regel angewandt wird. Und nein, Firefox ignoriert Kaskaden nicht, sonst würden sämtliche Websites nicht mehr ordentlich funktionieren. Da liegt das Problem beim Seitenersteller -> Falsch (zu viel?) gecached, Links falsch gesetzt, etc.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.02.2017, 10:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

Cloned ich weiß schon welche CSS geladen werden und auch in welcher Reihenfolge, dennoch überschreibt der Firefox Anweisungen für ein Element das in CSS1 mit einer ID + mehreren Klasse (SCSS) definiert ist mit einer einzigen Klasse aus einer zweiten CSS. Ich kann doch in CSS1 nicht alles mit !important stylen. Auf manchen Seiten soll CSS2 ja greifen und auf anderen CSS1.

Ich bin seit mehreren Jahren Frontend Developer, ich weiß schon wie ich die DEV Tools benutze

Schau den Screenshot an und sag mir wieso die Anweisungen unten überschrieben werden, und das nur im Firefox. IE und Chrom überschreiben die oberen Anweisungen. Da die unteren ja eine höhere Gewichtung haben.
Angehängte Grafiken
Dateityp: jpg firefox.jpg (84,2 KB, 6x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.02.2017, 10:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Edit: Falsch geschaut
Hast du eventuell einen Beispiellink? HTML+CSS mit dem man das nachstellen kann?
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2017, 10:56
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.675
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Woogie Beitrag anzeigen
Ist das neu, das der Firefox die IDs und Classen ignoriert wenn eine weitere CSS dazu kommt, dort z.B. nur eine Klasse gesetzt wird.
Nein, das ist so nicht.

Zitat:
Zitat von Woogie Beitrag anzeigen
Steht nur beides mit je einer Klasse im CSS ist klar, dass das CSS sticht was als letztes geladen wird. Sprich in dem Fall sticht CSS2 die Angaben von CSS1. Alles so weit richtig.

Schreibe ich aber nun bei CSS1 eine ID oder eine weitere Klasse zu der H1 hinzu.
Sticht im Chrom ganz klar die CSS Anweisung die mehr Kaskaden hat als andere, somit ist die eingebundene Reihenfolge egal, da in CSS1 die H1 mit id und Klasse, die H1 aus CSS2 mit nur einer Klasse überschreibt.
das ist zwar nicht verständlich, aber hier spielt nicht die Kaskade die Hautprolle, sondern die Spezifität.

Zitat:
Zitat von Woogie Beitrag anzeigen
Im Firefox ist das aber nicht mehr relevant, hier überschreibt mein CSS2 mit einer Klasse, sämtliche Angaben aus CSS1 das IDs und Klassen enthält.
IE arbeitet wie Chrom meiner Meinung nach korrekt.
Das ist deine Meinung. Aber ohne konkretes Beispiel kann dir keiner sagen ob die Richtig ist.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2017, 11:01
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Edit: Falsch geschaut
Hast du eventuell einen Beispiellink? HTML+CSS mit dem man das nachstellen kann?
Nee sorry wir entwickeln nur local und auf Testserver bevor was live geht.

Das Problem mit dem Firefox ist auch neu, das kam entweder seit dem letzten Update oder seit dem vorletzten.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2017, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Dann verusche dein Test-CSS/HTML mal zu kopieren und hier einzufügen, natürlich so minimiert, dass es auch für uns nachvollziehbar ist.

Code:
<div id="test">

  <div data-bank-group="psd" >
   This is a TEST
  </div>

</div>

[data-bank-group="psd"]::after{
  color: green;
  content: "ASDF";
}

#test [data-bank-group="psd"]::after{
  color: blue;
}
Hier ist die Farbe blau, so wie erwartet im FF... So ein Beispiel bräuchten wir auch.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.02.2017, 11:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

Hier mal der Screenshot vom Chrom.
Angehängte Grafiken
Dateityp: jpg chrom.jpg (65,0 KB, 5x aufgerufen)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.02.2017, 11:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

btw, es heißt Chrome und nicht Chrom
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.02.2017, 11:17
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
btw, es heißt Chrome und nicht Chrom
Meinetwegen auch das


Nimm Deinen Code splitte die beiden Anweisungen auf CSS1 und CSS2 auf und lade diese nacheinander.

Sollte ja blau raus kommen, da es in CSS2 steht.
Jetzt nimmst die ID und schreibst die bei CSS1 rein.

Jetzt hat die Anweisung in CSS1 mehr Gewichtung und überschreibt CSS2 im Chrome und IE, nicht aber im Firefox, der macht weiterhin blau.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox lädt Clipping Mask CSS nicht richtig bei Weiterleitung auf HTTPS Seite TheRiddler1982 CSS 4 10.09.2015 16:29
FireFox und Chrome benutzen CSS nicht, IE und Opera schon Martin69 CSS 7 07.02.2012 12:28
Externes CSS für Firefox 3.5 BeatrixKiddo CSS 7 06.09.2011 16:37
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:21 Uhr.