Stylesheet auf div "eingrenzen"

[Goodbuys]

Hallo,

Hab mal eine kurze Frage.
Suche eine einfache Möglichkeit ein Stylesheet auf einen Bereich "einzugrenzen", will heißen, das nur in einem beispielsweise divs die css Klassen dieses sheets genutzt werden, und auf dem rest der Seite nicht.

Weil: Ein user hat die Möglichkeit seine eigenen css klassen zu definieren in einem externen oder hochgeladenem stylesheet. Nun soll das aber nicht die "normalen" Klassen der Seite beeinträchtigen.

Wäre möglich wenn der Inhalt des Kunden über ein Iframe z.B eingebunden wird, soll aber nicht so sein.

Ich nutze derzeit einfach nur die Reihenfolge wie die sheets im Head Bereich eingelesen werden, doch das ist mir irgendwie zu unsicher, und es kommt manchmal zu unerwünschten Resultaten.

Danke

 

[Timo Kühne]

Da gibt es natürlich mehrere Herangehensweisen. Entweder du definierst im HTML Dokument deine Klassen, oder du machst ein seperates Stylesheet, aber wenn es um Code geht ist es immer schwierig heraus zu lesen was wirklich gemeint ist. Stelle mir einen FA in Facebook, dann helfe ich dir. Du kannst mir dann den Code zeigen. Ist wahrscheinlich ne Sache von ein paar Minuten. Oder du schaust dir meine 12 Lektion meines HTML und CSS Video Trainings an. http://www.geld--verdienen-im-internet.de/....html#lektion12

Viele Grüße Timo Kühne - Internet Marketer aus Leidenschaft

 

[chricke]

je nachdem wie du das einbindest kannst du das auch über die "pfade" der elemente regeln.
sagen wir mal du machst in der seite ein

<div class="usercontent">

dann kannst du alle styles der nutzer nur darauf beziehen wenn du diese entsprechen in der hierarchie einsortierst:

div.usercontent p {
...
}

div.usercontent div {
...
}

das würde aber heißen das du die styles der user wahrscheinlich umschreiben müsstest(?)

 

[Peter Schneider]

Mal ein Dummer Vorschlag:

Wenn Du im Quelltext zuerst ein Haupt-CSS angibst,

<link rel="stylesheet" type="text/css" href="haupt.css">

Und irgendwann danach ein User-Spezifisches CSS (mittels Javascript oder PHP)
<link rel="stylesheet" type="text/css" href="user-xyz.css">

Dann kann das User-spezifische CSS ja auch Werte aus dem Haupt-CSS überschreiben.

Das heisst: die ganze Diskussion über nutzerspezifische Klassen und weiss ich nicht was könnte man eventuell ersparen... Wenn die Herangehensweise halt geändert wird.

 

[chricke]

damit wäre es aber möglich ALLE styles der seite zu überschreiben - und das wollte er ja gerade nicht (wenn ich das richtig verstanden habe).

 

[Goodbuys]

Danke.

@Timo, danke, aber ich brauche keine css Grundlagen.
@chricke, Die styles, können nicht umgeschrieben /verändert werden,

@Peter So sieht das ganze momentan auch aus. Zuerst wird das Haupt css der Seite eingebunden, danach das userspezifische.
--> Hat zur Folge das das zweit eingebundene die Klassen des ersten eigentlich nicht überschreiben sollte, und die Ausgabe bei gleichen Werten immer das des ersten sein sollte. Das scheint mir aber nicht 100% zu funktionieren.
(Warum (mittels Javascript oder PHP) einbinden ?)

Die Stylesheets des Users können nicht bearbeitet werden. Der Nutzer kann Seine Datei hochladen, oder eine Datei verwenden die er sowieso irgendwo auf seinem Server hat, mittels url Angabe.

Beide werden als <link rel="stylesheet" type="text/css" href="XXX.css"> im html head eingebunden.

Aber eben, das das Nutzers soll Nur "wirksam" in einem bestimmten Bereich sein z.b ein div

 

[Wasi]

QUOTE (chricke @ Do 7.07.2011, 12:28) das würde aber heißen das du die styles der user wahrscheinlich umschreiben müsstest(?)

Was man auch durchaus automatisieren kann. Wird eine CSS-Datei hochgeladen, laesst du ein Script drueber laufen, dass dir die gewuenschten Aenderungen einbaut, dann speicherst es auf dem Server. Ein Regex Replacement reicht da voellig aus. Eine CSS Kommentar ala 'div only' waer natuerlich von Vorteil. Doch ich geh mal davon aus, dass es sowas in der Richtung nicht gibt. Die serverseitige Manipulation der CSSes ist daher ne doch recht einfache Variante (sobald du den richtigen Regex dafuer zusammengestellt hast).

 

