KOMPOOS.NL

css compression / htaccess

home » manuals » htaccess » css-compression.html

sitemap


uitleg hoe je een stylesheet door compressie
ultra-snel in de browser kan inladen

Op de kompoos.nl is er geen enkele pagina die externe stylesheets gebruikt. De reden is dat er geprobeerd wordt de pagina's zo snel als mogelijk in te laten laden door de browser, en externe files "kosten" http-requests. Mocht je toch op jouw website externe stylesheets willen gebruiken, is het wel sterk aan te raden om de laadtijd zo kort mogelijk te houden. Dit kan je voor elkaar krijgen door alle "witruimte" er uit te halen, en met een algoritme ook nog repeterende characters samen te voegen. Hier is een standaard procedure voor: de "ob_gzhandler". Om deze procedure uit te kunnen voeren, moet je aan jouw .htaccess file de regel AddHandler application/x-httpd-php .css toevoegen. Elke file met de extensie .css zal nu door de php-parser "heengehaald worden". Hieronder staat een voorbeeld van een gecomprimeerde stylesheet. De css-code is niet van belang. Het gaat om de allereerste regel in de file: <?php header("content-type: text/css; charset: utf-8");ob_start ("ob_gzhandler");?>. Plaats onderstaande code (maar dan natuurlijk met jouw eigen css-code) in een file met de extensie .css, en roep deze aan zoals te doen gebruikelijk in (bijvoorbeeld) de head-sectie van jouw pagina (<link rel="stylesheet" type="text/css" href="http://jouw-domein.nl/css/standaard.css" />).

(compressed) stylesheet voorbeeld


<?php header("content-type: text/css; charset: utf-8");ob_start ("ob_gzhandler");?>
.css-compression{
        padding:0;
        margin:0 auto;
        list-style:none;
        position:relative;
        width:480px;
        height:280px;
        border:5px solid #444}
.css-compression li{
        width:240px;
        height:140px;
        float:left}
.css-compression li a{
        display:block;
        width:240px;
        height:140px;
        position:relative;
        overflow:hidden} 
.css-compression li a img{
        border:0;
        position:absolute;
        left:-360px;
        top:-210px;
        opacity:0.5;
        width:960px;
        height:560px;
        -webkit-transition:0.75s ease-in-out;
        -moz-transition:0.75s ease-in-out;
        -ms-transition:0.75s ease-in-out;
        -o-transition:0.75s ease-in-out;
        transition:0.75s ease-in-out;}
.css-compression li a:hover img{
        position:absolute;
        left:0;
        top:0;
        opacity:1;
        width:240px;
        height:140px}
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.