Skip to content
Submitted about 4 years ago

NO flexbox NO CSS Grid, And Compatible with IE10 and IE11.

Faris P•2,810
@FarisPalayi
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I thought I could finish this in a few hours, so I thought then why not make it IE10 and IE11 compatible and why not not use flexbox and grid. I know it's kinda stupid. But, that's what I did. But it took me more than a day to complete it. So um... there's that. And oh Now I know that I need to be more grateful to flexbox and other modern css thingies. Gosh, without them things would be so damn hard. You have no idea how many hours I spent thinking about how to make the card both horizontally and vertically centered. No joke. However, I learned a lot in the process that I'm glad about. Like:

  • How to use tabindex to make unfocusable elements focusable.
  • The slightly disappointing fact that you can't use ::pseudo classes (::before and ::after etc.) on elements like <img>, <br> and <hr>
  • The astounding discovery that there is in fact a background-position property in css. Thanks @Atharva-Shandilya for that. Hope it's okay that I snooped around your Github repo and profile without permission.
  • Reminding that I can use multiple box-shadows by separating them by commas.
  • And finally I learned How the top:50% left:50% transform: translate(-50%, -50%) trick works.

I don't have a specific question to ask but, any feedback on the project or code would be greatly appreciated 😊.

And yeah there are some animations too!

Code

Please log in to post a comment

Log in

Community feedback

  • Adnan Amin•45
    @adnan-amin

    "And finally I learned How the top:50% left:50% transform: translate(-50%, -50%) trick works."

    Yeap! I didn't understand how that works for a long time. I found it very confusing at the beginning to understand. But now, after understanding what is TRANSFORM ORIGIN it seems like it makes sense.

    Great animation on document load! Kudos!!

    Marked as helpful
  • Grace•32,130
    @grace-snow

    Whoa, IE10 compatible?! 🤯

    Well done! Serious kudos for that 😉

    However, there are some minor issues with your code that you should still address:

    • remove all those tabindexes. Tabindex should never go higher than 0, and shouldn't really be used on anything that's not already an interactive element. You need to have a really good reason to use it, otherwise it properly messes with how assistive technology works
    • Those numbers should not be h3s. Think about the document semantics - what are they headings for? In a page contents list would you understand what content you'd access from a heading like 80k? No. So they shouldn't be headings. They need to be in the same meaningful element as the word that accompanies them and gives them meaning. Try span to control styling instead
    • Similarly, you are hiding some actual page content - Victor's age I presume - by placing 26 in a before pseudo element. That actually needs to be in the HTML.
    • Personally, I think some of the text is unreadably small at the moment. Be careful there...

    That's all from me. Still, very impressive that you've taken the time to do all this

  • Atharva Shandilya•160
    @Atharva-Shandilya

    I too discovered it from snooping around in someone else code :D

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord