CSS / HTML in gemeinsamer (include) Datei?

[Linuchs]

Moin,

in meinem Projekt habe ich Webseiten nach dem Baukasten-Prinzip. Ich bin dabei, gewisse Bausteine als HTML-Snippets zu hinterlegen, weil die DB-Abfrage und Aufbereitung doch dann und wann 1 sec überchreitet. Meine Schmerzgrenze ist bei 0.2 sec, habe reichlich traffic, überwiegend durch Suchmaschinen. Das stört die ernsthafte Arbeit.

Nun kann man ja <style> überall im Code unterbringen und im Sinne von "objektorientierter" Programmierung gehören die Eigenschaften doch zu den Daten. Andererseits wird hier immer gepredigt, Layout und Inhalt streng zu trennen.

Allerdings wirkt jedes <style> auf das Gesamt-Dokument, auch wenn es erst weiter hinten eingefügt wird.

Wie geht man standard-mäßig mit diesem Problem um?

Linuchs

[Linuchs]

Zusatzfrage:

Da ich meine Seiten (Veranstaltunhgskalender) anbiete, in fremde Seiten per iframe zu übernehmen, kommt der Wunsch auf, den iframe-Inhalt layout-mäßig an die eigene Seite anzupassen.

Eine Idee wäre, dass der parent-Seiteninhaber eine Extra-CSS auf seiner Domain ablegt. Doch wird die zuverlässig von allen Browsern abgeholt?

Da gab/gibt es doch des Verbot des Fremd-gehens. Obwohl, fremde <img> kann man ja auch einbinden.

[Felix Riesterer]

Lieber Linuchs,

Zusatzfrage:

der Seitenbetreiber kann doch die URL für den Frame mit einem Parameter (z.B: ?style=abcd) versehen, der auf Deiner Seite wiederum ein bestimmtes Stylesheet ins HTML schreibt.

Liebe Grüße,

Felix Riesterer.

[Linuchs]

Lieber Felix,

der Seitenbetreiber kann doch die URL für den Frame mit einem Parameter (z.B: ?style=abcd) versehen, der auf Deiner Seite wiederum ein bestimmtes Stylesheet ins HTML schreibt.

Okay, der Seitenbetreiber erstellt "sein" Stylesheet zu "meinen" Daten. Die Daten-Elemente kann ich ja in einer Dokumentation beschreiben.

Doch dann muss er diese CSS-Datei auf meinen Server hochladen. Oder kann "meine" Webseite den Browser eines Dritten überreden, die CSS-Datei vom "seinem" Server zu holen?

Wikipedia:

"Die Same-Origin-Policy (SOP) ist ein Sicherheitskonzept, das clientseitigen Skriptsprachen wie JavaScript und ActionScript, aber auch Cascading Style Sheets untersagt, auf Objekte (zum Beispiel Grafiken) zuzugreifen, die von einer anderen Webseite stammen oder deren Speicherort nicht der Origin entspricht. Sie stellt ein wesentliches Sicherheitselement in allen modernen Browsern und Webanwendungen zum Schutz vor Angriffen dar."

Linuchs

[Kay]

Lieber Felix,

der Seitenbetreiber kann doch die URL für den Frame mit einem Parameter (z.B: ?style=abcd) versehen, der auf Deiner Seite wiederum ein bestimmtes Stylesheet ins HTML schreibt.

Okay, der Seitenbetreiber erstellt "sein" Stylesheet zu "meinen" Daten. Die Daten-Elemente kann ich ja in einer Dokumentation beschreiben.

Doch dann muss er diese CSS-Datei auf meinen Server hochladen. Oder kann "meine" Webseite den Browser eines Dritten überreden, die CSS-Datei vom "seinem" Server zu holen?

Aus zwei verschiedenen Webseiten, eine neue Webseite machen. Von Seite A den Content und von Seite B das Layout nehmen. Sieh dir mal Diazo an.

Xslt-Proxy ist vielleicht auch was für die Suchmaschine. Für den Apachen und PHP gibt es wohl auch etwas.

[Linuchs]

Noch 'ne Frage:

Zum Layout gehört sicher auch die Art, wie man ein Datum schreibt?

