[html/css] style tag buiten head - Softwareontwikkeling

woensdag 26 januari 2005 16:11

Acties:

Verwijderd

Topicstarter

Ik zit met het probleem dat ik een JSP gebaseerde 'webcomponent' zit, en styles moet toevoegen voor zo'n component. Ik heb daarbij geen toegang tot de <head> tag en kan daar dus ook nix aan toevoegen.

De stylesheets definities heb ik server side in een string staat. Deze beschrijven de styles van een aantal elementen zoals td en th etc. Bijvoorbeeld:

Cascading Stylesheet:

th.foo {
  font-family: Arial, sans-serif;
  padding-left:5px;
  padding-bottom: 5px;
}

td.foo {
  font: normal normal normal 12px Arial;
  padding-left: 5px;
  text-align:left;
}
 // etc

De officiele manier om inline css styles toe te voegen schijnt via een div tag te zijn waarbij je de styles in het style attribuut zet. Echter, dan kan ik niet de element.classname { styles } syntax gebruiken. Als ik het probeer werkt het gewoon niet.

De styles met de hand op de html elementen toevoegen is ook niet te doen; Zowel de styles zelf als de elementen worden dynamisch aangeleverd.

Wat wel werkt is gewoon tegen alle regels in de style tag midden op mijn pagina neer te zetten. Ik heb dit met alle mogelijke browsers getest en het werkt gewoon. Maar wat is nu verstandig? Verder zoeken naar een betere (meer standaard conforme) optie, of de style tag gebruiken.

Wat ik dus zoek is de mogelijkheid om inline, liefst via de div tag, styles en style classes aan te maken die wat zeggen over andere elementen. Is dit mogelijk?

woensdag 26 januari 2005 16:21

Acties:

Verwijderd

nee

het style element hoort in de head, evenals links naar stylesheets.
wat je dus rest is zijn inline styles, in het style attribuut, dit kan overigens in elk element.

Overigens barst je post van de naamgeving fouten, het is voor de duidelijkheid wel zo handig dat je benamingen goed doet, classes hebben niks met style te maken, een div is geen tag maar een element (dat aangegeven wordt door een start en een end tag)

en verder kan comment in css niet met "//" maar alleen met "/*..*/", hth

edit: pling idee: wat wel eventueel kan is met js in je body een extra link element aan je head hangen

en zo verwijzen naar een stylesheet

[ Voor 24% gewijzigd door Verwijderd op 26-01-2005 16:23 ]

woensdag 26 januari 2005 16:29

Acties:

Rickets

Finger and a shift

Dat component is niet zo handig opgezet (understatement

) Is er echt geen ander component wat je kan gebruiken?

Verwijderd schreef op woensdag 26 januari 2005 @ 16:11:
De officiele manier om inline css styles toe te voegen schijnt via een div tag te zijn waarbij je de styles in het style attribuut zet. Echter, dan kan ik niet de element.classname { styles } syntax gebruiken. Als ik het probeer werkt het gewoon niet.

Dat klopt, declaraties in een style attribute gaan altijd over het element waarin het staat. Als je dus zaken voor td.foo { } wilt toepassen, zal je je document moeten doorzoeken naar een cell met de class foo, en daar een style attribute aan toevoegen. Dit is best ondoenlijk, aangezien je zoiets dan moet doen voor alle soorten selectors die je gebruikt, en waarschijnlijk ook inefficiënt. In feite bouw je dan de stylesheet afhandeling in browsers na, maar dan serverside

Wat wel werkt is gewoon tegen alle regels in de style tag midden op mijn pagina neer te zetten. Ik heb dit met alle mogelijke browsers getest en het werkt gewoon. Maar wat is nu verstandig? Verder zoeken naar een betere (meer standaard conforme) optie, of de style tag gebruiken.

Het werkt, maar het hoort niet te werken. Style elementen horen nu eenmaal in de head en nergens anders. Dat is dus een afweging die je zelf moet maken; in hoeverre vertrouw je op iets dat eigenlijk niet hoort te werken (maar in veel gevallen dat wel doet). Ik zou het zelf niet doen, maar die beslissing is aan jou.

Wat ik dus zoek is de mogelijkheid om inline, liefst via de div tag, styles en style classes aan te maken die wat zeggen over andere elementen. Is dit mogelijk?

Nog een andere mogelijkheid is een soort referentie naar je css stylesheet opnemen, en die via javascript koppelen aan je document, bijvoorbeeld met een iframe. Ook dit blinkt niet uit qua netheid; je bent immers afhankelijk van javascript voor de complete styling van je pagina.

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 26 januari 2005 16:30

Acties:

André

Analytics dude

Ik moet bekennen dat ik in dat soort situaties toch een <style> blok midden in de body pleur, het werkt overal en het staat ook nog wel netjes. Ik weet trouwens niet hoe textbrowsers er mee omgaan.

De manier die mophor noemt kan idd wel eens de beste oplossing zijn.

