Does this handle CSS media queries and pseudo-selectors?

developer

Private (Runs in Browser)

Free Utility

CSS Formatter & Minifier

Format, clean, and beautify CSS stylesheets with custom indentation or minify CSS rules and media queries for production performance.

Indent:

RAW OR MINIFIED CSS

366 chars • 8 words

BEAUTIFIED CSS

444 chars • 444 B

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s ease
}
.btn-primary {
  background-color: #0d9488;
  color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05)
}
.btn-primary:hover {
  background-color: #0f766e
}
@media(max-width:768px) {
  .btn {
    width: 100%;
    margin-bottom: 0.5rem
  }
}

Original Size366 B

Output Size444 B

Rule Blocks5

Compression21%

Loading tool engine...

Frequently Asked Questions

Yes, nested @media blocks, @keyframes, pseudo-classes, and CSS variables are formatted and indented properly.

Related Utilities

Html Formatter Css Escape Diff Checker