Kevin Powell Posts - Answer Overflow

Kevin Powell

•Created by Kevin Powell on 7/11/2024 in #resources

a11yphant - Learning web accessibility made easy

a11yphant teaches web accessibility, one step at a time, broken down into manageable pieces. Completely free of charge. https://a11yphant.com/

1 replies

KPCKevin Powell - Community

•Created by Kevin Powell on 3/8/2024 in #front-end

Can you think of a good use case for an css-only if/else like this?

So, Lea Verou put out a tweet looking at a pretty cool way to make an if/else with CSS-only, for styling things, and I was going to do a video on it... but I want to find a good use case, and I'm having trouble, so I'm open to any and all suggestions! This is the basics of it:

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;

  :not(&) {
    font-weight: 300;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;

  :not(&) {
    font-weight: 300;
  }
}

This sets the font-size for my headings to 700, and everything else to 300. But there's no point in doing this, because I could do this instead and it's a lot simpler.

body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

body { font-weight: 300; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

And it's basically the same (the nested version would also get inputs and buttons, but whatever, that's easy enough to also do). I was thinking that this would be more useful to target things within a specific component, like this:

.card {
   > :is(.card-header, .card-footer) {
     background-color: purple;

     :not(&) {
       background: green;
     }
   }
}

.card {
   > :is(.card-header, .card-footer) {
     background-color: purple;

     :not(&) {
       background: green;
     }
   }
}

The thing is, this won't select all the other children inside of the card, it will select everything that isn't .card .card-header or .card .card-footer, so even the html, body, etc... We can solve that by changing the not selector to this: .card > :not(&)... but at that point, it feels a little combersome... so, any ideas? Here is a codepen with the example from above in action if you want to play with it: https://codepen.io/kevinpowell/pen/abxdExV

7 replies

KPCKevin Powell - Community

•Created by Kevin Powell on 7/9/2023 in #resources

Advice for getting your first job in tech

A lot of people struggle landing their first job as a developer. I don't feel like I can offer the best advice here, but luckily I have a large audience and there are enough people who have recently landed their first job, and others who are part of the hiring process, so I've asked for their advice, and had a lot of really solid replies that you can read in the replies to this Twitter post. https://twitter.com/KevinJPowell/status/1677840302638260224

11 replies

KPCKevin Powell - Community

•Created by Kevin Powell on 4/24/2023 in #resources

Great CSS Gradient tool - gradient.style

https://gradient.style/

4 replies

KPCKevin Powell - Community

•Created by Kevin Powell on 10/1/2022 in #resources

Learn Accessibility web.dev

They've just added a new Learn Accessibility course by Carrie Fisher to the web.dev learning resources 🔥 https://web.dev/learn/accessibility/

1 replies

Gaming

Programming