woensdag 26 januari 2005 16:49

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 26 januari 2005 @ 16:21:
Overigens barst je post van de naamgeving fouten, het is voor de duidelijkheid wel zo handig dat je benamingen goed doet, classes hebben niks met style te maken

Ik ben inderdaad niet zo thuis in de HTML/css syntax & naamgevingen, maar toch... in bv H1.foo { ... } is foo een selector die je met een class name adreseert. Dat classes niks met style te maken hebben lijkt me dan weer onzin van jou kant. Waarom heb je anders class atributes voor alle tags die in body voormogen komen?

, een div is geen tag maar een element (dat aangegeven wordt door een start en een end tag)

Sure, maar je hebt wel degelijk een div tag, en die bedoelde ik dus ook. De div tag staat direct in relatie met het div element wat gecreeert wordt.

en verder kan comment in css niet met "//" maar alleen met "/*..*/", hth

Duh!

Dat was natuurlijk alleen voor de quote hier. // etc staat natuurlijk niet in de echte stylesheet.

edit: pling idee: wat wel eventueel kan is met js in je body een extra link element aan je head hangen en zo verwijzen naar een stylesheet

Mischien een idee ja!

[ Voor 3% gewijzigd door Verwijderd op 26-01-2005 17:10 . Reden: oeps, quote tags dubbel ]

woensdag 26 januari 2005 16:59

Acties:

Verwijderd

classes zijn toevoegingen aan elementnamen:

http://www.rikkertkoppes.com/thoughts/class-and-style
(heb er al eens wat over geschreven)

verder was het niet om je af te zeiken, maar ik moest je bericht een paar keer lezen voordat ik goed doorhad wat er stond, juist gebruik van naamgeving helpt er we bij

woensdag 26 januari 2005 17:09

Acties:

Verwijderd

Topicstarter

Rickets schreef op woensdag 26 januari 2005 @ 16:29:
Dat component is niet zo handig opgezet (understatement ) Is er echt geen ander component wat je kan gebruiken?

Ik denk niet het een understatement is. Vooral MS die nogal sterk naar het 'web widget' model pushed (met ASP.NET), en nu ook Sun (met vooral JSF), en in het verleden al het Struts project met oa Tiles hebben belang bij het encapselen van functionaliteit in een enkel component.

Net zoals je in traditionele (desktop) toolkits een widget universeel aan je scherm toevoegd, wil je dat voor een webpage ook doen. Omdat widgets hun hele eigen look moeten kunnen bepalen, komen ze ook zelf met een style. Om dan de user van de widget makkelijk de style te laten kunnen bepalen is het handig als deze met een eigen stylesheet komen. Via het container / component principe (zie oa swing of motif), kan een widget zelf ook weer andere widgets nesten die weer met eigen stylesheets komen. Als al deze stylesheets van te voren bekend moeten zijn en in de head kenbaar gemaakt moeten worden, dan is dat niet handig; je kunt niet makkelijk vanuit een library een widget op je pagina neer zetten. Je kunt de hele page zien als de toplevel container, als deze nieuwe widgets moet gaan bevatten zou je deze niet hoeven aan passen. Dit geldt nog sterker als deze ene container voor veel pagina's gebruikt wordt, en dan styles zou moeten gaan inladen die maar voor 1 enkele pagina gebruikt worden.

Kortom, de widget zelf zou zijn style moeten bepalen, niet andersom. Een container moeten aanpassen voor de content is eigenlijk not-done. De oplossing zou wel kunnen zijn om het webcomponent niet meer styles te laten selecteren dmv het class atribuut, maar dit zelf voor alle zijn elementen te laten doen. Als je echter veel rules hebt per element (zeg 10) en je element komt veel voor (bv via de TD tag, zeg een keertje of 100), dat zit je met 990 dubbele overbodige rules. Als je dan ook nog meerdere webcomponenten plaats op je page loopt dit aantal snel op, en wordt je er niet blij van.

Dat style in je body werkt is mischien wel te danken aan MS, die er voor zijn webcomponenten veel belang bij heeft.

Jammer dat er toch geen nettere mogelijkheid is.

woensdag 26 januari 2005 17:14

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 26 januari 2005 @ 16:59:
verder was het niet om je af te zeiken, maar ik moest je bericht een paar keer lezen voordat ik goed doorhad wat er stond, juist gebruik van naamgeving helpt er we bij

Weet ik ook wel. Ben zelf drs. informatica en ben dus goed op de hoogte van officiele termen in bv wiskunde en programmeertalen. Erger me er ook aan als mensen daarover praten en niet de goede termen gebruiken. Kwa css weet ik weinig (werk zelden op html niveau) en dus voelde ik al wel aan dat ik de termen een beetje moest gokken. Ik ga maar eens een goed boek over css lezen denk ik.

woensdag 26 januari 2005 17:15

Acties:

Verwijderd

