Css compressi

Ottimizzandone le dimensioni del CSS Nei grandi progetti i fogli di stile raggiungono in poco tempo un numero di righe […]
Css compressi

Ottimizzandone le dimensioni del CSS

Nei grandi progetti i fogli di stile raggiungono in poco tempo un numero di righe abbastanza elevato e le dimensioni dei file ne subiscono le conseguenze, online possiamo trovare tool gratuiti che permettono una compressione del file css ottimizzandone le dimensioni. Con l’aiuto del php vi proponiamo una pillola che vi darà un modo diverso ed automatico nel concentrare le dimensioni del foglio di stile.

vediamo l’esempio:

creiamo una nuova pagina php, la salviamo all’interno della cartella css con il nome style.php e gli incolliamo all’interno questo codice php che servirà per comprimere il foglio di stile:

    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);

Sotto il codice di compressione possiamo iniziare a scrivere le proprietà css che ci interessano, nell’esempio abbiamo incollato il “css reset” di eric mayer in modo tale da avere un css un pò più corposo, dopodichè la pagina style.php è completa:

    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Finito il foglio di stile creiamo una nuova pagina php che chiamiamo semplicemente index.php dove abbiamo inserito un semplice “Hello World”, in questa richiamiamo il file style.php come se fosse un file css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='css/style.php' />
<title>Laboratorio Css</title>
</head>

<body>
	<h1>Hello World!</h1>
</body>
</html>

Mettiamo online

Mettiamo online il tutto e lanciamo il file index.php, rechiamoci all’URL contenente il file style.php e lo salviamo, passiamo poi a confrontarlo creando un nuovo file con estensione css contenente solo il codice css del file style.php, noteremo che il file style.php ha dimensioni ridotte rispetto al file css.

sorgente script php : www.css-tricks.com

Clicca qui per scaricare l’esempio completo

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github