patwasalinguist Posts - Answer Overflow

patwasalinguist

Explore posts from servers

•Created by patwasalinguist on 5/1/2024 in #front-end

Does Safari on OSX support CSS nesting?

It seems to pass all the tests at https://codepen.io/bramus/pen/oNdrypM But everything is yellow in this test:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Does your browser support CSS Nesting?</title>
  <link rel="icon" type="image/png" href="#">
</head>
<body>
<h1>Does your browser support CSS Nesting?</h1>
<div>
  this should be yellow
  <p>this should be light blue</p>
</div>
<style>
div {
  background: lemonchiffon;
  p {
    background: lightblue;
  }
}
</style>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Does your browser support CSS Nesting?</title>
  <link rel="icon" type="image/png" href="#">
</head>
<body>
<h1>Does your browser support CSS Nesting?</h1>
<div>
  this should be yellow
  <p>this should be light blue</p>
</div>
<style>
div {
  background: lemonchiffon;
  p {
    background: lightblue;
  }
}
</style>
</body>
</html>

12 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 4/26/2024 in #front-end

Is there a way to test for css nesting support?

I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make sense to make a non-nested version until browser support is wider. I would like to do something like:

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

Obviously nesting won’t work there, is there some way to do the equivalent?

10 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 4/24/2024 in #front-end

Is this how @apply works in tailwind?

I'm not a tailwind person but I recall seeing somewhere that there it has something called @apply, which might be something I have been wishing were possible in css for a long time. Namely, I would like to be able to say:

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

Another way to think about this is that i would like to be able to put multiple properties in a css variable, but of course that’s not possible. Does @apply work that way in tailwind?

35 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 3/26/2024 in #front-end

Is CSS nesting ready for production?

caniuse.com says it is supported across all major browsers, is that enough to start using it in production? https://caniuse.com/css-nesting

18 replies

Gaming

Programming