Vorlage:BewerteteSeite/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Vorlage:BewerteteSeite.

CSS

.featured-icon-after-Exzellent::after,
.featured-icon-after-Informativ::after,
.featured-icon-after-Lesenswert::after,
.featured-icon-before-Exzellent::before,
.featured-icon-before-Informativ::before,
.featured-icon-before-Lesenswert::before {
   background-repeat: no-repeat;
   white-space: nowrap;
}
.featured-icon-after-Exzellent::after,
.featured-icon-after-Informativ::after,
.featured-icon-after-Lesenswert::after {
   background-position: 5px 2px;
   content: "\A0\A0\A0\A0\A0\A0";
}
.featured-icon-before-Exzellent::before,
.featured-icon-before-Informativ::before,
.featured-icon-before-Lesenswert::before {
   background-position: 0 2px;
   content: "\A0\A0\A0\A0\A0";
}
.featured-icon-after-Exzellent::after,
.featured-icon-before-Exzellent::before {
   background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Qsicon_Exzellent.svg/14px-Qsicon_Exzellent.svg.png");
}
.featured-icon-after-Informativ::after,
.featured-icon-before-Informativ::before {
   background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Qsicon_informativ.svg/14px-Qsicon_informativ.svg.png");
}
.featured-icon-after-Lesenswert::after,
.featured-icon-before-Lesenswert::before {
   background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Qsicon_lesenswert.svg/14px-Qsicon_lesenswert.svg.png");
}

Kopiervorlage

<templatestyles src="BewerteteSeite/styles.css" />

---

Funktion

An Wikilinks mit „Bewerteten Seiten“ soll ein Icon in einer Weise angeschlossen (oder vorangestellt) werden, dass ein Zeilenumbruch zwischen Wikilink und Icon zuverlässig verhindert wird. Dabei soll jedoch vermieden werden, dass auf Ebene des generierten HTML-Dokuments ein Wiki-Parser oder nachgeschaltetes HTML-Werkzeug in die Struktur der Elemente eingreifen kann.

Durch Realisierung als content: wird außerdem die Aufnahme der Icons in eine C&P-Selektion unterbunden.

Die Umsetzung über CSS-Hintergrundbilder bewirkt nebenbei auch eine Barrierefreiheit, weil dadurch die Existenz der für blinde Benutzer redundanten Icons nicht im Dokument erscheint.

Zukünftiger Ausbau

Wenn die 16px robust bleiben und die zugehörige Vorlage massiv genutzt wird, sollte die HTTP-URL durch ein data:-Schema ersetzt werden.