WordPress & Webwork - perun.net

Ich hatte gestern Abend ein Problem mit Opera 11. In allen anderen Browsern (Firefox, Chrome, dem Internet Explorer) habe ich es geschafft einen Bereich vertikal zu zentrieren, kein Problem.

Einzig Opera weigerte sich und verfrachtete das Element nach oben. Um mir die Zeit zu verschaffen mich mit dem Problem tiefer gehend zu befassen habe ich mich für einen CSS-Hack entschieden. Einige der älteren Hacks, wie zum Beispiel das einbinden einer opera.css funktionierten bei meiner Installation nicht, aber folgender Hack tut seinen Dienst:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       /* Hier kommen dann die abweichenden Regeln */
 }

Gefunden bei stackoverflow.com.

Dem CSS-Hack traue ich nur bedingt, aber als schnelle Übergangslösung geht es in Ordnung. Jetzt geht es darum herauszufinden warum sich Opera bei der vertikalen Zentrierung über line-height so störrisch angestellt hat.

Seit einigen Tagen steht das Rezensionsexemplar des neuen CSS-Buches vom Kollegen Peter Müller auf meinem Arbeitstisch. Das Werk heißt Das große Little Boxes Buch und ist mit seinen 800 Seiten und dem Hardcover alles andere als little.

Der große Umfang des Buches kommt dadurch zu Stande, dass Peter zwei seiner Bücher – Little Boxes 1 und Little Boxes 2 – aktualisiert und zu einem Buch zusammengefasst hat.

Das Werk richtet sich eindeutig an CSS-Anfänger oder an Kollegen, die sich in den letzten 4-5 Jahren in diesem Segment nicht fortgebildet haben. Denn das Buch fängt bei Adam & Eva an und hört mit einem 65-Seitigen YAML-Abschnitt auf.

Das Buch ist in zehn Abschnitte aufgeteilt, die da wären: (weiterlesen…)

Die CSS-Sprites sind eine sehr beliebte Methode um die Performance einer Website zu verbessern. Die CSS-Sprites sind zum einen sparsam bei der Dateigröße, das äußert sich vor allem bei vielen kleinen Grafiken (z. B. Icons) und zudem werden HTTP-Aufrufe gespart. Als Beispiel habe ich die Hintergrundgrafik eingefügt, mit der ich hier die Icons der diversen Netzwerke einbinde.

Standardmäßig eignen sich die CSS-Sprites dann wenn man entweder die Höher oder die Breite des Elements kennt. Kennt man die Breite, dann sortiert man die einzelnen Grafiken horizontal. Kennt man die Höhe, dann sortiert man dagegen vertikal. Wenn man aber weder die Breite noch die Höhe des Elements kennt, dann hat man ein Problem. Hier kann aber der Artikel Pseudo Spriting helfen. (weiterlesen…)

Kollege Frank Bültge hat einen netten Tester für die Media Queries erstellt. Wer sich jetzt fragt was das nun wieder ist, dem empfehle ich für erste den Artikel im Archiv von Dr. Web Magazin.

Mit Hilfe der Media Queries versucht man in CSS3 die Fähigkeiten des Ausgabemediums abzufragen, zum Beispiel:

@media only screen and (max-device-width: 480px) {...}

Mit Hilfe der Media Queries kann man nicht nur die Breite und Höhe des Displays und des Browserfensters abfragen sondern auch die Position und die Auflösung.

Simple Media Queries Tester

Im Tester von Frank kann man die Breite und die Höhe für die Geräte definieren und dann die zu testende URL eingeben. So bin ich auch auf das Tool aufmerksam geworden. In den Stats ist mir aufgefallen, dass jemand fleißig perun.net getestet hat.

Bevor sich jemand die Mühe macht: nein, ich setzte hier die Media Queries nicht ein.

Welche Werte sind für die CSS-Eigenschaft text-transform erlaubt, welche Pseudo-Klassen und -Elemente gibt es, welche Browser unterstützen display: inline-block; oder wie ging das noch mal mit float und clear? … für die Beantwortung solcher Fragen eignen sich weniger die Blogs als vielmehr Websites, die dem chronologischen Aufbau nicht unterworfen sind.

Hier folgen einige meiner Meinung nach wichtige Dokumentationen und Referenzen zu HTML und CSS. In der Liste finden sich sowohl deutsche, wie auch englischsprachige Projekte. (weiterlesen…)

Mittlerweile gibt es bei der Umsetzung von Websites zwei "Hauptphilosophien" in Bezug darauf, welche Einheiten man bei den Schriften wählt: Pixel oder Em. Bei Pixel ist die Vorgehensweise einfach, man vergibt den entsprechenden Bereichen einen gewünschten Pixelwert, z. B. font-size: 14px;. Pixel ist auch eine relative Einheit und zwar in Bezug auf das Ausgabegerät des Betrachters. Je nach Monitor ist eine Schriftgröße von 14 Pixel kleiner oder größer.

Die Problematik rund um em

Die Einheit em richtet sich nach den Browsereinstellungen des Nutzers. In den allermeisten Browsern ist die Größe der Schrift mit 16 Pixel voreingestellt. Gibt man zum Beispiel für den Inhaltsbereich font-size: 1.5em; an dann ist die Schrift 24 Pixel groß. So weit, so gut. In Verbindung damit, dass man auch den Ausmaßen der einzelnen Bereiche der Website ebenfalls Breitenangaben in em spendiert hat, war man in der Lage sog. "zoomable Layouts" zu erstellen: änderte der Nutzer die Schrifteinstellungen so wurde auch die Website breiter bzw. schmaler. (weiterlesen…)

Und hier die 22. Ausgabe der preisgekrönten Linkschleuder:

WordPress: alles einbetten was nicht bei drei auf'm Baum ist

Auf wpgarage.com wird beschrieben wie man die Einbetten-Funktion (oEmbed) auch auf zusätzliche Dienste ausweiten kann. Mit oEmbed wird bei WordPress verstanden dass man von bestimmten Diensten (z. B. YouTube) lediglich die URL des Videos oder Bildes einfügt und WordPress sich dann automatisch um die bestmögliche Einbindung kümmert.

CSS3: Generator für Vendor-Präfixe

CSSPrefixer generiert automatisch die Vendor-CSS-Präfixe, z. B. zu border-radius wird noch -moz-border-radius und -webkit-border-radius eingefügt.

Schriften testen und die Verbreitung

Wer Typetester.org nicht kennt, sollte es sich gut überlegen diese Website zu bookmarken:

Typetester im Einsatz

Man kann dort bis zu drei Schriften gleichzeitig gegen einander vergleichen lassen. Dabei kann man Schriftgröße, Farbe, Abständen und einiges mehr einstellen. So kann man schnell sich ein Bild machen, wie eine Schrift sich in einem bestimmten Text macht.

Wer herausfinden möchte wie weit eine Schrift im Allgemeinen oder auf einem Betriebssystem verbreitet ist, der sollte sich mal auf Codestyle.org umschauen.