Ajutor:TemplateStyles

Notă: Prin editarea acestei pagini, vă exprimați acordul să eliberați contribuția dumneavoastră sub licența CC0. Pentru mai multe informații, vezi paginile de ajutor ale proiectului domeniul public.

TemplateStyles este o unealtă, care permite formatarea complexă a formatelor fără a avea funcția de administrator.

Cum funcţionează?

Editorii pot adăuga <templatestyles src="[some page]" /> la conținutul [some page] va fi analizat ca CSS, dezinfectat și încărcat pe paginile unde ‎<templatestyles> tag-ul este folosit (direct sau folosit de un format care este folosit pe o pagină).

[some page] trebuie să aibă sanitized-css (Sanitized CSS) conținutul model, care este implicit pentru subpaginile din spațiul de nume Format care se termină cu .css. Modelul de utilizare recomandat este de a stoca stilurile pentru Format:Foo sub o subpagină ca Format:Foo/styles.css.

Dacă [some page] nu are prefixul spațiului de nume, rămâne default Format spațiu de nume. Astfel, de exemplu, va încărca Template:Foo/styles.css.

Tag-ul trebuie plasat înaintea conținutului care este șters, de ex. în partea de sus a șablonului, pentru a evita o potențială flash de conținut neuniform dacă pagina este redată parțial în timpul încărcării.

Ce probleme rezolvă?

În mod tradițional, există două modalități de a modela formate (sau orice alt conținut): prin utilizarea stilurilor inline (adică prin utilizarea codului HTML și adăugarea de atribute ca style="margin: 10px") sau utilizând anumite mesaje de sistem speciale, cum ar fi MediaWiki:Common.css . Nici una dintre aceste abordări nu funcționează foarte bine.

Pentru stilul inline:

• Nu există separație între conținut și prezentare. În cazurile în care conținutul nu provine dintr-un format (de ex. Tabele în articole), acest lucru va duce la articolul wikitext care este neinteligibil pentru majoritatea editorilor.
• Deoarece stilurile sunt amestecate cu wikitext, evidențierea sintaxelor și alte forme de suport pentru editare CSS sunt dificile sau imposibile.
• Stilurile trebuie repetate pentru fiecare element HTML la care se aplică, ceea ce duce la o mulțime de copy-paste și cod greu de citit și de întreținut.
• Atributele de stil sunt limitate la un subset de CSS. Cel mai important, regulile @media necesare pentru design responsiv nu funcționează, astfel încât este imposibil să se facă formate care să funcționeze bine pe o gamă largă de dimensiuni ale ecranului. În plus, stilurile inline au prioritate față de foile de stil CSS, astfel încât personalizarea utilizatorilor, a skin-urilor sau a dispozitivelor devine mai dificilă.

• Since styles are mixed with wikitext, syntax highlighting and other forms of CSS editing support are difficult or impossible.

• Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.

• Style attributes are limited to a subset of CSS. Most importantly, @media rules needed for responsive design do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.

Pentru sistemul MediaWiki:*.css paginile:

• Editarea este limitată la administratori, ceea ce constituie o barieră majoră în calea participării.
• Restricțiile de editare nu pot fi ridicate deoarece nu există nicio modalitate de a limita regulile CSS și unele dintre ele ar putea fi abuzate pentru a urmări adresele IP ale cititorilor sau chiar pentru a executa scripturi în unele browsere mai vechi.
• Modificările sunt imposibil de testat fără salvarea mai întâi (task T112474).
• Toate foile de stil trebuie să fie încărcate pe toate paginile (indiferent dacă acestea utilizează efectiv pagina sau nu), ceea ce duce la pierderea lățimii de bandă și face ca regulile stilului de depanare să fie mai grele.

• Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.

• Changes are impossible to test without saving first (task T112474).

• All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.

TemplateStyles permite editorilor să asocieze reguli de stil anumitor pagini, oferă puterea deplină a foilor de stil CSS în timp ce filtrează constructe periculoase și lucrează cu instrumentele de previzualizare/depanare (cum ar fi TemplateSandbox ) cum este de așteptat.

Reducerea barierei de acces și întreținere va avea ca rezultat o mai mare inovație în modul în care formatele sunt proiectate vizual, mai puțin cheltuielile de întreținere și o mai bună adaptabilitate la opțiunile de ecran (în special dispozitive mobile care până acum constituie jumătate din vizualizările de pagină Wikipedia).

Este sigur?

Da! TemplateStyles include un parser CSS cu drepturi depline, care citește, re-serializează și scapă tot codul și elimină regulile CSS care nu se potrivesc cu lista albă. Parserul este suficient de fin pentru a respinge resursele la distanță (cum ar fi imaginile de fundal), dar permite și cele locale. Selectorii CSS sunt rescriși astfel încât să nu se poată referi la elemente în afara conținutului articolului. (Nu este împiedicată în acest moment modificarea vizuală a zonelor în afara conținutului articolului prin deplasarea unor părți ale articolului, de exemplu prin poziționarea absolută. Aceasta nu este nicio schimbare față de status quo, deoarece astfel de lucruri erau deja posibile cu stilurile wikitext și inline.)

