Standard CSS bei Firefox und Chrome
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
belastung
browser
datei
datenmenge
dokument
eigenschaft
einstellung
erzielen
feld
genauer anschauen
hilfe
regel
relevanten eigenschaften
setzen
standard
unterscheiden
url
verschiedenen browser
vorgehen
ziel
-
Hey,
ich sitze an einem Projekt und bin derzeit u.a. daran die CSS Eigenschaften der verschiedenen Browser aneinander anzupassen, damit die Website in allen Browsern gleich aussieht.
Jetzt habe ich das Problem, dass meine input Felder in Firefox andere standart border Werte haben wie die in Chrome. Gibt es eine einfache Möglichkeit diese in Firefox global denen in Chrome anzupassen? Wie würdet ihr hierbei vorgehen?
Ich freue mich auf eure Ideen.
Vielen Dank vorab für eure Hilfe!
Mit bestem Gruß
Flo -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Was ist denn genau dein Ziel? Möchtest du, dass die gleiche Website bei dir in allen Browsern gleich aussieht oder erstellst du eine Website, die in allen Browsern gleich aussehen soll.
In ersterem Fall musst du dich wohl ziemlich tief durch die Einstellungen wühlen. In der Firefox- und Chrome-Hilfe findest du dazu die entsprechenden Einstellungsregister. Gegebenenfalls gibt es hierzu auch Plugins, die eine simplere Änderung der Standardwerte erlaubt, die Suche kann sich lohnen.
Wenn du deine eigene Website für alle Browser gleich designen möchtest, wird dies ein bisschen schwieriger, obwohl das nicht vollständig unmöglich ist. Im Wesentlichen musst du dazu nämlich alle CSS-Standardeinstellungen, die sich bei Chrome / Firefox unterscheiden selbst setzen. Aufgrund der unterschiedlichen Renderengines wird es jedoch schwierig, zu 100% gleiches Design zu erzielen. Bspw. markiert Chrome vorausgefüllte Passwortfelder gelb - dies zu verhindern ist meines Erachtens nicht möglich. Möglicherweise gibt es auch hierzu Hilfsskripts, die du in deiner Website einbinden kannst - jedoch wächst in der Regel die übertragene Datenmenge dadurch enorm an, weshalb besonders bei der Optimierung für mobile Endgeräte davon abgeraten werden muss.
mfg
Jonas -
Ich würde mir die Arbeit nicht machen, da andere Leute diese bereits gemacht haben, so weit es geht.
Schau dir einmal diese Webseite an: https://necolas.github.io/normalize.css/ Min diesem CSS-Dokument werden die Tags normalisiert, was bedeutet, dass alle relevanten Eigenschaften überschrieben werden und somit die Browser eigenen Standard-Einstellungen überschrieben werden.
Die Inputfelder werden somit alle gleich hoch werden und die gleichen Ränder haben, aber insbesondere Select-Felder werden nach wie vor in browsereigenem Stil gerendert, da dies mit CSS nicht wirklich beeinflusst werden kann.
Allerdings muss dann jeder Benutzer jeweils ein weiteres CSS-Dokument downloaden, was wiederum mehr Traffic verursacht.
Beitrag zuletzt geändert: 17.12.2015 16:23:34 von stoerchu -
Ich würde auch versuchen, das über normalize.css zu lösen. Bevor du dich daran machst, das in dein Design einzubauen, kannst du hier
http://necolas.github.io/normalize.css/latest/test.html
mit den relevanten Browsern testen, ob der von dir gewünschte Effekt eintritt.
Die Belastung durch den zusätzlichen CSS-Code kannst du etwas vermindern, in dem du die minified-Variante verwendest:
https://cdnjs.com/libraries/normalize
entweder
- direkt über das CDN oder
- als Datei von deinem Webspace oder
- eingefügt als Abschnitt ganz am Anfang deiner Standard-CSS-Datei -
Vielen Dank für eure Posts. Ich werde mir das ganze mal genauer anschauen, habt vielen Dank!! :)
Euch allen frohe Weihnachten! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
