Thema: CSS

 

Alle 2 Artikel zum Thema CSS auf Philip Hetjens:

Google Font API:
Mehr Schriften im Web

Google hat gestern die Google Font API vorgestellt. Damit ist es möglich, wie bereits auch mit anderen Diensten, auf eine grössere Anzahl Schriften im Web zuzugreifen. Google hat ein Font Directory aufgesetzt (könnte noch etwas grösser werden), das zeigt welche Schriften verfügbar sind. So wie es aussieht sind diese Schriftarten auch lizenztechnisch unproblematisch. Google versichert auch die Funktionalität unter Internet Explorer ab Version 6 und natürlich allen anderen wichtigen Browsern. Aber da keine SVG-Version der Schrift ausgeliefert wird, funktioniert Googles Font API bis jetzt nicht unter iPhone/iPad. » weiterlesen

CSS:
Runde Ecken

Abgerundete Ecken werfen ihren Schatten voraus. In Firefox und Webkit-basierten Browsern (Chrome und Safari) funktionieren sie schon, aber unterschiedlich. Und das ist Nervkram.

Zuerst muss definiert werden, dass überhaupt eine Border angezeigt wird. Sagen wir mal, dass alle Elemente mit der Klasse rundjetzt Runde Ecken haben sollen:

.rundjetzt { border: 1px solid black; }

Jetzt definieren wir abgerundete Ecken für Firefox:

.rundjetzt { -moz-border-radius: 5px; }

Und jetzt für Webkit:

.rundjetzt { -webkit-border-radius: 5px; }

Bis jetzt ist es quasi gleich. Wenn man nur eine Ecke definieren will, wird es komplizert. Mozilla verwendet folgende Syntax:

-moz-border-radius-topleft
-moz-border-radius-bottomright

Webkit hingegen hätte gerne:

-webkit-border-top-left-radius
-webkit-border-bottom-right-radius

Naja, besser so komisch unterschiedlich benutzen können, als gar nicht benutzen können wie z.B. im Internet Explorer im Opera.