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

Die CSS-Eigenschaft »object-fit« – Flexible Grafiken im HTML-Markup

css-object-fit

Mit der CSS-Eigenschaft object-fit lassen sich Bilder und Videos, die im HTML-Markup liegen zentrieren und zuschneiden. Die CSS-Eigenschaft background-size, für die Positionierung von CSS-Hintergrundbildern dürfte jedem soweit ein Begriff sein. Mit der Eigenschaft object-fit ist diese Positionierung auch mit Grafiken und Videos, die im HTML-Code liegen möglich.

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

image-rendering: pixelated/crisp-edges – Bildinterpolation im Browser steuern

image-rendering-pixelated

Grafiken werden in flexiblen Web-Layouts häufig mit Hilfe des Browsers skaliert. Sofern es sich um Pixelgrafiken handelt, geht Qualität verloren, wenn die Grafik über ihre tatsächliche Größe hinaus skaliert wird. Das Bild wird unscharf. Aus diesem Grund werden Grafiken normalerweise kleiner skaliert. Doch auch diese Vorgehensweise hat Nachteile, denn es werden mehr Daten geladen als notwendig. Responsive Images und Techniken wie Downsampling schaffen hier Abhilfe, doch auch die Art wie der Browser die Bildskalierung berechnet, kann euch dabei helfen ein optisch besseres Ergebnis zu erreichen.

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