✔ Safari debuggen

[jeipack]

Hey Leute

ich versuche gerade eine Seite unter Safari zu debuggen. CSS das sonst überall funktioniert, funktioniert im Safari überhaupt nicht.
Es sind verschiedene Dinge (und ich bin echt genervt.!), aber als Beispiel mal ein Div das je nach mediaquery verschiedene width bekommt. Nun im Computed Style sieht das so aus:

Nach dem Web inspector wird die unterste Anweisung (also 855px) ja genommen, aber width ist trotzdem 0px.
Gehe ich einen Schritt weiter und gebe dem Element direkt einen style (width: 1008px !important; ) dann sieht das so aus:

Der Style ist durchgestrichen und heisst doch somit, dass dieser NICHT genommen wird, allerdings wie man auch im Computed Style sieht hat es nun eine Breite von 1008px. Also wie sehe ich denn, welcher Style Safari da tatsächlich nimmt?


Desweiteren habe ich zB auch Probleme bei divs, die ab einer gewissen Auflösung das float verliehren.

@media (max-width: 500px) {
.column {
        float: none;
}
}

Es scheint als würde Safari das mediaquery einfach ignorieren. Ich habe bisschen gegooglet und gelesen, dass dies vorkommen kann wenn eine geschwungene Klammer irgendwo fehlt. Ich habe das CSS File durch einen Formatter laufen lassen und sieht alles gut aus. Ich habe auch die Anzahl { und die Anzahl } zählen lassen und diese stimmen über rein.


Safari: 5.1.7 unter Windows 8. Es scheint aber so, dass der iPhone Safari das gleiche Problem hat.

Noch ein kleiner Zusatz: unter iPhone hat die Seite mal funktioniert. Seit da ist aber einiges hinzugekommen und nun siehts auch da echt übel aus..

 

[SpiceLab]

Ist das Ganze online verfügbar?

 

[jeipack]

Naja das ganze ist hinter htaccess. Ich versuche es heute Nachmittag selbst nochmals zu debuggen. Sollte ich aber kein Erfolg haben und du Lust hast wäre ich froh wenn du auch mal reinschauen kannst.

 

[jeipack]

So einen Fehler habe ich gefunden.
Eine Klasse die nicht benutzt wurde. also ala:

@media (..) {
  .test {
     width: 100px
  }
  .test
}

Nun wird das mediaquery auch wieder genommen (Es sind über 3000 Zeilen CSS Code, war gar nicht so einfach das zu finden - ich bräuchte eine IDE das mir sowas sagt.)

Nächstes Problem. width mit calc() funktioniert nicht. auch -webkit-calc() funktioniert nicht (Leider sagt Safari nicht was genau ihn stört, nur ein Ausrufezeichen ist zu sehen)

 

[jeipack]

meh... ich habe mich daran orientiert: http://caniuse.com/#feat=calc
Und der Safari auf dem Mac oder der Mobile Safari kommen mit calc auch klar, aber der Windows Safari nicht.

 

[jeipack]

Safari, der neue Internet Explorer
At least, Windows Safari muss nicht mehr unterstützt werden.
Mein einziges Problem dass ich jetzt noch habe sind Sachen wie

background-position: right 5px center;

Was soviel heisst wie 5px von rechts. Was Safari aber nicht unterstützt und nun muss ich halt für alle Elemente die das nutzen einen Fallback ala:

background-position: 98% center;

machen.

Wiess jemand wie das heisst? Würde gerne wissen ob und wann Safari das unterstützen wird.

 

[SpiceLab]

meh... ich habe mich daran orientiert: http://caniuse.com/#feat=calc
Und der Safari auf dem Mac oder der Mobile Safari kommen mit calc auch klar, aber der Windows Safari nicht.

Safari: 5.1.7 unter Windows 8.

calc() wird laut der Ressource seit Safari 7.1 unterstützt.

@background-position: Für die Elemente existieren wohl keine fixe Breiten, um die px-Position von links definieren zu können?

 

[jeipack]

calc() wird laut der Ressource seit Safari 7.1 unterstützt.

Genau, aber unter Windows ist der aktuelle Safari 5.1.7
https://support.apple.com/kb/DL1531?locale=en_US
Also recht veraltet...

@background-position: Für die Elemente existieren wohl keine fixe Breiten, um die px-Position von links definieren zu können?

Nein, keine Chance. Was ich machen könnte wäre eigene Divs für die Background Images benutzen und diese mit padding so positionieren dass es passt. Aber das ist doch recht umständlich.

Ich weiss jetzt immerhin wie es heisst: background-position edge offsets

Und ab Safari 7.1 werden diese auch da unterstützt. Ich glaube damit kann ich leben.

Eine bisschen andere Frage, benutzt du irgendeine IDE für CSS? Ich benutze Notepad++ und bin eigentlich voll zufrieden damit, nur dass es mir Fehler wie oben leider nicht automatisch sagt.