[CSS] variabelen binnen extern stylesheet

[Scharnout]

Kan je variabelen gebruiken in CSS? Ik kan er niets over vinden in de specificaties op w3.org, maar ik meen er ooit iets over gelezen te hebben.

Ik vind het zo rot namelijk om al mijn kleuren telkens te moeten opzoeken en wijdtes enz. Je kan wel dingen oplossen door bv

code:

<p class="hokje blauw">

Maar dat is vrij irritant als je het ergens binnen een selector wil gebruiken.

Het gaat dus wel om een extern sheet, anders hak ik er natuurlijk wel asp(.net) variabelen in.

[André]

Volgens de standaarden kan dit niet, het beste is om je css dan serverside te schrijven.

[DonDaaf]

Misschien een idee om je stylesheet te laten genereren met asp(.net)? Of bedoel je een bestand op een andere server?

[Woudloper]

Dit kan naar mijn weten niet.. Heb dat ook al eens nagezocht in de W3C Specs...

edit:

/me is spuit 11

[ Voor 19% gewijzigd door Woudloper op 12-08-2003 14:44 ]

[Scharnout]

Nou als het echt niet anders kan, doe ik het liever nog met javascript om mijn server niet te veel te belasten. Iemand daar ervaring mee? Je kan dan toch gewoon een javascript bestand includen telkens met styles?

[André]

Ja dat kan:

JavaScript:

document.getElementById("bla").style.Color = "#000000";

[Bosmonster]

Jullie blijkbaar allemaal wel.. maar ik heb geen idee wat het probleem nu precies is.. waarom zou je variabelen in je CSS willen gebruiken?

En wat bedoel je met het 'opzoeken van kleuren en wijdtes' en dat classes irritant zijn binnen selectors

En je beweert dat het neerzetten van een paar variabelen via een serverside script te veeleisend is Sorry, maar als je server dat al niet aankan Tis zo'n beetje het simpelste wat ASP kan.

[ Voor 58% gewijzigd door Bosmonster op 12-08-2003 15:17 ]

[Scharnout]

Bosmonster schreef op 12 August 2003 @ 15:15:
Jullie blijkbaar allemaal wel.. maar ik heb geen idee wat het probleem nu precies is.. waarom zou je variabelen in je CSS willen gebruiken?

Ik ben nu bezig met het opfrissen van onze site. Nu ben ik dus nog in de fase dat ik nog niet helemaal weet hoe en wat en waar alles precies komt. Alleen mijn kleurstellingen staan redelijk vast. Daar kleur, hier kleur zo. Bepaalde wijdtes liggen ook al vast. Nu moet ik alleen telkens als een nieuwe class maakt die gebruik moet maken van die bepaalde kleur die ik toch al heb, die kleur weer opzoeken.

Ik doe het even voor

* Scharnout verzint een nieuwe box op de site:

code:

<div class="box">
    <p>
        wat irritant geblaat
    </p>
</div>

nu heb ik dat een paar keer onder elkaar staan met allerlei andere inhoud (geen nieuwsitems, want dat kan je nou weer wel leuk met asp/php/asp.net oplossen (zeker met die laatste)). Zeg dat het er 6 keer staat. Als ik nou een kleur aan de achtergrond wil geven, moet ik dus elke keer al die boxen nagaaan en bij class bv dit doen

code:

<div class="box blauw">
....

waarbij blauw een class is met een kleur. Op zich retehandig natuurlijk. Maar nu vond ik rood toch mooier. Moet ik alles weer veranderen (in de veronderstelling dat ik blauw ook ergens anders gebruikt heb natuurlijk).

Het zou makkelijker zijn als ik gewoon zo kon doen:

code:

$BoxKleur: blue;
.box
{
    color: $BoxKleur
    ander css-meuk
}

dan verander je variabele en klaar is klara. Snap je?

Ik geef toe. Dat gebruik je natuurlijk alleen in de ontwikkelfase, maar het zou retehandig zijn ...

En wat bedoel je met het 'opzoeken van kleuren en wijdtes' en dat classes irritant zijn binnen selectors

Zoals ik al zei... een aantal dingen staan al vast in mijn site. En ik hou van css en xhtml, dus mijn css-bestanden zijn nogal veel regels

Oe schiet me nog iets te binnen. Ik heb mijn site nu fixed width (zeg ff 500px). Ergens anders heb ik 3 kolommen, waarvan ik er 2 evenwijd heb en de rest zit in de middelste kolom (vrij standaard dus), maar ik weet nu nog niet hoe wijd de buitenste kolommen worden

