CDRN

Formatuj i wcinaj CSS

  • Panel
  • Dokumentacja
  • API
formatuje twoje reguły CSS, aby były czytelne i łatwe w utrzymaniu

Dlaczego używać narzędzia do formatowania CSS?

Formatowanie kodu CSS jest niezbędne dla programistów, aby utrzymać czysty i czytelny kod. To narzędzie upraszcza proces, pozwalając szybko i precyzyjnie sformatować kod CSS, ułatwiając w ten sposób utrzymanie i współpracę nad projektami.

Funkcje narzędzia do formatowania CSS

To narzędzie do formatowania CSS pozwala wprowadzić kod CSS i sformatować go dla lepszej czytelności. Usuwa komentarze, niepotrzebne spacje i tabulatory oraz dodaje odpowiednie wcięcia dla reguł i właściwości CSS.

Jak korzystać z narzędzia do formatowania CSS

Aby skorzystać z narzędzia do formatowania CSS, wykonaj te proste kroki:

  1. Wprowadź swój kod CSS w przeznaczonym do tego polu.
  2. Kliknij przycisk „Formatuj". Narzędzie sformatuje kod CSS dla lepszej czytelności.
  3. Skopiuj sformatowany kod CSS, aby użyć go w swoich projektach.

Przykład użycia narzędzia do formatowania CSS

Oto przykład kodu CSS przed i po formatowaniu: 


Avant le formatage :
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Après le formatage :
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Najczęściej zadawane pytania

Jaka jest różnica między formaterem CSS, minifikatorem a beautifierem?

Formater CSS (lub beautifier) przepisuje zwarty plik na wciętą i czytelną wersję. Minifikator robi odwrotnie: usuwa spacje, znaki nowej linii i komentarze, aby zmniejszyć rozmiar pliku serwowanego w produkcji. Nasze narzędzie koncentruje się na formatowaniu: bierze zminifikowany lub źle wcięty arkusz CSS i ponownie go formatuje ze spójnym wcięciem, właściwość po właściwości.

Czy formatowanie zachowuje komentarze CSS?

Komentarze /* ... */ są domyślnie zachowywane w niezmienionej formie. Komentarze licencyjne na początku pliku (/*! ... */) oraz adnotacje użytkowe (TODO, FIXME) pozostają nienaruszone, na własnej linii. Jeśli chcesz je usunąć w celu wyprodukowania pliku produkcyjnego, użyj dedykowanego minifikatora.

Czy prefiksy producentów (-webkit-, -moz-) są obsługiwane?

Tak. Prefiksy producentów są traktowane jak zwykłe właściwości: są wcinane i wyrównywane do reszty bloku. Formater nie generuje ani nie usuwa prefiksów: ogranicza się do sformatowania tego, co dostarczone. Aby automatycznie dodać brakujące prefiksy, użyj Autoprefixer w swoim pipeline build.

Czy formater obsługuje media queries i zagnieżdżone reguły?

Tak. @media, @supports, @keyframes i inne at-rules są wcinane z ich zagnieżdżonymi regułami wewnątrz nawiasów. Natywne zagnieżdżanie CSS (& w regule nadrzędnej) jest również rozpoznawane i poprawnie formatowane, podobnie jak bloki SCSS lub Less zgodne ze standardową składnią CSS.

Czy mogę formatować SCSS, Less lub Stylus?

Narzędzie obsługuje standardowy CSS. Rozszerzone składnie (mixiny SCSS, zmienne Less z @, składnia bez nawiasów Stylusa) nie są rozumiane przez parser i mogą produkować zdegradowany rezultat. Dla tych języków użyj sass --style=expanded, lessc lub dedykowanego formatera, takiego jak Prettier z odpowiednią wtyczką.

Czy formater waliduje składnię CSS?

Formater wykonuje minimalną analizę składniową: identyfikuje bloki, selektory i deklaracje. Zgłasza grube błędy (niezamknięty nawias, brakujący średnik na końcu bloku), ale nie waliduje nazw właściwości ani wartości. Dla pełnej walidacji użyj usługi W3C CSS Validator.

Przykładowe zapytanie

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Schemat wejściowy

Pole Typ Wymagane Domyślnie
input text ✓ –

Punkty końcowe

  • GET https://cdrn.fr/api/v1/tools - lista wszystkich dostępnych narzędzi
  • GET https://cdrn.fr/api/v1/tools/css-formatter - zwraca schemat dla tego narzędzia
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - uruchamia to narzędzie z payloadem JSON