Nerd Warning:
The information below is for aspiring web developers and browser tinkerers. If you are not one, please proceed at your own risk. 😛
After many years of being a web developer at Swim Creative, there are a few things I can count on when it comes to styling up common web elements — the kinds of things you end up doing on virtually every website. Here’s a short list of useful tips and tricks I’ve found that help with my development projects.
Center anything with two lines of CSS
The days are here where we can center align everything in an element with two lines of code using CSS Grid:
display:grid; place-items:center;
This aligns the element(s) within to be centered left/right and top/bottom.
One-line, responsive CSS columns
This is Web 1.0 stuff but I’ve encountered developers who do not know this. With one line of code, you can create a responsive list that expands up to as many columns as you specify (without using media queries). In the example below, I want a maximum of three columns that break into fewer when they each become less than 200px wide.
columns: 200px 3;
This will result in:
- Example List Item
- Example List Item
- Example List Item
- Example List Item
- Example List Item
That’s it… shrink your window if you don’t believe me. This is such a simple way to make pages less lengthy and more visually interesting.
has() Selector
This is a new, crazy selector that’s supported in the latest browsers and lets you test any element to see if it contains something, and then apply a style to itself based on that. This was a feature never before available and you would have to use Javascript.
For example, div:has(p) would ask the ‘div’ element if there’s a ‘p’ element inside of it. If there is, apply these styles to the ‘div’.
In the example below, we’re checking if a group of images has any images being hovered in it. If one is hovered, we can now tell the parent element to do stuff in CSS! (In the case below, reduce and fade all the other images not being hovered). Check the last CSS rule in the codepen below to see how that style rule is written.
PS. I learned this from Kevin Powell. Check out his stuff if you’re looking to bolster your CSS skills.
Responsive text with clamp()
NOTE: This method does rely on all your text elements having a REM value (Root Em) aka – listen to whatever font size the <html> element has.
This is a clean method using very few style rules to achieve a responsive font size across all text elements on your site. For example:
html {
/* this is the magic line */
font-size: clamp(15px, 8vw, 20px);
}
// these need some REM values
h1 {
font-size:3rem;
}
p {
font-size:1rem;
}
This essentially says the largest font size you can have is 20px, and the smallest will be 15px. We’re using a viewport width value to calculate whatever point in between is less than or greater than those two values (basically, tweens between the larger and smaller value). You may have to fiddle with the middle ‘vw’ value.
FYI – The ‘8vw’ value just means 8% of the viewport’s total width.
Result: (shrink your window down). The headline and the paragraph will shrink at the same rate as the viewport width shrinks. This is a useful starting point for all type on your website to be responsively sized by default.
Social Icons Tip
Sometimes getting icons to vertically center within a box or a circle can be finicky. You could try the centering method I’ve outlined above, but sometimes font icon libraries can be weird with glyphs and their line heights.
A simple, cross-browser compliant method to vertically center icon fonts is to set absolute heights and widths the icon font element (say 60px by 60px). To get the icon font to center vertically in this setup you simply just apply a “line-height” property with the same pixel value as the height of the element (60px in this case).
NOTE: In some cases, adjusting a few pixels up or down from the height value will result in the desired outcome (I did that below). This depends on the design of the glyph. Result:
You may have to deviate a pixel or two on the line height if the font icon library has slightly off-center glyphs, but they will still be relative to the height of the element, so vertical centered-ness is ensured.
Welp, there you have it.
That’s all I have for now. Hope some of these tips help your future web projects! Until next time folks.