11.10.2015 / 2015-10-11 / ...

Wie kann man das mit CSS regeln? Ich kann die Datums-Bestandteile benennen:

<span class=tt>11</span><span class=mm>10</span><span class=jjjj>2015</span>

Doch wie dreht css die Reihenfolge um? Die Punkte oder Striche könnte man ja mit :after hinzufügen.

[Gunnar Bittersmann]

@@Linuchs

Zum Layout gehört sicher auch die Art, wie man ein Datum schreibt?

Das gehört wohl eher zum Inhalt.

11.10.2015 / 2015-10-11 / ...

Wie kann man das mit CSS regeln? Ich kann die Datums-Bestandteile benennen:

Warum willst du das mit CSS tun?

<span class=tt>11</span><span class=mm>10</span><span class=jjjj>2015</span>

Doch wie dreht css die Reihenfolge um?

Ungetestet und unsinnig:

<time datetime="2015-10-11">
  <span class=tt>11</span>
  <span class=mm>10</span>
  <span class=jjjj>2015</span>
</time>

time  { display: inline-flex }
.jjjj { order: 1 }
.mm   { order: 2 }
.tt   { order: 3 }

Die Punkte oder Striche könnte man ja mit :after hinzufügen.

Wie gesagt, das ist nichts, was man mit CSS tun sollte.

LLAP 🖖

[MrMurphy1]

Hallo,

bei Angaben wie Datum oder Zeit solltest du keine Sonderwege gehen. Wenn du deinen Besuchern einen Gefallen tun willst schreib das Datum in der für die Sprache des Inhalts üblichen Schreibweise.

Bei deutschen Webseiten also in der Form 11.10.2015.

Wenn du etwas besseres tun willst schreib das Datum in das time-Element mit dem datetime-Attribut. In dem Attribut wird das Datum (und gegebenenfalls auch die Uhrzeit) in einer vorgegenen Form eindeutig geschrieben. Das sieht dann zum Beispiel so aus

<time datetime="2015-10-11">11.10.2015</time>

Weitere Informationen und Beispiele zum time-Element

https://html.spec.whatwg.org/multipage/semantics.html#the-time-element

und zum datetime-Attribut

https://html.spec.whatwg.org/multipage/semantics.html#attr-time-datetime

Gruss

MrMurphy

[Linuchs]

Hallo,

bei Angaben wie Datum oder Zeit solltest du keine Sonderwege gehen. Wenn du deinen Besuchern einen Gefallen tun willst schreib das Datum in der für die Sprache des Inhalts üblichen Schreibweise.

Ja, PHP kann das machen, weiss ja, welche Sprache verlangt wird. Gehört die Datum-Schreibweise tatsächlich zur Sprache? Alle englisch sprechenden Menschen schreiben es auf dieselbe Art?

Weitere Informationen und Beispiele zum time-Element

https://html.spec.whatwg.org/multipage/semantics.html#the-time-element

Habe ich nicht verstanden. Habe

<time>2015-10-11 20:54</time>

in meine Webseite eingebaut und vom "deutschen" Firefox zeigen lassen. Das bleibt genau so stehen und wird nicht zu 11.10.2015

Wohin gehört denn dieser Code-Schnippsel

interface HTMLTimeElement : HTMLElement {
  attribute DOMString dateTime;
};

Linuchs

[Der Martin]

Hi,

Gehört die Datum-Schreibweise tatsächlich zur Sprache?

genaugenommen nein, sie gehört eher zu einer bestimmten Kombination aus Region und Sprache. Zum Beispiel schreiben die Briten (en-GB) das Datum anders als Amerikaner (en-US), obwohl sie beide Englisch sprechen - aber halt verschiedene Färbungen von Englisch, ebenso wie Österreichisch (de-AT) eine andere Variante von Deutsch als das in Deutschland gesprochene ist (de-DE).

Alle englisch sprechenden Menschen schreiben es auf dieselbe Art?

Not at all.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

ebenso wie Österreichisch (de-AT) eine andere Variante von Deutsch als das in Deutschland gesprochene ist (de-DE).

?? Inwiefern?

