[JS/CSS] een meervoudige stylesheet switcher mogelijk? - Softwareontwikkeling

donderdag 16 oktober 2003 10:59

Acties:

« - _ - »

Topicstarter

Naar aanleiding van dit artikel bij A List Apart over het gebruik van Alternate Stylesheets leek het mij een goed/leuk idee om dit te implementeren op een website.

Zelf dacht ik om dit te gaan doen op de volgende manier (aan de hand van een matrix) omdat je je dan kan beperken tot het maken een zestal styles ipv negen (zelfs nog meer als je meerdere kleuren kan kiezen):

Lettertype	ROOD	GROEN	BLAUW
Arial		X
Times New Roman
Georgia

Hierbij dacht ik aan het feit dat je een combinatie van twee styles kan gebruiken om meerdere layouts te tonen, dus:

Lettertype Styles

arial.css
times.css
georgia.css

Kleuren Styles

rood.css
groen.css
blauw.css

Stel dat in als standaard instelling heb gekozen voor arial en kleur groen, dan moet het volgens ALA er als volgt uitzien:

HTML:

<head>
 <title>Styleswitcher test</title>
 <link rel="stylesheet" type="text/css" href="arial.css" title="Standaard Arial" />
 <link rel="stylesheet" type="text/css" href="groen.css" title="Standaard Groen" />

 <link rel="alternate" type="text/css" href="times.css" title="Alternate Times" />
 <link rel="alternate" type="text/css" href="georgia.css" title="Alternate Georgia" />
 <link rel="alternate" type="text/css" href="rood.css" title="Alternate Rood" />
 <link rel="alternate" type="text/css" href="blauw.css" title="Alternate Blauw" />
</head>

Ik kan in dit geval de styleswitcher wel gebruiken, echter worden de bestaande stylesheets niet geheel goed geladen, in dit geval wordt van de 'preferred stylesheets' alleen de "Standaard Arial" geladen en niet groen. Dit alles heeft te maken met het feit dat de styleswitcher.js meerdere stylesheets met verschillende title's niet aankan.

Waarom zo'n lang verhaal? en wat wil je nu?

Dat was ik mij nu ook aan het afvragen. Eigenlijk wil ik weten of het verstandig is om met een matrix te gaan werken, want dan moet de hele styleswitcher.js worden omgebouwd opdat deze kan werken met array's van stylesheet titles. Of is het gewoon verstandiger om toch voor de negen stylesheet oplossing te gaan.

Vervolgens, nog een vervolgvraag (in het verlengde van de vorige). Weet iemand hoe het zit met het laden van de stylesheets? Stel dat ik negen stylesheetdocumenten heb, worden ze dan allemaal geladen of gebeurd dat niet omdat de rel op alternate staat?

donderdag 16 oktober 2003 11:19

Acties:

Verwijderd

allemaal geladen, althans dat neem ik aan aangezien je bij firebird gewoon via het icoontje links onderin, kan kiezen uit de veschillende stylesheets mochten die aanwezig zijn. Zodra je een stylesheet selecteerd krijg je ook meteen die versie te zien, zonder dat de hele pagina opnieuw opgebouwd moet worden

donderdag 16 oktober 2003 11:22

Acties:

crisp

Devver

Pixelated

in feite wil jij dus 2 preferred stylesheets hebben; ik weet niet of dat mogelijk is, en hoe een UA dan weet welk stylesheet een alternate is van welk preferred stylesheet.
Klein opmerkinkje - ik neem echter aan dat je XHTML gebruikt: in HTML mag een link-element namelijk niet afgesloten worden.

Intentionally left blank

donderdag 16 oktober 2003 11:32

Acties:

tomato

Misschien werkt het een stuk gemakkelijker als je gewoon met 9 stylesheets werkt waarin je er steeds weer twee import().

arial_rood.css:

code:

1 2	@import "arial.css"; @import "rood.css";

Dan hoef je toch geen code te dupliceren en houd je het voor jezelf gemakkelijk door steeds maar 1 stylesheet aan te hoeven roepen.

