CSS-Hack für den Internet Explorer 10 (IE10)

ie10-logo

Der Internet Explorer von Microsoft ist bekannt für die fehlerhafte Interpretation von CSS-Eigenschaften. Um das Problem zu lösen, greift man häufig auf Conditional Comments zurück, um gezielt einzelne Versionen des Internet Explorers anzusprechen und die Fehler zu korrigieren. Für den IE10+ existieren leider keine Conditional Comments mehr und ihr bekommt Schwierigkeiten, falls ihr speziell für diesen Browser Elemente gesondert ansprechen wollt. Doch mit einem CSS-Hack lässt sich das Problem lösen.
Beitrag zu Ende lesen

WordPress: RSS-Feeds von Custom Post Types zum Haupt-Feed hinzufügen

custom-post-types-wordpress-feeds

Custom Post Types werden im normalen WordPress-Feed nicht ausgegeben. Das ist ärgerlich, da Custom Post Types in WordPress sehr häufig verwendet werden und viele Blog-Betreiber einen zentralen Feed mit allen Inhalten der Website bereitstellen möchten. Mit einem kleinen Snippet kann das Problem jedoch behoben werden und die Custom Post Types werden dem Haupt-Feed von WordPress hinzugefügt.

Beitrag zu Ende lesen

WordPress: Mitarbeitern (Contributors) den Bild-Upload erlauben

dateiupload-wordpress

In WordPress haben Benutzer mit dem Status »Mitarbeiter« normalerweise keine Möglichkeit Bilder in die Mediathek hochzuladen. Insbesondere wenn ihr in eurem Blog Gastautoren beschäftigt bietet sich jedoch die Benutzerrolle Mitarbeiter ideal an, da Autoren mit dieser Rolle keine Beiträge veröffentlichen können. Der einzige Nachteil an dieser Benutzerrolle, ist der bereits erwähnte, fehlende Datei-Upload. Mit einer kleinen Anpassung kann diese Funktion nachgerüstet werden.

Beitrag zu Ende lesen

Sass Clearfix

sass-clearfix

In gefloateten Layouts müssen die Floats i.d.R. an bestimmten Stellen aufgehoben werden um Fehldarstellungen zu vermeiden. Wenn der Code aus klassischem CSS basiert, existiert dazu ein Clearfix. Wenn ein Präprozessor wie beispielsweise Sass zum Einsatz kommt, kann der Code über einen Placeholder noch ein wenig optimiert werden.
Beitrag zu Ende lesen

Feature Detection ohne Modernizr

feature-detection-css-js

Moderne Websites setzen fast ausnahmslos das Konzept »Feature Detection« ein, um in Erfahrung zu bringen, welche Techniken oder Funktionen von einem Browser unterstützt werden. Dazu wird i.d.R. die Feature Detection-Library Modernizr eingesetzt. Bei vielen Projekten halte ich Modernizr jedoch für überdimensioniert, da man häufig nur prüfen möchte ob JavaScript aktiviert ist, ob der Anwender einen Touch-Screen benutzt und ob SVGs eingesetzt werden können. In diesem Beitrag möchte ich daher einige JavaScript-Snippets archivieren, mit denen ihr die notwendigen Infos in Erfahrung bringen könnt ohne dafür die ganze Modernizr-Bibliothek laden zu müssen. In Zukunft werden in diesem Zusammenhang die Feature Queries von CSS sicher auch sehr interessant.

Beitrag zu Ende lesen

Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen

placeholder-sass

An klassenbasierten Rastern wird häufig kritisiert, dass das HTML-Markup durch eben jene Klassen unnötig aufgebläht wird. In einem sog. »semantischen Raster (semantic Grid)« kann auf diese Klassen verzichtet werden, da im Stylesheet die gewünschte Spaltenbreite einem Selektor direkt zugewiesen wird. Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch. In diesem Beitrag möchte ich die elementare Funktionsweise von semantischen Rastern auf Basis von Sass beschreiben.

Beitrag zu Ende lesen

Sass: @for-Schleife zur Berechnung von Klassen-Selektoren im Gestaltungraster

Sass @for-Loop

In klassenbasierten CSS-Grids wird die Breite der Spalten im Gestaltungsraster mit Hilfe von Klassen gesteuert. Einen ausführlichen Artikel zu diesem Thema habe ich bereits veröffentlicht. Frameworks wie Bootstrap nehmen euch Arbeit ab, indem sie u.a. die Klassen und die jeweilige Breite vordefinieren. Mit Hilfe der @for-Schleifen in Sass könnt ihr euch ein individuelles System entwickeln. In diesem Beitrag archiviere ich das entsprechende Snippet.

Beitrag zu Ende lesen