Gå til innhold

Går det an å definere min egen farge i css?


Anbefalte innlegg

Skrevet

F.eks så finnes det noen forhåndsdefinerte farger som blue, red osv. Er det noen måter jeg kan lage min egen farge på f.eks "finbakgrunn", definere denne til en spesiell verdi, og hvis jeg i framtiden skal endre på "finbakgrunn" så slipper jeg å endre verdien i de 4 filene der den er brukt, men bare der den er definert?

Videoannonse
Annonse
Skrevet (endret)

Du kan gjøre dette med PHP (eller et annet serversidespråk).

 

Enten bruker du filnavn som "style.css.php", eller du kan få serveren (Apache?) til å kjøre PHP i CSS-filene dine (kan gjøres med htaccess-filer).

 

Dermed skal du kunne skrive filer i denne stilen:

<?php
$bgfarge = "#f00";
?>

body {
 background-color: <?php echo $bgfarge; ?>;
}

Endret av Mikael Berg
Skrevet (endret)

Jeg gjør det slik:

<?
error_reporting(ALL);
header("Content-type: text/css");

# Farger
$bgfarge = "#f00";

# CSS
echo <<<CSS

body {
background-color: $bgfarge;
}
CSS;
?>

Endret av Jooakim
Skrevet

Så har slike PHP-baserte løsninger noen drawbacks? Jeg antar at siden det er PHP så lastes og kjøres det på nytt hver gang en siden åpnes eller refreshes, men det er kanskje ikke noe stort problem...?

 

Støtte for enkle variabler i CSS hadde i grunnen vært kjekt. Trengte ikke engang å være typet, siden CSS er interpretert tekst trengs bare en strengevariabel.

 

Geir :)

Skrevet

Det kjøres i utgangspunktet på nytt for hver lasting ja, men har vanskelig for å se for meg at det utgjør noe problem. Det går nok på godt under millisekundet. :) Det er jo heller ikke noe i veien for å skrive en cache-funksjon i PHP-en, men tror egentlig det er vanskelig å få selve cache-funksjonen til å gå raskere enn å bare "kjøre CSS-en" på nytt.

 

Ser ingen åpenbare ulemper.

Skrevet
Det kjøres i utgangspunktet på nytt for hver lasting ja, men har vanskelig for å se for meg at det utgjør noe problem. Det går nok på godt under millisekundet. :) Det er jo heller ikke noe i veien for å skrive en cache-funksjon i PHP-en, men tror egentlig det er vanskelig å få selve cache-funksjonen til å gå raskere enn å bare "kjøre CSS-en" på nytt.

 

Ser ingen åpenbare ulemper.

Du ser ikke noe problemer med å starte en ny php prosess, eller et helt rammeverk(fler og fler jobber med rammeverk som cake) for å få ut css filen?

Skrevet
Støtte for enkle variabler i CSS hadde i grunnen vært kjekt. Trengte ikke engang å være typet, siden CSS er

Jeg burde kanskje kalle det konstanter, ikke variabler. De skal jo ikke endres under kjøring, bare inneholde definisjon av standardverdier.

 

Geir :)

  • 2 uker senere...
Skrevet
.finbakgrunn {
 color: "#55FF88";
 font-color: "#8822AA";
}

 

Vil gi deg en CSS-klasse med angitte bagrsunns/forgrunns-farger. Du har 16777215 mulige farger å velge mellom. En farge i CSS kan alltid defineres med et # og så et tall som heksadesimal.

 

Her kan du finne ut hvilken farge som er hviket heksadesimal-tall.

 

Nå var det ikke det han mente

Han ville ha det slik:

body {
  color: finbakgrunn; // Slik som man bruker red/green/blue...
}

Skrevet
Find and replace-funksjonalitet er og eit alternativ, så slepp du PHP-styret :)

 

Problemet er bare at search and replace ikke fungerer!

 

Hvis du vil bytte farger på enkelte elementer og har en komplisert CSS fil, noe jeg praktisk talt alltid har, så blir denne teknikken som å spille sjakk. Du vil kanskje endre fargen på halvparten av elementene med en gitt farge: Lykke til. Særlig når den fargen du vil endre til allerede er tilordnet en haug av andre elementer.

 

Løsningen for ren CSS er å strukturere fila anderledes.

/*******
Gruppe 1
*******/
p.gubba,
strong.noa,
div.rota
{
color:blue;
}

/*******
Gruppe 2
*******/
p.ching,
em.chong,
strong.china,
div.mann
{
color:red;
}

 

