Pomoć:TemplateStyles

TemplateStyles omogućava kompleksno bihevioralno i estetsko stiliziranje šablona korištenjem referenciranih eksternih CSS datoteka koje su same wiki stranice. Važno je napomenuti da je mogućnost kreiranja/modificiranja CSS datoteka uključena u zadane dozvole za automatski potvrđene korisnike i stoga ne zahtijeva uključivanje nekoga s privilegijama administratora interfejsa.

Urednici mogu dodati <templatestyles src="[neku stranicu]" /> na stranicu, a sadržaj referencirane stranice će biti analiziran kao CSS, sanitiziran i učitan na stranice gdje se koristi oznaka ‎<templatestyles> (direktno ili uključena šablonom koji se koristi na stranici).

[neka stranica] mora imati sanitized-css (Pročišćeni CSS) model sadržaja, što je podrazumijevana vrijednost za podstranice u imenskom prostoru šablona koji završava sa .css. Preporučeni obrazac korištenja je pohranjivanje stilova za Šablon:Foo na podstranici šablona na koji imaju najveći utjecaj, kao što je Šablon:Foo/styles.css. Ako [neka stranica] nema prefiks imenskog prostora, podrazumijeva se imenski prostor Šablon. Tako će, na primjer, <templatestyles src="Foo/styles.css" /> učitati Šablon:Foo/styles.css.

Oznaku ‎<templatestyles> treba postaviti prije stiliziranog sadržaja, idealno na vrhu šablona ili što bliže, kako bi se izbjegao potencijalni bljesak nestiliziranog sadržaja ako stranica postane inicijalno vidljiva dok je još uvijek samo djelomično prikazana.

TemplateStyles omogućava urednicima da povežu stilska pravila sa određenim stranicama, pruža punu snagu CSS stilskih listova dok filtrira opasne konstrukcije i radi sa alatima za pregled/otklanjanje grešaka (kao što je TemplateSandbox ) kako se i očekuje.

Smanjenje barijera za pristup i održavanje će, nadamo se, rezultirati većim inovacijama u načinu vizualnog dizajniranja šablona, manjim troškovima održavanja i boljom prilagodljivošću opcijama ekrana (posebno s obzirom na to da mobilni uređaji čine više od polovine pregleda Wikipedije čak i od 30 mart 2016).

Tradicionalno su postojala dva načina stiliziranja šablona (ili bilo kojeg drugog sadržaja) na MediaWiki stranicama, pri čemu nijedan od sljedećih pristupa nije bio posebno uspješan:

• Korištenje inline stilova (tj. sirovog HTML koda s dodanim atributima poput style="margin: 10px;")
• Korištenje određenih posebnih sistemskih poruka kao što je MediaWiki:Common.css

• Ne postoji odvojenost sadržaja i prezentacije. U slučajevima kada sadržaj ne dolazi iz šablona (npr. tabele u člancima), to će rezultirati wikitekstom članka koji je nerazumljiv većini urednika.
• Budući da se stilovi miješaju s wikitekstom, isticanje sintakse i drugi oblici podrške za CSS uređivanje su teški ili nemogući.
• Stilovi se moraju ponavljati za svaki HTML element na koji se primjenjuju, što rezultira puno kopiranja i lijepljenja te kodom koji je teško čitati i održavati.

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.

• Uređivanje je ograničeno na administratore interfejsa , što predstavlja veliku prepreku za sudjelovanje.
• Ograničenja uređivanja ne mogu se ukinuti jer ne postoji način da se ograniči koja CSS pravila se mogu koristiti, a neka od njih bi se mogla zloupotrijebiti za praćenje IP adresa čitalaca ili čak izvršavanje skripti u nekim starijim preglednicima.
• Promjene nisu u mogućnosti testirati se, bez prethodnog spremanja. T112474
• Svi stilski listovi moraju biti učitani na sve stranice (bez obzira da li ih zapravo koriste ili ne), što troši propusni opseg i otežava otklanjanje grešaka u pravilima stila.