Ce reguli CSS sunt recunoscute?

În prezent, TemplateStyles acceptă majoritatea proprietăților CSS3 acceptate de unul sau mai multe browsere mari (de la începutul anului 2017). Dincolo de regulile simple, @media, @page, @supports, @keyframe și @font-face/@font-feature-values sunt acceptate (cu font-face limitat la fonturi ale căror nume încep cu TemplateStyles, din motive de securiate). For a comprehensive list of allowed properties, see the "$props" parts of the StylePropertySanitizer code from css-sanitizer .

Proprietățile non-standard (inclusiv prefixele furnizorilor) nu sunt acceptate în prezent. Consultați task T162379 pentru planuri.

How can I target mobile/desktop resolutions?

Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki has standardised on 640px and 1120px breakpoints to represent tablet and desktop.

How can I target specific skins?

MediaWiki provides various classes on the html and body elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the html or body element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).

Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions. See also #How can I target mobile/desktop resolutions?.

/* Elements with class 'foo' will have red text in all skins */
.foo { color: red; }

/* Override that to green for Vector only */
body.skin-vector .foo { color: green; }

/* Add a red border if the user doesn't have JavaScript enabled */
html.client-nojs .foo { border: 1px solid red; }

/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }

/* This does not work! The 'body' element must be specified. */
.skin-vector .foo { background: orange; }

/* These do not work! The descendant combinator must be used */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }

How do I use styles in MediaWiki messages?

To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the mw-parser-output CSS class. If you use a TemplateStyles-based template outside of the content area (e.g. in the sitenotice ), you need to provide that class yourself, by wrapping the template in something like <div class="mw-parser-output">...</div>.

In which order do CSS styles override?

Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g. div.foo { margin: 10px } is more specific than .foo { margin: 5px }). In case of equal specificity, CSS styles that come later in the document override earlier styles.

MediaWiki:Commons.css, other site scripts, user scripts and gadgets are loaded in the ‎<head> section of the page. TemplateStyles stylesheets are loaded in the ‎<body>, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first. (Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time. Note also that "later" has to do with document position, not load order. Gadgets add their CSS after the page has fully loaded, by manipulating the page with JavaScript; some add it on-demand when the user does some action such as clicking a button. Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.)

How can Lua modules interact with styles?

TemplateStyles can be called from a Lua module using frame:extensionTag.

Example code is the following:

local p = {};

function p.templateStyle( frame, src )
   return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p;

Ce caracteristici anti-abuz sunt furnizate?

Alegerea designului pentru a stoca CSS în pagini separate a fost făcută parțial pentru a facilita integrarea cu setul standard de instrumente anti-abuz. TemplateStyles Paginile CSS au propriul model de conținut (sanitized-css), astfel încât modificările acestora pot fi urmărite sau controlate cu Extensie:AbuseFilter , utilizând variabila new_content_model.

Includerea CSS este urmărită în același mod ca și includerea formatelor, astfel încât să puteți vedea unde este utilizată o foaie de stil prin opțiunea "Ce trimite aici", să vedeți ce foi de stil sunt utilizate pe o pagină sub "Informații despre pagină" (și eventual pe ecranul de editare, în funcție de ce editor utilizați) și vedeți ce modificări recente ar putea afecta o pagină utilizând "Modificări corelate".

TemplateStyles lasă, de asemenea, informații de identificare în codul HTML; pentru a afla de unde provine o anumită regulă, uitați-vă la sursa paginii, iar eticheta ‎<style> va include un atribut ca data-mw-deduplicate="TemplateStyles:r123456", unde 123456 este ID-ul de revizuire al foii de stil (vizibil cu Special:Diff, de exemplu).

Cum au fost luate deciziile făcute în jurul TemplateStyles?

Ideea de a include CSS cu format a fost propusă și acceptată într-o cereri pentru comment. Detaliile tehnice au fost fixate în un al doilea RfC și detaliile fluxului de lucru într-o consultare utilizator.

Cine lucrează la TemplateStyles?

TemplateStyles a fost inițial un proiect al $wminfr (precedat de munca de explorare a Coren pe care a făcut-o ca voluntar), apoi oamenii s-au mutat. Acum este <! - din 2018 martie -> menținut de o echipă ad-hoc WMF format din Brad Jorsch (dezvoltator), Chris Koerner (legătura cu comunitatea), Dan Garry (manager de produs), Gergő Tisza (dezvoltator) și Grace Gellerman (manager de proiect).

Unde raportez erorile/cer caracteristici?

Solicitați file tasks în cadrul componentei TemplateStyles din Phabricator.

Unde pot să văd în acțiune?

Puteți să examinați câteva exemple întreținute.

Caracteristica este în prezent (din martie 2018) activată pe următoarele site-uri Wikimedia:

Vezi şi

• Extension:TemplateStyles - în special secțiunea #Caveats.
• Wikipedia:TemplateStyles — guideline page on English Wikipedia.