Quantity Queries – Layout-Veränderungen über die Anzahl an Elementen steuern

quantity-queries

Im responsive Design wird i.d.R. mit Hilfe von Breakpoints das Layout umstrukturiert, sobald eine bestimmte Displaygröße erreicht ist. Schwierig wird es allerdings, wenn man zum Zeitpunkt der Entwicklung nicht weiß, wie breit ein bestimmtes Element ist. Beispielsweise weil die Ausgabe dynamisch erfolgt oder weil ein Kunde über das CMS selbstständig Inhalte ergänzen kann. Hier kommen die sog. Quantity Queries (Mengenabfragen) ins Spiel: Mit ihrer Hilfe kann die Darstellung verändert werden, sobald eine festgelegte Anzahl an Elementen unter- und/oder überschritten wird.

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

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

Schnellerer Bild-Export aus Photoshop

ps-export

Adobe hat mit Photoshop CC 2015 (Version 2015.0.0) neue Export-Funktionen für Webdesigner in das Bildbearbeitungsprogramm integriert. Der bisherige Dialog »Für Web speichern« wird damit überflüssig – kann aber nach wie vor verwendet werden. Die neuen Export-Funktionen ergänzen den in Photoshop CC 2014 hinzugekommenen »Generator« und beschleunigen in erster Linie den Workflow anstatt neue Export-Möglichkeiten bereitzustellen.

Beitrag zu Ende lesen

CSS Feature Queries – @supports ()

CSS Feature Query

Wenn man herausfinden möchte welche Technologien von einem Browser unterstützt werden, führt der Weg häufig zum Hilfsmittel Modernizr. Das JavaScript-Framework schreibt u.a. CSS-Klassen in den <html>-Tag der Website von denen anschließend moderne Funktionen abhängig gemacht werden können. Diese Vorgehensweise ist im Moment gängige Praxis.
Alternativ zu einer JavaScript-basierten Lösung wie Modernizr könnt ihr auch das CSS Feature Query @supports () einsetzen um in Erfahrung zu bringen, welche CSS- und JavaScript-Techniken im Browser verwendet werden können. In diesem Beitrag möchte ich die CSS-Abfrage anhand eines anschaulichen Beispiels erklären.

Beitrag zu Ende lesen

CSS Filter-Effekte

css-filter-effekte

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Beitrag zu Ende lesen

contenteditable=“true“ – HTML- & CSS live und ohne JavaScript editieren

content-editable

Wenn ein Anwender direkt auf der Website Inhalte oder Stile verändern kann, dann ist i.d.R. JavaScript im Spiel. Mit dem HTML-Attribut contenteditable, können HTML-Inhalte und CSS-Angaben auch ohne JavaScript editiert werden. Die Einsatzmöglichkeiten sind vielfältig und der Browser-Support ausgezeichnet.
Beitrag zu Ende lesen