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

gzip komprimierte Javascript- und CSS-Dateien

Hi,

im letzten Post habe ich über eine komprimierte Variante der neuesten Prototype-Version geschrieben. Wie versprochen werde ich in diesem Post erklären, wie man so eine mit gzip-komprimierte Datei möglichst elegant und flexibel in seine Seite einbindet.

Dazu legt man einfach eine .htaccess-Datei mit folgendem Inhalt an:

RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteCond %{REQUEST_FILENAME} ^.+\.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]
RemoveType .gz
AddEncoding x-gzip .gz

Wichtig: der Apache muss mod_rewrite aktiviert haben!

Jetzt muss man nur noch für alle Dateien, die man komprimiert ausliefern will eine entsprechende Variante mit dem Suffix .gz im gleichen Verzeichnis in dem das Original liegt anlegen.

Ist eine solche gzip Datei vorhanden wird diese anstatt der unkomprimierten Variante übertragen, ansonsten ändert sich nichts.

Hinweis: folgende Zeile war bei mir zwingend nötig um die globale Einstellung vom Apache zu überschreiben. Keine der Lösungen, die im Netz gefunden habe, weist darauf hin!

RemoveType .gz

Unterstützt ein Browser keine Komprimierung (sowas gibts hoffentlich nicht mehr, selbst der IE4 kann das) werden die Regeln einfach ignoriert.

Das wars auch schon. Mit dieser kleinen, aber feinen Lösung verkürzt man die Ladezeit seiner Seite erheblich.

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 ;)