Schlagwort: CSS & SCSS

Cascading Style Sheets und sein Superset SCSS – von einfachen Selektoren bis zu verschachtelten Strukturen, Variablen und kompilierten Stylesheets.


JavaScript-Code des Lightbox-Moduls, Fokus auf der Pinch-Zoom-Logik

Lightbox für WordPress – ohne Plugin

Jeder kennt sie, man setzt sie fast voraus, und sie rückt ein Bild oder anderen Inhalt vor einem abgedunkelten Hintergrund in den Fokus – eine Lightbox. Für WordPress lässt sich so etwas mit einem Plugin lösen – oder man programmiert etwas Schlankes, das nur lädt, wenn es gebraucht wird, und sonst nicht.

Weiterlesen: Lightbox für WordPress – ohne Plugin
Zwei stilisierte Beitragsvorschau-Karten nebeneinander, getrennt durch ein nach rechts weisendes Winkelzeichen. Links hat nur der rote Weiterlesen-Button einen hellen Fokus-Rahmen; rechts liegt ein leichter roter Schleier über der ganzen Karte und zeigt sie als gesamte Klickfläche, während der Button seinen Fokus-Rahmen behält.

Weniger Code, mehr Barrierefreiheit

Die ganze Beitragsvorschau anklickbar machen, nicht nur den Weiterlesen-Link – und das barrierefrei. Klingt einfach, war es nicht. Bis ich merkte, dass ich das falsche Problem lösen wollte. Die richtige Lösung war dann fast peinlich simpel.

Weiterlesen: Weniger Code, mehr Barrierefreiheit
Rotes Kachelmuster aus weissen Daumen-hoch-Outlines, in der Mitte rahmt ein Kreis einen einzelnen Daumen-hoch-Icon ein.

Like-Button für WordPress – ohne Plugin

Ein Like-Button ist schnell gebaut. Genau das ist das Problem. Denn es gibt unzählige Tutorials, man kopiert etwas PHP und JavaScript, und der Button steht: ein Klick, der Zähler springt hoch – und da hören die meisten Anleitungen auf.

Weiterlesen: Like-Button für WordPress – ohne Plugin
Zwei nebeneinander dargestellte Blockquotes: links das schliessende Anführungszeichen allein in der letzten Zeile, rechts die korrekte Darstellung mit dem Anführungszeichen direkt am letzten Wort. Getrennt durch einen roten vertikalen Strich.

Wenn das schliessende Anführungszeichen allein in der Zeile steht

Ein schliessendes Anführungszeichen, das per Pseudo-Element gesetzt wird, kann beim Umbrechen allein in einer neuen Zeile stehen. CSS hat Antworten darauf – aber keine vollständige. Dieser Beitrag zeigt zwei Implementierungen, ihre Grenzen und warum das Problem in Extremfällen offen bleibt.

Weiterlesen: Wenn das schliessende Anführungszeichen allein in der Zeile steht