html is geen programmeertaal, veel mensen met een porogrammeer achtergrond (ik heb het idee dat jij dat ook hebt), kijken ooit nogal raar aan tegen html en css (heel vaak heb ik al gezien dat mensen eigenlijk constanten willen kunnen declareren in css)

Raak vooral het doel van html niet kwijt. Het moet werken op een heel breed scala aan ua's

overigens kan ik me best een component voorstellen die als ie gedeclareerd wordt zichzelf ff met een stylesheet aanmeldt bij het head element, dus het lijkt me sterk dat het niet beter kan

woensdag 26 januari 2005 17:48

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 26 januari 2005 @ 17:15:
overigens kan ik me best een component voorstellen die als ie gedeclareerd wordt zichzelf ff met een stylesheet aanmeldt bij het head element, dus het lijkt me sterk dat het niet beter kan

Gedefineerd in dat geval. Over termen gesproken

(om actief aan te melden moet er iets runnen, en dan heb je een concreet object en dus een definitie).

Ik zal zeker even naar deze methode gaan kijken. Ik ben voor het dynamisch toevoegen van dingen met javascript echter veel banger dat het niet altijd en niet overal werkt. Vooral ben ik bang dat je weer dingen krijgt als dat het via javascript zetten niet gaat als de stylesheet bepaalde dingen bevat, terwijl het dan weer wel werkt als je diezelfde sheet meteen in de head zet, etc. Met programmeertalen (assembly, c , java) ben ik altijd gewent dat ik bepaal wat er gebeurt, maar met javascript is dat eigenlijk precies andersom. (maar dat is een beetje offtopic

)

woensdag 26 januari 2005 17:53

Acties:

Verwijderd

1-1 :;

van javascript uitgaan is idd een beetje eng, maar aan de andere kant zal het op de meeste browsers die stylesheets ondersteunen wel werken.

Maar als je het enigszins aan de serverkant kan oplossen zou ik dat zeker doen.

woensdag 26 januari 2005 21:05

Acties:

Verwijderd

Verwijderd schreef op woensdag 26 januari 2005 @ 17:48:
[...]
Vooral ben ik bang dat je weer dingen krijgt als dat het via javascript zetten niet gaat als de stylesheet bepaalde dingen bevat, terwijl het dan weer wel werkt als je diezelfde sheet meteen in de head zet, etc.

Volgens mij hoef je daar niet bang voor te zijn want ik geloof niet dat JavaScript je stylesheet documentje gaat doornemen... Het enige wat je doet (als je het slim aanpakt) is een style-element link-element creëren m.b.v. het DOM en daar een href attribuut aan geven die de locatie van het CSS bestand bevat.

edit:
Bedankt, Anne! Was aan het slapen...

[ Voor 12% gewijzigd door Verwijderd op 27-01-2005 01:26 ]

woensdag 26 januari 2005 21:11

Acties:

Verwijderd

LINK element*

donderdag 27 januari 2005 13:22

Acties:

Verwijderd

Verwijderd schreef op woensdag 26 januari 2005 @ 21:05:
[...]

Volgens mij hoef je daar niet bang voor te zijn want ik geloof niet dat JavaScript je stylesheet documentje gaat doornemen...

Ik zelf zoiets gehad met html wat ik vanuit een javascript variable in een div element wilde zetten. Als de html bepaalde fouten bevatte gebeurde er gewoon nix, maar als ik diezelfde html in een andere div zette (gewoon hard vanuit de server) en dan van die eerste div naar de tweede copieerde via javascript, werkte het wel. Zie [rml][ javascript] content met script aan innerhtml toekennen[/rml]

Het enige wat je doet (als je het slim aanpakt) is een style-element link-element creëren m.b.v. het DOM en daar een href attribuut aan geven die de locatie van het CSS bestand bevat.

Ik meen dat de TS zei dat het CSS bestand als string server side aanwezig was. In dat geval zal een href niet werken.

donderdag 27 januari 2005 13:43

Acties:

Verwijderd

Verwijderd schreef op donderdag 27 januari 2005 @ 13:22:
[...]

Ik zelf zoiets gehad met html wat ik vanuit een javascript variable in een div element wilde zetten. Als de html bepaalde fouten bevatte gebeurde er gewoon nix, maar als ik diezelfde html in een andere div zette (gewoon hard vanuit de server) en dan van die eerste div naar de tweede copieerde via javascript, werkte het wel. Zie [rml][ javascript] content met script aan innerhtml toekennen[/rml]

[...]

Ik meen dat de TS zei dat het CSS bestand als string server side aanwezig was. In dat geval zal een href niet werken.

Ik denk dat het wel verschilt of je HTML in een string zet in JavaScript, of CSS rules. Dat hoop ik tenminste...

Heb het niet getest.

Als het CSS bestand als string server side aanwezig is dan kan je waarschijnlijk dus tóch het beste met de DOM een style-element creëren, een text-node maken die de server-side string als waarde heeft, die aan het style element zetten en dan het style-element tussen je <head> zetten.

Pagina: 1

Reageer