Optimering af Javascript og CSS

16 aug 2010 No Comments

by Simon Jensenin Alt Andet Tags: , , , , ,

Jeg er forholdsvis flitting bruger af bookmark servicen Delicious.com, og det hænder da også at jeg rent faktisk kommer tilbage til nogle af de links jeg er faldet over i løbet af tiden … i dag var sådan en dag, og emnet handler om en måde hvorpå man kan optimere sin sides brug af Javascript og CSS. Følgende post kræver en stor tak og 100% kredit til Niels Leenheer.

Flere filer = flere requests = ventetid = :(

Jeg synes at støde ind i dette scenarie mere og mere på det sidste, og som billederne herunder viser, skal grunden meget ofte findes i brugen af JQuery og ikke mindst plugins dertil.

Følgende eksempel screenshots er alle taget fra en lokal version af sitet www.usgreencardoffice.com, som er et projekt jeg har været en del af gennem det sidste års tid. Som det ses benytter vi en del forskellige JQuery plugins (hvilket, som sagt ikke længere er unormalt), men fordelen ved at kunne hente og lave disse enekltstående plugins så let, kan hurigt gå hen og blive en ulempe, eller i hvert fald mindre fordelagtigt. More

Live Search med Prototype JS og PHP

09 mar 2008 7 Comments

by Simon Jensenin Alt Andet Tags: , , , , , , ,

Update Update 28/04-08: Live-search understøtter nu ÆØÅ – download ny version i slutningen af denne post!

I forbindelse med det sidste nye redesign, har jeg oprettet en “Live search”. Nåhhh ja, den er måske ikke så live som en definition vil have det – men det er da en fed feature – og funktionaliteten bag den, vil jeg da gerne dele med jer.

Live SearchDenne post består således af en gennemgang, af de vigtigste punkter i implementeringen, det være sig lidt XHTML, CSS, Javascript samt PHP.

I slutningen af posten, kan du desuden downloade en lille demo-version af funktionen.

For at benytte koden i denne post kræves det, at du har downloaded og inkluderet Javascript frameworket Prototype JS, samt effektbiblioteket script.aculo.us. Disse skal inkluderes i sidens <head>-sektion, som med et hvert andet Javascript.

More

CSS !important

26 dec 2007 No Comments

by Simon Jensenin Alt Andet Tags: , , ,

Lad mig starte med at sige: Velkommen tilbage Internet Explorer 6.0.

Laaaaangt om længe fik jeg mig taget sammen til at optimerer sitet, så det nu også kan ses i IE 6.0. Det er ikke fordi jeg nu regner med selv at komme til at bruge den browser mere af den grund, ha! – men når man går og kalder sig webprogrammør, synes det at virke som lidt af en torn i øjet, ikke selv at have et site der kan ses i langt de fleste browsere.

Fixet skulle findes i CSS´s “!important“-tag, hvilket jeg højst sansynligt kommer til at bruge mere fremover.

!important

!important tagget i CSS, bliver normalt brugt til at beskrive præcedens. I CSS er det den sidst specificerede regel som tager præcedens (læs: afgørende regl), men tilskrives en regle !important-tagget, overtager denne præceden, også ligemeget om denne regle skrives tidligere i din CSS.

Catchen er… Internet Explorer 6.0 ignorerer !important tagget!

Dvs. at man kan bruge tagget til at lave CSS regler til alle andre browsere end IE 6.0, for herefter at skrive en “normal” regle, som vil blive brugt af IE 6.0… Lød det meget forvirende? Her er et par simpelt eksempler.

More

Variabler i CSS

02 feb 2007 2 Comments

by Simon Jensenin Alt Andet Tags: ,

CSS (Cascading Style Sheets) blev i sin tid introduceret af W3C for at forbedre tilgængelighed på webben, ligesom det skulle være med til at gøre HTML mere semantisk, ved at separerer styling fra resten af HTML-koden.
I "moderne" web-design/-programmering, kommer man ikke udenom brugen af CSS – tilføj dertil et sprog til dynamisk generering af indhold og du kan komme rigtig langt. Men CSS har en mangel – variabler!

Som det er nu kan du ikke benytte variabler i CSS, hvilket efter min mening virker til at være et kæmpe hængeparti. CSS findes idag i sin 2. revision, med en 3. på tegnebordet, og med tidens trends og tendenser, som f.eks. table-less designs, kunne det virke naturligt at introducerer variabler ifm. styling, men synes det ikke at være tilfældet, hvis man læse følgende skrivelse om CSS3 Under Construction.

En Simon Willison er sågar kommet med et løsningsforslag til hvordan man, rent syntax-mæssigt, kunne få dette variabel-ønsket ind i CSS, og det virker faktisk meget fornuftigt – læs mere her.

Heldigvis findes der en løsning. Den jeg har fundet frem til, og benyttet, er i forbindelse med PHP.

Variabler i CSS vha. PHP:

<?php
    header("Content-type: text/css");
    $bgCol = "#BDE469";
   
    echo <<<EOD
   
    body {
        background-color: $bgCol;
    }
   
    EOD;
?>


Ovenstående skal selvfølgelig skrives i en .php-fil, men kan inkluderes i din <head>-sektion som en almindelig .css-fil.

<link rel="stylesheet" type="text/css" href="style.php" />

Uden selv at have prøvet det, postulerer denne side, at have en løsning for brugen af variabler i CSS i forbindelse med ASP.net.