Willkommen Gast. Bitte anmelden oder registrieren.

Autor Thema: CSS-Geltungsbereich - wie kann ich das einfach lösen?  (Gelesen 2851 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
CSS-Geltungsbereich - wie kann ich das einfach lösen?
« am: 05. März 2012, 19:26:11 »
Hallo,

ich arbeite an einem kleinen Content-PlugIn, bei dem ich aktuell nicht wirklich 'charmant' weiter komme:
Das PlugIn soll zum eine csv-Datei einlesen und als html-Tabelle ausgeben und zum anderen (mit anderem Parameter aufgerufen) 3 Werte in eine Schablone einsetzen und diese ausgeben (Teaser für Simple-Galery). So muss man letztlich nur ein paar Parameter füllen und bekommt immer das gewünschte Layout.

Damit wären wir beim Thema: Layout.

Ich habe das jetzt so programmiert, dass man auch eine css mitgeben (den Dateinamen, der Inhalt wird in das HTML injected) kann und dabei natürlich nicht beachtet, dass die css-Formatierungen global wirken, wenn ich über 'class' arbeite.
Wenn nun mehrere Ersetzungen durch das Plugin stattfinden, dann laufe ich ja Gefahr, dass unterschiedlich gedachte Formatierungen sich gegenseitig überschreiben/erweitern.

Kann man das mit css einfach lösen?
Zur Erklärung mal ein HTML-Schnipsel, der nicht funktioniert, damit wird vielleicht klar, was ich meine, Text-1 sollte blau und Text-2 rot sein.
Der Code wäre von mehrfachen Aufrufen des Plugins generiert (2x 'schreibeText' jeweils 1x mit Parameter A und B)
<html>
<div>
<style type="text/css">
p {color:blue;}
</style>
<p>Text-1</p>
</div>
<div>
<style type="text/css">
p {color:red;}
</style>
<p>Text-2</p>
</div>
</html>

Hoffentlich ist die Frage verständlich, meine Pizza wird kalt.....

THX

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #1 am: 05. März 2012, 19:50:50 »
Hallo,

so als spontane Ansätze: du könntest deinen "p" auch eine eindeutige ID geben (irgend was durchnummerieren) und das dann in der CSS ansprechen, oder du nutzt Inline Styles.

Um genauer zu werden, müsste man evtl. mal den Code des Plugins sehen.

PS: Wenn du CSS nutzt, solltest du diese eher (= ist sauberer) mit:

JFactory::getDocument()->addStyleDeclaration($css);
einfügen.
Joomla! ist auch nur ein Mensch...

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #2 am: 05. März 2012, 22:00:37 »
Danke für die Antwort.
Inline Styles gehen nicht ganz so einfach, weil ich die css aus einer normalen css-Datei auslesen wollte.
An die Variante mit IDs habe ich bei der Pizza auch schon gedacht. Allerdings habe ich ja mehrere verschiedene Tags zu bedienen, mit einem Div drum herum, das eine ID bekommt sollte das aber ja auch gehen. Dann müßte ich vorm Injecten nur das css anpassen (mit einer generierte ID).

Eine API-Methode hatte ich auch entdeckt (ist das das alte Verfahren?):
JHTML::stylesheet('csv.css', dirname(__FILE__));Eine solche Variante hatte ich aber erstmal verworfen, da ich ja gehofft hatte, die styles auch (ohne inline) nicht global einbinden zu können. Zumal ich mir nicht sicher war, was passiert, wenn das mehrfach eingebunden wird.

Das würde dann diesem Code entsprechen (Style wird aus css-Datei ausgelesen und mit generierte ID gesetzt):
<html>
<style type="text/css">
#blau p {color:blue;}
#rot p {color:red;}
</style>
<div id="blau">
<p>Text-1</p>
</div>
<div id="rot">
<p>Text-2</p>
</div>
</html>

1) Ein deklarieren einer css-Klasse nur im 'Namensraum' eines Containers und seiner Kinder geht als nicht? Ausser vielleicht mit inline-Styles für jedes einzelne Element?
2) Gibt's noch andere Ideen?
3) Was ist der Vorteil beim Benutzen der API-Methode gegenüber dem simplen Ausgeben wie im Beispiel?
4) Wo unterscheiden die beiden Methoden sich?

Joomla-Hilfe

  • Oberwetterfrosch (Mod)
  • Beiträge: 155
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #3 am: 06. März 2012, 00:29:11 »
1) Ein deklarieren einer css-Klasse nur im 'Namensraum' eines Containers und seiner Kinder geht als nicht? Ausser vielleicht mit inline-Styles für jedes einzelne Element?
Doch, ähnlich wie bembelimen vorgeschlagen hat: Pack einen weiteren Container mit einer eindeutigen Kennung (am besten id="plg_dein-plugin_wrapper" oder so etwas) um alle Elemente, die du gestalten willst. Dann kannst du mit #plg_dein-plugin_wrapper #blau jedes Element einzeln ansprechen, ohne dabei Elemente außerhalb deines Plugins zu treffen.

Denk dabei daran, daß Ids nur einmal pro Seite vorkommen dürfen. Wenn du mehrere solcher Container erzeugen mußt, numerier sie durch. Dasselbe gilt für die eingeschlossenen Container.