[Goodbuys]

QUOTE (Wasi @ Fr 8.07.2011, 03:50)
QUOTE (chricke @ Do 7.07.2011, 12:28) das würde aber heißen das du die styles der user wahrscheinlich umschreiben müsstest(?)

Was man auch durchaus automatisieren kann. Wird eine CSS-Datei hochgeladen, laesst du ein Script drueber laufen, dass dir die gewuenschten Aenderungen einbaut, dann speicherst es auf dem Server. Ein Regex Replacement reicht da voellig aus. Eine CSS Kommentar ala 'div only' waer natuerlich von Vorteil. Doch ich geh mal davon aus, dass es sowas in der Richtung nicht gibt. Die serverseitige Manipulation der CSSes ist daher ne doch recht einfache Variante (sobald du den richtigen Regex dafuer zusammengestellt hast).

An so was hab ich auch schon gedacht. Wäre aber nur ein 50% Lösung, da wenn lediglich eine Url zu einer "nicht antastbaren CSS Datei" auf einem anderen Server vorliegt, ist es nicht möglich diese zu manipulieren.

Gibt`s nicht etwas Javascript mässiges dass das ganze so wie beschrieben bewerkstelligen könnte ?

Habe lange gegoogelt, finde aber wirklich gar nix in der Richtung...

 

[chricke]

Meiner Meinung nach hast du in den von dir beschriebenen Szenario gar keine andere Wahl als die CSS-Datei vom User umzuschreiben.

Dabei ist allerdings nicht gesagt das der User das auch mitbekommen muß - wenn du dem User die Möglichkeit gibst die CSS-Datei über ein Webformular hoch- und runterzuladen kannst du im Hintergrund beliebig mit den Daten aus der Datei (nicht unbedingt mit der Datei selber) arbeiten und ihm ohne Probleme die Möglichkeit geben "seine" Datei auch wieder im Ursprungsformat herunter zu laden.

So kann der User beliebig an seinem CSS arbeiten und du brauchst dir keine Gedanken darüber machen das er dir auf deiner Seite was überschreibt.

Hoffe ich hab verständlich rüber gebracht was ich meine ;-)

 

[wurzel]

binde doch erst das user-stylesheet ein (falls vorhanden) ... danach das haupt-stylesheet, was den erlaubten bereich sinnvollerweise nicht überschreibt ... ist kein user-stylesheet vorhanden, lädtst du ein eigenes stylesheet nach, welches den unbehandelten teil formatiert.

 

[Goodbuys]

QUOTE (chricke @ Fr 8.07.2011, 22:06) ..kannst du im Hintergrund beliebig mit den Daten aus der Datei (nicht unbedingt mit der Datei selber) arbeiten und ihm ohne Probleme die Möglichkeit geben "seine" Datei auch wieder im Ursprungsformat herunter zu laden.

Das ist ein guter Ansatz, so ist mir das noch gar nicht in den Sinn gekommen, und dann lassen sich die Daten aus einer Externen Datei auch auslesen und alles in z.b eine Temporäre Datei packen und dabei alle Klassen umschreiben auf ein einziges div. So bleiben die auch Ursprungs Dateien unverändert.

Mal sehen was sich machen lässt.

Für weiter Vorschläge immer offen.

Danke

 

[Peter Schneider]

Ich will einfach betonen, dass ich persönlich es als relativ umständlich finde, User-Klassen "on-the-fly" ins Dokument zu schreiben. Das würde dann bedeuten, für jeden Nutzer eigene Dokumente zu generieren.
Ich wollte eigentlich nur DAGEGEN anschreiben.

Wenn im Dokument Klassen sinnvoll und dokumentiert STATISCH gesetzt sind, dann ist die Generierung des Dokumentes doch vereinfacht. Ich denke auch, dass Nutzer eventuell mit zuvielen Optionen (wie Wahl des Names einer Klasse) eventuell überfordert sind. Nicht zu sprechen davon, dass Du Deine Aufgaben verkomplizierst und die Generierung des Dokumentes verzögerst - eventuell sogar unnötig Last erzeugst, für eine "Profi-Funktion", die dann nur 0.5% der Nutzer beanspruchen.

Als Beipiel einer vereinfachten Herangehensweise möchte ich einmal den CSS-Editor beim Amazon Astore anfügen.

-> Wie Du diese User-generierten CSS-Files einbindest ist ja dann Dir überlassen. Ich würde z.B. ein Cookie setzen, mit dem Namen der User-CSS, dieses Cookie mittels JS abfragen und die User-CSS dann mittels JS in das Dokument reinladen.