ForHosting KIT · Strumenti per sviluppatori

Abbellitore CSS

Lo strumento di abbellimento CSS trasforma fogli di stile compressi o spaziati male in codice più facile da leggere, verificare e mantenere.

● BetaGratis · nel tuo browser

Esegui gratis nel browser Vedi l'API

Usalo da WebAPIEmailTelegramApp presto

Incolli CSS proveniente da un file di produzione, da un blocco di stile incorporato o da un vecchio progetto e ottenga una versione con rientri coerenti e dichiarazioni separate. Durante la scansione, il formattatore rispetta stringhe tra virgolette, commenti, parentesi quadre e tonde. Controlla inoltre la struttura dei blocchi e segnala un errore di input quando le parentesi graffe di apertura e chiusura non sono bilanciate.

Renda leggibili i fogli di stile compressi

Il CSS destinato alla produzione viene spesso minificato per ridurre i dati trasferiti. È una scelta utile per il browser, ma scomoda per chi deve leggere il codice. Selettori, dichiarazioni, media query e blocchi annidati possono finire su un’unica riga, rendendo difficile perfino esaminare una piccola modifica. Questo strumento ripristina una struttura visiva prevedibile: ogni parentesi graffa aperta avvia un blocco rientrato, ogni punto e virgola che conclude una dichiarazione avvia una riga e ogni parentesi chiusa torna al livello precedente. Gli spazi normali vengono uniformati senza alterare il testo racchiuso nelle stringhe o nei commenti. Il risultato è utile quando l’unica fonte disponibile è l’ispettore del browser, una cartella di build, un modello di email o un tema di terze parti. Invece di aggiungere a mano le interruzioni e contare i blocchi annidati, Lei riceve una rappresentazione stabile da leggere o copiare in un editor. La formattazione non tenta di convalidare tutta la grammatica CSS né di cambiare scelte stilistiche.

Come vengono protetti i valori CSS

Un formattatore sicuro deve sapere che la punteggiatura non governa sempre la struttura del foglio. Un punto e virgola dentro un valore tra virgolette è contenuto, non la fine di una dichiarazione. Le parentesi graffe in una stringa sono caratteri e la punteggiatura dentro una funzione, come un URL di dati, non deve separare le proprietà. Per questo lo strumento legge la sorgente carattere per carattere e tiene traccia di stringhe, escape, commenti, parentesi tonde e quadre. Le interruzioni strutturali vengono aggiunte solo quando la punteggiatura si trova fuori da tali contesti protetti. Etichette, URL incorporati, selettori di attributo e funzioni complesse restano intatti, mentre i normali blocchi diventano leggibili. I commenti rimangono accanto al codice anziché essere eliminati. L’operazione è deterministica: lo stesso input produce sempre lo stesso output, senza rete, orologio, casualità o dipendenze dall’ambiente.

Individui i blocchi incompleti prima di procedere

L’abbellimento funziona anche come controllo strutturale quando il CSS è stato copiato da una risposta parziale, da un pannello del browser o da un file generato. Lo scanner conta tutte le parentesi graffe strutturali, ignorando quelle presenti in stringhe, commenti, parentesi tonde o quadre. Se compare una chiusura senza una corrispondente apertura, la richiesta non riesce e indica la posizione del carattere. Se la scansione termina con blocchi ancora aperti, segnala quanti non sono stati chiusi. Il controllo è volutamente circoscritto: parentesi bilanciate non garantiscono che ogni proprietà, valore, selettore o regola sia valido per uno specifico browser. Garantiscono però che un blocco evidentemente troncato non venga presentato come risultato corretto. Usi l’output per revisione, confronto nel controllo versione, documentazione o ulteriori verifiche. L’uso nel browser è gratuito; la formattazione automatizzata tramite API applica il prezzo base pubblicato di $0.002 per richiesta.

Casi d'uso

Esaminare una risorsa minificata

Espanda un foglio su una riga prima di cercare un selettore o verificare una dichiarazione inattesa.

Preparare CSS per la revisione

Applichi rientri stabili e separi le dichiarazioni affinché la revisione si concentri sul comportamento.

Controllare un frammento copiato

Rilevi parentesi graffe mancanti o in eccesso dopo una copia da un ispettore, un modello o una risposta generata.

Domande frequenti

Che cosa modifica lo strumento CSS?

Uniforma gli spazi strutturali, applica due spazi di rientro e dispone su righe separate le dichiarazioni concluse da un punto e virgola.

Modifica il testo nelle stringhe o nei commenti?

No. Stringhe tra virgolette, caratteri di escape e contenuto dei commenti vengono conservati durante la scansione.

Convalida tutta la sintassi CSS?

No. Controlla le parentesi graffe strutturali e i confini di formattazione, ma non ogni selettore, proprietà, valore o regola del browser.

Che cosa accade con parentesi graffe sbilanciate?

La richiesta termina con un errore di input non valido invece di restituire CSS formattato solo in parte.

Quanto costa una richiesta API?

Ogni richiesta API applica il prezzo base pubblicato di $0.002. La versione nel browser può essere eseguita localmente senza chiamare l’API.

Per sviluppatori — accesso via API

Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.

Endpoint

POSThttps://api.kit.forhosting.com/dev2/beautify-css

Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.

Chiamala dal tuo stack

curl -X POST https://api.kit.forhosting.com/dev2/beautify-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}'

const res = await fetch("https://api.kit.forhosting.com/dev2/beautify-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/dev2/beautify-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/beautify-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/beautify-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Esempio di richiesta

{
  "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
}

Esempio di risposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "dev2.beautify_css",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.

Prezzi

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

Errori

HTTP	Codice	Significato
`401`	`unauthorized`	Chiave API mancante o non valida: controlla l'header Authorization.
`402`	`insufficient_balance`	Credito esaurito: ricarica per continuare a eseguire attività.
`404`	`unknown_type`	Tipo di attività sconosciuto: controlla il campo type della richiesta.
`429`	`rate_limited`	Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo.

Leggi la documentazione completa del KIT →