Man kan her endre farge for gruppe 1 og 2, inkludert tilordne de samme farge, uten å miste strukturen hvis man ønsker å endre fargen i fremtiden.

 

Ved å strukturere etter tilordnet verdi, fremfor elementet som tilordnes, blir det trådstarter forsøker å oppnå enkelt. Løsningen på mange CSS problemer ligger i hvordan man strukturerer CSS fila eller CSS filene. CSS filer på mange tusen linjer uten noen som helst struktur fungerer ikke.

 

Frode

Skrevet (endret)

Om du har stilark på mange tusen linjer uten god struktur har du garantert bomma litt CSS uansett.

 

Da bør du i så fall

- dele opp til fleire mindre stilark etter ønska struktur

- generere litt CSS med serverside-programmering som snakka om over her

Endret av Arve Systad
Skrevet
Om du har stilark på mange tusen linjer har du garantert bomma litt CSS uansett.

 

Nei!

 

Det kommer jo helt ann på om man lager CSS for diverse media, om du har CSS for forskjellige skjermstørrelser, etc.

 

Hvis du i tillegg har valgfrie stilark, som brukeren kan velge, eller muligheten for forskjellige layouts men med samme formatering, ja da blir det liv! Jeg har også CSS1, CSS2, og CSS3 stilark, samt hack mot IE. Det blir ett sabla kaos hvis du ikke strukturerer CSS koden.

 

Jeg har mange tusen linjer med CSS kode, men har ikke bomma, bare brukt det ekstremt avansert. Du skal ikke lage rare CSS greiene før flat fil blir kaos. Flat fil er for CSS som flat fyll for mennesker.

 

Frode

Skrevet
Om du har stilark på mange tusen linjer uten god struktur har du garantert bomma litt CSS uansett.

 

Da bør du i så fall

- dele opp til fleire mindre stilark etter ønska struktur

- generere litt CSS med serverside-programmering som snakka om over her

 

Vi er i bunn og grunn rimelig enige her.

 

Frode

Skrevet

Jeg var på en utviklerkonferanse i Nederland for noen uker siden. Jeg fikk ikke gått på mange foredrag, siden jeg hadde 6 av dem å holde selv, men jeg var på et et angående frameworks. Og vedkommende foredragsholder sa det på den måten: Dersom jeg må scrolle, vurderer jeg om jeg skal lage en subrutine. Så strengt kan det selvsagt ikke være med en CSS, men det er et poeng i at ting blir uoversiktlige rimelig fort.

 

Mitt inntrykk er at det har noe med instilling å gjøre. Jeg har jobbet med et 4. generasjons verktøy i over 20 år. Den gangen kunne en prosedyre bare ha 100 linjer, og mange beklaget seg over det. Så ble det utvidet til 500. Og - interessant nok - de samme menneskene beklaget seg fortsatt. Jeg personlig fylte aldri opp de 100 den gangen, og aldri de 500 senere.

 

Men vi hadde nettopp en diskusjon om det her nå: Skal vi dele opp i mange små filer, eller beholde ting samlet. Jeg har ikke noe problem med å dele dem opp personlig, om man kan finne på en fornuftig struktur. Men i vårt tilfelle skal css'ene være templates for andre (designere/webutviklere som er brukere av vårt CMS), og da mistenker jeg at de kommer til å legge alle endringer i hovedfilen fordi det er for mye styr for dem å forholde seg til alle include-filene.

 

Geir :)

Skrevet
...

Men i vårt tilfelle skal css'ene være templates for andre (designere/webutviklere som er brukere av vårt CMS), og da mistenker jeg at de kommer til å legge alle endringer i hovedfilen fordi det er for mye styr for dem å forholde seg til alle include-filene.

 

Geir :)

 

Spørsmålet blir jo fort om en flat fil vil gi brukerne noe mer oversikt?

 

Mye kommer jo ann på hvor sturkutrert koden er, og hvor avansert den er. Hvis dere benytter selectors aktivt, og strukturerer litt "objekt orientert" så blir koden nydelig og oversiktelig, og en drøm å jobbe med. For dere.

 

Problemet er de som ikke behersker selectors. De vil ikke fatte bæret.

 

Frode

Skrevet

Jeg er skikkelig imot å dele opp css i mindre filer.

Greit å ha eget reset stylesheet, og til nød et til print(har nå lagt dette i det globale "reset" stylesheetet),

men å dele opp designe i flere blir jo bare kronglete. Har nok filer oppe som det er om jeg ikke må lete meg frem til hvilken fil som inneholder hva!

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...