🇺🇦 CSS, HTML und Javascript mit {stil}

MathML: Formeln in HTML

MathML ist die Markup-Spache für mathematische Formeln und Ausdrücke. MathML gibt es seit 1997, aber für die nächsten 15 Jahre unterstützte kein Browser das Markup für Formeln. So verkümmerten das Formel-Markup im besucherfreien N-Raum.

Positionieren mit float oder display:inline-block?

Positionieren mit float ist der Standard im Webdesign. float ist aber auch die häufigste Ursache für Kopfschmerzen und Schwindelgefühl.

Directors Cut: 10 Tipps für Email-Newsletter 2018

Natürlich wäre es schön, wenn der Newsletter genauso elegant wirkt wie die Webseite. Aber ein Emailprogramm ist kein Browser und Email ist keine Webseite.

CSS mask-image: Bilder maskieren

CSS mask image bringt Masken und Freistellpfade für alle Bitmap-Formate für HTML-Elemente.

HTML table mit border-radius und border-collapse

Wenn die HTML-Tabelle bei border-radius partout keinen abgerundeten Rahmen zeigen will, ist wahrscheinlich border-collapse: collapse schuld.

CSS hyphens – Silbentrennung – Strichlein Strichlein ganz an Rand

Mit CSS3 hyphens ist die Silbentrennung in HTML-Seiten auf leisen Sohlen eingeschlichen: Endlich trennen Firefox und Safari, Chrome (nur unter Mac OS), IE11 und Edge Silben schmerzlos.

Gleich mittenrein

Google Fonts

Google hat Schriften für Webseiten schon 2010 aufgegriffen: die Google Fonts. Ihr direkter Einsatz ist nicht datenschutzkonform, aber der Google Webfont Helper springt ein.

Ecken und Kreise mit border-radius, box-shadow und gradient

Zum schlichten CSS border gesellt sich zur Freude vieler Webdesigner border-radius und beschreibt die Rundung der Ecken. border-radius rendert nicht nur abgerundete Ecken, sondern auch Kreise und Ellipsen.

Webseiten testen: Windows mit Internet Explorer / EDGE in VirtualBox

Wer Webseiten entwirft oder Online-Anwendungen programmiert, kriegt nie genug von Internet Explorer. Zum Testen werden die neusten Versionen gebraucht und ein, zwei ältere Versionen müssen in der Tiefkühltruhe bereit liegen.

PDF einbinden mit dem object-Tag / iframe-Tag

Das object-Tag ist nicht nur ein Behälter für SVG oder für Video – das object-Tag kann auf ein PDF-Dokument verweisen und bietet dem Benutzer inmitten der Webseite einen Einblick in das Dokument.

CSS für Formulare: Label mit Stil für größere Eingabefelder

HTML label hilft bei Formularen auf kleinen Monitoren: Wenn das label-Tag nicht einfach vor das Eingabefeld gesetzt, sondern um input gelegt wird, vergrößert es die Touchfläche. HTML label trägt also zur Barrierefreiheit bei und reduziert die Flut der Tags und das CSS für Formulare auf ein Minimum.

Blocksatz und Silbentrennung: un-zer-trenn-lich

CSS text-align:justify richtet Text im Blocksatz aus. Zeitschriften und Bücher setzen im Blocksatz, um dem Text einen ruhigeren Charakter zu geben und das Auge nicht dem unruhigen Flattern des Textes auszusetzen.