code:

$SideWidth: 100px;
$Width: 500px;
$CenterWidth = $Width - (2*$SideWidth);
.Left
{
    width: $SideWidth;
}
.Center
{
    width: $Width;
}
.Right
{
    width: $SideWidth;
}

(Niet mierensexbedrijven over dat ik "Left ook bij Right kan gebruiken")

Snap?

En je beweert dat het neerzetten van een paar variabelen via een serverside script te veeleisend is Sorry, maar als je server dat al niet aankan Tis zo'n beetje het simpelste wat ASP kan.

Dat kan wel ... maar hoeveel waarde heeft een extern css bestand dan nog Tuurlijk zijn daar oplossingen voor. Alleen het zou leuk zijn als CSS dat ook had ...

[Verwijderd]

de beste oplossing lijkt me toch de style="box blue" alleen is "blue" dan een redelijk stomme naam voor een class, zeker als je besluit dat dat ineens rood wordt. dan noem je het gewoon "box standardcolor wide" en in je wide class die aangeeft dat je box een van de brede is geef je aan hoe breed, zelfde voor de kleur.

(da's de zelfde redenering als waarom <b> deprecated is en vervangen door <strong>; het gaat erom dat die text opvalt, en of dat door bold is of door iets anders (rood, knipperen, extra groot) dat staat in de css van strong)

[ Voor 31% gewijzigd door Verwijderd op 12-08-2003 16:27 ]

[Scharnout]

Ja maar dat lost mijn probleem niet op Nou ja .. probleem. Luiigheid

Als iemand nog andere opties heeft. Ik hoor ze graag ..

[Bosmonster]

Je hebt het begrip CSS nog niet helemaal geloof ik. Het is juist de bedoeling dat je je elementen in classes definieert zodat je alleen in je CSS file nog dingen hoeft te wijzigen. Wat mophor zegt dus: box blauw is gewoon een domme naam voor een class. Je moet de FUNCTIE van het element beschrijven, bijvoorbeeld: box_rechts_spotlight oid.

Bovendien zou ik eerst je vormgeving eens uitwerken voor je gaat bouwen.. scheelt je een hoop van deze onzin Eerst ff Photoshop pakken ofzo dus en daarin je ontwerp opzetten. Als je tevreden bent omzetten naar html.

Zoals zo vaak ligt de bron van je probleem dus heel ergens anders dan je topic beschrijft.

[ Voor 8% gewijzigd door Bosmonster op 12-08-2003 16:37 ]

[drm]

Bosmonster:
Je hebt het begrip CSS nog niet helemaal geloof ik. Het is juist de bedoeling dat je je elementen in classes definieert zodat je alleen in je CSS file nog dingen hoeft te wijzigen. Wat mophor zegt dus: box blauw is gewoon een domme naam voor een class. Je moet de FUNCTIE van het element beschrijven, bijvoorbeeld: box_rechts_spotlight oid.

Die naam is net zo stom als box blauw Wie zegt dat je het altijd als een box weer wilt geven en altijd rechts wil hebben?

Je moet classes in deze meer zien als een soort van "extensie" op de naamgeving van HTML elementen. Als je een adres weer wilt geven gebruik je dus gewoon een <address> element. Als je het adres van je leverancier er anders uit wilt laten zien gebruik je een <address class="supplier"> o.i.d.

Maar goed dat staat verder los van het probleem van de TS. Ik zou eerlijk gezegd niet zo heel goed weten waarom je variabelen in CSS wilt hebben? Als het om kleuren gaat, kun je btw een hele zwik aan kleurnamen gebruiken, maar goed, daar heb je alleen wat aan als de kleurcodes overeenkomen en je het probleem alleen bij kleuren hebt.

Als het puur een luiheidsprobleem is zou ik zeggen: niet zeuren over serverload, je merkt 't verschil waarschijnlijk niet eens, en anders moet je het me nog maar eens uitleggen wat het probleem is

[Bosmonster]

Ben ik niet met je eens. Als ik rechts een aantal spotlight boxen heb en die op een bepaalde manier wil vormgeven gebruik ik zo'n naam. Zou niet weten wat anders. Mogelijk zou je het rechts eruithalen en de uitlijning inline afhandelen omdat het het hergebruik wat beter mogelijk maakt.

Ik zie geen verschil met een class="supplier"... dat doet exact hetzelfde.

[drm]

Het verschil tussen "supplier" en "rechts" is dat "supplier" niets vertelt over de layout of positie of wat dan ook itt. tot "rechts"

[Bosmonster]

Klopt.. maar bij gebrek aan een beter voorbeeld. Voor jou speciaal maak ik er dan "spotlight" van. Moet je wel de hele positionering inline gaan afhandelen. Want de spotlights die ik aan de linkerkant heb krijgen dan dezelfde class-name

[Scharnout]

* Scharnout dankt drm voor uit de weg ruimen van het namenprobleem.

Daar ging het namelijk niet over. Als ik iets blauw noem en rood maak, dat is mijn zaak

En dat ik CSS niet zou snappen vind ik ook wat ver gaan.

@Bosmonster:
Ik kan niet photoshoppen Ik zoek meestal iemand die dat voor mij doet Wat ik dan wel veel zie is dat het photoshopplaatje er altijd retegelikt uitziet, maar het uiteindelijke html-resultaat lijkt er wel op, maar mooi is anders zeg maar .

Verder moet het een zakelijke e-commerce site worden. Dus superflitsend design wil ik niet. Gewoon strak ... en dit is alleen voor de grote lijnen. Gewoon om te laten zien hoe ik het ongveer wil hebben zodat een designer me er beter bij kan helpen

Maar het zou mijn probleem wel zijn Ik ga gewoon doorploeteren. Bedankt voor het meedenken in ieder geval

[drm]

Scharnout:
* Scharnout dankt drm voor uit de weg ruimen van het namenprobleem.

yw...

Daar ging het namelijk niet over. Als ik iets blauw noem en rood maak, dat is mijn zaak

mkay. Ik wens de mensen die jouw code nog 's moeten gaan lezen veel suc6

En dat ik CSS niet zou snappen vind ik ook wat ver gaan.

Dat zei ik niet, dat zei Bosmonster

Maar het zou mijn probleem wel zijn Ik ga gewoon doorploeteren. Bedankt voor het meedenken in ieder geval

Leg het me nog eens uit

_{like i'm a six year old}

[marty]

wat drm en bosmonster willen zeggen is dat css er juist voor jouw problemen is: zodat je maar iets kleins hoeft te wijzigen als je een verandering op je hele site door wilt voeren. Het is dus een beetje raar dat jij nog met variabelen aan de gang wilt gaan. En als je de namen van je classe daarbij ook wilt veranderen, dan heb je gewoon geen goeie namen gekozen.
En als je overal de kleur #0000FF (blauw) in #FF0000 (rood) wil veranderen met 1 druk op de knop kun je toch net zo makkelijk een search en replace doen?

[Verwijderd]

Dat soort discussies zijn er al eerder geweest op de style mailing list van het w3c en ze zijn duidelijk niet van plan om dit te gaan implementeren: variabelen in css.

Je hebt wel bij xml een soortement van 'variabelen' die je zou kunnen gebruiken voor css:
http://home.hccnet.nl/m.wargers/test/charent.xml
Maar ja, dit is alleen theoretisch bruikbaar. Het werkt alleen in de nieuwste versies van Mozilla en Opera.
En waarschijnlijk is dit niet eens correct en moet de css binnen cdata-secties, en ik geloof niet dat de xml-parser dan de eigen gedefinieerde character entities nog oppikt.

edit:
extern gaat al helemaal niet werken

[ Voor 5% gewijzigd door Verwijderd op 12-08-2003 18:30 ]

[Verwijderd]

Ik denk dat je het hele verhaal van variabelen moet laten hangen. Je gaat CSS zo veel te uitgebreid maken. Straks komt er nog een hele scripting language in ccc_do while {} etc..

[Scharnout]

Shit .. al twee keer heel mijn verhaal kwijt wat ik getypt had ...

anyway. Dit was een soort pseudocode. Ben niet zo n00b als jullie denken

Maar ik geef het op. Het kan niet en als ik het wel zou willen, moet ik het anders oplossen in ieder geval. Ik snap nu wel waarom jullie mij niet snapten Ik leg het graag, op verzoek, nog een keer uit als er intresse is.

Anyway2 ... Dank

[Verwijderd]

Ja het wordt wel gesnapt, je wil heel simpel een aantal basiskleuren mbv een variabele globaal in je stylesheet wijzigen. Hiervoor wil je variabelen definieren.

Wat je wel kunt doen is bijv. bestand.css.php3 doen, zodat het geparsed wordt met variabelen.

[Scharnout]

Dat klopt.

Maar das teveel moeite denk ik weer. Want als je stylesheet eenmaal staat, dan pas je hem (bijna) nooit meer rigoreus aan. Dus dan is het zware overkill. Alleen tijdens het bouwen zelf zou het makkelijk zijn.

"Kleur is toch niet helemaal lekker" Hop. Bovenin je css-bestand van 500 regels ff 1 var veranderen en feest

[CrashOne]

Nee, jij zou je hele gedefineerde classes in je html moeten veranderen waar je je kleur meer geeft via je variabele. Bij gewoon gebruik van CSS verander je enkel je CSS file.

Of begrijp ik jou denk manier niet helemaal

[Verwijderd]

Zowiezo is het verstandiger om eerst goed te kijken wat je wilt gaan doen, en hoe je het wilt aanpakken.

[Bosmonster]

Scharnout schreef op 13 August 2003 @ 00:49:
Dat klopt.
...

"Kleur is toch niet helemaal lekker" Hop. Bovenin je css-bestand van 500 regels ff 1 var veranderen en feest

CSS file van 500 regels... Dan doe je ook iets niet goed Dan heb je waarschijnlijk het cascading gedeelte van de afkorting niet begrepen.

Zo heb ik wel eens een paar-honderd-regelig CSS bestand gezien van een collega die dit met Dreamweaver had opgezet. Ongeveer alles stond er tig-dubbel in (font-definities werden constant herhaald, voor ieder elementje werd een class gemaakt etc.)

Na een beetje optimaliseren had ik ongeveer 50 regels over die exact hetzelfde deden.

[SillyJW]

Scharnout schreef op 13 August 2003 @ 00:49:[..]
"Kleur is toch niet helemaal lekker" Hop. Bovenin je css-bestand van 500 regels ff 1 var veranderen en feest

Dat kan toch met de door Gordijnstok genoemde oplossing?
Zoveel moeite is dat niet hoor.

PHP:

// stylesheet.css.php

$kleurtje = "#F00";
$width = "500px";
$height = "200px";

echo '

.box 
{
    color: ' . $kleurtje . ';
    width: ' . $width . ';
    height: ' . $height . ';
}

';

Eventueel haal je na het ontwikkelen van de site de php uit je css.

[ Voor 18% gewijzigd door SillyJW op 13-08-2003 10:37 ]

[Scharnout]

SillyJW schreef op 13 August 2003 @ 10:36:
[...]
Eventueel haal je na het ontwikkelen van de site de php uit je css.

Das een idee (Maar dan met asp(.net))

En 500 regels is inderdaad een beetje overdreven Ik zit nu op 100 en daar zal alleen nog maar vanaf gaan als ik zou optimaliseren

Hoe beslis je trouwens tussen intern (dus alles in de header) en extern (<link bla>)?

[Eskimootje]

Scharnout schreef op 13 August 2003 @ 10:44:
[...]

Das een idee (Maar dan met asp(.net))

En 500 regels is inderdaad een beetje overdreven Ik zit nu op 100 en daar zal alleen nog maar vanaf gaan als ik zou optimaliseren

Hoe beslis je trouwens tussen intern (dus alles in de header) en extern (<link bla>)?

Wat je makkelijker vind op zich is extern makkelijker te werken omdat je zeker bij grotere pagina's je niet gek scrolled.

[André]

Scharnout schreef op 13 August 2003 @ 10:44:
[...]

Das een idee (Maar dan met asp(.net))

En 500 regels is inderdaad een beetje overdreven Ik zit nu op 100 en daar zal alleen nog maar vanaf gaan als ik zou optimaliseren

Hoe beslis je trouwens tussen intern (dus alles in de header) en extern (<link bla>)?

Ligt eraan wat jij het handigste vind, voor de rest maakt dat niet zoveel uit.

[Bosmonster]

Ik doe dingen die overal terug (kunnen) komen extern. Als er specifieke dingen op een pagina zitten die nergens anders terugkomen ga ik daar m'n CSS-file niet mee vervuilen en zet ze intern.

[Verwijderd]

effe een kick omdat ik net bedacht waar de ts volgens mij helemaal niet aan gedacht heeft (dat is inderdaad het cascading verhaal van css)

als je gewoon bovenaan je css al je kleurdefinities duwt:

JavaScript:

* {
  background-color: pink;
  border-color: purple;
  etc
}

dan cascadeert dat automatisch door naar de rest van je document. Ik denk dus dat de ts de * selector niet kent of hier gewoon niet aan gedacht heeft, anders is deze post ook vrij nutteloos