The gist is:
span
line-height
for the spacing between lines ("margin")box-shadow
to control the line background size ("padding")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...
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 handle inline-block
elements in most cases.
Does the element itself, or a container, define "overflow: hidden
"? Use "overflow: auto
" (or maybe "overflow: visible
") instead.
Is th...
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"
.
Modern browsers are able to hyphenate natively with the CSS property hyphens
:
hyphens: auto
There is also hyphens: none
(disable hyphenations even at ­
entities) and hyphens: manual
(hyphenation at ­
only).
This feature was integrated [just ...
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.
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...
Slides for Henning's talk on Sep 21st 2017.
print('script start')
html = get('/foo')
print(html)
print('script end')
Script outputs 'script start'
, (long delay), '<html>...</html>'
, 'script end'
.
print('script start')
get('foo', done: function(html) {
print(html)
})
print('script end')
Script outputs 'script start'
, `'...
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.
BrandonText-Regular
and BrandonText-Bold
. (With flawed Meta-information)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.
Hack to implement an inverted "night mode" theme with a few lines of CSS.
Colors in images are preserved.
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....
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 ...
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)...
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%;
}
There are several CSS attributes that can handle values as percentage. But they use different other attributes as "reference value...
Solved with flexbox is a collection of css problems which were hard or impossible to solve without flexbox:
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 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
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...
The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS.
That is, over 200 experiments.
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...
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...
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.
The linked article states that CSS breakpoints should group "similar" screen sizes and thus be at:
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:
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 Capybara wil...
SVG is an acronym for "scalable vector graphics". SVGs should be used whenever an image can be described with vector instructions like "draw a line there" or "fill that space" (they're not suited for photographs and the like). Benefits are the MUCH smaller file size and the crisp and sharp rendering at any scale.
It's a simple, old concept brought to the web – half-heartedly. While actually all browsers pretend to support SVG, some barely complex use cases get you beyond common browser support.
In the bas...
Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2) or as icon set of SVG and/or PNG and many more file types, or even SVG sprites.
From my experience, the frontend developer should create the font, and not the designer. There are many tweaks required during font development, and routing changes over the designer imposes just too much overhead.
On rare occasions, webfonts may be blocked by an entreprise's security policy. Be sure webfonts can be u...