Image for post
Image for post

Lesser known CSS quirks & advanced tips

Below you’ll find some of the weirdest CSS features, along with tips and tricks for advanced CSS users.

• Vertical padding is relative to element’s width not height

.square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

• Margins overlap, but only sometimes

<div style="margin-bottom:20px">foo</div>
<div style="margin-top:20px">foo</div>

• Opacity can change the z-index stacking order

• CSS custom properties and variables

// you can set and use custom properties like such::root {
--foo: #000;
}
button {
background-color: var(--foo); //background is black
}
.foo {
color: var(—-my-var, 'blue');
}
::root {
--default-color: #000000;
}
header {
--primary-color: #ff0000;
}
a {
color: var(--primary-color, --default-color);
}
<a href="">this is black</a>
<header>
<a href="">this is red.</a>
</header>
// get variable from inline style
element.style.getPropertyValue("—-my-var");
// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);

• Vertical align: top | middle | bottom

• Height: 100% may not do what you think it does

<html>
<body>
<div style=”height:100%;background:red;”></div>
</body>
</html>

• Id > class

#foo { color: red; } 
.bar { color: green; }
<h1 id="foo" class="bar">this will be red not green</h1>

• Attribute targeting

// target all zip files, case insensitive
a[href$=".zip" i] { }
// make google.com links red
[href*="google.com"] { color: red; }
img:not([alt]) {
border: 2px dashed red;
}
img[alt=""] {
border: 2px dashed red;
}

• Horizontal / vertical axis values inconsistency

• Multiple backgrounds

background: url(example1.png’) no-repeat center 50px, url(‘example2.jpg’) no-repeat bottom top;

• Stacking animations

@keyframes foo { 
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes bar {
0% { transform: translateX(-100px); }
100% { transform: translateX(0px); }
}
.element {
animation: foo 2s 0s, bar 1s 0s;
}
Image for post
Image for post
Half way through the article! Kind of like GRRM is probably half way through writing the next book?

• Strange behavior of “position: fixed” with “translateZ”

Styling of the url hash (/#foo) targeted elements

• Lesser known “content: ‘foo’;” property features

<div data-text="foo"></div>div:before {
content: attr(data-text);
}
<div></div>div:before {
content: url(image.jpg);
}
<div style="--background-image: url('http://via.placeholder.com/150x150');"></div>div:after {
content: '';
background-image: var(--background-image);
}
p {
counter-increment: myIndex;
}
p:before {
content:counter(myIndex);
}
<p>foo</p>
<p>bar</p>
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
html[lang=”fr”] q {
Quotes: “«” “»”;
}

• Font is a shorthand property

h1 {
font-weight: bold;
font-style: italic;
font-size: 1rem;
//etc…
}
// vsh1 {
font: italic lighter 1rem/150% Verdana, Helvetica, sans-serif;
}
// syntax
// font: font-style font-variant font-weight font-size/line-height font-family;

• @supports for checking browser support

@supports (display: flex) {
div {
display: flex;
}
}

• Colons in class names

<div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around"><button class=”bg-blue hover:bg-blue-dark text-white hover:text-blue-light”>Button</button>
.sm\:justify-center { }

• Lobotomized owl selector

Image for post
Image for post
* + * {
margin-top: 2rem;
}
li + li {
margin-top: 1rem;
}
// vsli {
margin-bottom: 1rem;
}
li:last-of-type {
margin-bottom: 0;
}

• Douchebag vertical align

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Image for post
Image for post

• Font-feature-settings property for OpenType fonts

font-feature-settings: “tnum”;
font-variant-numeric: tabular-nums;

• Truncate text with an ellipsis “…” ending

p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

• Extra: wbr element

• But wait, where’s CSS Grid?

Image for post
Image for post

Hit clap for each new tip you got. ;)

Written by

Creative Lead, designer & developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store