LLAP 🖖

[Der Martin]

Hallo,

ebenso wie Österreichisch (de-AT) eine andere Variante von Deutsch als das in Deutschland gesprochene ist (de-DE).

?? Inwiefern?

zum Beispiel sagt in Deutschland wohl kaum jemand "Paradeiser", sondern "Tomate". Und auch dass ein "Dopfn" (geschrieben: Topfen) einfach nur Quark ist, ist in DE nicht allgemein bekannt. Ich bin mir sicher, es gibt noch eine Menge weitere markante Begriffe, die für das Österreichische charakteristisch sind, aber mir fallen spontan keine mehr ein.

Den Dialekt wollen wir mal gar nicht erst erwähnen, sonst müsste man auch Schwäbisch, Bayrisch, Pfälzisch, Sächsisch etc. als eigene ISO-Sprachvarianten einführen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Hallo,

ebenso wie Österreichisch (de-AT) eine andere Variante von Deutsch als das in Deutschland gesprochene ist (de-DE).

?? Inwiefern?

zum Beispiel sagt in Deutschland wohl kaum jemand "Paradeiser", sondern "Tomate".

Ja, und? Innerhalb Deutschlands sagen manche „Möhre“ zur Mohrrübe, manche sogar „Karotte“.

Ich bin mir sicher, es gibt noch eine Menge weitere markante Begriffe, die für das Österreichische charakteristisch sind, aber mir fallen spontan keine mehr ein.

Karfiol – Blumenkohl (polnisch: kalafior)
Schlagobers – Schlagsahne

Den Dialekt wollen wir mal gar nicht erst erwähnen,

Österreichisch ist auch nur ein Dialekt des Deutschen. Und wie ich schon mal sagte, ist der näher an süddeutschen Dialekten dran als es norddeutsche sind, die innerhalb von de-DE nicht unterschieden werden.

sonst müsste man auch Schwäbisch, Bayrisch, Pfälzisch, Sächsisch etc. als eigene ISO-Sprachvarianten einführen.

✔︎

swg – Schwäbisch
bar – Bairische Dialekte
pfl – Pfälzisch
gsw – Alemannisch
ksh – Kölsch
nds – Niederdeutsch
⋮

(IANA-Register für Sprachkürzel)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Karfiol – Blumenkohl (polnisch: kalafior)

Hach, ich wusste doch, dass da noch was war, was auf Polnisch so heißt wie bei den Ösis:

Powidl – Pflaumenmus (polnisch: powidła)

LLAP 🖖

[woodfighter]

Tach,

Österreichisch ist auch nur ein Dialekt des Deutschen.

eine Varietät (das ist zwar nicht umunstritten, aber soweit ich weiß momentan die verbreiteste Meinung unter den Linguisten), bundesdeutsches Hochdeutsch ist ebenso eine; Dialekte sind etwas anderes und davon gibt es dann auch in Österreich mehr als einen einen.

mfg
Woodfighter

[Matthias Apsel]

Hallo Linuchs,

Allerdings wirkt jedes <style> auf das Gesamt-Dokument, auch wenn es erst weiter hinten eingefügt wird.

Wie geht man standard-mäßig mit diesem Problem um?

Es gibt style-Elemente mit eingeschränktem Gültigkeitsbereich.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Es gibt style-Elemente mit eingeschränktem Gültigkeitsbereich.

Sachen gibt’s, die gibt’s gar nicht.

LLAP 🖖

[JürgenB]

Hallo,

zu html-Include fallen mir drei Wege ein:

• import, wenn es dann irgendwann mal ordentlich unterstützt wird
• Server Site Include, wenn es von deinem Server unterstützt wird
• Javascript / Ajax, wenn Besucher ohne Javascript verprellt werden dürfen

Gruß Jürgen

[Linuchs]

Hallo Jürgen,

zu html-Include fallen mir drei Wege ein:

• import, wenn es dann irgendwann mal ordentlich unterstützt wird
• Server Site Include, wenn es von deinem Server unterstützt wird
• Javascript / Ajax, wenn Besucher ohne Javascript verprellt werden dürfen

