Schriftgröße bei media-queries für Chrome ändern

[dn3d_fanboy]

Da, bis auf Safari, die Webkitbrowser keine CSS-hyphens (Silbentrennung) unterstützen, habe ich das Problem, dass bei einer kleinen Monitorauflösung (z.B. 320px Breite) die Überschriften über die Breite des Bildschirms herausragen.

Gibt es hier die Möglichkeit die Schriftgröße gezielt für Webkit zu ändern, während IE, Edge, FF die normale Größe nehmen oder muss ich die Schriftgröße komplett ändern?

Vielleicht weiß von euch ja jemand mehr und kann mir einen Tipp geben, Google konnte mir leider nicht weiterhelfen.

Besten Dank im Voraus.

 

[patrick_l]

Gibt es hier die Möglichkeit die Schriftgröße gezielt für Webkit zu ändern, während IE, Edge, FF die normale Größe nehmen oder muss ich die Schriftgröße komplett ändern?

Es gibt so kein Präfix für die Schriftgröße. Wenn ich dich richtig verstehe, geht es dir ja lediglich um die Silbentrennung. Dafür gibt es, im Gegensatz zur Schriftgröße (font-size) einen Präfix für WebKit Browser.

selektor {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Hier noch drei Links zum Thema:
- Mozilla Developer Network » Hyphens
- Mozilla Developer Network » WebKit Extensions
- Kulturbanause » Silbentrennung im Browser - CSS Eigenschaft hyphens

Liebe Grüße, Patrick

 

[dn3d_fanboy]

Es gibt so kein Präfix für die Schriftgröße. Wenn ich dich richtig verstehe, geht es dir ja lediglich um die Silbentrennung. Dafür gibt es, im Gegensatz zur Schriftgröße (font-size) einen Präfix für WebKit Browser.

selektor {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Danke Patrick, aber genau das ist das Problem. Chrome und Opera unterstützen :auto nicht, sondern nur :none, was natürlich komplett sinnlos ist.
Firefox, IE und Safari haben damit keine Probleme.

Hier dazu ein Link: http://caniuse.com/#feat=css-hyphens

 

[hub]

Moin,
wenn du goooooogle fragen möchtest, frag nach "Browser-Präfix" ...
sonst schau mal z.B. hier: klick mich

Gruß Ulli

 

[patrick_l]

Chrome und Opera unterstützen :auto nicht, sondern nur :none, was natürlich komplett sinnlos ist.

Hast recht, gerade selber nochmal auf "Can i use" nachgeschaut. So auf die schnelle fällt mir auch kein Workaround ein. Hast du denn nur Probleme auf kleinen Devices oder ist es grundsätzlich der Fall? So nebenbei doch etwas verwundert bin, das es im WebKit (noch) keinen Support für Hyphens gibt.

wenn du goooooogle fragen möchtest, frag nach "Browser-Präfix" ...

Der Präfix nützt aber nichts, weil der Wert auto nicht unterstützt wird.

 

[dn3d_fanboy]

Nein, das Problem besteht nur auf kleinen Devices bis ca. 500px Breite, ab dann ist der Monitor breiter als die Überschrift.
Ich muss ehrlicherweise auch zugeben, dass ich für die Schriftgröße Pixelangaben gemacht habe, was sich jetzt, glaube ich, rächt. :-D
Ist zwar ärgerlich, aber dann werde ich die Schriftgröße heruntersetzen müssen.

 

[patrick_l]

Ich muss ehrlicherweise auch zugeben, dass ich für die Schriftgröße Pixelangaben gemacht habe, was sich jetzt, glaube ich, rächt. :-D

Pfui, schäm dich und ab auf die stille Treppe. Ne, Spaß bei Seite. Ich selber nutze überwiegend REM mit Fallback oder EM. So konsistent ist es aber auch nicht. Gibt vereinzelt schon mal die ein oder andere Sünde. Wie heißt es so schön: "Et hätt noch emmer joot jejange"

Ist zwar ärgerlich, aber dann werde ich die Schriftgröße heruntersetzen müssen.

Nur ein Tipp meinerseits, freunde dich mit einem CSS Preprocessor an. Vorzugsweise Sass. Das Umrechnen von Pixel in EM und umgekehrt, kannst du dann auch einfach vom Compiler erledigen lassen. Mach es dir selber so einfach wie möglich, und nur so viel wie nötig.

 

[cebito]

Da auf Mobiles JS in der Regel nie ausgeschaltet ist, kannst ja auch den Hyphenator nutzen. Mit dem kannst dir die JS auch recht schlank halten, weil du nur die für dich relevanten Sprachen einbinden musst.
Eine zweite Möglichkeit wäre den Client mittels PHP zu ermitteln und dann eine angepasste CSS auszuliefern.

 

[dn3d_fanboy]

Nur ein Tipp meinerseits, freunde dich mit einem CSS Preprocessor an. Vorzugsweise Sass. Das Umrechnen von Pixel in EM und umgekehrt, kannst du dann auch einfach vom Compiler erledigen lassen. Mach es dir selber so einfach wie möglich, und nur so viel wie nötig.

Steht ganz oben auf meiner Liste, wenn ich mal die Zeit dafür habe.

Da auf Mobiles JS in der Regel nie ausgeschaltet ist, kannst ja auch den Hyphenator nutzen. Mit dem kannst dir die JS auch recht schlank halten, weil du nur die für dich relevanten Sprachen einbinden musst.
Eine zweite Möglichkeit wäre den Client mittels PHP zu ermitteln und dann eine angepasste CSS auszuliefern.

Der Aufwand lohnt sich für zwei Überschriften, die nicht getrennt werden, dann auch nicht. Ich habe die Schriftgröße bei den mobilen Endgeräten verringert und gut ist. Aber trotzdem danke.