Why Facebook should find new CSS people
If you have a fanpage on Facebook and you’re a perfectionist, then you probably noticed at least one absolutely annoying thing hidden inside theirs CSS code…
It doesn’t have to be pixel perfect, of course, but that just hurts!
Here you go. Can you see what’s bugging me? For those who can’t see, look at the icons on the right and look closely on the first one. And the padding there.
I mean. Of course, I understand why they did that. If they’d make the padding equal, then the first line won’t fit the column, making it even more ugly. Or, for real, maybe not? Since in “Pages Feed” section, we have text in three lines. Or maybe the best solution is just to move that arrow a little bit?
It took me 5 minutes. And yes, that arrow is not perfect, but that definitely looks better than what we have now.
And yes, as you can see, I’m really poor at keeping my Facebook page alive.
Flexbox is basic… or at least should be
That looks just ridiculous, right? And that’s what I saw today.
As you may know, Facebook is releasing changes in batches, showing random people random upgrades. And now I won the lottery, for trying the “new look” of fanpage’s tabs. Fun! What happened here?
Oh, that’s just perfect. And funny.
- Why on Earth,
flex-basisvalue is set to 0px? Why?!
- What’s the point of
- Okay, I get why the
word-wrapis needed in that column (to break a longer fanpage’s name) but why on those tabs?
What is the fix? There are few of them.
- Just set
flex-basisto initial or even 100%. Since the parent element, with
display: flexdoesn’t have
wrap, that will always place elements in one row. (Yes, only one element is shown, but there’re three of them, two others are empty).
- Remove the
Easy. Again. Basics!
And that’s Chrome. Latest. Not some minor browser with support issues.
Am I that “lucky” to be on the too fast ring of updates? Somewhere between “Done” and “In test” columns in Jira?
On the top of that, there is a “small” issue with those statuses on a gradient background, that definitely needs some space. But that’s only in Android’s app, so who cares.
I know, that you could find some issues almost like this in here. I know. But nobody is paying me to write the CSS properly…