CSS: Combining different length units with calc()
calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:
.foo {
width: calc(100% - (20px * 2));
}
When using Sass, you need to interpolate Sass expressions:
$margin: 20px * 2
.foo
width: calc(100% - #{$margin})
Supported Show archive.org snapshot by all modern browsers and IE9+.
Related cards:
Do not use unitless zeros in CSS calc functions
While in CSS zero is usually referenced without specifying a unit (e.g. padding: 0), you must not use a unitless zero in calc functions.
You would probably not write something like calc(1rem + 0) yourself, but it might be the result of a CS...
About PIE – CSS3 PIE: CSS3 decorations for IE
CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...
Flexible overflow handling with CSS and JavaScript
You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncat...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeli...
Cross-Domain Data with Rack and Rails | Union Station
Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is r...
Different CSS for IE using Sass
At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.
Step 1
Move your curr...
Styling SVGs with CSS only works in certain conditions
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 MUC...
Matching elements on complex web pages with Webrat
XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default ...
CSS Explain - A tool which calculates CSS selector specificity
Example input:
li.active a:link
Example output (specificity):
| 0 | 2 | 2 |
See also: https://www.codecaptain.io/tools/css-specificity-calculator