Ich denke an einen vierten. PHP muss prüfen, ob das html-include Nr. n vorhanden ist. Wenn nicht, muss es aus der Datenbank erzeugt werden.

Wenn ja, wird es eingebunden ohne DB-Zugriff.

Aktionen, die das html-include Nr. n verändern würden, löschen es einfach.

Beispiel: Die Neueingabe eines Events löscht das html-include "letzte 10 Events".

Linuchs

[Kay]

...Meine Schmerzgrenze ist bei 0.2 sec, habe reichlich traffic, überwiegend durch Suchmaschinen. Das stört die ernsthafte Arbeit.

Bandbreite der erwüschten Suchmaschinen begrenzen und alles unerwünschte blockieren. Das bringt eine Menge. Und den Suchmaschinen kann man ja auch mitteilen in welchem Intervall sie updaten sollen.

[Felix Riesterer]

Lieber Linuchs,

in meinem Projekt habe ich Webseiten nach dem Baukasten-Prinzip.

also sollte es ein leichtes sein, jedem Element des Baukastens einen ID-Namen zuzuweisen. Auf Dokumentseite kann dieser Name dann im id-Attribut eines <section> oder <article> stehen, wodurch die Darstellung dieses Bauteils gesteuert wird.

Oder was war Dein Problem?

Ich bin dabei, gewisse Bausteine als HTML-Snippets zu hinterlegen, weil [$Grund]

Na, also! Jedes Snippet ist ein Element mit passender ID. Mittels Nachfahrenselektor kannst Du die Bestandteile des Snippets wunderbar gestalten.

Nun kann man ja <style> überall im Code unterbringen und im Sinne von "objektorientierter" Programmierung gehören die Eigenschaften doch zu den Daten. Andererseits wird hier immer gepredigt, Layout und Inhalt streng zu trennen.

Ich lese da keinen Widerspruch. Du?

Allerdings wirkt jedes <style> auf das Gesamt-Dokument, auch wenn es erst weiter hinten eingefügt wird.

Durch die jeweiligen IDs im Dokument wäre das kein Problem, auch wenn es mittlerweile den Versuch gibt, lokal geltende Styles zu definieren (in meinen Augen nicht sinnvoll). Auch für das Caching und die Anzahl der Requests ist eine einzige Style-Resource günstiger, als viele Teildateien.

Wie geht man standard-mäßig mit diesem Problem um?

s.o. Vielleicht magst Du mal einen Blick in die CSS-Datei unserer Schulwebsite schauen? Da siehst Du dieses Prinzip umgesetzt.

Liebe Grüße,

Felix Riesterer.

[Linuchs]

Lieber Felix,

also sollte es ein leichtes sein, jedem Element des Baukastens einen ID-Namen zuzuweisen. Auf Dokumentseite kann dieser Name dann im id-Attribut eines <section> oder <article> stehen, wodurch die Darstellung dieses Bauteils gesteuert wird.

Ja, macht Sinn.

s.o. Vielleicht magst Du mal einen Blick in die CSS-Datei unserer Schulwebsite schauen? Da siehst Du dieses Prinzip umgesetzt.

Uups ... 5310 Zeilen CSS. Für alle möglichen Bausteine, auch wenn sie im Dokument nicht vorkommen? So ähnlich hatte ich es früher auch gemacht und im Lauf der Jahre gemerkt, dass nur noch die Hälfte gebraucht wird. Aber welche Hälfte?

Ich denke da eher, den Baustein-Dateien "ihr" stylesheet mitzugeben, etwa so:

<section id=kommentar>
<style type="text/css">
#kommentar p { font-style:italic }
#kommentar b { color:#f00; }
</style>
<h3>Leser-Kommentare</h3>
<p>Tolle Idee, die <b>stylesheets</b> in den html-Bausteinen mitzuführen.</p>
</section><!-- id=kommentar -->

Schön, wenn es da eine verkürzte CSS-Schreibweise gäbe wie

@in #kommentar {
  p { font-style:italic }
  b { color:#f00; }
}

Gruß, Linuchs

[Felix Riesterer]

Lieber Linuchs,

