CSS: Giving text lines a background-color (with configurable line padding and margin)

Posted Over 6 years ago by Dominik Schöler.
geoffmuskett.com

wrap the text with a span use line-height for the spacing between lines ("margin")

How to fix HTML elements being cut off when printing

Posted Over 6 years ago by Arne Hartherz.

When you print (or print preview) and elements are cut off (e.g. after 1st page, or "randomly") you should check...

HTML: Making browsers wrap long words

Posted Over 6 years ago by Henning Koch.

By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only. This card explains...

Fixing flaky E2E tests

Posted Over 6 years ago by Henning Koch.

An end-to-end test (E2E test) is a script that remote-controls a web browser with tools like Selenium...

Async control flow in JavaScript: Promises, Microtasks, async/await

Posted Over 6 years ago by Henning Koch.

Slides for Henning's talk on Sep 21st 2017. Understanding sync vs. async control flow Talking to synchronous (or "blocking...

How to fix broken font collisions in wkhtmltopdf

Posted Over 6 years ago by Michael Leimstädtner.

If you are using PDFKit / wkhtmltopdf, you might as well want to use custom fonts in your stylesheets. Usually this...

How to exploit websites that include user input in their CSS

Posted Over 6 years ago by Henning Koch.
reactarmory.com

The linked article shows how to exploit websites that include unsanitized user input in their CSS. Although the article often...

A Theme Switcher

Posted Over 6 years ago by Henning Koch.
inclusive-components.design

Hack to implement an inverted "night mode" theme with a few lines of CSS. Colors in images are preserved.

JavaScript bookmarklet to click an element and copy its text contents

Posted Over 6 years ago by Arne Hartherz.
gist.github.com

Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents...

Deleting stale Paperclip attachment styles from the server

Posted Over 6 years ago by Dominik Schöler.

Sometimes you add Paperclip image styles, sometimes you remove some. In order to only keep the files you actually need...

Cucumber: Test that an element is not overshadowed by another element

Posted Over 6 years ago by Henning Koch.

I needed to make sure that an element is visible and not overshadowed by an element that has a higher...

How to define height of a div as percentage of its variable width

Posted Almost 7 years ago by Judith Roth.

This is useful if, for example, you want to use a background-image that has to scale with the width...

Classic CSS problems that are easy with flexbox

Posted Almost 7 years ago by Emanuel.
philipwalton.github.io

Solved with flexbox is a collection of css problems which were hard or impossible to solve without flexbox: Better, Simpler...

CSS: Don't target multiple vendor-prefixed pseudo-elements in a single rule

Posted Almost 7 years ago by Henning Koch.

Some pseudo-elements need to be addressed with vendor prefixes. E.g. ::selection is not supported by Firefox, you need to...

iOS Safari scales text in landscape mode

Posted Almost 7 years ago by Dominik Schöler.
stackoverflow.com

iOS Safari tries to be helpful and enlarges some(!) texts when you turn to landscape mode. In precise CSS building...

SASS: Defining linear sizes

Posted About 7 years ago by Dominik Schöler.

Just dumping this in case somebody might need it. When you need a CSS value (a padding, margin, height etc...

CSS tests and experiments

Posted About 7 years ago by Dominik Schöler.
brunildo.org

The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS. That is, over 200 experiments...

CSS font metrics in detail

Posted About 7 years ago by Dominik Schöler.
iamvdo.me

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand...

Sass: Don't put CSS rules into partials that you import multiple times

Posted About 7 years ago by Henning Koch.

TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be...

An Introduction to Sending HTML Email for Web Developers

Posted About 7 years ago by Dominik Schöler.
smashingmagazine.com

A comprehensive introduction to sending HTML emails. Intro: HTML email: Two words that, when combined, brings tears to a developer...

A case for different breakpoints

Posted Over 7 years ago by Dominik Schöler.
medium.freecodecamp.com

The linked article states that CSS breakpoints should group "similar" screen sizes and thus be at: 600px "narrow"

Capybara: Find an element that contains a string

Posted Over 7 years ago by Henning Koch.

There is no CSS selector for matching elements that contains a given string ¹. Luckily, Capybara offers the :text option to...

Styling SVGs with CSS only works in certain conditions

Posted Over 7 years ago by Dominik Schöler.

SVG is an acronym for "scalable vector graphics". SVGs should be used whenever an image can be described with vector...

Creating icon fonts with Icomoon

Posted Over 7 years ago by Dominik Schöler.
icomoon.io

Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2...