donderdag 16 oktober 2003 12:10

Acties:

Woudloper

« - _ - »

Topicstarter

Hmm, dat is niet zo mooi dat de allemaal worden geladen door de UA (zoals beschreven door Shadow3333). En ja (crisp), je hebt helemaal gelijk dat wil ik graag genereren. Gebruik maken van een tweetal preferred stylesheets.

tomato :: daar had ik ook aan gedacht, maar dan wordt het toch wat lastiger aangezien ik graag het volgende wil:

kies lettertype:

kies kleur:

Als je dan gaat voor de optie zoals jij deze beschrijft moet ik de keuze mogelijkheid als volgt (op een pagina) gaan zetten:

kies style:

Arial
Times
Georgia

Eigenlijk wil ik het gewoon implementeren op een manier dat er een drietal gekleurde vierkante blokjes staan waarop men kan klikken en dat er daarnaast drie keuzes zijn voor lettertypes waarvan alleen de 'A' bijvoorbeeld wordt getoont.

donderdag 16 oktober 2003 12:58

Acties:

Verwijderd

Ik heb het zelf nog even gechecked met live HTTP headers en inderdaad worden alternate stylesheets ook geladen. De w3c heeft er ook niets te melden aan de browser-bouwers of ze dat moeten doen (dus gaan ze ervan uit dat ze het wel moeten doen). Alleen iets met betrekking tot link en de attributen media en type:
http://www.w3.org/TR/REC-html40/struct/links.html#linksandss

En ik denk dat het toch verstandiger is om voor de 9 verschillende stylesheets te gaan. Je zou dan import rules kunnen gebruiken in al die verschillende stylesheets. Dat is denk ik overzichtelijker dan elke keer de stylerules er neer te zetten.
Anders zou het een puur js-oplossing worden als je titles van stylesheets verandert.

Ik heb eigenlijk het idee dat je probleem opgelost zou zijn als de link element een attribuut (extends=) had waarmee je kunt linken naar een al bestaand link element die verwijst naar een stylesheet.
dus zoiets:

code:

1
2
3

<link rel="stylesheet" href="groen.css" id="groen" title="Groen"/>
<link rel="alernate" href="Arial.css" extends="groen" title="Arial groen"/>
<link rel="alernate" href="Georgia.css" extends="groen" title="Georgia groen"/>

enz..

donderdag 16 oktober 2003 13:09

Acties:

Verwijderd

Misschien d.m.v een stylesheet eerst te voorzien van "disabled" en dan later d.m.v javascript te alsnog te laten kiezen, moet ik nog even mee testen, denk toch dat ze gewoon worden geladen, alleen je zal ze niet kunnen selecteren

donderdag 16 oktober 2003 14:00

Acties:

Woudloper

« - _ - »

Topicstarter

Nog even een illustratie (bewerking van eerder geplaatste illustratie) om het 1 en ander duidelijk te maken wat ik graag zou willen bereiken:

Afbeeldingslocatie: http://verwijderddomain.nl/GoT/voorbeeld_ss.jpg

[ Voor 12% gewijzigd door Woudloper op 18-09-2005 22:56 ]

donderdag 16 oktober 2003 15:35

Acties:

-Sander1981-

Je kunt gewoon voor je kleuren stylesheets maken zonder lettertypes te defineren en vervolgens hetzelfde stylesheet voor je lettertypes met alleen maar lettertypes. Vervolgens laadt je die beiden in. de eigenschap van css is dat die stylesheets cascading zijn, dus eigenschappen die je in 1 stylesheet niet defineert, overschrijven die eigenschappen van je eerder geladen stylesheet dus niet.
In je kleurensheet...

code:

