Antworten auf deine Fragen:
Neues Thema erstellen

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

dn3d_fanboy

Aktives Mitglied

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

Hat es drauf

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.
CSS:
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

Aktives Mitglied

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.
CSS:
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
 

patrick_l

Hat es drauf

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

Aktives Mitglied

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

Hat es drauf

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. :p 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" :D
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

undefined

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

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben