Opera: CSS-Transitions für border-color

Opera (aktuell 11.62) hat ein Problem damit, CSS-Transitions auf die Eigenschaft border-color (und vermutlich auch andere) anzuwenden.

Funktioniert nicht

-o-transition: border-color 1s linear;

Demo: http://jsfiddle.net/gaby/bcn5c/1/

Funktioniert

-o-transition:
    border-top-color 1s linear,
    border-right-color 1s linear,
    border-bottom-color 1s linear,
    border-left-color 1s linear;

Demo: http://jsfiddle.net/ds5bM/

Dieses Problem ist in den aktuellen Snapshots von Opera 12 gefixt:

Our CSS Transitions support has also been updated. With CSS Transitions, rendering changes that normally happen instantly can be made to gradually happen over time instead. Among other things we have updated color transitions, enabled transitions on background positions, box shadows and more, and added the ability to transition through one or more abrupt steps.

Quelle: http://my.opera.com/desktopteam/blog/2012/03/26/html5-css-64bit

Google Web Fonts – Mehrere Schriftstile im IE8 und älter laden

Die Google Web Fonts sind toll und funktionieren in der Regel auch sehr gut. Aber heute bin ich auf ein Problem im Internet Explorer 6, 7 und 8 gestoßen.

Definiert man in einer Anfrage mehrere Schriftstile gleichzeitig, dann liefert Google nur den Standard-Stil zurück, wenn man einen IE < = 8 benutzt.

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300" rel="stylesheet" />

Die Lösung ist trivial. Einfach separate Anfragen stellen:

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300" rel="stylesheet" />

Es gibt bei Google auch nen Bug-Report dazu. Der ist allerdings schon fast zwei Jahre alt und es ist wohl fraglich, ob der jemals behoben wird.

Danke an Richard Fink, dessen Blogpost mir sehr geholfen hat.

Google gibt seine Font API frei

Google hat heute seine WebFont API und sein Font Verzeichnis freigegeben.

Damit lassen sich einfach beliebige Schritarten in die eigene Seite einbinden.

Ein kleines Beispiel:

<html>
	<head>
		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
		<style>
			body {
			    font-family: 'Lobster', serif;
			    font-size: 32px;
			    text-shadow: 4px 4px 4px #aaa;
			}

			.rot {
			    -moz-transform:rotate(-25deg);
			}
		</style>
	</link></head>
	<body>
		<h1>sabel's blog!</h1>
		<h1 class="rot">sabel's blog!</h1>
	</body>
</html>

ergibt:

Google erklärt auch, was es da genau macht.
Außerdem gibts noch ne JavaScript-Lib dazu.

Nette Geschichte, mal sehen ob sich das durchsetzt.

overflow:auto, position:relative und der IE

Hiho,

grad mal wieder über einen CSS-Fehler im IE 6 gestoßen.
Will man, dass ein Element bei Bedarf scrollt, verwendet man in der Regel overflow: auto.
Das funktioniert soweit ganz gut. Allerdings nur, solange das Element keine Kinderelemente enthält, welche die Eigenschaft position:relative besitzen. Ist dies der Fall tritt beim IE6 (vermutlich auch beim IE5.X) ein Fehler auf und der Inhalt tritt aus dem Container-Element heraus.

#container {
  height: 20px;
  overflow: auto;
}

li {
  position: relative;
}
<div id="container">
  <ul>
    <li>Listeneintrag</li>
  </ul>
</div>

Abhilfe schafft hier ein simples position: relative im Container-Element.
So einfach ist die Lösung, man muss es nur wissen ;)