Wenn die Struktur mehrfach pro Seite vorkommen kann und immer gleich aussehen soll, nimm Klassen. Die kannst du beliebig oft verwenden. Außerdem kannst du einem Element beliebig viele Klassen geben, die du im CSS jeweils einzeln gestalten kannst.

<div class="rand blau fett gross"formatierst du im CSS:
#plg_dein-plugin_wrapper .rand {border-style:solid;border-width:2px;}
#plg_dein-plugin_wrapper .blau {color:blue;border-color:blue;}
#plg_dein-plugin_wrapper .fett {font-weight:bold;}
#plg_dein-plugin_wrapper .gross {font-size: 1.8em;}

Mit entsprechenden Klassen kannst du ohne Probleme mit einem statischen CSS arbeiten, das du auslagern kannst.

Zitat
3) Was ist der Vorteil beim Benutzen der API-Methode gegenüber dem simplen Ausgeben wie im Beispiel?
Die API erzeugt validen Code. Stylesheets gehören in den Head, sie dürfen nicht im Body stehen. Dein obiger Code macht jede betroffene Seite invalide.

Dietmar

Die Realität ist eine Halluzination, die durch akuten Alkoholmangel hervorgerufen wird.

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #4 am: 06. März 2012, 01:20:43 »
Zusätzlich sollte:

JHtml::stylesheet($param1, $param2)
eher zu

JHtml::_('stylesheet', $param1, $param2)
werden.

Wichtig ist aber auch, die Struktur nicht kaputt zu machen (durch falsche <html>-Tags z.B.), immer hier nachprüfbar.
Ansonsten nutze wie gesagt Klassen- oder ID-Selektoren (bzw. die erwähnten Inline-Styles), so wie du es geplant hast, funktioniert es nicht.
Joomla! ist auch nur ein Mensch...

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #5 am: 06. März 2012, 11:18:56 »
Es ist immer so eine Gradwanderung, wieviele Infos man in eine Problembeschreibung packt, zu wenig ist immer schlecht, zu viel lenkt ab und führt oft zu seeeehr langen Texten, die dann nicht mehr korrekt gelesen werden.

Aber wen es interessiert, für den habe ich hier noch eine Beschreibung, warum sich die Problematik so stellt:
- Mein Content-Plugin tritt immer dann in Aktion, wenn im Content etwas wie {pluginName type=xyz | ...} auftaucht. Das kann innerhalb eines Content-Items mehrfach sein und natürlich können auch mehrere Content-Items auf einer Seite diese Tags benutzen.
- Ich sehe im Plugin bsw. einen 'type' 'csv' vor, bei dem eine CSV-Datei und eine CSS-Datei mitgegeben werden können:
{pluginName type=csv | datei=daten.csv | css=vierspaltig.css}
- Jeder Aufruf wird einzelnd abgearbeitet und im Moment habe ich für die generierte Tabelle für alle Elemente fix die Klasse 'xyz' vergeben, die demnach in der css definiert werden muss und damit einen Default überschreibt.
- Meine Hoffnung war, dass ich den generierten Code so belassen kann und den Geltungsbereich der css auf die aktuell durch das Plugin generierte Tabelle beschränken kann.
- Fehler 1 war, das mit den in den Body eingefügten style-Tags zu probieren: Das der Browser das macht, heisst nicht, dass das auch konform ist.
- Innere Styles kann ich nicht so gut verarbeiten, weil ich die aus der CSS-Datei auslesen und dann in jedes Element schreiben müßte, die Logik möchte ich nicht programmieren.

Die Idee mit IDs zu arbeiten hatte ich dann ja auch schon und sie wurde hier ja auch bestätigt. Ich muss dann nun also wohl eine eindeutige ID ermitteln, das css auslesen und auch dort eine Ersetzung vornehmen (die dortige allgemeine ID/Klasse durch meine aktuell generierte ID ersetzen). Die ID wird dann an ein umschliessendes Div gehängt.
Für mehrfache Aufrufe innerhalb eines Content-Items kann ich einen eigenen Zähler benutzen, wenn ich diesen dann nur mit der Item-ID von Joomla ergänze, dann sollte sie auf jeden Fall eindeutig sein. An die Item-ID sollte man ja per API kommen können, das prüfe ich nachher.

Ich denke, dass ich so vorgehen kann. Ich wollte nur gern ein paar zusätzliche Infos geben, die dann vielleicht erklären, warum mir vielen vom Prinzip her klar war und ich trotzdem fragen wollte und warum einige Vorschläge dann halt doch nicht halfen.

Thx.

PS: Eigentlich hoffe ich, das Plugin so weit allgemeingültig und einfach gestalten zu können, dass ich es auch der Allgemeinheit anbieten kann.

sybrek

  • Bestätigter Nutzer
  • Beiträge: 25
Antw: CSS-Geltungsbereich - wie kann ich das einfach lösen?
« Antwort #6 am: 06. März 2012, 13:58:06 »
Allgemeiner Hinweis in Sachen Media (CSS, JS, etc.):

Da wir ja bestrebt sind alls Media-Files in den Ordner "media" zu packen, würde ich immer relativ arbeiten, da somit auch Template-Overrides der Dateien möglich sind:

JHtml::stylesheet('plg_foobar/foobar.css', false, true, false);

Hier wird erst in templates/$template/css/plg_foobar/foobar.css nachgesehen und dann im media folder: media/plg_foobar/css/foobar.css (eigentlich werden noch mehr möglichkeiten durchgespielt, aber das sollte reichen)