1 2	a { color: #ff0000; } h1 { color: #ff0000; font-size: 200% }

In je fontsheet

code:

1	body { font-family: Arial, sans-serif; font-size: 12pt;}

Met relatieve fontsizes in je elementen kun je dus ook grotere/kleinere fonts implementeren in je fontsheet.

Ik hoop dat je hier wat aan hebt...

I don't have a solution; but I do admire the problem.

donderdag 16 oktober 2003 15:38

Acties:

BtM909

Watch out Guys...

-Sander1981- schreef op 16 October 2003 @ 15:35:
Ik hoop dat je hier wat aan hebt...

Klopt misschien als een bus, maar dat is niet wat Woudloper wilt bewerkstelligen!

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 16 oktober 2003 15:47

Acties:

-Sander1981-

Misschien is mijn oplossing wel te gebruiken icm die styleswitcher, gewoon 1 stylesheet inladen per aanroep (Dus als je rood.css aanroept dat je arial.css instellingen blijven bestaan, en als je daarna timesnewroman.css aanroept dat de instellingen die rood.css doet ook blijven bestaan)
Of zit ik nu helemaal naast de werking van die styleswitcher? ik ben nl. niet zo'n ster in Javascript

(edit) Lezen is ook een vak

, Woudloper had mijn eerste verhaal al lang door, aan zijn code te zien. Sorry, mijn fout.

[ Voor 17% gewijzigd door -Sander1981- op 16-10-2003 15:53 ]

I don't have a solution; but I do admire the problem.

dinsdag 21 oktober 2003 09:23

Acties:

Woudloper

« - _ - »

Topicstarter

*** Update ***

Even een update van mijn bovenstaande vraagstuk. Zoals jullie wellicht hadden begrepen dacht ik na het lezen van het artikel over de 'styleswitcher', dat wil ik ook graag implementeren op mijn website.

Door dit artikel was ik op het idee gekomen om gebruikers/bezoekers van mijn website mogelijkheid te geven verschillende delen aan te passen. Je kan dan een onderverdeling in diverse gebieden maken. Zo uit de startpost kan je zien dat ik gekozen had om het tot een 2-tal gebieden te beperken en wel lettertype en kleur.

Hoe kan je dit dan allemaal implementeren? Dit kan door gebruik te maken van de W3C Specificatie aangaande het gebruik van link-tags. Het is namelijk mogelijk om met persistent, preferred, en alternate link-tags te werken. Dit is op zich mooi, maar wat kan je er dan mee en waarvoor zorgen deze verschillende types stylesheets voor.

Betreffende de persistent stylesheets kunnen er meerdere stylesheets zijn door een soortgelijke tag ik de HEAD sectie van je pagina te plaatsen:

Cascading Stylesheet:

1 2	<link type="text/css" rel="stylesheet" href="persistant_1.css" /> <link type="text/css" rel="stylesheet" href="persistant_2.css" />

Zoals de naam al zegt, zorgt persistent ervoor dat ze altijd worden geladen en als er meerdere zijn (zoals in bovenstaand voorbeeld), dan worden er ook meerder geladen.

Alternate stylesheets zorgen (zoals de naam al zegt) voor de mogelijkheid om met verschillende alternatieven te werken. Mozilla geeft ons zelfs de mogelijkheid om via een menu te kiezen uit de verschillende alternatieven welke er zijn. Deze alternatieve wijze geeft mij dan ook de mogelijkheid om de verschillende styles te implementeren:

Cascading Stylesheet:

<link rel="alternate stylesheet" type="text/css" href="arial.css" title="Alternate Arial" />
<link rel="alternate stylesheet" type="text/css" href="times.css" title="Alternate Times" />
<link rel="alternate stylesheet" type="text/css" href="georg.css" title="Alternate Georgia" />
<link rel="alternate stylesheet" type="text/css" href="rood.css"  title="Alternate Rood" />
<link rel="alternate stylesheet" type="text/css" href="groen.css" title="Alternate Groen" />
<link rel="alternate stylesheet" type="text/css" href="blauw.css" title="Alternate Blauw" />

Dat is allemaal heel erg mooi, maar hoe kan ik er dan voor zorgen dat ik nog gebruik kan maken van preferred stylesheets. Op zich vrij simpel, door gewoon het woord 'alternate' uit het rel-attribute te verwijderen, zoals te zien is in mijn startpost.

Nu nog even terugkomen op mijn eerdere punt. Wat wilde ik ook alweer? Gebruikers van de site moeten de mogelijkheid hebben om zowel het lettertype als de kleur aan te passen. Hier zit dan meteen de crux van het verhaal. Na het lezen van zowel de W3C Specificatie en divers naslagwerk heb ik moeten constateren dat het niet mogelijk is om meerdere alternatieve of voorkeurs stylesheets te hanteren. Meerdere persistent stylesheets behoren tot de mogelijkheid, maar meer dan één alternatief stylesheet werkt niet. Bij het selecteren van een alternatief stylesheet worden alle andere alternatieven op disabled gezet en wordt degene welke je hebt gekozen als preferred gezet.
Er bestaan overigens wel mogelijkheden, maar dan stap je af van de stylesheet oplossing en ga je het probleem ondervangen met javascript.

Wat is nu de moraal van dit verhaal? Mocht je gebruikers de mogelijkheid willen geven om bepaalde onderdelen van je pagina zelf te kunnen veranderen, dan moet je daarvoor goed de beslissing nemen van wat zijn mijn vaste stylesheet waardes en wat wil ik aan de gebruiker overlaten. Die laatste categorie kan je dan in alternatieve/preferred stylesheets stoppen en de gebruiker van je pagina dit laten aanpassen.

dinsdag 21 oktober 2003 11:18

Acties:

Verwijderd

Mooi verhaal woudloper, erg netjes, kan zien dat je er erg veel tijd hebt ingestoken

deze gaat bij de bookmarks.

dinsdag 21 oktober 2003 11:20

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 21 October 2003 @ 11:18:
Mooi verhaal woudloper, erg netjes, kan zien dat je er erg veel tijd hebt ingestoken

deze gaat bij de bookmarks.

sluit ik me bij aan; mag van mij wel in de inhoudelijke FAQ

Intentionally left blank

dinsdag 21 oktober 2003 12:30

Acties:

alientje

Hallo?

Ik heb een kort vraagje en wil hier geen nieuw topic voor openen:
Is het mogelijk om binnen een site het lettertype te vergroter zonder van Css-style te hoeven wisselen of het in IE zelf te veranderen? Oftewel: grotere fonts met een druk op de knop mogelijk?

3d-en is leuk

dinsdag 21 oktober 2003 12:35

Acties:

BtM909

Watch out Guys...

Je kan de style properties van een item wijzigen met JavaScript. [google=JS change css fontsize] moet te doen zijn.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 21 oktober 2003 12:35

Acties:

deviltje

Is het mogelijk om binnen een site het lettertype te vergroter zonder van Css-style te hoeven wisselen of het in IE zelf te veranderen?

op http://devedge.netscape.com doen ze dat .. ( rechts in het menu naast customize )..

[ Voor 47% gewijzigd door deviltje op 21-10-2003 12:36 ]

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

vrijdag 31 oktober 2003 08:46

Acties:

Woudloper

« - _ - »

Topicstarter

Nog even een kleine toevoeging aan mijn vervolgvraag. Via wat comment op het blog van Milov.nl, kwam ik terecht op het blog van Anne van Kesteren. Daar werd ik geattendeerd op het volgende stukje tekst in de working draft van XHTML 2.0:

12.1.2. Links and external style sheets

When the link element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.

bron :: XHTML 2.0 | Links and external style sheet

Hierin wordt dus expliciteit gezegd dat het binnenhalen van de stylesheets een taak is voor de Useragent en dat ze wellicht kunnen overwegen om niet alle stylesheets binnen te laden. Echter doen zoals uit andere reacties in dit topic blijkt dat UA's op dit moment gewoon alles inladen. Ik sluit mij dan ook helemaal aan bij de opmerking van Anne:

First of all, a device should only recover the style sheets with the media type that applies to that particular device. My Mozilla web browser should for example only retrieve SCREEN and PRINT and not apply them at the same time. I don't want any AURAL style sheet it is not useful for me and I have to think about kb's.

[ Voor 1% gewijzigd door Woudloper op 31-10-2003 09:59 . Reden: minor change... ]