![]() Min-height instead would prevent the overlapping weirdness, but then the boxes are of different size and the float problem happens again. That is, if the user viewing the site has the exact same font-size setting as you. Well hey if they were all the same height this wouldn’t be a problem! You want to arrange them into a grid, so you float them left. Let’s say you have a bunch of boxes with different amounts of content in them. This particular example is a bit contrived, but I’m sure you’ve all seen custom fonts that have super crazy x-heights and stuff. The lines on the outside of the fallback font are now awkwardly placed, not centered like we wanted. Let’s say that font doesn’t load or the user overrides it or the page is being viewed in a browser that don’t support The fallback font will load, and that fallback font might have drastically different sizing than the custom font. Let’s say you used the technique around text with a fancy font. In a recent post Line-On-Sides Headers, I used a line-height value that was a magic number. But what about users who increase font-size from their end for accessibility reasons? This fixed sizing might be hurting them. You might think this could be solved from the Content Management System side by only allowing tab names to be a certain number of characters long. In that case, you’d probably want a title attribute so there is some way to reveal the entire tab name. If you were dead-set on having all the tabs the same size, you could do overflow: hidden and text-overflow: ellipsis perhaps: ![]() ![]() Our tabs would be less prone to breakage if we use min-width instead: We could prevent the wrapping with white-space: nowrap but that’s possibly worse: Simply adding another tab with longer text demonstrates that:Ī bit awkward and likely undesirable. In this example 100px is our “magic number.” There are any number of things that can go wrong with this. Let’s take a look at some examples so we all know what they are and hopefully can avoid them in the future.Įach of the tabs is set to width: 100px. They are created by an author who likely only tested in their own browser under ideal conditions. They are usually always related to fonts in some way or another. Magic numbers in CSS refer to values which “work” under some circumstances but are frail and prone to break when those circumstances change. There are magic numbers in CSS though, and they are still bad. CSS is loaded with unnamed numerical constants, but they are usually paired with properties and in the context of a selector so there is little mystery. As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for. It is an old school programming term for “unnamed numerical constant”. Despite the super fun sounding name, magic numbers are a bad thing.
0 Comments
Leave a Reply. |