Dynamische CSS
Door Toby hinloopen, 19 jaar geleden, 12.474x bekeken
Enkele beschrijvingen voor het dynamisch aanmaken van CSS documenten met PHP en dynamisch invoegen van CSS documenten met Javascript
Gesponsorde koppelingen
Inhoudsopgave
- Introductie
- dynamisch CSS aanmaken met PHP
- Dynamisch CSS documenten wijzigen
- extra: CSS document dynamisch verwijderen/invoegen
Er zijn 16 reacties op 'Dynamische css'
0 
-0 
-0
Zo jij bent goed met css =p
waar heb je die info allemaal vandaan ?
waar heb je die info allemaal vandaan ?
0 -0
-0
dynamich aanmaken met PHP: gewoon proberen. Lukte niet, heb uitgezocht wat CSS header was en dat geprobeert. Werkte. (css document openen in firefox en dan 'eigenschappen'.)
dynamisch css documenten inladen: HTML DOM
dynamisch css documenten inladen: HTML DOM
0 -0
-0
Je bent kort van stof, maar wel interessant om te lezen. Met PHP heb je wat meer mogelijkheden (of kan je hetzelfde resultaat sneller bereiken) dan met CSS. Ik neem aan dat de CSS die eruit komt wel gewoon valid is enzo?
0 -0
-0
@kasper: behalve de extensie in de <link> tag ziet de gebruiker/browser totaal geen verschil. De header is gewoon netjes meegegeven door het PHP script.
Het is kort van stof ja, het is meer snippits-die-bij-elkaar-horen met uitleg dan een tutorial en heb de tut erg snel in elkaar gezet. Ik heb al mijn kennis geleert van w3schools en copy-paste scripts van google die ik in verloop van tijd steeds weer verander.
Maar ik denk persoonlijk dat er geen lange uitleg nodig is. Het is meer een kwestie van 'je moet maar op het idee komen om...'.
Ik dacht altijd dat je met PHP alleen html doc's kon maken. Toen ik zag dat het mogelijk was direct een afbeelding aan te maken met PHP en dus een phpscript als afbeelding te hebben door enkel de header-informatie te veranderen, kwam ik bij de vraag: kan dat ook met andere dingen zoals CSS en javascript? ja dus.
Hier heb ik CSS uitgelegt.
Ik heb combinatie van css-docs inladen met javascript vandaag pas ontdekt en ook meteen gebruikt.
zie: www.levensweg.net/groepsreizen/
daar staat ie online. Je kan van theme wisselen met de knopjes links. Hierbij wordt de source van het CSS document aangepast.
Het is 1 CSS document die dynamisch aangemaakt wordt op basis van wat GET informatie.
zo kan ik bijvoorbeeld de gewenste paginabreedte invullen via GET, en PHP maakt dan dynamisch een CSS document aan.
In het bovenstaande voorbeeld wordt gebruikt met t=for en t=ice, waar t staat voor 'theme'.
Als niet-php alternatief heb je natuurlijk icetheme.css en foresttheme.css, maar dit werkt sneller. Zo kan je iets aanpassen in alle CSS documenten tegelijk zonder 100en scripts te moeten wijzigen.
Hiervoor zat ik te kloten met een theme per stylesheet en een centrale stylesheet met de maten en niet-theme afhankelijke stylen.
Dat is een heel gekloot, dus heb dit maar erop verzonnen.
in het bovenstaande voorbeeld is ook de gradient-tutorial in praktijk uitgewerkt.
voor hen die interesse hebben in de broncodes van die website:
http://www.levensweg.net/groepsreizen/groepsreizen.rar
feel free to use it. Het is nu nog enkel een template met enkele beginnetjes van functies, dus er zit een hoop overbodige scripts tussen.
Het is kort van stof ja, het is meer snippits-die-bij-elkaar-horen met uitleg dan een tutorial en heb de tut erg snel in elkaar gezet. Ik heb al mijn kennis geleert van w3schools en copy-paste scripts van google die ik in verloop van tijd steeds weer verander.
Maar ik denk persoonlijk dat er geen lange uitleg nodig is. Het is meer een kwestie van 'je moet maar op het idee komen om...'.
Ik dacht altijd dat je met PHP alleen html doc's kon maken. Toen ik zag dat het mogelijk was direct een afbeelding aan te maken met PHP en dus een phpscript als afbeelding te hebben door enkel de header-informatie te veranderen, kwam ik bij de vraag: kan dat ook met andere dingen zoals CSS en javascript? ja dus.
Hier heb ik CSS uitgelegt.
Ik heb combinatie van css-docs inladen met javascript vandaag pas ontdekt en ook meteen gebruikt.
zie: www.levensweg.net/groepsreizen/
daar staat ie online. Je kan van theme wisselen met de knopjes links. Hierbij wordt de source van het CSS document aangepast.
Het is 1 CSS document die dynamisch aangemaakt wordt op basis van wat GET informatie.
zo kan ik bijvoorbeeld de gewenste paginabreedte invullen via GET, en PHP maakt dan dynamisch een CSS document aan.
In het bovenstaande voorbeeld wordt gebruikt met t=for en t=ice, waar t staat voor 'theme'.
Als niet-php alternatief heb je natuurlijk icetheme.css en foresttheme.css, maar dit werkt sneller. Zo kan je iets aanpassen in alle CSS documenten tegelijk zonder 100en scripts te moeten wijzigen.
Hiervoor zat ik te kloten met een theme per stylesheet en een centrale stylesheet met de maten en niet-theme afhankelijke stylen.
Dat is een heel gekloot, dus heb dit maar erop verzonnen.
in het bovenstaande voorbeeld is ook de gradient-tutorial in praktijk uitgewerkt.
voor hen die interesse hebben in de broncodes van die website:
http://www.levensweg.net/groepsreizen/groepsreizen.rar
feel free to use it. Het is nu nog enkel een template met enkele beginnetjes van functies, dus er zit een hoop overbodige scripts tussen.
0 -0
-0
@Toby
Een centrale stylesheet en een vast thema per stylesheet is volgens mij net zo snel en gemakkelijk hoor. Het idee is zeker leuk en handig, zeker als je een user zelf een aantal dingen wilt laten bepalen over de opmaak.
Wat ik mij echt afvraag is of het wel zo'n winst betekend, want als je alle generieke CSS in je centrale stylesheet hebt, dan is er bijna geen verandering nodig. Wat ik me wel kan voorstellen is het volgende:
Je hebt een map met thema forests (waarbinnen de afbeeldingen / css van dat thema staan) en zo heb je voor elk thema een andere map. (is ook overzichtelijk en eenvoudig toevoegen, dit kan dan zelfs dynamisch) Je past dan met PHP (of JS) alleen de locatie van de op te halen css aan. (de mapnaam dus) Werkt heel eenvoudig, is overzichtelijk en uitbreiden is ten allen tijde heel simpel mogelijk.
Een centrale stylesheet en een vast thema per stylesheet is volgens mij net zo snel en gemakkelijk hoor. Het idee is zeker leuk en handig, zeker als je een user zelf een aantal dingen wilt laten bepalen over de opmaak.
Wat ik mij echt afvraag is of het wel zo'n winst betekend, want als je alle generieke CSS in je centrale stylesheet hebt, dan is er bijna geen verandering nodig. Wat ik me wel kan voorstellen is het volgende:
Je hebt een map met thema forests (waarbinnen de afbeeldingen / css van dat thema staan) en zo heb je voor elk thema een andere map. (is ook overzichtelijk en eenvoudig toevoegen, dit kan dan zelfs dynamisch) Je past dan met PHP (of JS) alleen de locatie van de op te halen css aan. (de mapnaam dus) Werkt heel eenvoudig, is overzichtelijk en uitbreiden is ten allen tijde heel simpel mogelijk.
0 -0
-0
@robert
ja, maar als je iets aan wilt passen moet je alle stylesheets aanpassen :P
dit vind ik wel een leuk alternatief voor jouw laatste voorbeeld.
dit zou je eventueel ook in een CMS kunnen inbouwen zodat je via adminpanel de kleurtjes kan wijzigen.
het is een alternatieve methode die nieuwe mogelijkheden geeft. Natuurlijk zijn er andere manieren om dit te bereiken; dit is gewoon een andere manier om hetzelfde te bereiken.
ja, maar als je iets aan wilt passen moet je alle stylesheets aanpassen :P
dit vind ik wel een leuk alternatief voor jouw laatste voorbeeld.
dit zou je eventueel ook in een CMS kunnen inbouwen zodat je via adminpanel de kleurtjes kan wijzigen.
het is een alternatieve methode die nieuwe mogelijkheden geeft. Natuurlijk zijn er andere manieren om dit te bereiken; dit is gewoon een andere manier om hetzelfde te bereiken.
0 -0
-0
@Toby: Ik heb een vraag over dat DOM gedeelte..
Heb je dit in alle browsers getest dat het werkt? Ik heb hier al eens mee willen aan de slag gaan een eind geleden (jaartje ongeveer), maar toen lukte het niet echt. Of ik deed het verkeerd, of de browsers konden het toen niet aan..
Net even gekeken, en voor CSS ging dat wel, maar niet voor JS dus.
Heb je dit in alle browsers getest dat het werkt? Ik heb hier al eens mee willen aan de slag gaan een eind geleden (jaartje ongeveer), maar toen lukte het niet echt. Of ik deed het verkeerd, of de browsers konden het toen niet aan..
Net even gekeken, en voor CSS ging dat wel, maar niet voor JS dus.
0 -0
-0
Ik vind dat dit niet echt iets nuttigs toevoegd. Tuurlijk kun je alles dynamisch maken met PHP, daarvoor is het een server-side taal. En dat over dat content-type via header meegeven, dat is toevallig dat niet veel mensen dit soort dingen gebruiken, maar bijv. bij GD, daar is dit ook van zelf sprekend, dat je een header met het content-type meegeeft.
En ik vind het sowieso niet netjes gedaan qua url van de stylesheet. Rewrite dat dan iig naar style_blue.css > style.php?color=blue.
Verder heb ik een betere optie waarmee je alles in ??n kunt doen zonder tussenkomst van PHP.
Ik geef mijn body een class, green, red, blue, purple, orange, maakt niet uit.
Nu wil ik de header een andere achtergrond kleur geven, wat doe ik dan:
Nu hoef ik alleen maar de class van de body te wijzigen. Alles staat in ??n stylesheet en het is statisch, wat wil je nog meer?
Kortom, dit is een vuile methode, maar het werkt.
Het DOM gedeelte heb ik niet gelezen. Zal ik straks doen. Misschien plaats ik dan een tutorial over mijn techniek die ik hier boven al een stukje heb uitgelegd.
En ik vind het sowieso niet netjes gedaan qua url van de stylesheet. Rewrite dat dan iig naar style_blue.css > style.php?color=blue.
Verder heb ik een betere optie waarmee je alles in ??n kunt doen zonder tussenkomst van PHP.
Ik geef mijn body een class, green, red, blue, purple, orange, maakt niet uit.
Nu wil ik de header een andere achtergrond kleur geven, wat doe ik dan:
Code (php)
1
2
3
2
3
body.blue div#header { background: blue; }
body.red div#header { background: red; }
ect..
body.red div#header { background: red; }
ect..
Nu hoef ik alleen maar de class van de body te wijzigen. Alles staat in ??n stylesheet en het is statisch, wat wil je nog meer?
Kortom, dit is een vuile methode, maar het werkt.
Het DOM gedeelte heb ik niet gelezen. Zal ik straks doen. Misschien plaats ik dan een tutorial over mijn techniek die ik hier boven al een stukje heb uitgelegd.
0 -0
-0
@tommy: dan heb je een stylesheet die veel groter is omdat ie 100en classes moet ondersteunen. :P
daarbij is dit meer een 'je moet maar op het idee komen' tutorial.
daarbij is dit meer een 'je moet maar op het idee komen' tutorial.
0 -0
-0
Zoiets had ik zelf kunnen bedenken, maar ik zou het sowieso niet gebruiken.
En ik hoef geen honderden classes te ondersteunen. Dan ga je het weer slimmer doen, dan ga je bijv een div de achtergrond kleur geven die geselecteerd is, en dan ga je de volgende elementen (semi-)transparant instellen, eventueel met PNG's, zodat deze elementen de kleur krijgen van de achtergrond en je nog steeds geen "100en" hebt. De rest van de dingen die bijv. wit zijn kun je bedekken met andere elementen en de achtergrond onzichtbaar maken. Zo kun je alles realiseren wat je wilt.
Ik ben er in de loop van de tijd dat ik CSS gebruik achter gekomen dat je het ook niet zo zeer als een opmaak taal moet bekijken, je moet, net als bij PHP, de code op elkaar afstemmen en alleen door logisch na te denken krijg je het resultaat wat je ook in Photoshop had. En door nog logischer na te denken krijg je een optimaal resultaat qua snelheid, grootte, valid CSS, ect.
En ik hoef geen honderden classes te ondersteunen. Dan ga je het weer slimmer doen, dan ga je bijv een div de achtergrond kleur geven die geselecteerd is, en dan ga je de volgende elementen (semi-)transparant instellen, eventueel met PNG's, zodat deze elementen de kleur krijgen van de achtergrond en je nog steeds geen "100en" hebt. De rest van de dingen die bijv. wit zijn kun je bedekken met andere elementen en de achtergrond onzichtbaar maken. Zo kun je alles realiseren wat je wilt.
Ik ben er in de loop van de tijd dat ik CSS gebruik achter gekomen dat je het ook niet zo zeer als een opmaak taal moet bekijken, je moet, net als bij PHP, de code op elkaar afstemmen en alleen door logisch na te denken krijg je het resultaat wat je ook in Photoshop had. En door nog logischer na te denken krijg je een optimaal resultaat qua snelheid, grootte, valid CSS, ect.
0 -0
-0
Heb dit ook wel eens gebruikt, kan soms best handig zijn.
Werkt trouwens ook met javascript:
Als ik trouwens de headers bekijk die ik terugkrijg als ik een pagina van php-hulp laad, zie ik soms als content-type 'application/x-javascript' en soms 'text/javascript'.
Ik heb geen idee of dit verder nog uitmaakt..
In FireFox en IE 7 werkt een JS-bestand trouwens ook zonder een header mee te zenden, maar dat is natuurlijk niet aan te raden..
Werkt trouwens ook met javascript:
Code (php)
Als ik trouwens de headers bekijk die ik terugkrijg als ik een pagina van php-hulp laad, zie ik soms als content-type 'application/x-javascript' en soms 'text/javascript'.
Ik heb geen idee of dit verder nog uitmaakt..
In FireFox en IE 7 werkt een JS-bestand trouwens ook zonder een header mee te zenden, maar dat is natuurlijk niet aan te raden..
0 -0
-0
@Tommy,
Ik denk dat dit heel handig is voor bijvoorbeeld een site als hyves:
SELECT achtergrondafbeelding,achtergrondkleur,menukleur... FROM profielen WHERE id = hetIdVanDePaginaWaaropDeBezoekerZit
Vervolgens een CSS bestandje:
Vervolgens kun je altijd het bestand "profiel.css" gebruiken en daarin staan altijd de goede waarden.
Dit is maar een voorbeeldje, ga niet miereneuken over de details
Ik denk dat dit heel handig is voor bijvoorbeeld een site als hyves:
SELECT achtergrondafbeelding,achtergrondkleur,menukleur... FROM profielen WHERE id = hetIdVanDePaginaWaaropDeBezoekerZit
Vervolgens een CSS bestandje:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
body
{
background-image: url('$achtergrondafbeelding');
background-color: #$achtergrondkleur;
}
#menu
{
background-color: #$menukleur
{
background-image: url('$achtergrondafbeelding');
background-color: #$achtergrondkleur;
}
#menu
{
background-color: #$menukleur
Vervolgens kun je altijd het bestand "profiel.css" gebruiken en daarin staan altijd de goede waarden.
Dit is maar een voorbeeldje, ga niet miereneuken over de details
0 -0
-0
Mooi geschreven, je bent wel vergeten om $_GET['theme'] nuttig te gebruiken ;)
PHP scripts (.php) laad sowieso trager als een niet-PHP bestand (.css)
Ga dus niet altijd overal .php van maken als dat niet nodig is.
Tip: als je thema's wilt aanbieden, zou je ook gewoon losse .css bestanden kunnen maken, als het niet zo veel is.
Heb je echter grote, ingewikkelde stijlbladen, dan kun je met PHP gaan weken.
PHP scripts (.php) laad sowieso trager als een niet-PHP bestand (.css)
Ga dus niet altijd overal .php van maken als dat niet nodig is.
Tip: als je thema's wilt aanbieden, zou je ook gewoon losse .css bestanden kunnen maken, als het niet zo veel is.
Heb je echter grote, ingewikkelde stijlbladen, dan kun je met PHP gaan weken.
0 -0
-0
Wat mij wel een belangrijk voordeel lijkt van deze manier van css gebruiken, is dat je bijvoorbeeld een dynamische content kunt krijgen; Je kunt het volledig op elk beeldscherm aanpassen. Ik ga zeker eens kijken of ik het kan gebruiken.
Een nadeel is alleen dat je met css in php-bestanden geen syntax highlighting hebt..
Een nadeel is alleen dat je met css in php-bestanden geen syntax highlighting hebt..
0 -0
-0
Ik wil niet lastig doen, maar...
Je kan ook gewoon css tussen <style></style> ( en javascript tussen <script></script> ) tags schrijven.
Je kan ook gewoon css tussen <style></style> ( en javascript tussen <script></script> ) tags schrijven.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
...
echo '<html>
<head>
<style>'. $dynamische_css .'</style>
</head>
<body>
...
</body>
</html>';
?>
...
echo '<html>
<head>
<style>'. $dynamische_css .'</style>
</head>
<body>
...
</body>
</html>';
?>
0 -0
-0
nja ik werk altijd vanuit de body.
Zo heb ik laatst voor een grote klant 1 stylesheet gebruikt waar 9 totaal verschillende opmaken in terecht kwamen. De opbouw en structuur bleef hetzelfde, de achtergronden, afbeeldingen, menu`s en dergelijke echter niet.
Daarnaast zaten er ongelovelijk veel details in zo`n stylesheet. toch heb ik m`n stylesheet weten te reduceren tot een kleine 300 regeltjes code. En het enige wat je hoeft te doen is de body class een andere naam te geven.
En of 300 regels CSS veel is, daar valt over te discussieren, wat ik hier mee wil aangeven is, als je logisch nadenkt, en goed uitwerkt, heb je echt geen dynamische php nodig. En als het echt dynamisch moet, dan kun je het altijd nog op de <style> zetten . Een standaard waarde instellen in je css en mocht het overruled worden, zet je het op de <style>
Zo heb ik laatst voor een grote klant 1 stylesheet gebruikt waar 9 totaal verschillende opmaken in terecht kwamen. De opbouw en structuur bleef hetzelfde, de achtergronden, afbeeldingen, menu`s en dergelijke echter niet.
Daarnaast zaten er ongelovelijk veel details in zo`n stylesheet. toch heb ik m`n stylesheet weten te reduceren tot een kleine 300 regeltjes code. En het enige wat je hoeft te doen is de body class een andere naam te geven.
En of 300 regels CSS veel is, daar valt over te discussieren, wat ik hier mee wil aangeven is, als je logisch nadenkt, en goed uitwerkt, heb je echt geen dynamische php nodig. En als het echt dynamisch moet, dan kun je het altijd nog op de <style> zetten . Een standaard waarde instellen in je css en mocht het overruled worden, zet je het op de <style>
Om te reageren heb je een account nodig en je moet ingelogd zijn.
Inhoudsopgave
- Introductie
- dynamisch CSS aanmaken met PHP
- Dynamisch CSS documenten wijzigen
- extra: CSS document dynamisch verwijderen/invoegen
PHP hulp
0 seconden vanaf nu