17 214
contributi
Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"
Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)
Versione delle 16:55, 28 dic 2018
, 16:55, 28 dic 2018Adding gradients section
m (→#expr) |
(Adding gradients section) |
||
|
Anche se il CSS mette a disposizione centinaia di proprietà, su Pokémon Central Wiki di solito se ne usano solo poche. Molte di queste proprietà inoltre vengono modificate solo dalle classi, quindi quelle che capita veramente di scrivere sono pochissime.
Lo stile di Pokémon Central Wiki prevede l'uso di gradienti (altrimenti detti sfumature). I gradienti orizzontali tra i colori di due tipi si applicano con classi CSS del tipo <code>horiz-grad-elettro-acciaio</code>; quelli dalla variante ''light'' (più chiara) alla variante ''normale'' di uno stesso colore con classi come <code>horiz-grad-acqua</code>. Per
Al posto di <code>colore1</code> e <code>colore2</code> vanno inseriti i nomi di due colori; ce n'è uno per ogni [[tipo]], per ogni [[regione]], per la maggior parte dei [[Videogiochi Pokémon|giochi]], per alcuni personaggi importanti e per molto altro. Per una spiegazione completa sui colori e come usarli, si rimanda alla [[Aiuto:Template/Colori|pagina apposita]].
* <code>black-text</code> o <code>white-text</code>: rende il testo di colore nero o bianco rispettivamente, compresi eventuali link.
** Attenzione però: se un elemento ha la classe <code>white-text</code> ed un suo figlio ha <code>black-text</code>, eventuali link contenuti in quest'ultimo diventano comunque bianchi anziché neri, contrariamente a quanto ci si aspetta. Il testo normale invece diventa nero.
* <code>height-100</code>: rende un elemento alto come il parent. Funziona [[#height-100-tricks|solo in determinati contesti]].
===Tricks e workaround scoperti sul campo===
* <code id="height
* Se metti a tutti i figli di un certo elemento la class ''align-middle'' e questo elemento ha la stessa altezza del suo figlio più alto, l'effetto è quello di avere tutti i figli centrati verticalmente. Se per caso questo figlio non esistesse, si può provare ad aggiungere un elemento con "height: 100%;" e niente ''width'' e dargli ''align-middle''. In teoria ''vert-middle'' fa entrambe queste cose, ovvero aggiunge l'elemento con "height: 100%;" e mette a tutti i figli align-middle. Il problema di entrambe queste classi è che spesso "height: 100%;" non funziona.
* Se si vuole escludere una qualsiasi riga di un tabella dall'effetto del <code>white-rows</code> basta usare <code>!</code> invece della normale <code>|</code>. In questo modo la prima riga diventa l'header della tabella, una riga in mezzo rappresenta un divisorio e l'ultima il footer, che non vengono influenzati dalla classe.
* MediaWiki aggiunge del margin ai <code>p</code> di default. Questo non sarebbe un problema dato che nei template raramente si inserisce un <code>p</code>, ma il parser ha anche questa simpatica prerogativa di interpretare una riga di testo come appunto testo e quindi wrapparla in un <code>p</code>. Questo può avvenire anche nei template perché una riga di testo può apparire molto facilmente (per esempio, in un infobox se metto troppi a capo quasi sicuramente le etichette e i valori associati diventano righe di testo). Di solito questo causa l'apparizione di spazio tra gli elementi apparentemente inspiegabile; in questi casi controllare sempre dall'inspector che non sia spawnato questo magico <code>p</code> con il suo maledetto margin. Per farlo sparire di solito basta spostare tutta la zona incriminata su una riga (purtroppo con conseguente perdita di leggibilità).
== Gradienti ==
I gradienti sono uno dei pilastri dello stile grafico di Pokémon Central Wiki, e sono solo un nome un po' altisonante per una sfumatura tra colori. Per esempio, il rettangolo qui sotto ha uno sfondo con un gradiente:
<div class="horiz-grad-acciaio-erba">Sfondo con gradiente</div>
Nel caso più comune, i gradienti sono sfumature tra due colori, in direzione orizzontale, da sinistra a destra. Si specificano come ''gradiente acciaio-erba'' (quello qui sopra) per indicare un gradiente orizzontale, che parte da sinistra con il colore acciaio, variante ''normale'' e termina a destra con il colore erba, anch'esso variante ''normale''. Nel caso si dica ''gradiente acqua'' si intende un gradiente di nuovo orizzontale, ancora da sinistra a destra, dal colore acqua variante ''light'' al colore acqua variante ''normale''. In generale, i colori dei gradienti sono menzionati o entrambi esplicitamente, o uno viene omesso, intendendo che il colore di partenza è la variante ''light'' del colore di arrivo. Per una spiegazione completa sui colori e come usarli, si rimanda alla [[Aiuto:Template/Colori|pagina apposita]].
Lo schema di cui sopra per i colori dei gradienti è talmente pervasivo su Pokémon Central Wiki da avere una sintassi apposita, sia negli attributi <code>style</code> via il modulo Css, sia negli attributi <code>class</code> via classi apposite negli stili custom del sito.
=== Gradienti nei tag <code>style</code> (modulo Css) ===
Nonostante sia possibile inserire manualmente gradienti via le apposite dichiarazioni CSS, questo è fortemente sconsigliato, tant'è vero che non viene nemmeno spiegato in questo manuale ;P Le ragioni principali di ciò sono: l'impossibilità di usare i colori via nome, in quanto sono necessari i valori esadecimali; la mancanza di inserimento automatico dei vendor prefixes per i gradienti; la scomodità di non avere il supporto dello schema descritto nella sezione precedente.
Il [[Modulo:Css|modulo Css]] è il mezzo universale per l'inserimento dei gradienti. Supporta gradienti orizzontali, verticali, obliqui e radiali, tramite le funzioni <code>horizGrad</code>, <code>vertGrad</code>, <code>slantedGrad</code> e <code>radialGrad</code> rispettivamente. La chiamata va inserita nell'attributo <code>style</code>. Per esempio, il seguente codice:
<nowiki>
<div style="{{#invoke: Css | horizGrad | elettro | acqua }}">Chinchou e Lanturn</div></nowiki>
produce questo gradiente:
<div style="{{#invoke: Css | horizGrad | elettro | acqua }}">Chinchou e Lanturn</div>
I colori vengono specificati allo stesso modo per tutti i tipi di gradienti, principalmente con queste due sintassi:
*<code>type = <tipo></code>, <code>type1 = <tipo1> | type2 = <tipo2></code>: questa è la sintassi specifica per lo schema indicato all'inizio della [[#gradienti|sezione sui gradienti]]. La chiamata intera risulta, per esempio, così: <code><nowiki>{{#invoke: css | horizGrad | type1 = veleno | type2 = terra}}</nowiki></code> (gli spazi sono opzionali ma migliorano la leggibilità del codice). Quando vengono specificati due tipi '''diversi''', il gradiente va dal <code><type1></code> al <code><type2></code>; se è passato un solo tipo, o quando i due tipi sono uguali, si ricade nel secondo caso, ovvero il gradiente dalla variante ''light'' di <code><type></code> a quella ''normale'' di <code><type></code>.
*<code><colore1> | <variante> | <colore2> | <variante>...</code>: questa sintassi permette di specificare i colori manualmente via nome, con relativa variante, per esempio <code><nowiki>{{#invoke: Css | vertGrad | fuoco | normale | elettro | dark}}</nowiki></code>. Si possono passare più di due colori. Le varianti sono opzionali, con default a ''normale''. Le varianti possono essere anche passate nello stesso parametro del colore, separate da spazi, esempio: <code><nowiki>{{#invoke: Css | vertGrad | buio light | fuoco dark }};</nowiki></code>.
In realtà esistono molti altri modi per richiamare il modulo Css, per cui si rimanda al [[Modulo:Css|modulo stesso]].
=== Gradienti nei tag <code>class</code> (classi Css) ===
Per questioni di efficienza alcuni gradienti possono essere aggiunti tramite classi CSS:
* '''Solo''' gradienti con lo schema a uno/due colori descritto all'inizio della [[#gradienti|sezione sui gradienti]].
* '''Solo''' gradienti con i colori dei [[Tipo|tipi]] e delle [[Categoria danno|categorie danno]].
* '''Solo''' gradienti orizzontali.
Per esempio, il seguente spezzone di codice:
<nowiki>
<div class="horiz-grad-acciaio-erba">Sfondo con gradiente</div></nowiki>
produce questo risultato:
<div class="horiz-grad-acciaio-erba">Sfondo con gradiente</div>
Le classi CSS hanno tutte nomi nei seguenti due formati. La logica è volutamente la stessa delle sintassi <code>type = <tipo></code> e <code>type1 = <tipo1> | type2 = <tipo2></code> del modulo Css.
*<code>horiz-grad-<type1>-<type2></code>: questo formato produce un gradiente dalla variante ''normale'' di <code><typ1></code> alla variante ''normale'' di <code><type2></code> se i due tipi sono diversi (esempio: <code>horiz-grad-buio-psico</code>). Quando invece <code><type1></code> e <code><type2></code> sono uguali, il gradiente va dalla variante ''light'' del tipo alla variante ''normale'' (esempio: <code>horiz-grad-fuoco-fuoco</code>).
*<code>horiz-grad-<type></code>: questo formato crea un gradiente dalla variante ''light'' alla variante ''normale'' di <code><type></code> (esempio <code>horiz-grad-fuoco</code>). Il risultato è volutamente esattamente lo stesso del formato <code>horiz-grad-<type>-<type></code>, con lo stesso tipo ripetuto due volte.
Le classi CSS per i gradienti sono soggette alle seguenti limitazioni, con annesse spiegazioni:
* ''I colori disponibili sono solo tipi e categorie danno'': Non ci saranno mai gradienti per tutti i colori nel CSS. Solo i colori più utilizzati nelle pagine più visualizzate possono essere aggiunti. Lo staff si riserva il diritto di valutare caso per caso quali colori aggiungere. <br />''Motivazioni'': Il CSS non è un linguaggio computazionale: i file CSS sono essenzialmente una lista di stili. Aggiungere stili significa aggiungere elementi alla lista, senza la possibilità di produrre stili a runtime. La conseguenza è che i gradienti per i vari colori vanno aggiunti uno per uno, aumentando notevolmente il peso del file CSS stesso. Facendolo per i gradienti più usati però si ha comunque un peso complessivo delle pagine del Wiki minore, visto che il codice dei gradienti è presente una sola volta nel CSS e poi soltanto richiamato nel Wikicode. Quanto alle performance, i browser moderni sono più veloci nell'applicare stili dal CSS che da tag <code>style</code> inline.
* ''I gradienti sono solo orizzontali'': Non ci saranno mai classi CSS per gradienti non orizzontali. <br />''Motivazioni'': Per gli stessi motivi di cui sopra, includere tipi di gradienti non massicciamente utilizzati in Pokémon Central Wiki è deleterio per le performances.
* ''I nomi dei tipi non hanno alias di sorta e sono solo in minuscolo'': Non esistono, e mai esisteranno, classi come <code>horiz-grad-???</code> e <code>horiz-grad-Acqua-Fuoco</code> (la prima lettera dei tipi è maiuscola). Per ovviare al secondo problema, usare la funzione <code>lc</code> di MediaWiki nei template (esempio: <code><nowiki>class="horiz-grad-{{lc: {{{type1}}} }}-{{lc: {{{type2}}} }}"</nowiki></code>. <br />''Motivazioni'': Di nuovo, CSS non è un linguaggio computazionale. Il che significa che evantuali alias dei nomi dei tipi non possono essere ricondotti ad un unico nome. Si dovrebbero quindi aggiungere tali alias ai sorgenti CSS stessi, aumentando a dismisura il peso in KB dei sorgenti stessi.
==== Integrazioni con il modulo PokémonData ====
La funzione <code>gradTypes</code> del modulo [[Modulo:PokémonData|PokémonData]] ritorna i tipi di un Pokémon nel formato adatto per essere usati nelle classi CSS per i gradenti (ovverosia in minuscolo e separati da trattini). Per esempio, il seguente frammento di codice:
<nowiki>
<div class="horiz-grad-{{#invoke: PokémonData | gradTypes | 528 }}">Who's that Pokémon?</div></nowiki>
produce il seguente codice
<div class="horiz-grad-{{#invoke: PokémonData | gradTypes | 528 }}">Who's that Pokémon?</div>
Per ulteriori informazioni su come chiamare la funzione <code>gradTypes</code>, consultare il [[Modulo:PokémonData|modulo PokémonData]].
==Responsività==
| |||