Zombie Index Inflation

Z-index should have reasonable numbers not so many 0’s that you’re sure it’s above the last one (that’s like sending a horde to check someone’s height). That said, leave some space. Don’t number by 1’s, number by 5’s, 10’s, or even 100’s so that if you ever have to stick something in between you don’t... Read More

Underlined Cheating

Just like zombies and death, you can cheat a link’s underline and have more control over it using a border bottom instead of the default underline. In this way you can change colors, add thickness, make them dashed etc. though you’ll miss out on text-decoration-style: wavy;... Read More

CSS Clamp Function

Clamp() – a CSS function for keeping a value between two extremes. The value won’t go above the max value and won’t go below the min value. This is particularly great for responsive design and font sizes. You can set the font-size in vw units so that it scales seamlessly as the page’s size changes. However,... Read More

Container Queries

Container queries let you change a component’s look and feel based upon the size of the container. So if the component is in a small space, it will show one way and if it’s in a larger space it’ll show a different way. They’re just like media queries except they work based on the size... Read More

Shorthand Gotcha

Shorthand properties overwrite any value that isn’t set in the shorthand. For instance, if I set a background-image and then use background: no-repeat to prevent the image from tiling you’ve actually canceled the background image because the background short hand reset it to its default value.... Read More

Outline Property

Outline works similarly to border, but doesn’t contribute to width. It can be used to highlight an element during debugging without affecting your layout in any way. It also appears outside the border and thus can be used to highlight items that already have a border.  ... Read More

Break Points And Design

When creating a responsive design don’t base your break points on hardware unless your site will be used under very, very specific hardware requirements. Otherwise it’ll be a never ending game of whack-a-screen. Instead place your break points based on the content and design of your site. This will ensure that everyone gets the best... Read More

Embedded vs. External vs. Inline Styles

99 times out of 100 external stylesheets are the way to go, but embedded sheets come in handy if you don’t have access to the site’s main styles or if you need to make specific changes to one page that you don’t want to make everywhere. Inline styles should be avoided as much as possible... Read More

Two Kinds of Web Components

There are two kinds of web components: autonomous (name your own element) and customized built in elements (supercharge an existing element). Note: Safari does not support customized built in elements, but all other browsers do. Custom elements require a dash in their name and some JavaScript. Custom built in elements need the is attribute and... Read More

Pseudo Elements

Pseudo elements are like elements but aren’t quite. The most common pseudo elements are ::before and ::after which allow you to insert content into an element. ::before is put into the element right after the opening tag and ::after is put in right before the closing tag. (Note: elements without closing tags e.g. img, input,... Read More

Object-fit

Allows you to treat an inline image as a background image, making it easy to contain or cover the image and allow you to change the aspect ratio without squashing or stretching the image. Learn more at https://developer.mozilla.org/en-US/ docs/Web/CSS/object-fit... Read More

Complex Animations

To more easily animate complex transforms separate out two or more kinds of transforms e.g. a rotate and a scale by adding a wrapper element and performing one transform on the wrapper and one on the child. Generally the first transform on your list should on the parent and the second one on the child.... Read More

Targeting by Mouse Type

Coarse pointer media query lets you differentiate between a coarse pointer (touch screens and similar) and a fine pointer (mouse, pen/tablet etc). It’s a really simple way to provide fallbacks for hover animations and other things that don’t work on touch screens.... Read More

Link Pseudo-Classes

If you want to avoid zombie attacks, the link pseudo-classes should be in this order: :link, :visited, :focus, :hover, and then :active. If you order them differently, the specificity/placement of one will override the functionality of another.... Read More

filter: drop-shadow() vs box-shadow

While you’ve likely heard of box-shadow you may not have heard about the drop-shadow filter. box-shadow does a very nice shadow, but it’s always a box. On the other hand the filter: drop-shadow() will do an exact drop shadow of the element so if you’ve rounded corners or have an SVG with some transparency or... Read More

When in doubt, Flexbox

Flexbox is by far the easiest and most flexible solution for quick layout issues. Floating, positioning and tables have a lot of draw backs in our responsive world and lack the complexity for any but the most rudimentary layouts. Grid is far more powerful than Flexbox and excels at placing items in specific places. But... Read More