Atomo é um serviço gratuito para reduzir o tamanho dos códigos CSS sem perder a sua funcionalidade. Foi criado com a intenção de otimizar sites e sistema para Web reduzindo o tempo de download e tráfego de suas páginas.

O serviço está disponível no endereço http://www2.moraga.com.br/webmasters/atomo/ ou através de acesso externo em http://www2.moraga.com.br/webmasters/atomo/service.php.

A redução

1. Código fonte de uma linha.
2. Abreviação das cores hexadecimais.
3. Remove os comentários.
4. Remove todos os espaços.

1. Codigo fonte de uma linha

O código fonte é reduzido a uma linha eliminando as demais linhas.

2. Abreviação das cores hexadecimais

Exitem 4096 cores que podem ser abreviadas. Isto torna possível reduzir 12288 caracteres utilizando cores de três dígitos ao invés de seis dígitos.

Exemplos:
#FFFFFF para #FFF
#eeffbb para #efb
#E1F1FF continua #E1F1FF

3. Remove os comentários

Elimina todos os comentários deixando apenas o que é realmente necessário para a sua utilização.

4. Remove todos os espaços

E por fim remove todos os espaços entre declarações, blocos "{}", propriedades, valores e tabulações.

Acesso externo

O serviço não está limitado ao formulário (disponível em: http://www2.moraga.com.br/webmasters/atomo/), também pode ser acessado por códigos e fontes externas.

http://www2.moraga.com.br/webmasters/atomo/service.php?url=

A página recebe o endereço da folha de estilo e retorna o CSS comprimido sem formatação XML por se tratar de uma estrutura única e também para facilitar a sua aplicação.

Exemplo de acesso por script em PHP

// Endereço da sua folha de estilo
$my_css = 'http://www.example.com/stylesheet.css';

// Armazena na variável $newCSS o CSS reduzido
$newCSS = file_get_contents("http://www2.moraga.com.br/webmasters/atomo/service.php?url={$my_css}");

// Grava o css comprimido em seu servidor
$fp = fopen('stylesheet.min.css', 'w+');
fwrite($fp, $newCss);
fclose($fp);

Exemplo de acesso por shell

wget http://www2.moraga.com.br/webmasters/atomo/service.php?url=www.exemple.com/style.css

Demonstração

// Original
div {
	background : #FFEEBB;
	color : #606060;
	text-decoration : underline;
}

// Reduzido
div{background:#FEB;color:#606060;text-decoration:underline}