workflow

Media Queries in SVG-Dateien

Media Queries in SVG-Dateien

CSS Media Queries können auch in SVG-Dateien verwendet werden

Diese Technik funktioniert derzeit im Firefox, Safari und Google Chrome. Fenstergröße verändern CSS in der SVG-Datei <svg width="100%" height="100%" ...> <style type="text/css"> @media (max-width: 140px) { .c {fill: #f0f} } @media…

Flexible Eingabefelder

Die einfache Angabe von display: block reicht bei Eingabefeldern nicht aus. Eine Längenangabe ist notwendig. Bei der Verwendung von width: 100% wird der Innenabstand zu der Gesamtbreite hinzuaddiert wodurch das Feld zu lang wird. Deswegen werden für Eingabefelder oft feste,…

SVG Darstellungsfehler

SVG wird im Browser pixelig oder unscharf dargestellt

SVG Darstellungsfehler korrigieren

Bei der Skalierungen sieht die Darstellung von SVGs manchmal pixelig oder verschwommen aus. Das Entfernen der width und height kann hierbei hilfreich sein. Durch das Fehlen der Werte berechnet der Browser die Grafik neu und die Darstellungsfehler verschwinden. <svg…

CSS Compressor

CSS Compressor

Performance Optimierung mit CSS-Komprimierung & Workflow Optimierung

Die beste Performance Optimierung bietet die gzip-Komprimierung. Wie viel Ersparnis das bringt kann mit PHP und dynamisch erzeugten CSS getestet werden <?php $gzip = true; // true oder false if($gzip) { ob_start("ob_gzhandler"); } ?>…

Dynamisches CSS

Dynamisches CSS

CSS mit PHP dynamisch erzeugen

Mehrere CSS-Arbeitsdateien können mit PHP dynamisch zu einer CSS-Datei zusammengefügt und eingebunden werden. Platzhalter werden so im CSS mit PHP ausgetauscht und müssen nur an einer Stelle angepasst werden. Diese CSS-Einbindung eignet sich für lokale…

Automator

Automator

Mit dem Automator lassen sich unter OSX wiederkehrende Arbeitsabläufe stark vereinfachen

Applikationen, Ordneraktion oder Workflows – der Automator ist eines der besten Tools für OSX. Workflows lassen sich in fast jedem Programm ausführen. Was man alles mit diesem Programm realisieren kann ist grenzenlos. Sonderzeichen in HTML-Entities umwandeln oder umgekehrt,…

Bildkompression

Bildkompression

Bildgrößen beeinflussen die Performance / Usability und Kosten einer Homepage

Grafikprogramme optimieren beim Speichern meistens nur geringfügig auf Dateigröße von Bildern. Die Größe ist stark vom Grafikformat und der Bildinformation abhängig. Es gute Programme die überflüssige Information entfernen und die Dateigröße stark reduzieren. Bei einem…

CSS refresh

CSS Reload bei Dateiänderungen

[ ⌘ ] + [ r ] mal anders

Bei CSS-Dateiänderungen lädt der Browser ohne dem lästigen manuellen neu laden automatisch die angepassten CSS-Dateien neu. JavaScript kontrolliert im lokalen Testsystem ob die modified time von den eingebundenen CSS-Dateien angepasst wurde. Durch diese Methode entfällt der…

Verschiedene Firefox-Versionen parallel installieren

Verschiedene Firefox-Versionen parallel installieren

Unter OSX können mehrere Firefox-Versionen parallel verwendet werden

Mit einem Shell-Script lassen sich verschiedene Firefox-Versionen parallel installieren. Auch die jeweils passende Firebug-Version kann dazu optional mit installiert werden. Hierfür muss folgender Script in der Terminal Console eingegeben und ausgeführt werden. Firefox-Profile…

base64

Base64 Converter

Requests reduzieren durch die Einbettung von Bildern, SVGs und Schriften ins CSS mit base64

Base64 Online Tool zur Optimierung der Ladezeit von Webseiten. Durch die Verwendung von base64 können Bilder, Grafiken und Web Fonts direkt ins CSS eingebunden werden. CSS-Sprites gehören somit der Vergangenheit an. Für Schriften sollte nur das WOFF-Format verwendet werden.…

Impressum