wissen.netzhaut.de

Kategorie: HTML5 / CSS3

0

CSS / HTML5 / CSS3

Mac Firefox vs. Chrome

Im Screenshot haben wir einmal das Problem, dass der Firefox die Schriften anders darstellt als im Chrome. 1. Font-Smoothing body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; } Firefox benötigt an dieser Stelle den Wert grayscale statt antialiased.   2. Inputfelder Inputfelder werden im Firefox um 2px höher dargestellt als im Chrome. Dies ist nicht unbedingt ein offensichtliches Problem aber bei Fieldsets mit Hintergrund, welche nebeneinander platziert sind, wird es einen Versatz geben. Dieses Problem konnten wir wie folgt lösen: input{ margin-top:-2px; line-height:34px; } Die line-height muss natürlich entsprechend angepasst werden.

3

CSS / HTML5 / CSS3

Automatische Silbentrennung

Lange durfte/musste Kunden erklärt werden, dass der Textfluss in HTML nicht so schön flüssig sein kann wie in Word & Co, weil es keinen automatischen Zeilenumbruch gibt – entweder man setzt händisch Umbrüche (oder mögliche Umbruchsstellen) oder man überlässt es rein den Gegebenheiten. Zusätzlich verkompliziert hat diese Lage, dass Textbreiten von Browsern, Betriebsystemen, Schriftarten usw. abhängig waren, wodurch es nahezu unmöglich war, passende Umbrüche zu setzen. CSS3 bringt nun endlich die lang ersehnte Lösung – zumindest weitgehend: body { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } Damit wird – richtigen HTML-Language Code vorausgesetzt – die Silbentrennung des Browsers...

0

HTML5 / CSS3

HTML5 / CSS3 » Fonts via Google einbinden

Es gibt seit eben die Möglichkeit in modernen Browsern endlich zuverlässig auch andere Schriften einzubinden. Technisch völlig unspektakulär. Eine Übersicht der Fonts gibt es hier: http://code.google.com/webfonts Test Hello World