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>

Bramus

CodePen

CSS Nesting Feature Detection, Method 1a (Nesting affecting classes)

...

7 Replies

ἔρως•3mo ago

https://caniuse.com/css-nesting it MUST start with & for it to work on safari 16.5-17.1 instead of p it has to be & p

patwasalinguist•3mo ago

oh dang, thanks so much. I never would have figured that out.

ἔρως•3mo ago

you're welcome anytime you have this type of "can i do x", just google that and you will have an answer that website will be there more often than not

tombyrer•3mo ago

I think the spec changed so you do not need the &, so Google/AI searches are outdated. Have you tested in your Safari locally? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

MDN Web Docs

Using CSS nesting - CSS: Cascading Style Sheets | MDN

The CSS nesting module allows you to write your stylesheets so that they are easier to read, more modular, and more maintainable. As you are not constantly repeating selectors, the file size can also be reduced.

ἔρως•3mo ago

it did change. it used to require & but changed to do not need it

patwasalinguist•3mo ago

Yes, I tested locally. I suspse t what happened is that the version of Safari I tested with (I believe it was 17.1, on my phone atm) used still required the &. The way Safari updates are linked to the OS on Mac is frustrating. Anyway, adding &s to nested selectors solved the problem for now. Thanks.

ἔρως•3mo ago

17.1 is the last version that requires the &

Gaming

Programming

Does Safari on OSX support CSS nesting?