Pokémon Central Wiki

Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"

Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)

Versione delle 12:59, 15 dic 2018

1 970 byte aggiunti ,  12:59, 15 dic 2018
nessun oggetto della modifica
 
===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.
Per una guida completa a tutti gli strumenti relativi ai flex, si rimanda a [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ questa pagina].
 
====Note importanti====
'''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.
* Alcuni browser possono dare problemi quando si utilizzano <code>flex</code> annidati, ossia elementi <code>flex</code> il cui padre è a sua volta un <code>flex</code>, mentre non sembrano esserci problemi quando il <code>flex</code> è un antenato più vecchio del padre. Nello specifico si sono rivelati potenzialmente problematici Safari ed i browser basati su Chromium (tra i quali rientrano Chrome, Opera, Vivaldi, Edge), mentre Firefox dovrebbe esserne "immune". Per questo motivo quando si utilizzano <code>flex</code> annidati è sempre meglio controllare che non ci siano problemi, eventualmente chiedendo a qualcuno che utilizzi questi browser se la pagina si vede bene.
* Quando si fissa la larghezza di un elemento (per esempio tramite le classi <code>width-__-__</code> descritte in precedenza), è importante notare che tale larghezza '''non''' comprende eventuale margine, e ciò può produrre effetti indesiderati. Se per esempio si ha un padre <code>flex</code> contenente due elementi con <code>width-xl-50</code> e un po' di <code>margin</code>, intuitivamente questi dovrebbero essere affiancati ed occupare metà larghezza ciascuno, ma in pratica questo <code>margin</code> fa sì che la larghezza effettiva diventi superiore a 50%, e quindi manda a capo. Un possibile workaround consiste nello "sdoppiamento" dell'elemento: si utilizza un <code><nowiki><div></nowiki></code> che abbia la larghezza voluta e <code>padding</code> pari al margine voluto, ed al suo interno si mette l'elemento senza impostarne la larghezza, che è già stabilita dal padre.
** In alcuni casi può essere necessario assegnare al primo di questi due elementi le classi <code>flex flex-main-stretch flex-items-stretch</code> per fare in modo che il suo contenuto non abbia dimensioni inferiori. Attenzione però all'utilizzo di flex annidati descritto poco sopra.
 
<nowiki>
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="margin: 0.2em; background: #ff0000;">Elemento 1</div>
<div class="width-xl-50" style="margin: 0.2em; background: #00ff00;">Elemento 2</div>
</div>
{{-}}
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #ff0000;">Elemento 1</div></div>
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #00ff00;">Elemento 2</div></div>
</div>
</nowiki>
 
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="margin: 0.2em; background: #ff0000;">Elemento 1</div>
<div class="width-xl-50" style="margin: 0.2em; background: #00ff00;">Elemento 2</div>
</div>
{{-}}
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #ff0000;">Elemento 1</div></div>
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #00ff00;">Elemento 2</div></div>
</div>
 
===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 <code>flex</code> al di sotto di una certa larghezza: per esempio, se si vuole responsivizzare la riga da <code>sm</code> in giù si aggiunge <code>class="flex-sm ..."</code> subito dopo il simbolo <code>|-</code> che la delimita. Di seguito si userà <code>sm</code> 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 <code>flex-...</code> già descritte in precedenza: funziona perché il CSS le ignora se l'elemento non è <code>flex</code>, e ciò accade solo sotto il breakpoint specificato. <code>flex-wrap</code> è presente di default ma non fa male aggiungerlo. Dato che il <code>margin</code> viene automaticamente ignorato, aggiungerci <code>style="margin-top: 0.5rem3em;"</code> sistema la visualizzazione separando le caselle.
 
La ''roundyness'' si aggiunge con un banalissimo <code>roundy</code>, altre cose vanno testate. Se ci sono più righe "collegate" da un <code>rowspan</code>, si può applicare <code>roundy-header</code> alla prima riga, <code>roundy-footer</code> all'ultima e togliere la roundyness alle altre, in modo che su schermi stretti si abbia una casella unica con i bordi arrotondati correttamente.
|- 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.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| 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>
| 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.5rem3em;"
| 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%
| 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.5rem3em;"
| 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" |
| 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| 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.5rem3em;"
| 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>
| 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.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
|- 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.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| 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>
| 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.5rem3em;"
| 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%
| 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.5rem3em;"
| 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" |
| 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| 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.5rem3em;"
| 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>
| 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.5rem3em;"
| 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>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
|- 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | Aumento di [[livello]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''':&nbsp;</div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+1
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>&mdash;
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[K.O.]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''':&nbsp;</div>-1
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>-3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>-5
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[Scambio]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''':&nbsp;</div>Reset a 90
|- 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.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | Aumento di [[livello]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''':&nbsp;</div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>+1
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>&mdash;
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[K.O.]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''':&nbsp;</div>-1
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| 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''':&nbsp;</div>-3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''':&nbsp;</div>-5
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.5rem3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[Scambio]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''':&nbsp;</div>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]]. NotevoliNotevole 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:
Lucas992X
Amministratori
46 258

contributi

Estratto da "https://wiki.pokemoncentral.it/Speciale:DiffMobile/695315"