I work with HTML & CSS daily, creating and amending websites. CSS gets a lot of hate from developers who don’t understand it, although imo it’s a very decent solution. However there are some things that catch me out & I’ve written down some solution here for future reference. I’ll probably add to this list over time.
Spaces between display: inline-block
If you have several items that are on the same line using display: inline-block (similar to display: inline, but with padding and margins), there will be a space between them. This space depends on the font size, and there’s different ways to prevent this from showing. Float them (yuk!) or negative margins (even more yuk, because you don’t know how large the space will be on everyone’s browser).
The best way I’ve found is to use font-size: 0 on the parent container.
.wrapper {
font-size: 0;
}
.wrapper__inner {
display: inline-block;
}
If you need text inside the inline-block elements though, you’ll need to add a font size again, or it’ll be invisible.
jQuery’s slideToggle “jumps” when expanding
I know this is technically a jQuery problem, but the solution is in CSS. I’ve had this problem many times, and the solution is simple but not obvious. If you’re creating an accordion with an area that hides/shows when clicking, the hidden div might start expanding smoothly, then jump the rest of the way open. Common solutions are to add a fixed height (not ideal), or remove padding which isn’t being calculated by jQuery. But the best solution I’ve found is to add position:relative to the containing div. I’ve no idea why this works, but it usually does.
Not using background images for images that need to be printed
It’s so tempting to make use of a background image’s ability to use background-size: cover to force an image to a specific aspect ratio – especially if you’re not certain the correct size will be uploaded in the CMS. But this causes problems when you want to create a print stylesheet. Yes! Sometimes we still do need to create a print stylesheet. I worked on a project recently where certain pages needed to look good when printed.
This means that using a background image as a logo is problematic, something I sometimes do if the logo also needs to be a <h1>, like on the homepage perhaps. A workaround for this is to have a separate <img> that is shown only for print, which works fine admittedly, but is extra stuff in the DOM, and I don’t like the clutter or the complication.
I’ve used background-size: contain a lot on craftcms feature boxes and news snippets, to force an image of an unknown size and aspect ratio to look identical to the rest. But recently have discovered Craft’s image transforms to force a specific size and aspect ratio from an uploaded image, so I’ll be using that instead. The best benefit of this is that it makes sure the client isn’t accidentally uploading a massive image into a small space that will get loaded unnecessarily increasing the page’s filesize.