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.

1. Why on Earth, flex-basis value is set to 0px? Why?!
2. What’s the point of overflow: hidden here?
3. Okay, I get why the word-wrap is 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.

1. Just set flex-basis to initial or even 100%. Since the parent element, with display: flex doesn’t have flex-wrap set to 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).
2. Remove the overflow: hidden and word-wrap.

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…