CSS: Giving text lines a background-color (with configurable line padding and margin)
The gist is:
- wrap the text with a
span - use
line-heightfor the spacing between lines ("margin") - use
box-shadowto control the line background size ("padding")
Example
span
box-shadow: 0 0 0 10px #fff
background-color: #fff
box-decoration-break: clone # Fix Firefox
line-height: 2.2
→ [jsfiddle](https://jsfiddle.net/2fmqgbh...
How to fix HTML elements being cut off when printing
When you print (or print preview) and elements are cut off (e.g. after 1st page, or "randomly") you should check your CSS rules for these:
-
Is there an element with "
display: inline-block" that surrounds your content? Make sure it has "display: block" for printing.
This primarily affects Firefox and Internet Explorer. Chrome seems to be able to handleinline-blockelements in most cases. -
Does the element itself, or a container, define "
overflow: hidden"? Use "overflow: auto" (or maybe "overflow: visible") instead. -
Is th...
HTML: Making browsers wrap long words
By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only.
This card explains some options to make browsers wrap inside a long word like "Donaudampfschifffahrt".
Option 1: hyphens CSS property (preferred)
Modern browsers can hyphenate natively. Use the hyphens CSS property:
hyphens: auto
There is also hyphens: none (disable hyphenations even at ­ entities) and hyphens: manual (hy...
xlsxtream: Streaming & Fast XLSX Spreadsheet Writer for Ruby
When writing XLSX files, there are gems like rubyXL or axlsx. While they do offer features like formatting or graphs, to represent spreadsheet cells, they have to keep several Ruby objects in memory. When writing huge files, both will become slow and consume lots of memory.
Enter Xlsxtream, a Ruby XLSX library with less features (e.g. no individual cell styles) but which does away with the memory issue by streaming ...
Fixing flaky E2E tests
An end-to-end test (E2E test) is a script that remote-controls a web browser with tools like Selenium WebDriver. This card shows basic techniques for fixing a flaky E2E test suite that sometimes passes and sometimes fails.
Although many examples in this card use Ruby, Cucumber and Selenium, the techniques are applicable to all languages and testing tools.
Why tests are flaky
Your tests probably look like this:
When I click on A
And I click on B
And I click on C
Then I should see effects of C
A test like this works fine...
Async control flow in JavaScript: Promises, Microtasks, async/await
Slides for Henning's talk on Sep 21st 2017.
Understanding sync vs. async control flow
Talking to synchronous (or "blocking") API
print('script start')
html = get('/foo')
print(html)
print('script end')
Script outputs 'script start', (long delay), '<html>...</html>', 'script end'.
Talking to asynchronous (or "evented") API
print('script start')
get('foo', done: function(html) {
print(html)
})
print('script end')
Script outputs 'script start', 'script end', (long ...
How to fix broken font collisions in wkhtmltopdf
If you are using PDFKit / wkhtmltopdf, you might as well want to use custom fonts in your stylesheets. Usually this should not be a problem, but at times they include misleading Meta-information that leads to a strange error in the PDF.
The setup
- The designer gave you two fonts named something like
BrandonText-RegularandBrandonText-Bold. (With flawed Meta-information) - You have a HTML string to be rendered by PDFKit
- For demonstration purposes, this strin...
How to exploit websites that include user input in their CSS
The linked article shows how to exploit websites that include unsanitized user input in their CSS.
Although the article often mentions React and CSS-in-JS libraries, the methods are applicable to any web app that injects user input into style tags or properties.
Also, sanitizing user input for CSS injection is much harder than sanitizing HTML.
A Theme Switcher
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
Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs).
The approach is simple: we place an overlay so you don't really click the target element. When you click the overlay, we look up the element underneath it and show its text in a browser dialog. You can then copy it from there.
While moving the mouse, the detected element is highlighted.
Here is the one-liner URL that you can store as a bookmark. Place it in your bookmarks bar and click it to activate....
Deleting stale Paperclip attachment styles from the server
Sometimes you add Paperclip image styles, sometimes you remove some. In order to only keep the files you actually need, you should remove stale Paperclip styles from your server.
This script has been used in production successfully. Use at your own risk.
# Config #######################################################################
delete_styles = [:gallery, :thumbnail, :whatever]
scope = YourModel # A scope on the class with #has_attached_file
attachment_name = :image # First argument of #has_attached_file
noop ...
Cucumber: Test that an element is not overshadowed by another element
I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index (like a modal overlay).
Here is the step I wanted:
Then the very important notice should not be overshadowed by another element
This is the step definition:
Then(/^(.*?) should not be overshadowed by another element$/) do |locator|
selector = selector_for(locator)
expect(page).to have_css(selector)
js = <<-JS
var selector = #{selector.to_json};
var elementFromSelector = document.querySelector(selector)...
How to define height of a div as percentage of its variable width
This is useful if, for example, you want to use a background-image that has to scale with the width and the div should only have the height of the picture.
html:
<div class="outer">
<div class="inner">
</div>
</div>
css:
.outer {
width: 100%;
background-image: image-url('background.png');
background-size: cover;
}
.inner {
padding-top: 60%;
}
How does it work?
There are several CSS attributes that can handle values as percentage. But they use different other attributes as "reference value...
Style Guide for Git commit messages
- Separate subject from body with a blank line
- Limit the subject line to 50 characters (max. 72), include reference (unique story ID) to requirements tracker (Linear in our case)
- Capitalize the subject line
- Do not end the subject line with a period
- Use the imperative mood in the subject line
- Wrap the body at 72 characters
- Use the body to explain what and why vs. how.
Tip
As an alternative, use a commit message that refers to a GitHub issue (
fixes #321) or [story ID](https://makandracards.com/makandra/620718-b...
Classic CSS problems that are easy with flexbox
Solved with flexbox is a collection of css problems which were hard or impossible to solve without flexbox:
- Better, Simpler Grid Systems
- Holy Grail Layout
- Input Add-ons
- Media Object
- Sticky Footer
- Vertical Centering
CSS: Don't target multiple vendor-prefixed pseudo-elements in a single rule
Some pseudo-elements need to be addressed with vendor prefixes. E.g. ::selection is not supported by Firefox, you need to use ::-moz-selection instead.
What you cannot do is to define a single CSS rule to address both the standard and vendor-prefixed form:
::selection, ::-moz-selection {
background-color: red;
}
This rule will be ignored by all browsers. The reason is that if a browser doe...
iOS Safari scales text in landscape mode
iOS Safari tries to be helpful and enlarges some(!) texts when you turn to landscape mode. In precise CSS building, this is annoying. Disable this behavior with:
body
-webkit-text-size-adjust: 100% // Prevent font scaling in iOS landscape
SASS: Defining linear sizes
Just dumping this in case somebody might need it.
When you need a CSS value (a padding, margin, height etc) to shrink/grow proportionally with the parent element, you normally use percentage values. However, if you need specific values at two given widths, you need to turn to linear functions. The mixin below gives you just that.
// Call with two desired values at two different widths.
// Returns a calc() expression that will scale proportionally between those two.
// Example:
// Spaci...
CSS tests and experiments
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
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that...
Sass: Don't put CSS rules into partials that you import multiple times
TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be duplicated in the compiled CSS.
Here is a Sass partial called _fonts.sass that contains both CSS rules and a mixin:
@font-face
font-family: SuperType
src: url('supertype.woff')
=title-font
font-family: SuperType
This _fonts.sass is not practical in CSS projects that are organized over multiple files: When you...
An Introduction to Sending HTML Email for Web Developers
A comprehensive introduction to sending HTML emails.
Intro:
HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.
Table of Contents
- Introduction To Sending Email Link
- Email List B...
A case for different breakpoints
The linked article states that CSS breakpoints should group "similar" screen sizes and thus be at:
- 600px "narrow"
- 900px "medium"
- 1200px "wide"
- (1800px) "huge"
By choosing these breakpoints, most device screens will be somewhere between two breakpoints, and not at the very edge of them.
The ranges could be called:
- narrow (< narrow)
- medium (narrow - medium)
- normal (medium - wide)
- wide (wide - huge)
- huge (> huge)
Capybara: Find an element that contains a string
There is no CSS selector for matching elements that contains a given string ¹. Luckily, Capybara offers the :text option to go along with your selector:
page.find('div', text: 'Expected content')
You can also pass a regular expression!
page.find('div', text: /Expected contents?/i)
Note that if your CSS selector is as generic as div, you might get a lot more results than you expect. E.g. a <div class="container"> that surrounds your entire layout will probably also contain that text (in a descendant) and ...