Hulp: Sjabloonstijlen
 |
Let op: Als u deze pagina bewerkt, gaat u akkoord met het vrijgeven van uw bijdragen onder de CC0. Zie Helppagina’s Publiek Domein voor meer informatie. | |
TemplateStyles maakt complexe gedrags- en esthetische vormgeving van sjablonen mogelijk door te verwijzen naar externe CSS-bestanden die zelf wikipagina's zijn. Alle automatisch bevestigde gebruikers kunnen deze CSS-bestanden standaard aanmaken en wijzigen. Er is dus geen tussenkomst nodig van iemand met de bevoegdheden van een interfacebeheerder.
Hoe werkt het?
Redacteuren kunnen de code <templatestyles src="[willekeurige pagina]" /> aan een pagina toevoegen. De inhoud van de pagina waarnaar wordt verwezen, wordt verwerkt als CSS, opgeschoond en geladen op pagina's waarop de tag <templatestyles> wordt gebruikt (hetzij rechtstreeks, hetzij via het invoegen van een sjabloon).
De [willekeurige pagina] moet van het inhoudsmodel sanitized-css (Opgeschoonde CSS) zijn. Dat is de standaardinstelling voor subpagina's in de namespace Template waarvan de titels met .css eindigen.
Het is doorgaans aan te bevelen de stijlen voor Template:Foo op te slaan in een subpagina van het sjabloon waarop ze het meest van invloed zijn, zoals Template:Foo/styles.css.
Als er voor de [willekeurige pagina] geen voorvoegsel bij de namespace wordt opgegeven, dan wordt van de namespace Template uitgegaan. Zo wordt met de code <templatestyles src="Foo/styles.css" /> bijvoorbeeld het bestand Template:Foo/styles.css geladen.
De tag <templatestyles> moet vóór de opgemaakte inhoud worden geplaatst, liefst bovenaan het sjabloon of zo dicht mogelijk daarbij. Anders kan het flitsen van onopgemaakte inhoud optreden, waarbij de pagina al wordt weergegeven voordat alle opmaak is geladen.
Wat lost dit op?
Met TemplateStyles kunnen redacteuren stijlregels aan specifieke pagina's koppelen. Ze beschikken daarbij over alle mogelijkheden van CSS-stylesheets, hoewel gevaarlijke constructies eruit worden gefilterd. Ook werkt dit prima samen met hulpprogramma's voor voorvertoning en foutopsporing (zoals TemplateSandbox).
Door zo de toegang en het onderhoud te vergemakkelijken, hopen we dat sjablonen innovatiever worden vormgegeven, dat de onderhoudsrompslomp vermindert en dat de sjablonen beter gaan werken op allerlei schermmaten (want mobiele apparaten maken al vanaf meer dan de helft van de paginaweergaven op Wikipedia uit).
Vroeger waren er twee manieren om sjablonen (of andere inhoud) op MediaWiki-pagina's op te maken, maar geen van beide benaderingen werkte erg goed:
- Het directe gebruik van stijlcode (dat wil zeggen, ruwe HTML-code met toegevoegde attributen zoals
style="margin: 10px;") - Het gebruik van bepaalde bijzondere systeemberichten zoals MediaWiki:Common.css
Bij gebruik van geïntegreerde stijlcode
- Er is geen scheiding tussen inhoud en weergave. In gevallen waarin de inhoud niet afkomstig is uit een sjabloon (bijvoorbeeld tabellen in artikelen), wordt de wikitext van een artikel zo ingewikkeld dat die voor de meeste redacteuren onbegrijpelijk is.
- Door het mengen van stijlen met wikitext worden syntaxiskleuring en andere vormen van ondersteuning voor CSS-bewerkingen moeilijk of onmogelijk.
- Stijlen moeten voor elk HTML-element waarop ze van toepassing zijn worden herhaald. Door al dat kopiëren en plakken wordt de code moeilijk te lezen en te onderhouden.
- Met stijlattributen kan maar een deel van CSS worden gebruikt. Met name ontbreekt de voor een responsieve vormgeving noodzakelijke voorziening voor
@media-regels, waardoor het onmogelijk is om sjablonen te maken die op alle schermmaten goed werken. Daarnaast krijgt geïntegreerde stijlcode voorrang op CSS-stylesheets, waardoor aanpassingen voor bepaalde gebruikers, vormgevingen of apparaten bemoeilijkt worden.
Bij gebruik van pagina's voor systeemberichten (MediaWiki:*.css)
- Deze kunnen alleen door interfacebeheerders worden bewerkt, waardoor deelname ernstig belemmerd wordt.
- Deze beperking op het bewerken kan ook niet worden opgeheven, want er is geen manier om te bepalen welke CSS-regels mogen worden gebruikt. Sommige CSS-regels kunnen worden misbruikt om de IP-adressen van lezers te achterhalen of zelfs, in sommige oudere browsers, om scripts uit te voeren.
- Wijzigingen kunnen niet worden getest zonder eerst op te slaan. T112474
- Alle stylesheets moeten op alle pagina's worden geladen (ongeacht of ze daadwerkelijk op de pagina worden gebruikt). Daardoor wordt bandbreedte verspild en wordt het opsporen van fouten erin bemoeilijkt.
Is het wel veilig?
Jazeker! TemplateStyles bevat een volwaardige CSS-parser die alle code uitleest en veilig herschrijft, waarij niet-herkende CSS-regels worden verwijderd. De parser is fijnmazig genoeg om externe bronnen (zoals achtergrondafbeeldingen) te weigeren, maar lokale bronnen toe te staan. CSS-selectors worden herschreven zodat ze niet kunnen verwijzen naar elementen buiten de artikelinhoud. (Het visueel wijzigen van gebieden buiten de artikelinhoud door delen van het artikel te verplaatsen, bijvoorbeeld via absolute positionering, wordt op dit moment niet verhinderd, maar dat was voorheen ook al mogelijk met wikitext en geïntegreerde stijlcode.)
Toegestane CSS-eigenschappen en -regels
Sinds 5 mrt 2025 accepteert TemplateStyles maar liefst 331 CSS-eigenschappen en -aliassen. Dat is het overgrote deel van de eigenschappen die vaak worden gebruikt op het moderne internet en die officieel worden ondersteund door de grote webbrowsers.
Naast eenvoudige regels worden ook de @-regels @media, @page, @supports, @keyframe, @font-face/@font-feature-values ondersteund (waarbij om veiligheidsredenen de naam van de gebruikte lettertypen moet beginnen met TemplateStyles).
De CSS-functie var() is alleen toegestaan in eigenschappen die één kleurwaarde aannemen en binnen calc()-functies.
Het instellen van aangepaste eigenschappen is niet toegestaan.
| De door css-sanitizer toegestane CSS-eigenschapsverklaringen [a][b][c] |
NB: Elke eigenschap is gekoppeld aan een documentatiebron over het gebruik ervan, maar de gebruikelijke pictogrammen voor externe koppelingen zijn weggelaten, want anders worden de koppelingen naar voetnoten, die eveneens als superscript worden weergegeven, onduidelijk.
Opmerkingen:
|
Hoe ondersteun ik voor zowel mobiele apparaten als bureaucomputers de schermafmetingen?
Met mediaquery's kun je elementen op mobiele resoluties en bureauresoluties richten. Sommigen adviseren om je stijlen standaard mobielvriendelijk te maken en de bureaustijlen juist in de mediaquery op te nemen. N.B.: MediaWiki hanteert standaard de overgangspunten 640px voor tablets en 1120px voor bureaucomputerschermen.
Hoe richt ik me op specifieke vormgevingen?
MediaWiki biedt verscheidene CSS-klassen voor de elementen html en body, waaronder een klasse die aangeeft welke vormgeving (skin) in gebruik is.
Aan de hand van deze klassen kan bepaalde CSS-code worden geactiveerd. Dat doe je door een eenvoudige selector op te nemen voor het html- of body-element met de benodigde klassen, gevolgd door een spatie (of in CSS-termen, de descendant combinator).
Over het algemeen moet voor een samenhangend ontwerp deze techniek worden gebruikt. Stem de code niet specifiek af op mobiele apparaten en bureaucomputers, want alle vormgevingen kunnen op beide schermsoorten worden gebruikt. Zie ook: Hoe ondersteun ik voor zowel mobiele apparaten als bureaucomputers de schermafmetingen?
/* Elementen met class foo hebben in alle skins een rode tekst. */
.foo { color: red; }
/* De kleur van dat element wordt alleen in de skin Vector aangepast (override), de kleur wordt op groen gezet. */
body.skin-vector .foo { color: green; }
/* Voegt een rode rand toe als in de browser JavaScript niet is ingeschakeld. */
html.client-nojs .foo { border: 1px solid red; }
/* Maak de border groen voor de skin Vector. */
html.client-nojs body.skin-vector .foo { border-color: green; }
/* Dit werkt niet; het element 'body' moet worden geselecteerd! */
.skin-vector .foo { background: orange; }
/* Deze werken ook niet; de onderliggende combinator moet worden gebruikt. */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }
Hoe gebruik ik stijlen in MediaWiki-berichten?
Om te voorkomen dat een kwaadwillende gebruiker knoeit met de delen van het document buiten het hoofdinhoudsgebied, krijgen alle CSS-regels automatisch de CSS-klasse mw-parser-output voorgevoegd.
Als je een op TemplateStyles gebaseerd sjabloon buiten het inhoudsgebied gebruikt (bv. in de sitenotice), moet je die klasse zelf opgeven door het sjabloon binnen iets als <div class="mw-parser-output">…</div> te plaatsen.
In welke volgorde hebben CSS-stijlen voorrang?
Welke CSS-regel van kracht is wordt bepaald door specificiteit (grofweg gezegd, de complexiteit van de selector; div.foo { margin: 10px } is bijvoorbeeld specifieker dan .foo { margin: 5px }).
Bij gelijke specificiteit hebben CSS-stijlen die later in het document voorkomen voorrang op eerdere stijlen.
MediaWiki:Common.css, andere sitescripts, gebruikersscripts en gadgets worden geladen in het <head>-gedeelte van de pagina.
TemplateStyles-stijlladen worden in de <body> geladen, zodat ze voorrang hebben op site-/gebruikersscript- en gadgetregels met dezelfde specificiteit. In het geval van twee TemplateStyles-regels heeft de tweede regel voorrang op de eerste.
(Houd er wel rekening mee dat TemplateStyles-regels worden ontdubbeld: als hetzelfde stijlblad meerdere keren op de pagina wordt aangeroepen, wordt het alleen de eerste keer ingevoegd.
Onthoud ook op dat “later” betrekking heeft op de positie in het document, niet op de laadvolgorde.
Gadgets voegen hun CSS toe nadat de pagina volledig is geladen, door de pagina te manipuleren met JavaScript; sommige voegen het op verzoek toe wanneer de gebruiker een bepaalde handeling verricht, zoals op een knop klikken.
Niettemin voegen ze het aan de <head>-sectie toe, zodat gelijkwaardige specifieke CSS-regels in de hoofdtekst voorrang krijgen.)
Hoe kunnen Lua-modules met stijlen omgaan?
TemplateStyles kan vanuit een Lua-module worden aangeroepen met behulp van frame:extensionTag.
Voorbeeldcode is als volgt:
local p = {};
function p.templateStyle( frame, src )
return frame:extensionTag( 'templatestyles', '', { src = src } );
end
return p;
Welke functies tegen misbruik worden er aangeboden?
De ontwerpkeuze om CSS op aparte pagina's op te slaan is mede gemaakt om integratie met de gewone anti-misbruikgereedschappen te vergemakkelijken. TemplateStyles-CSS-pagina's hebben hun eigen inhoudsmodel (sanitized-css), zodat wijzigingen daarin kunnen worden bijgehouden of gecontroleerd met Extension:AbuseFilter/nl, met behulp van de variabele new_content_model.
Het invoegen van CSS wordt op dezelfde manier bijgehouden als het invoegen van sjablonen. Via de optie “Verwijzingen naar deze pagina” zie je dus waar een stijl wordt gebruikt, onder “Paginagegevens” welke stylesheets op een pagina worden gebruikt (en mogelijk op het bewerkingsscherm, afhankelijk van welke editor je gebruikt), en onder “Verwante wijzigingen” welke recente wijzigingen van invloed kunnen zijn op een pagina.
TemplateStyles laat ook identificerende informatie achter in de HTML-code. Om te achterhalen waar een specifieke regel vandaan komt kun je dus in de broncode van de pagina kijken. De omringende <style>-tag heeft dan een attribuut als data-mw-deduplicate="TemplateStyles:r123456", waarbij 123456 de versie-ID van het stijlblad is (te bekijken met bijvoorbeeld Speciaal:Diff).
Hoe zijn de beslissingen over TemplateStyles genomen?
Het idee om CSS op te nemen in sjablonen is voorgesteld en aanvaard in een verzoek om commentaar. Technische details zijn vastgelegd in een tweede verzoek om commentaar en de details over de werkstroom zijn verder uitgewerkt via een gebruikersraadpleging.
Wie werkt er aan TemplateStyles?
TemplateStyles was oorspronkelijk een project van het Wikimedia Reading Infrastructure team (voorafgegaan door verkennend werk dat Coren als vrijwilliger had gedaan), bestaande uit Brad Jorsch (ontwikkelaar), Bryan Davis (manager) en Gergő Tisza (ontwikkelaar). Sindsdien zijn er veranderingen geweest in de samenstelling en verantwoordelijkheden; zie de maintainers-pagina voor de huidige verantwoordelijken.
Waar kan ik fouten melden of functies aanvragen?
Dien taken in onder de component TemplateStyles in Phabricator.
Waar kan ik het in actie zien?
Je kunt enkele geselecteerde voorbeelden bekijken.
De functie is op alle Wikimedia-sites ingeschakeld.
Hulp bij fouten
background-image
Als je de volgende foutmelding krijgt wanneer je de wijzigingen in je CSS-bestand probeert te publiceren:
…dan verwijst het aan background-image toegekende attribuut url('...'); mogelijk niet naar een lokale bron.
De parser staat alleen lokale bronnen toe (en weigert externe bronnen).
Alleen URL's die verwijzen naar bronnen op //upload.wikimedia.org/ zijn toegestaan, bijvoorbeeld //upload.wikimedia.org/wikipedia/commons/8/83/MediaWiki-2023-button-proposal.svg voor het bestand op File:MediaWiki-2023-button-proposal.svg.
Deze URL’s kunnen worden verkregen door gebruik te maken van het URL-adres waarnaar de koppelingen in de bestandspagina’s op Wikimedia Commons verwijzen.
Deze koppelingen omvatten die naar het “Originele bestand” of een van de koppelingen naar de “Andere resoluties” van het bestand, zoals 1,024 × 1,024 pixels.
Zie ook
- Extension:TemplateStyles – vooral het gedeelte Voorbehouden.
- Wikipedia:TemplateStyles – richtlijnpagina op de Engelse Wikipedia.