Hell Yes CSS

Post by adrian_mrd » Tue, Dec 22, 2020, 11:28 AM UTC

Post by ericmcer » Wed, Dec 23, 2020, 5:18 AM UTC

Post by wpietri » Wed, Dec 23, 2020, 5:32 AM UTC

Santosh83 wrote: post #4

memonkey wrote: post #2

CSS is not as traditional an experience but is so fundamental to succeeding as a front-end developer. I really love that this is a Zine as well!

Would you explain what you mean by CSS not being as traditional an experience? Compared to what? Agree with the rest of your comment...

Post by brundolf » Wed, Dec 23, 2020, 5:48 AM UTC

dheera wrote: post #6

So many years into CSS and it's still damn near impossible to (a) vertically center multi-line text in a div (b) set the width of a div or video in units other than pixels and let the height be set based on an aspect ratio. Both result in nested div hell.

  .my-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my-video {
    --my-video-height: 120px;
    height: var(--my-video-height);
    width: calc(var(--my-video-height) * 16/9);
  }

Post by pineconewarrior » Wed, Dec 23, 2020, 5:59 AM UTC

brundolf wrote: post #7

dheera wrote: post #6

So many years into CSS and it's still damn near impossible to (a) vertically center multi-line text in a div (b) set the width of a div or video in units other than pixels and let the height be set based on an aspect ratio. Both result in nested div hell.

The answer to (a) (along with many other things) is to use Flexbox: .my-container { display: flex; justify-content: center; align-items: center; } This should work for (b) as long as the height isn't in terms of a percentage: .my-video { --my-video-height: 120px; height: var(--my-video-height); width: calc(var(--my-video-height) * 16/9); }