DEV Community

Discussion on: CSS Logos: Figma logo

Collapse
 
grahamthedev profile image
GrahamTheDev

Hey Chris, loving this series but may I suggest to stop using aspect-ratio as anyone on iPhone will just get a blank screen.

Just give them a height and width as aspect ratio is not production safe yet unfortunately (AKA Apple is the new IE! 🤣) ❤️🦄

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah nice one, I love new shiny things so always want to try those out. 😂
But great point, and can easily switch to solid height for these.

Collapse
 
grahamthedev profile image
GrahamTheDev

I love shiny, but because of a11y I very rarely get to use shiny stuff, I feel so far behind the times sometimes because of it lol!

Collapse
 
renanfranca profile image
Renan Franca

I am an Android user, good to know! Web dev life isn't easy 😅🤣

Collapse
 
grahamthedev profile image
GrahamTheDev

I think I spend about 20% of my time on caniuse.com, followed by the inevitable “so how the hell do I have a fallback while still future-proofing” Google session 🤣

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Did you find a "fallback" so you can still use aspect-ratio?

Thread Thread
 
grahamthedev profile image
GrahamTheDev
@supports not (aspect-ratio: auto) { 
    padding-top: 100%;
    height: 0;
    position: relative;
    overflow: hidden;

  }
Enter fullscreen mode Exit fullscreen mode

Something like that using the padding hack?

However it would need “reversing” so that you start with that and then reset everything if it Does have @supports For it, and then use aspect ratio instead if you wanted to support ancient browsers!

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Hmm yep!
For now I refactored it to just contain the height, as it's a known thing 💖