Kevin Powell - Community•6mo ago

native CSS nesting

Hello everyone, I would like to rewrite this CSS to implement it instead with native CSS nesting. My question is if that's smart to do so; it CSS nesting supported yet by all major browsers?

/* Editor container styles */

.tiptap {
  min-height: 15rem;
  outline: none;
}
/* Editor node styles */

.tiptap ul,
.tiptap ol {
  padding: 0 1rem;
  margin: 1.25rem 1rem 1.25rem 0.4rem;
}
.tiptap ul li p,
.tiptap ol li p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.tiptap h1,
.tiptap h2,
.tiptap h3 {
  line-height: 1.1;
  text-wrap: pretty;
}
.tiptap h1,
.tiptap h2 {
  margin-bottom: 1.5rem;
}
.tiptap h1 {
  font-size: 2.813rem;
}
.tiptap h2 {
  font-size: 2.344rem;
}
.tiptap h3 {
  font-size: 1.875rem;
}

.tiptap pre {
  background: black;
  border-radius: 0.5rem;
  color: white;
  font-family: "JetBrainsMono", monospace;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
}

.tiptap pre code {
  background: none;

  font-size: 0.8rem;
  padding: 0;
}

.tiptap blockquote {
  border-left: 3px solid rgb(11, 107, 203);
  margin: 1.5rem 0;
  padding-left: 1rem;
}

/* Editor container styles */

.tiptap {
  min-height: 15rem;
  outline: none;
}
/* Editor node styles */

.tiptap ul,
.tiptap ol {
  padding: 0 1rem;
  margin: 1.25rem 1rem 1.25rem 0.4rem;
}
.tiptap ul li p,
.tiptap ol li p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.tiptap h1,
.tiptap h2,
.tiptap h3 {
  line-height: 1.1;
  text-wrap: pretty;
}
.tiptap h1,
.tiptap h2 {
  margin-bottom: 1.5rem;
}
.tiptap h1 {
  font-size: 2.813rem;
}
.tiptap h2 {
  font-size: 2.344rem;
}
.tiptap h3 {
  font-size: 1.875rem;
}

.tiptap pre {
  background: black;
  border-radius: 0.5rem;
  color: white;
  font-family: "JetBrainsMono", monospace;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
}

.tiptap pre code {
  background: none;

  font-size: 0.8rem;
  padding: 0;
}

.tiptap blockquote {
  border-left: 3px solid rgb(11, 107, 203);
  margin: 1.5rem 0;
  padding-left: 1rem;
}

6 Replies

Jochem•6mo ago

https://caniuse.com/css-nesting

Jochem•6mo ago

Jochem•6mo ago

but as always, check your own analytics, compare them with the browser support graph, and test if the site is usable without the feature being supported

mmjjrrOP•6mo ago

@Jochem Thank you so much. Another question. A few weeks ago I actually did convert this CSS to nested CSS. But when running my app locally in my development environment and previewing it in browser (I use Chrome for testing), the styles were not being reflected. Is there a conversion step I'm missing?

Jochem•6mo ago

no, no conversion step. Did you use the CSS Nesting syntax, or the SCSS one?

mmjjrrOP•6mo ago

@Jochem Thank you for your reply. Give me a few minutes. I will check. It's working as expected, thank you

Gaming

Programming

native CSS nesting