Uups ... 5310 Zeilen CSS. Für alle möglichen Bausteine, auch wenn sie im Dokument nicht vorkommen?

diese +5k Zeilen sind eigentlich die Summe von Einzeldateien, die vom CMS zu einer Datei zusammengeführt werden, damit der Browser keine 25 Requests wegen @import-Regeln durchführen muss. Gut, den Teil für den Admin-Bereich könnte man auch als separate CSS-Datei führen, aber wozu? Jedes andere Plugin der Seite liefert ja auch seinen eigenen Anteil an der CSS-Datei. So steht alles in einer Datei und diese Datei wird genau einmal benötigt, danach ist sie im Cache.

So ähnlich hatte ich es früher auch gemacht und im Lauf der Jahre gemerkt, dass nur noch die Hälfte gebraucht wird. Aber welche Hälfte?

Wieso Hälfte? Wenn Du in Deinem CSS Teile hast, die nicht gebraucht werden, wozu stehen sie dann drin?

Ich denke da eher, den Baustein-Dateien "ihr" stylesheet mitzugeben, etwa so:

<section id=kommentar>
<style type="text/css">
#kommentar p { font-style:italic }
#kommentar b { color:#f00; }
</style>
<h3>Leser-Kommentare</h3>
<p>Tolle Idee, die <b>stylesheets</b> in den html-Bausteinen mitzuführen.</p>
</section><!-- id=kommentar -->

Ja, die Sache mit den scoped stylesheets... Schmeckt mir nicht.

Schön, wenn es da eine verkürzte CSS-Schreibweise gäbe wie

@in #kommentar {
  p { font-style:italic }
  b { color:#f00; }
}

Was hältst Du denn von dieser:

#kommentar p { font-style:italic }
#kommentar b { color:#f00; }

Liebe Grüße,

Felix Riesterer.

[Linuchs]

Lieber Felix,

Wieso Hälfte? Wenn Du in Deinem CSS Teile hast, die nicht gebraucht werden, wozu stehen sie dann drin?

Mein Projekt besteht seit 2008 und hat mehr als hundert .htm Templates. Ich weiss nicht genau, welche Einträge gebraucht werden.

Bei Stücklisten gibt es einen Verwendungsnachweis. Da bekomme ich für eine bestimmte Schraube eine Liste der Baugruppen und Produkte, in der sie verbaut ist.

Wäre toll, auch für CSS-Zeilen gezeigt zu bekommen, in welchen .htm Dateien sie verwendet werden. Gibt's sowas?

Aber meine basis.css (463 Zeilen) und farben.css (70 Zeilen), die ich überall einbinde, sind doch recht moderat.

Was hältst Du denn von dieser (verkürzte CSS-Schreibweise):

#kommentar p { font-style:italic }
#kommentar b { color:#f00; }

So mache ich es ja, ist doch nicht verkürzt. Verkürzt ist sowas

@print {
  h1 {...}
  p {...}
}
td:nth-of-type(2, 5, 15) {
  text-align: right;
}

anstatt

@print h1 {...}
@print p {...}
td:nth-of-type(2),
td:nth-of-type(5),
td:nth-of-type(15) {
  text-align: right;
}

Gruß, Linuchs

[Felix Riesterer]

Lieber Linuchs,

Wäre toll, auch für CSS-Zeilen gezeigt zu bekommen, in welchen .htm Dateien sie verwendet werden. Gibt's sowas?

dass ich kein Tool dafür kenne, muss nicht heißen, dass es noch keines gibt.

So mache ich es ja, ist doch nicht verkürzt. Verkürzt ist sowas

@print {
  h1 {...}
  p {...}
}
td:nth-of-type(2, 5, 15) {
  text-align: right;
}

Für solche Dinge (und sogar Variablennamen für Werte) benötigst Du einen CSS-Präprozessor wie z.B. Sass oder Stylus.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Für solche Dinge (und sogar Variablennamen für Werte) benötigst Du einen CSS-Präprozessor

CSS-Variablen demnächst auch ohne CSS-Präprozessor.^[1] Im Firefox heute schon.

LLAP 🖖

---

1. Oder CSS-Postprozessor. Oder CSS-Prozessor. ↩︎