Kategorie: Webentwicklung

Konvertierung von Schriften zu WOFF/WOFF2 und Font-Subsetting mit Glyphhanger

Um Webfonts mit breiter Browser-Unterstützung einzubinden, werden inzwischen eigentlich nur noch Dateien im .woff- und .woff2-Format benötigt – wer keine Rücksicht auf Internet Explorer, Safari auf Mac OS älter als Sierra und ein paar mobile Browser nimmt, kann auch nur .woff2 nutzen (bei Can I use gibt es die entsprechenden Tabellen zum Browser-Support der beiden Schriftformate).

In diesem Beitrag zeige ich, wie sich mit Hilfe des Kommandozeilen-Tools Glyphhanger .ttf-Schriftdateien in .woff und .woff2 umwandeln und um unnötige Zeichen erleichtern lassen (das Subsetting). Konvertierung von Schriften zu WOFF/WOFF2 und Font-Subsetting mit Glyphhanger weiterlesen

CSS-Regeln nur bei deaktiviertem JavaScript anwenden

Manchmal gibt es CSS-Eigenschaften, die nur bei deaktiviertem JavaScript greifen sollen. Bei dem Lazy-Loading-Plugin Lazy Loader zum Beispiel sollen die Bilder mit der lazyload-Klasse versteckt werden, wenn JS nicht aktiv ist.

Bisher habe ich das über eine Klasse gelöst, die via JS dem html- oder body-Element hinzugefügt wird – ohne Klasse werden die Bilder versteckt, wenn die Klasse da ist werden sie angezeigt.

Jetzt hat mich der User wprox im W.org-Support-Forum auf eine alternative Lösung aufmerksam gemacht, die er im Blogartikel »Nice and easy lazy loading with lazysizes.js« von Steve McKinney gefunden hat: Die Styles für deaktiviertes JavaScript einfach in ein noscript-Element schreiben.

Statt also über JavaScript einem Element eine Klasse hinzuzufügen und dann in CSS diese Klasse zu nutzen, um Styles für deaktiviertes JavaScript zu überschreiben, sieht es in meinem Plugin jetzt so aus:

<noscript>
	<style>
		.lazyload {
			display: none;
		}
	</style>
</noscript>

Eigentlich ist diese Lösung ja recht naheliegend, mir ist sie vorher aber nie in den Sinn gekommen.

Autoloader mit Composer erstellen

Ich habe heute ein kleines Plugin für WordPress angefangen und versucht, mich für die Struktur und grundsätzliches ein bisschen am Speaking-Plugin von Alain Schlesser zu orientieren. So bin ich auf das Thema Autoloading gekommen. Alain hat für sein Plugin einen eigenen Autoloader geschrieben, in seinem Talk beim WordCamp Nijmegen aber auch die Möglichkeit via Composer angesprochen. Hier zeige ich, wie sich ein Autoloader mit Composer umsetzen lässt. Autoloader mit Composer erstellen weiterlesen

NPM-Paket für mehrere Dateien ausführen (am Beispiel von csso-cli)

Einige NPM-Pakete bieten bereits direkt die Möglichkeit, sich auf mehrere Dateien eines Verzeichnisses gleichzeitig anwenden zu lassen – so kann node-sass beispielsweise ein ganzes Verzeichnis von SCSS-Dateien in CSS-Dateien umwandeln. Das Minifier-Tool csso-cli bietet eine Option für mehrere Dateien als Input von Haus aus nicht an – hier zeige ich einen Workaround, um das trotzdem umzusetzen. NPM-Paket für mehrere Dateien ausführen (am Beispiel von csso-cli) weiterlesen