Da! TemplateStyles uključuje punopravni CSS parser koji čita, ponovo serijalizira i izbjegava sav kod te uklanja CSS pravila koja ne prepoznaje. Parser je dovoljno detaljan da odbaci udaljene resurse (kao što su pozadinske slike), ali dozvoli lokalne. CSS selektori su prepisani tako da se ne mogu odnositi na elemente izvan sadržaja članka. (Vizuelno mijenjanje područja izvan sadržaja članka pomicanjem dijelova članka, npr. putem apsolutnog pozicioniranja, trenutno nije spriječeno. Ovo nije promjena u odnosu na status quo, jer je takva stvar već bila moguća sa wikitextom i inline stilovima.) CSS selectors are rewritten so that they cannot refer to elements outside article content. (Visually modifying areas outside article content by displacing parts of the article, e.g. via absolute positioning, is not prevented at this time. This is no change from the status quo, as such a thing was already possible with wikitext and inline styles.)

Od 5 mart 2025, TemplateStyles prihvata ne manje od 331 CSS svojstva i aliasa, uključujući veliku većinu onih koji se najčešće koriste na modernom internetu uz službenu podršku jednog ili više glavnih web preglednika. Pored jednostavnih pravila, podržana su i @media, @page, @supports, @keyframe, @font-face/@font-feature-values at-pravila (pri čemu je font-face ograničen na fontove čije ime počinje sa TemplateStyles, iz sigurnosnih razloga).

CSS funkcija var() je dozvoljena samo u svojstvima koja primaju jednu vrijednost boje i unutar calc()functions. Postavljanje prilagođenih svojstava nije dozvoljeno.

Medijski upiti Vam omogućavaju da ciljate elemente u mobilnoj i desktop rezoluciji. Neki savjetuju da stilove po defaultu prilagodite mobilnim uređajima, a stilove za desktop računare uključite u medijski upit. Napomena, MediaWiki je standardizirao tačke prekida 640px i 1120px kako bi predstavljao tablet i desktop računare.

MediaWiki pruža različite klase za elemente html i body, uključujući onu koja pokazuje koja se skin koristi. Ovo se može ciljati uključivanjem jednostavnog selektora za element html ili body koji uključuje potrebne klase, nakon čega slijedi razmak (ili u CSS terminologiji, potomak kombinatora).

Generalno, ovu tehniku ​​treba koristiti radi konzistentnosti dizajna, umjesto da se cilja na mobilne i desktop uređaje, jer se svi skinovi mogu koristiti i u mobilnim i u desktop rezolucijama. Pogledajte također #Kako mogu ciljati rezolucije za mobilne uređaje/desktop računare?.

/* Elements with class foo will have red text in all skins. */
.foo{color:red;}
/* Override that element's color to green for the Vector skin only. */
body.skin-vector.foo{color:green;}
/* Add a red border if the browser doesn't have JavaScript enabled. */
html.client-nojs.foo{border:1pxsolidred;}
/* Declare that same border as green for the Vector skin. */
html.client-nojsbody.skin-vector.foo{border-color:green;}

