Aiuto:Manuale di stile/Avanzato

da Pokémon Central Wiki, l'enciclopedia Pokémon in italiano.

Gli strumenti di Wikicode, HTML e CSS descritti in questa pagina sono necessari solo per la creazione di template o di elementi grafici complessi, come i layout responsive. Si consiglia la lettura di questa pagina solo ad utenti esperti che vogliano cimentarsi in attività di questo tipo.

Prerequisiti

Dato che questo manuale si rivolge ad utenti esperti, vengono date per scontate le nozioni contenute nel Manuale di stile, nel Manuale di stile/Intermedio e nella pagina di aiuto dei Template. In particolare si suppone che il lettore:

  • sappia la sintassi wikicode delle tabelle (non nel dettaglio, ma almeno un'idea);
  • sappia cos'è un template e come si utilizza nelle pagine, in particolare sappia cos'è un parametro.
  • abbia voglia di mettersi ad imparare.

Anche se non è strettamente necessario, aiuta molto utilizzare un editor di testo che abbini le parentesi, in modo da individuare subito quelle corrispondenti ed eventualmente capire quali non sono state chiuse correttamente. Due esempi sono Notepad++ e Atom, ma ne esistono tantissimi altri.

Come usare questa pagina

Il modo consigliato per imparare quello che c'è in questa pagina è sicuramente di provare. Varie esperienze passate (tra cui la mia e quelle di almeno altri 3 amministratori) hanno confermato che la pratica è il modo migliore di imparare ad usare per bene gli strumenti spiegati qui. Se ad un prima lettura non si riescono ad afferrare i contenuti della pagina è normale. La soluzione è di mettere un po' le mani su questa roba, sbatterci la testa e capire cosa sta succedendo. Dopo aver fatto questo, chiedere a qualcuno più esperto che sa già come far funzionare queste cose. O anche chiedergli un aiuto teorico prima, provare e poi chiedere una mano sull'esempio pratico che si sta realizzando.

Per aiutare a provare, le sezioni sulle parser functions e sulle basi di HTML e CSS spiegano anche qualche trucco per debuggare. In particolare gli strumenti di debug del browser sono fondamentali per capire cosa sta succedendo quando si lavora con HTML e CSS.

In più questa pagina dovrebbe anche essere un comodo strumento di consultazione per chi sa già come fare le cose ma non si ricorda qualche dettaglio.

Parser functions (e altre info utili)

Articolo principale: Parser functions help page di Mediawiki

Questa sezione è l'unica slegata dalle altre. Mentre tutte le successive parlano bene o male di HTML e CSS, questa riguarda solo il wikicode, e può essere letta separatamente dalle altre. Le parser functions sono strumenti offerti da Mediawiki (il software su cui gira Pokémon Central Wiki) che permettono di introdurre un controllo maggiore sull'output di una certa stringa di wikicode in funzione di alcuni parametri. Qui vengono spiegate solo le parser functions usate più comunemente e senza coprire tutti i possibili casi d'uso. Per i dettagli completi su tutte le parser functions esistenti si rimanda alla guida di MediaWiki.

Parametri dei template

Anche se i parametri non sono parser function in questo paragrafo viene spiegato come inserirli in un template. L'utilizzo di parametri è fondamentale in quasi tutti i template, ed è di solito alla base di tutti gli usi delle parser functions.

Per inserire un parametro nel wikicode del template la scrittura è del tipo {{{nomeparametro}}}, ossia con le triple parentesi graffe.

È possibile indicare un valore di default se il parametro non è presente: in tal caso la sintassi è {{{nomeparametro|valoredefault}}}. I parametri si possono anche annidare, per esempio {{{parametro2|{{{parametro1}}}}}} fa sì che parametro2 sia considerato uguale a parametro1 se omesso.

È comodo usare la scrittura {{{parametro|}}}, che significa "se parametro è presente usa il suo valore, altrimenti consideralo assente". Si può infatti notare che {{{parametro}}} nel caso in cui parametro non sia indicato mostra semplicemente il testo {{{parametro}}}. Tutto ciò servirà anche per l'utilizzo di alcuni strumenti elencati di seguito.

I parametri senza nome sono identificati dal loro numero, quindi il primo parametro senza nome passato è {{{1}}}, il secondo è {{{2}}}, etc. La numerazione dei parametri senza nome ignora quelli con nome: la chiamta {{template|param1|nome1=valore1|param2}} ha il parametro {{{2}}} che vale param2 e il parametro {{{3}}} senza valore.

noinclude e includeonly

In alcuni casi è necessario includere una parte di codice nel template ma non nelle pagine che lo includono, o viceversa. Un caso frequente sono le categorie: per esempio il template ItemInfobox appartiene solo alla categoria Template Infobox, mentre tutte le pagine che lo utilizzano vengono aggiunte a Strumenti ed altre categorie ma non quella precedentemente citata.

Per il contenuto che deve essere incluso nel template ed escluso dalle altre pagine è sufficiente racchiuderlo tra <noinclude> e </noinclude>; invece ciò che deve essere incluso nelle pagine ma non nel template va racchiuso fra <includeonly> e </includeonly>.

noinclude è anche utilizzato in vari template per scrivere le istruzioni di utilizzo, che ovviamente non devono essere incluse nelle pagine che utilizzano tali template.

#if

#if serve per valutare la presenza o meno di un determinato parametro e agire di conseguenza. La sintassi è {{#if: {{{parametro|}}} | [1] | [2] }}: se il parametro indicato è presente verrà preso in considerazione il codice contenuto al posto di [1], altrimenti quello al posto di [2]. Sia [1] che [2] sono facoltativi: scrivere {{#if: {{{parametro|}}} | [1] }} significa che se il parametro è assente non bisogna fare nulla, mentre {{#if: {{{parametro|}}} | | [2] }} agisce solo se il parametro è assente.

Più precisamente, la funzione if controlla se la stringa passata è vuota o meno. È quindi possibile utilizzarla per controllare contemporaneamente la presenza di più parametri: viene utilizzato [2] solo se la stringa risultante dalla concatenazione dei parametri è vuota, ovvero se nessuno dei parametri è stato passato (è un OR dei parametri). Per esempio il codice {{#if: {{{a|}}}{{{b|}}} | [1] | [2] }} restituisce i seguenti output:

a b Risultato
Presente Presente [1]
Presente Assente [1]
Assente Presente [1]
Assente Assente [2]

Per ottenere invece come risultato [1] solo quando entrambi i parametri sono presenti (l'AND) bisogna annidare due #if oppure combinare più parser functions.

#ifeq

Il funzionamento di #ifeq è molto simile a #if, con una differenza: non controlla se la stringa passata è vuota, ma la confronta con qualcosa. La sintassi è {{#ifeq: {{{parametro}}} | valore | [1] | [2] }}: se il parametro è uguale a valore esegue [1], altrimenti [2]. Come prima, sia [1] che [2] possono essere omessi.

Con la scrittura precedente, se il parametro non è indicato l'#ifeq sceglie [2]. Volendo si può anche usare una scrittura del tipo {{#ifeq: {{{parametro|valore}}} | valore | [1] | [2] }}, se si vuole che la scelta di default sia [1] anziché [2].

#switch

#switch è simile a #ifeq con la differenza che permette di confrontare la stringa con più valori stabiliti. La sintassi è {{#switch: {{{parametro}}} | valore1=[1] | valore2=[2] | valore3=[3] | ... | #default=[0] }}: se il parametro assume valore1 esegue [1], con valore2 esegue [2], e così via, mentre se non assume nessuno dei valori elencati esegue [0]. Sono possibili anche i "raggruppamenti": per esempio {{#switch: {{{parametro}}} | valore1.1|valore1.2|valore1.3|valore1.4=[1] | valore2=[2] | valore3=[3] | ... | #default=[0] }} fa sì che il comportamento sia lo stesso per i quattro valori indicati senza dover riscrivere il medesimo codice 4 volte. È anche possibile omettere la scritta #default per indicare il default, a patto che il valore [0] non contenga dei simboli = e sia messo per ultimo. Se si vuole che lo switch non restituisca niente in caso la stringa non assuma nessuno dei valori passati, si può semplicemente non mettere il #default = [0] in fondo.

#expr

#expr permette di scrivere un'espressione matematica facendo in modo che la pagina ne mostri il risultato. Anche i parametri possono essere usati come termini dell'espressione, ma in tal caso è bene assicurarsi che siano effettivamente dei numeri, per evitare spiacevoli conseguenze di questo tipo (l'espressione seguente è volutamente errata per mostrarne le possibili conseguenze):

Errore nell'espressione: carattere di punteggiatura "{" non riconosciuto.

Può essere utile sapere che {{PAGESINCATEGORY:nomecategoria|pages}} restituisce il numero di pagine che appartengono alla categoria indicata; unico problema, qui su PCW le categoria si aggiornano lentamente per cause non ben note, quindi può restituire valori errati anche se la scrittura è corretta. Un esempio di utilizzo è

{{#expr: {{PAGESINCATEGORY:Pokémon di prima generazione|pages}} + {{PAGESINCATEGORY:Pokémon di seconda generazione|pages}} + {{PAGESINCATEGORY:Pokémon di terza generazione|pages}} + {{PAGESINCATEGORY:Pokémon di quarta generazione|pages}} + {{PAGESINCATEGORY:Pokémon di quinta generazione|pages}} + {{PAGESINCATEGORY:Pokémon di sesta generazione|pages}} + {{PAGESINCATEGORY:Pokémon di settima generazione|pages}}}}

che mostra il numero totale di specie di Pokémono conosciute, ossia 807.

#ifexpr

#ifexpr è un misto di if ed expr: valuta un'espressione e restituisce un valore a seconda del risultato. La sintassi è {{#ifexpr: espressione | [1] | [2] }}: se l'espressione è "vera" esegue [1], altrimenti [2]. Come prima, sia [1] che [2] possono essere omessi.

L'espressione passata può essere sia un valore di verità che un numero. A seconda del tipo del risultato dell'espressione questo viene valutato "vero" in modo diverso:

  • se l'espressione è già un valore di verità viene usato quel valore. Per esempio, se {{{parametro}}} è un numero {{{parametro}}} > 0 è vero se il valore passato è positivo, falso altrimenti.
  • se l'espressione ha come risultato un numero, il valore 0 è falso, tutti gli altri sono veri. Quindi nel caso di prima {{{parametro}}} è vero se il valore passato è diverso da 0, falso altrimenti.

{{!}}

Dato che all'interno del codice di una parser function il carattere | serve a separare due argomenti, non si può utilizzare questo carattere per altri scopi, come per esempio le celle di una tabella. Per far fronte a questo problema è stato introdotto il template:!. Questo template viene sostituito da un semplice |, permettendo quindi di scrivere questo carattere all'interno di una parser function.

Per esempio, se voglio mostrare una riga di una tabella solo se un certo parametro è presente devo scrivere un codice del tipo:

{| class="text-center white-rows roundy-corners" style="{{#invoke: css | horizGrad | type = pcwiki}}"
|-
! Tipo
! Valore
{{#if: {{{parametro|}}} |
{{!}}-
{{!}} Informazione 1
{{!}} {{{parametro}}}
}}
|-
| Informazione 2
| Valore 2
|}

ed i risultati, rispettivamente in presenza e assenza del parametro, saranno i seguenti:

Tipo Valore
Informazione 1 {{{parametro}}}
Informazione 2 Valore 2


Tipo Valore
Informazione 2 Valore 2

Questo template può essere usato anche all'interno di un parametro passato ad un altro template per sostituire il carattere |, che verrebbe altrimenti interpretato come separatore tra due parametri.

HTML e CSS

Esistono milioni di guide in internet su HTML e CSS. Quello che voglio fare io in questo paragrafo però è parlare in breve solo delle cose che servono su Pokémon Central Wiki (o in generale su un sito che monta Mediawiki), visto che il parser (la parte del programma di Mediawiki che prende il wikicode di una pagina e genera l'HTML che viene poi mandato al browser) impedisce di usare alcune cose e ne inserisce in automatico delle altre. Chi ha già una conoscenza base di HTML e CSS può saltare la prossima sezione.

Nozioni di base sull'HTML

L'HTML è il linguaggio che i browser capiscono e sanno far vedere. Ha una struttura a tag, ovvero degli elementi che possono avere un contenuto, inseriti in una gerarchia: ogni tag ha un padre, che è il tag che lo contiene (l'unico tag senza padre, il tag html, viene inserito dal parser molto al di fuori della parte che si può modificare normalmente in una pagina), e dei figli, che sono i tag che lui contiene. Per realizzare un tag si utilizza un'apertura, ottenuto scrivendo il nome del tag tra <> (per esempio <div>), e una chiusura, ottenuta come l'apertura ma aggiungendo una / prima del nome del tag (esempio: </div>).

Per esempio, il codice

 <div A>
     <div B>
         testo di B che non è in C
         <div C>testo di C</div>
     </div>
     <div D>testo di D</div>
 </div>

crea un albero HTML con quattro tag (o elementi, sono sinonimi): il div A, che nell'esempio è il padre di tutti gli elementi che ci interessano, che ha due figli, i div B e D. D contiene solo del testo, mentre B contiene sia del testo che un altro figlio, ovvero C, che ha sua volta contiene del testo. Naturalmente non esistono solo i tag div e la struttura può essere complessa a piacere, ma questo esempio dovrebbe chiarire un po' le idee. Come si può vedere dall'esempio l'HTML non ha problemi se si aggiungono degli spazi o degli a capo all'interno di un elemento: il contenuto termina solo con il tag di chiusura. In HTML gli spazi e gli a capo nel codice vengono ignorati. Il parser di Mediawiki però non lo fa, discuteremo in seguito gli effetti di queste cose sulla pagina. È molto importante ricordarsi di chiudere sempre i tag aperti: il mio consiglio è di scrivere il tag di chiusura insieme a quello di apertura e poi scriverci all'interno.

Ogni tag HTML può avere degli attributi, che servono a specificare un po' meglio al browser cosa fare per mostrare quel tag. Gli attributi vanno messi all'interno dei < e > del tag di apertura, con la sintassi nome="valore", separando i vari attributi con spazi. Per esempio

<div class="text-center" style="color: #123456;">

crea un div con due attributi, class che vale text-center e style che vale color: #123456;. Anche se esistono molti attributi, su Pokémon Central Wiki si usano quasi esclusivamente i due dell'esempio, class e style, vedremo tra poco a cosa servono.

L'HTML puro permette qualche modifica all'aspetto degli elementi, ma con i siti moderni le possibilità che offre non sono sufficienti. Per questo esiste un altro linguaggio, il CSS, che permette di applicare degli stili agli elementi HTML. Gli stili sono suddivisi in regole, ognuna delle quali modifica un preciso aspetto dell'elemento (colore di sfondo, colore del testo, allineamento del testo, ...). Le regole sono scritte nella forma proprietà: valore;, dove proprietà è il nome di una proprietà CSS mentre valore è il valore che le si vuole assegnare. Per aggiungere degli stili agli elementi HTML si usano 2 modi su PCW:

  • Aggiungerli inline, ovvero mettere l'attributo style e dargli come valore le regole CSS volute, separate da un punto e virgola.
  • Aggiungere una classe, ovvero mettere l'attributo class e dargli come valore i nomi delle classi volute, separate da uno spazio.

Quindi l'esempio di prima crea un div con la classe "text-center" e una sola regole inline, ovvero "color: #123456;".

I tag HTML più comuni su Pokémon Central Wiki sono sicuramente i div. I div di default sono larghi quanto il padre e quindi se nel wikicode della pagina vengono inseriti senza un padre occupano tutta la riga, andando a capo dopo il contenuto precedente e mandando a capo il contenuto successivo (più avanti si vedrà come modificare questo comportamento). Altri elementi comuni sono gli span, che di default sono larghi quanto il loro contenuto, quindi si possono inserire anche a metà di una riga senza mandare a capo niente. Anche se l'HTML mette a disposizione moltissimi altri tag, alcuni di questi vengono bloccati dal parser di Mediawiki (per esempio non si possono inserire link o immagini in HTML, bisogna ricorrere alla sintassi Wikicode), mentre altri hanno un funzionamento "anomalo" (per esempio p ha del margine non voluto aggiunto da MediaWiki), quindi di fatto si usano solo div e span.

em & co

Esistono alcune unità di misura di lunghezza utilizzate in HTML/CSS. Tipicamente si usa em, che corrisponde alla dimensione del font utilizzato: dunque non si tratta di una dimensione assoluta, ma relativa. Una dimensione assoluta è px, che come suggerisce il nome corrisponde a un pixel. Per esempio il primo rettangolo è lungo 1em e alto 0.5em, mentre il secondo misura 10px per lato:
. Di norma è raccomandato l'utilizzo di em, dato che la dimensione dello schermo varia da dispositivo a dispositivo e ciò può avere effetti indesiderati se si utilizzano misure assolute. Per ulteriori informazioni su queste unità di misura si può consultare la pagina di W3Schools.

Stili CSS comuni

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). Per applicare un gradiente è sufficiente inserire in style una chiamata al modulo Css, ovvero un pezzo di Wikicode di questo tipo: {{#invoke: css | horizGrad | type = colore1 | type2 = colore2}} (gli spazi sono opzionali ma migliorano la leggibilità del codice): verrà automaticamente colorata con una sfumatura che va da colore1 a colore2. Scrivendo invece {{#invoke: css | horizGrad | type = colore1}}, oppure inserendo colore2 uguale a colore1, il gradiente va da colore1.light a colore1, ossia parte da una versione più chiara di colore1. In realtà esistono molti altri modi per richiamare il modulo Css, per i dettagli si rimanda al modulo stesso.

Al posto di colore1 e colore2 vanno inseriti i nomi di due colori; ce n'è uno per ogni tipo, per ogni regione, per la maggior parte dei giochi, per alcuni personaggi importanti e per molto altro. Per una spiegazione completa sui colori e come usarli, si rimanda alla pagina apposita.

Ecco un esempio:

<div style="{{#invoke: css | horizGrad | type = unima}}">Testo a caso</div>

Testo a caso

Altre proprietà di CSS utilizzate di solito sono elencati di seguito. La sintassi è, come già detto, proprietà: valore; (sempre con il ; dopo, anche per l'ultima regola):

  • padding: indica lo spazio tra il bordo del div ed il suo contenuto. Il padding può avere valori diversi nelle quattro direzioni, questa pagina contiene i dettagli.
  • margin: indica lo spazio fra il div e ciò che lo circonda. Anche il margin può avere valori diversi nelle quattro dimensioni, con la stessa sintassi del padding.
  • background: permette di ottenere uno sfondo a tinta unita anziché un gradiente: si può specificare un colore esistente scrivendo {{#invoke: colore | qualcosa}} (scrivendo il colore voluto al posto di qualcosa ed eventualmente aggiungendo | light o | dark), oppure l'esadecimale corrispondente al colore voluto. In entrambi i casi il valore deve essere preceduto da #. Se si vuole uno sfondo bianco usare la classe white-bg (descritta nel prossimo paragrafo).
  • color: permette di cambiare il colore del testo, vale quanto già detto per background. Se il testo deve essere nero o bianco usare la classe black-text o black-text (descritte nel prossimo paragrafo).
  • height: in teoria permette di impostare l'altezza dell'elemento. In pratica viene usata solo con valore "height: 100%;" per forzare un elemento ad avere l'altezza del padre, anche se non funziona nel modo semplice che ci si aspetta. Vedere la sezione su tricks e workarounds per più dettagli.

Ecco un esempio di elemento con un po' di stili:

<div style="background: #{{#invoke: colore | fuoco | dark}}; color: #eaeaea; margin: 4em; padding: 0.5em;">Testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso</div>

Testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso

Per capire esattamente cos'è successo a questo elemento, consiglio di usare l'inspector del browser. Esistono due metodi per aprire l'inspector:

  • Premere il tasto F12 funziona su Firefox, Chrome, Internet Explorer e Edge. In Safari la combinazione è alt + cmd + i, potrebbe essere necessario spuntare Sviluppo -> mostra inspector web.
  • Fare click destro in un punto della pagina e selezionare la voce Analizza elemento (o simile).

A questo punto, dovrebbe esserci in alto a sinistra un simbolo tipo rettangolo con sopra una freccina del mouse; premendolo e muovendo il mouse sul codice della pagina dovrebbero iniziare a venire evidenziati gli elementi corrispondenti nella pagina stessa. In questo modo ci si può fare un'idea di quali elementi hanno la forma che volevamo, quali no, quanto sono grossi margin e padding, se un elemento non si comporta come vorremmo, etc. È anche possibile modificare il codice HTML/CSS direttamente dall'inspector, per poter fare delle prove senza dover modificare alcuna pagina.

L'unico modo per imparare ad usare l'inspector per debuggare è con la pratica, il consiglio è di esercitarsi un po' perché è davvero comodo quando si creano template complessi per capire esattamente cosa non va (basta guardare i vari elementi e trovare quello che non ha le dimensioni/la posizione che ci si aspetta per capire almeno che il problema è tra lui e i suoi antenati più vicini).

Classi "base"

Questo è un elenco delle classi "base" disponibili su Pokémon Central Wiki:

  • roundy: arrotonda gli angoli. Esistono un sacco di varianti, tipo roundytl, roundytr, roundybl, roundybr che arrotondano ciascuna un solo angolo (rispettivamente top left, top right, bottom left, bottom right); roundytop, roundyleft o simili che arrotondano i due angoli dal lato indicato. Queste classi possono essere combinate in modo da arrotondare gli angoli voluti. È anche possibile far seguire ad ognuna di queste classi un numero tra 5, 10, 15, o 20 per cambiare il raggio dell'arrotondamento (se non si scrive niente il default è 10): per esempio un elemento con class="roundy-bl-5 roundy-right-15" avrà l'angolo in basso a sinistra arrotondato poco mentre i due a destra arrotondati molto.
  • roundy-header, roundy-footer, roundy-corners: servono sulle tabelle, arrotondano rispettivamente gli angoli superiori, gli angoli inferiori e tutti gli angoli sia della tabella che delle celle nelle posizioni d'angolo. Non funzionano in caso di rowspan o colspan che interessano una delle celle modificate da questa classe.
  • inline-block, same-line: queste due classi sono sinonimi e servono a cambiare il comportamento dell'elemento per farlo diventare largo come il contenuto (per esempio cambiando il comportamento di default dei div). Possono essere comode in alcuni layout responsive semplici, per lasciare al browser la scelta di quando mandare a capo due elementi affiancati che non ci stanno su schermi piccoli. Un div con questa classe non può essere allineato al centro o a destra con pull-center o pull-right: per fare ciò bisogna racchiuderlo in un parent che abbia la classe text-center o text-right rispettivamente.
  • pull-center, pull-left, pull-right: l'elemento viene allineato al centro, a sinistra o a destra rispettivamente. Allinearlo a destra o a sinistra con queste classi può causare problemi di sovrapposizione, vedi tricks e workarounds per una possibile soluzione.
  • text-left, text-center, text-right: per impostare l'allineamento del testo.
  • text-small, text-big, text-triple-big: per cambiare la dimensione del testo.
  • clear-left, clear-right, clear-both: evitano che ci sia del contenuto rispettivamente a sinistra, a destra o da entrambe le parti mandando a capo.
  • align-middle, vert-middle: align-middle allinea verticalmente tutti i fratelli con questa classe in modo che i centri siano alla stessa altezza; vert-middle dovrebbe allineare verticalmente al centro tutti i figli dell'elemento. Vedere i tricks e workarounds per come usare queste classi e vedere quando non funzionano.
  • no-border-spacing: da mettere ad una tabella, toglie il bordo tra le celle.
  • overflow-auto: mette "overflow: auto;" all'elemento. Non è chiarissimo come funzioni davvero, ma risolve alcuni problemi di posizionamento sbagliato.
  • white-bg: rende lo sfondo di colore bianco.
  • black-text o white-text: rende il testo di colore nero o bianco rispettivamente.

Tricks e workaround scoperti sul campo

  • https://wiki.pokemoncentral.it/index.php?title=Template%3AEpicodePrevNext&type=revision&diff=584428&oldid=584095 Se metti "width: 100%;" il CSS fa schifo, quindi decide che l'elemento è largo quanto il parent MA il margin è fuori dall'elemento e quindi è in più oltre al 100%. Quindi il tuo elemento esce a destra dal container (della dimensione del margin a a sinistra), che è un effetto che di solito non vuoi. In questo caso ho sistemato con "margin: 1em auto;", che mette margine 1em sopra e sotto (che vogliamo tenere) e mette margine automatico a destra e sinistra (che risulta nell'elemento centrato)
  • "height:100%;" non funziona a meno che uno degli antenati abbia una height calcolabile senza sapere il contenuto: per esempio, una cella di una tabella, un elemento di un flex, o una height fissa in em, px etc.
  • 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 white-rows basta usare ! invece della normale |. 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 p di default. Questo non sarebbe un problema dato che nei template raramente si inserisce un p, ma il parser ha anche questa simpatica prerogativa di interpretare una riga di testo come appunto testo e quindi wrapparla in un p. 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 p 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à).

Responsività

L'idea delle classi responsive è molto semplice: hanno un comportamento diverso a seconda della larghezza dello schermo. Le classi responsive usate qui su Pokémon Central Wiki sono quasi tutte del tipo "se lo schermo è abbastanza stretto fai qualcosa, altrimenti non fare nulla". Le dimensioni disponibili sono xl, lg, md, sm, xs: indicativamente xl rappresenta i PC, lg i tablet di medie dimensioni, md i tablet più piccoli ed i telefoni in landscape, sm o xs i telefoni in portrait. Le larghezze di schermo in cui si cambia tra due sigle (es tra xs e sm) si chiamano breakpoint.

Se una sigla viene omessa viene omessa si prende in considerazione la precedente. Per esempio class="width-xl-50 width-sm-100" è equivalente a class="width-xl-50 width-lg-50 width-md-50 width-sm-100 width-xs-100".

Width responsive

Un esempio di utilizzo di questi strumenti è impostare impostare una larghezza variabile in base alla dimensione dello schermo. Per farlo si utilizza una scrittura del tipo width-__-__. In prima posizione si indica la sigla della larghezza (una delle 5 descritte nel paragrafo precedente), in seconda la percentuale. Quest'ultima si imposta semplicemente scrivendo il numero (senza il simbolo %), che però deve essere un multiplo di 5 oppure 33 o 66.

Ecco un esempio pratico:

<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div>

lg:xs:

elemento

Stringendo progressivamente lo schermo si può notare che la larghezza dell'elemento è pari al 20% negli schermi xl, 40% negli lg, e così via fino al 100% negli xs.

È importante notare che questa percentuale non è riferita all'intera larghezza dello schermo, ma alla larghezza del contenitore; nell'esempio seguente lo stesso elemento con larghezza variabile è contenuto in un padre con larghezza fissa al 60% dello schermo. Ovviamente valgono le stesse considerazioni se il padre ha a sua volta una larghezza variabile.

<div class="width-xl-60" style="background: #999; padding: 0.2em;">padre
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div></div>

lg:xs:

padre
elemento

Buona parte dei layout responsive presenti qui su Pokémon Central Wiki è realizzata semplicemente sfruttando le width responsive abbinate ai flex, che permettono di allineare per bene i vari pezzi.

flex

L'idea dei flex è quella di posizionare gli elementi all'interno del contenitore in modo da ottimizzare gli spazi sia su schermi piccoli che su schermi grandi. Ecco le classi da utilizzare più o meno sempre:

  • flex: definisce un contenitore flex.
  • flex-row, flex-row-reverse, flex-column, flex-column-reverse: indica in quale direzione si dispongono gli elementi. La prima è quella utilizzata praticamente ovunque.
  • flex-wrap: fa sì che il contenuto vada a capo se la larghezza è insufficiente. Di default infatti il contenitore mette tutto su una sola riga anche se il contenuto poi sfora.

Queste classi vanno applicate solo al contenitore, non ai contenuti (a meno che essi non siano a loro volta contenitori di elementi da gestire con i flex). Esempio:

<div class="flex flex-row flex-wrap" style="{{#invoke: css | horizGrad | type = johto}}">
<div style="margin: 1em;">[[File:HGSS Torre Sprout-Giorno.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS Rovine d'Alfa-Pomeriggio.png|200px]]</div>
<div style="margin: 1em;">[[File:Bosco Lecci Giorno.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS Tohjo Falls-Evening.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS Via Vittoria-Giorno.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS IsoleSpumarine-Giorno-Sera.png|200px]]</div>
</div>

HGSS Torre Sprout-Giorno.png
HGSS Rovine d'Alfa-Pomeriggio.png
Bosco Lecci Giorno.png
Cascate Tohjo Sera HGSS.png
HGSS Via Vittoria-Giorno.png
HGSS IsoleSpumarine-Giorno-Sera.png

Si può notare che i div non vanno più a capo automaticamente, ma piuttosto si affiancano finché c'è spazio a sufficienza e vanno a capo solo quando necessario.

Altre classi di comune utilizzo sono flex-main-_ e flex-items-_:

  • flex-main-start, flex-main-center, flex-main-end: quando la larghezza complessiva degli elementi di una riga è inferiore al 100%, queste classi permettono di gestire il loro allineamento (rispettivamente a sinistra, al centro e a destra).
  • flex-main-space-around: gli elementi vengono distribuiti uniformemente sulla riga, senza variare la propria larghezza.
  • flex-main-stretch: gli elementi vengono allargati uniformemente in modo da occupare l'intera riga.
  • flex-items-center: gli elementi vengono centrati in altezza.
  • flex-items-stretch: gli elementi vengono allungati uniformemente in modo da essere alti come quelli nella stessa riga.

Moltissimi template (tra cui per esempio gli infobox) sfruttano questi strumenti per costruire il proprio layout. Ecco un esempio pratico:

<div class="flex flex-row flex-wrap flex-items-center flex-main-stretch width-xl-50 width-lg-80 width-sm-100 roundy text-center" style="{{#invoke: css | horizGrad | type = unima}} padding: 0.2em;">
<div class="width-xl-100 big-text">'''Titolo/sottotitolo'''</div>
<div class="width-xl-20">'''Voce 1'''</div>
<div class="width-xl-80 width-sm-100 roundy" style="background: #fff; margin: 0.1em 0; padding: 0.1em;">Qui ci va un po' di testo</div>
<div class="width-xl-20">'''Voce 2'''</div>
<div class="width-xl-80 width-sm-100 roundy" style="background: #fff; margin: 0.1em 0; padding: 0.1em;">Qui c'è un altro po' di testo messo a caso per riempire il box e rendere bene l'idea</div>
<div class="width-xl-20">'''Voce 3'''</div>
<div class="width-xl-80 width-sm-100 roundy" style="background: #fff; margin: 0.1em 0; padding: 0.1em;">Ancora testo</div>
</div>

Titolo/sottotitolo
Voce 1
Qui ci va un po' di testo
Voce 2
Qui c'è un altro po' di testo messo a caso per riempire il box e rendere bene l'idea
Voce 3
Ancora testo

Il primo elemento occupa sempre una larghezza del 100%, in modo da far andare a capo ciò che viene dopo anche se il contenitore è un flex. Le coppie successive su schermi grandi occupano rispettivamente 20% e 80% di larghezza, che risulta in un 20% + 80% = 100% per coppia (il che manda a capo l'elemento successivo come sopra), mentre su schermi piccoli il secondo elemento va a 100% e quindi deve andare a capo perché non ci sta nello spazio rimanente (20% + 100% > 100%).

Esistono anche alcune "scorciatoie":

  • flex-row-stretch-around è equivalente a flex flex-row flex-items-stretch flex-main-space-around.
  • flex-row-center-around è equivalente a flex flex-row flex-items-center flex-main-space-around.
  • flex-row-center-stretch è equivalente a flex flex-row flex-nowrap flex-items-center flex-main-stretch.

Per una guida completa a tutti gli strumenti relativi ai flex, si rimanda a questa pagina.

Nota: sembra (ci sono stati problemi, ma nessuno ha mai condotto test più accurati per accertarne con sicurezza la causa) che Safari visualizzi in modo errato dei flex il cui padre sia anch'esso un flex. Non sembra ci siano problemi del genere in caso il flex sia un antenato più vecchio del padre. In ogni caso quando si usano flex annidati chiedere sempre a qualcuno con Safari se la pagina si vede bene.

Tabelle responsive

L'idea delle tabelle responsive è di trasformare ogni riga in un layout responsive solo quando lo schermo è troppo stretto; si usa la nomenclatura card layout. Per trasformare una riga in una card basta assegnarle la classe flex al di sotto di una certa larghezza: per esempio, se si vuole responsivizzare la riga da sm in giù si aggiunge class="flex-sm ..." subito dopo il simbolo |- che la delimita. Di seguito si userà sm come esempio per brevità, ovviamente basta sostituirlo con il breakpoint opportuno se si vuole usarne uno diverso.

Una volta inserita questa classe, si possono aggiungere le altre flex-... già descritte in precedenza: funziona perché il CSS le ignora se l'elemento non è flex, e ciò accade solo sotto il breakpoint specificato. flex-wrap è presente di default ma non fa male aggiungerlo. Dato che il margin viene automaticamente ignorato, aggiungerci style="margin-top: 0.5rem;" sistema la visualizzazione separando le caselle.

La roundyness si aggiunge con un banalissimo roundy, altre cose vanno testate. Se ci sono più righe "collegate" da un rowspan, si può applicare roundy-header alla prima riga, roundy-footer all'ultima e togliere la roundyness alle altre, in modo che su schermi stretti si abbia una casella unica con i bordi arrotondati correttamente.

Bisogna poi sistemare le larghezze per far andare a capo le cose. Si possono usare le solite width-__-__, ma esistono anche le min-width che spingono a capo i flex-items se questi diventano troppo piccoli, e funzionano bene se accompagnate da flex-main-stretch.

Ultima cosa da tenere a mente sta nel fatto che le intestazioni andranno nascoste, dato che il layout non combacia se la riga diventa una card (basta un banale class="hidden-sm"). Di conseguenza, le informazioni non ovvie dovranno essere specificate in ogni singola riga: è sufficiente utilizzare uno span con la classe class="visible-sm".

Eventuali caselle vuote possono essere nascoste su schermi stretti semplicemente assegnando loro la classe hidden-sm.

Ecco un esempio pratico:

{| class="std-table sortable" style="{{#invoke: css | horizGrad | type = alola}} padding: 0.3em;"
|- class="hidden-sm black-text"
! Alleato !! Luogo !! [[Condizione atmosferica#Pioggia battente|Pioggia]] !! {{DL|Condizione atmosferica|Grandine}} !! [[Condizione atmosferica#Tempesta di sabbia|Sabbia]]
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 061}} [[Poliwhirl]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 062}} [[Poliwrath]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|G}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 186}} [[Politoed]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|N}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-header" style="margin-top: 0.5rem;"
| rowspan="4" class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 351}} [[Castform]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | {{rt|17|Alola}}, [[Giungla Ombrosa]], [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | [[Villaggio Tapu]], [[Monte Lanakila]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-footer"
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], {{DL|Condizione atmosferica|grandine}})</span><span class="visible-sm">, </span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 444}} [[Gabite]]
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 584}} [[Vanilluxe]]{{#invoke: sup | USUL}}
| style="padding: 0.5em;" | [[Monte Lanakila]] (tranne la base)<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 704}} [[Goomy]]
| style="padding: 0.5em;" | [[Giungla Ombrosa]], {{rt|17|Alola}}<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|}

Poliwhirl Poliwhirl Giardino di Malie: 10% (pioggia)
Poliwrath Poliwrath Giardino di Malie: 1%Giorno (pioggia)
Politoed Politoed Giardino di Malie: 1%Notte (pioggia)
Castform Castform Giardino di Malie: 10% (grandine, sabbia)
Percorso 17, Giungla Ombrosa, Isola Exeggutor: 1% (pioggia), 10% (grandine, sabbia)
Villaggio Tapu, Monte Lanakila: 10% (pioggia, sabbia), 1% (grandine)
Gabite Gabite Deserto Haina: 10% (sabbia)
Vanillite Vanillite Villaggio Tapu: 10% (grandine)
Vanillish Vanillish Monte Lanakila: 10% (grandine)
Vanilluxe VanilluxeUsUl Monte Lanakila (tranne la base): 1% (grandine)
Goomy Goomy Giungla Ombrosa, Percorso 17: 10% (pioggia)
Sliggoo Sliggoo Isola Exeggutor: 10% (pioggia)

In alcuni casi può essere preferibile rendere queste etichette sempre visibili, per esempio quando la tabella ha tante colonne, oppure quando ci sono righe con colspan diverso da 1 che non sono ben identificabili. In tal caso si può usare, al posto dello span, <div class="inline-block-md">. Ecco un esempio:

{| class="std-table" style="{{#invoke: css | horizGrad | type = grazia}} padding: 0.3em;"
|- class="hidden-sm"
! Evento !! colspan="3" | Variazione in base all'affetto corrente
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | Aumento di [[livello]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''': </div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | Uso di [[pozioni]] o [[strumenti per curare problemi di stato]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''': </div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | Lotta contro un [[Capopalestra]], un [[Superquattro]] o il [[Campione]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | Uso di [[MT]] o [[MN]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>+1
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>—
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | [[K.O.]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''': </div>-1
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | Deposito nel [[Sistema Memoria Pokémon|PC]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>-3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>-5
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | [[Scambio]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''': </div>Reset a 90
|}

Aumento di livello
0-99
+5
100-199
+3
200-255
+2
Uso di pozioni o strumenti per curare problemi di stato
0-99
+5
100-199
+3
200-255
+2
Lotta contro un Capopalestra, un Superquattro o il Campione
0-199
+3
200-255
+2
Uso di MT o MN
0-199
+1
200-255
K.O.
0-255
-1
Deposito nel PC
0-199
-3
200-255
-5
Scambio
0-255
Reset a 90

Pattern ricorrenti

Mini sprite e nome del Pokémon negli elenchi di Pokémon

Avere il Mini sprite a sinistra del nome di un Pokémon è lo standard degli elenchi di Pokémon, come per esempio Cicli uovo. Notevoli eccezione è roba come Elenco Pokémon per peso.

Nonostante a prima vista possa sembrare facile ed intuitivo, la responsivizzazione non lo è. Infatti, laddove su Desktop i Mini Sprite sono incolonnati e i nomi centrati nello spazio rimanente a destra, su Mobile è carino che l'accorpamento dei due sia centrato. Per esempio:

Desktop
Pokémon
Distruzionefm.png Distruzionefm.png Distruzionefm.png 15
Cerchi
Pokémon
Nessuna 9
Cerchi
Pokémon
Nessuna 4
Cerchi
Pokémon
Nessuna 8
Cerchi
Pokémon
Nessuna 10
Cerchi
Pokémon
Tagliofm.png Tagliofm.png 3
Cerchi
Mobile
Pokémon
Distruzionefm.pngDistruzionefm.pngDistruzionefm.png 15
Cerchi
Pokémon
Nessuna 9
Cerchi
Pokémon
Nessuna 4
Cerchi
Pokémon
Nessuna 8
Cerchi
Pokémon
Nessuna 10
Cerchi
Pokémon
Tagliofm.pngTagliofm.png 3
Cerchi

Notare la differenza su Jynx: nella versione desktop il nome è centrato nello spazio colorato in peachpuff, che è largo abbastanza da contenere anche Wobbuffet; nella versione mobile è separato da un po' di spazio vuoto dal mini sprite, e l'agglomerato mini sprite-nome è centrato nel box colorato anche qui in peachpuff.

Come si implementa una cosa del genere? Con i seguenti tre passi:

  1. Spostare mini sprite e nome nella stessa cella. Quindi via eventuali colspan="2" dall'header. Questo è necessario per accorpare mini sprite e nome nel layout mobile.
  2. Wrappare mini sprite e nome in un <div class="flex flex-row flex-nowrap flex-items-center"> (qui è dove concretamente vengono accorpati) e il nome in uno <span class="flex-item-fill">. Così facendo, lo span contenente il nome si allarga ad occupare tutto lo spazio disponibile nella colonna, spingendo il mini sprite all'estrema sinistra: dato che i mini sprite hanno tutti la stessa larghezza, l'effetto visivo è che sembrano incolonnati. Il testo dentro lo span del nome è generalmente centrato dal fatto che l'intera tabella ha il testo centrato, ma in caso non lo fosse, basta aggiungere la classe CSS text-center.
  3. Aggiungere la classe block-xx (laddove xx è il breakpoint a cui la riga della tabella non è più una riga) al wrapper di mini sprite e nome, e style="padding-left: 0.3em;" (0.3em è la larghezza di un &nbsp;) allo span che wrappa il nome. Questo sistema la parte mobile. Ciò che serve è fare in modo che lo span contenente il nome non si allarghi ad occupare tutto lo spazio disponibile. Dato che il meccanismo è basato sui flex, basta fare in modo che il parent non sia più un flex al breakpoint desiderato per disattivare i comportamenti flex dei figli. Il padding laterale serve a separare il nome dal mini sprite, e di nuovo, se il tutto non è già centrato così, aggiungere la classe CSS text-center sistema la situazione.
    NOTA: se il nome va a capo da mobile, è probabilmente perché hai usato un div al posto di uno span. L'uso di un elemento inline o inline-block è fondamentale, poiché in assenza di un parent flex gli elementi block occupano l'intera riga.

Un esempio? La riga di Jynx nella tabella di desktop di questo stesso tutorial ;D (ignorare la parte del coloramento peachpuff, ovviamente).