/* This does not work; the 'body' element must be selected! */
.skin-vector.foo{background:orange;}
/* These do not work, either; 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;}

Kako bi se spriječilo da zlonamjerni korisnik mijenja dijelove dokumenta izvan glavnog područja sadržaja, sva CSS pravila automatski dobijaju prefiks od CSS klase mw-parser-output. Ako koristite šablon zasnovan na TemplateStyles izvan područja sadržaja (npr. u sitenotice ), morate sami osigurati tu klasu, tako što ćete šablon umotati u nešto poput <div class="mw-parser-output">...</div>.

Koje CSS pravilo stupa na snagu kontrolira specifičnost (otprilike, složenost selektora - npr. div.foo{margin:10px} je specifičnije od .foo{margin:5px}). U slučaju jednake specifičnosti, CSS stilovi koji se nalaze kasnije u dokumentu prepisuju ranije stilove.

MediaWiki:Common.css, ostale skripte web-sajtova, korisničke skripte i gadgeti se učitavaju u dijelu ‎<head> stranice. Stilski listovi TemplateStyles se učitavaju u ‎<body>, tako da s jednakom specifičnošću prepisuju pravila skripti i gadgeta za web-mjesto/korisnika, a u slučaju dva pravila TemplateStyles, drugo prepisivalo je prvo.

(Imajte na umu da se pravila TemplateStyles dedupliciraju: ako se isti stilski list referencira više puta na stranici, ubacuje se samo prvi put.)

Također imajte na umu da se "kasnije" odnosi na poziciju dokumenta, a ne na redoslijed učitavanja. Gadgeti dodaju svoj CSS nakon što se stranica u potpunosti učita, manipulirajući stranicom pomoću JavaScripta; neki ga dodaju na zahtjev kada korisnik izvrši neku radnju poput klika na dugme. Ipak, dodaju ga u zaglavlje, tako da jednako specifična CSS pravila u tijelu imaju prednost nad njim.)

TemplateStyles se mogu pozvati iz Lua modula korištenjem frame:extensionTag .

Primjer koda je sljedeći:

localp={};
functionp.templateStyle(frame,src)
returnframe:extensionTag('templatestyles','',{src=src});
end
returnp;

Odluka o pohranjivanju CSS-a na odvojene stranice djelomično je napravljena kako bi se olakšala integracija sa standardnim alatima protiv zloupotrebe. CSS stranice TemplateStyles-a imaju vlastiti model sadržaja (sanitized-css) tako da se promjene na njima mogu pratiti ili kontrolirati s Extension:AbuseFilter , korištenjem varijable new_content_model.

Uključivanje CSS-a prati se na isti način kao i uključivanje predložaka, tako da možete vidjeti gdje se koristi stilski list putem opcije "Šta vodi ovamo", vidjeti koji se stilski listovi koriste na stranici pod "Informacije o stranici" (i moguće na ekranu za uređivanje, ovisno o tome koji editor koristite), te vidjeti koje nedavne promjene mogu utjecati na stranicu pomoću "Srodne izmjene".

TemplateStyles također ostavlja identifikacijske informacije u HTML kodu; da biste saznali odakle dolazi određeno pravilo, pogledajte izvorni kod stranice, a priložena oznaka ‎<style> će imati atribut poput data-mw-deduplicate="TemplateStyles:r123456", gdje je 123456 ID revizije stilskog lista (može se vidjeti, na primjer, pomoću Special:Diff).

Ideja o uključivanju CSS-a s predlošcima predložena je i prihvaćena u zahtjevu za komentare. Tehnički detalji su utvrđeni u drugom RfC-u, a detalji toka rada prošireni su kroz konsultacije s korisnicima.

TemplateStyles je prvobitno bio projekat Wikimedia Reading Infrastructure team (prethodio mu je istraživački rad koji je Coren radio kao volonter), a sastojao se od Brad Jorsch (razvojni programer), Bryan Davis (menadžer) i Gergő Tisza (razvojni programer) u to vrijeme. Ljudi i odgovornosti su se od tada promijenili; pogledajte stranicu održavatelja za trenutno vlasništvo.

Molimo vas da podnesene zadatke postavite pod komponentu TemplateStyles u Pharbacator.

Možete pogledati neke odabrane primjere.

Ova funkcija je omogućena na svim Wikimedia stranicama.

Ako dobijete sljedeću grešku prilikom pokušaja objavljivanja promjena u vašoj CSS datoteci:

Moguće je da atribut url('...'); dat promenljivoj background-image ne ukazuje na lokalni resurs. Parser dozvoljava samo lokalne resurse (a odbacuje udaljene). Dozvoljeni su samo URL-ovi koji pokazuju na resurse na //upload.wikimedia.org/, na primjer //upload.wikimedia.org/wikipedia/commons/8/83/MediaWiki-2023-button-proposal.svg za datoteku na File:MediaWiki-2023-button-proposal.svg. Ovi URL-ovi se mogu dobiti korištenjem URL adrese na koju linkovi upućuju na stranicama datoteke Wikimedia Commons . Ovi linkovi uključuju one do "Originalne datoteke" ili bilo koji od linkova do "Ostalih rezolucija:" datoteke, kao što je 1,024 ×ばつ 1,024 pixels.

• Extension:TemplateStyles – posebnu sekciju #Caveats.
• Wikipedia:TemplateStyles – Stranica sa smjernicama na engleskoj Wikipediji.

• Help/bs