Ciao a tutti.
Oggi parleremo delle funzionalità del browser e di
cosa puoi fare per assicurarti che i tuoi siti abbiano un aspetto coerente,
indipendentemente da come le persone ti accedono.
Quindi, anche se HTML5 ha davvero spinto gli sviluppatori di browser a tutti
venire a questa implementazione coerente, differiscono davvero per visualizzazione e
aderenza ai nuovi tag che stanno uscendo.
E come i browser aggiornano e cambiano e nuovi browser escono, si sta andando a
tenere a mente che non tutti stanno guardando la tua pagina allo stesso modo in cui sei.
Quindi, è tua responsabilità assicurarti che la tua pagina funzioni per un vasto pubblico.
E mentre abbiamo parlato molto di accessibilità, e diversi modi per
accedere al web, si riduce anche alle implementazioni più basilari del browser.
Quindi, per prima cosa, parliamo di gestire queste differenze stilistiche.
Il modo più semplice per eliminare le differenze del browser è
creare qualcosa chiamato foglio di stile predefinito.
E in quel foglio di stile, in realtà entreresti e
cancellerai qualsiasi delle impostazioni predefinite del browser per i diversi elementi che sono in stile.
Quindi quando entri e lo fai prenderai, P, H1, H2, tutte le intestazioni,
tutti i diversi tag semantici e tu entri e diresti,
voglio che abbiano padding di zero e margine di zero.
Anche le mie voci della lista non dovrebbero avere alcuna decorazione.
Quindi, mentre questo ti assicurerà un aspetto molto coerente,
devo ammettere che ti farà sembrare pagina assolutamente orribile.
Ma questo è il prezzo che pagherai in modo
che quando inizi a scrivere le tue regole di stile, puoi migliorare e
inevitabilmente migliorare e la tua pagina avrà un aspetto migliore e migliore.
Altrimenti, se non usi quello che chiamiamo questo foglio di stile predefinito,
progetterai la tua pagina e sarà davvero difficile
per te ricordare se hai effettivamente selezionato ogni elemento che stai usando.
Una delle altre cose di cui vogliamo parlare è gestire quelle che chiamiamo
proprietà non supportate.
Quindi, prima di tutto, sappiamo che tutti i browser non supportano tutti i tag HTML5.
L' hai già visto, in alcune delle codificazioni che hai fatto con me.
Allo stesso modo, non tutti i browser supportano tutte le proprietà CSS3.
Ci sono alcune proprietà che sembrano davvero interessanti su alcuni browser, ma
non sono gestite per impostazione predefinita in altri browser.
Ma c'è un modo per aggirare questo in molti casi.
E ciò che è, è che i browser stanno offrendo prefissi.
Quindi a volte li chiamano prefissi del browser, a volte prefissi
del fornitore, ma l'importante è che è una soluzione davvero rapida per
gestire tutte le opzioni non supportate che potresti incontrare.
Ora, quando ho visto per la prima volta i prefissi del browser, ero completamente intimidito.
Non sapevo cosa stesse succedendo, sembrava un po' strano,
e mi sentivo pigro e non volevo affrontarlo.
Ma sono qui per dirvi che in realtà è molto, molto facile usare questi prefissi.
Allora, diamo un'occhiata a quello di cui sto parlando.
Hai usato proprietà diverse e speriamo che il browser stia funzionando.
Ma ora, per alcune di quelle proprietà, si sta andando a desiderare e aggiungere un prefisso o
un po 'di fronte ad esso, come webkit, moz, ms, o per Opera.
Ognuno di questi prefissi dice, hey, se sei su questo particolare browser,
questo è quello che ho bisogno che tu faccia per ottenere il look che il designer sta andando per.
Quindi quali sono alcune di queste proprietà che sono spesso non supportate?
Includono il conteggio delle colonne,
che è un modo per aggiungere più colonne nei paragrafi o div.
È un modo davvero carino per rompere il tuo testo che è reattivo.
Quindi se qualcuno ridimensiona la pagina, i paragrafi in realtà ridimensionano.
Abbiamo un'altra cosa chiamata border-radius, che le persone amano davvero
usare perché aggiunge un piccolo bordo arrotondato ai bordi dei tuoi elementi.
Una terza opzione sarebbe gradiente.
E il gradiente è un tipo di colore di sfondo molto cool che lascia passare il colore
da una tonalità di blu a forse grigio o rosso o qualcosa del genere.
E gli conferisce un aspetto diverso.
Ora non c'è modo per
te di sapere davvero quali proprietà sono supportate e quali no.
Quindi ho questo link qui a un sito chiamato caniuse.com.
E quello che caniuse.com fa è elenca le diverse proprietà e
ti dice quali browser li supportano e quali hanno bisogno dei prefissi.
Quindi è una buona idea controllare quel sito mentre inizi a sviluppare la tua pagina.
Ma per ora, andiamo avanti e guardiamo un esempio.
Quindi, in questo esempio, ho un file chiamato prefixes.html.
E voglio solo mostrarti rapidamente come appare su entrambi Chrome qui,
e anche su Safari.
Sembrano piuttosto simili.
Ma ci sono pochi spazi in cui il carattere potrebbe non corrispondere esattamente, o
parte della spaziatura potrebbe non corrispondere esattamente.
Quindi, se volevo sbarazzarmene, se volevo davvero assicurarmi che
le pagine sembrassero esattamente le stesse, quello che posso fare è aggiungere un foglio di stile predefinito.
Quindi andiamo quaggiù, e
sto per dire hey voglio usare il mio foglio di stile predefinito.
E quello che sembra è un file davvero pazzo in cui ho elencato
tutti i diversi elementi.
E poi, dopo, metti cose come,
non voglio alcun imbottitura, non voglio alcun margine.
Se ho elenchi, sbarazzati dello stile della lista.
Rendilo davvero il piu' brutto possibile.
Quindi, se torno qui, potresti non vedere un'enorme differenza perché i browser
sono già abbastanza semplici, ma puoi vedere le cose si spostano leggermente.
Ci liberiamo di un po' di roba.
E allo stesso modo, quando aggiorno il Safari,
sembreranno un po 'più simili.
Quindi ora, andiamo avanti e diamo
un'occhiata a quell'esempio in cui alcune delle proprietà non sono supportate.
E ho intenzione di tornare al mio file HTML, e ho intenzione di dire, hey, voglio
usare il mio foglio di stile per andare avanti e stile alcune cose che non sono sempre supportate.
E le cose di cui sto parlando specificamente è che
inizieremo con questa idea del conteggio delle colonne.
Come funzionano il conteggio delle colonne e il gap delle colonne si dice al browser
quante colonne si desidera e quanto spazio si desidera tra quelle colonne.
Quindi ora, quando mi aggiorno, puoi vedere che è passato dall'essere
tutto un paragrafo lungo tipo di blocco al fatto che tutto è diviso.
Ed è davvero bello perché è dinamico.
Se ridimensiono il browser, tutto si muove in giro.
E questo è un modo davvero bello per farlo.
Una delle altre cose che vorrei aggiungere come qualcosa da guardare, è questa idea
di invece di avere un quadrato, voglio un po 'arrotondare i bordi.
Quindi lo fai aggiungendo quello che viene chiamato il raggio di confine.
Ora mi fermero' prima di aggiornare la pagina, perche' voglio
indicarti qualcosa in caso fossi intimidita come me quando ho iniziato a farlo.
Il raggio di confine è solo una semplice proprietà che è stato intorno per un po '.
E puoi vederlo proprio qui, e dargli un valore.
Lo stesso con il conteggio delle colonne e il gap delle colonne.
Tutta questa idea di aggiungere prefissi significa semplicemente, prendi la tua proprietà normale e
schiaffi questi prefissi su di esso.
Non hai bisogno di imparare nulla di nuovo, devi solo ricordare i nomi dei prefissi.
E quindi voglio che tu provi davvero ad abbracciarlo, e ti renda
conto che non stai facendo niente di troppo spettacolare.
Quindi ora che l'ho fatto, ce l'ho fatta 25.
E io vado avanti a rinfrescarlo.
E come potete vedere, ho curvato i diversi bordi intorno al lato, il
che è piuttosto bello.
L' ultima cosa che ho intenzione di fare è aggiungere un gradiente al colore.
Quindi in questo momento sono un colore blu coerente.
Ed è importante che, indipendentemente da ciò che si dà un tipo di colore di sfondo,
che si desidera essere utilizzato, è il caso in cui il gradiente non sta accadendo.
Ma ora per il gradiente lineare, stai semplicemente dando due colori che vorresti
vedere e tipo di dire quanto vuoi all'inizio e alla fine.
Quindi, di nuovo, ho il blu normale.
E ora, quando mi rinfresco, vado da un blu a una specie di grigio chiaro.
Questo è bello ed è un sacco di codice ed è molto divertente giocare con esso.
Quindi voglio ricordarti che quando ti stai sviluppando, non cercare di memorizzare le cose.
Non cercare di ricordare come fare tutto.
Ho intenzione di fare clic su qui, e fare Inspect Element.
Perché se decidi più tardi che è troppo una curva, o non ti piace quel
colore, quello che non vuoi fare è digitare, salvare, aggiornare, digitare, salvare, aggiornare.
Diventa davvero fastidioso.
Quindi invece, vado proprio qui alla mia sezione e sto andando a guardare,
e si può vedere in Inspect Element che ha detto che non ho usato il prefisso moz, e
non ho usato il prefisso Opera, perché non ho bisogno di.
Io sono Chrome.
Quello che posso fare e' venire qui al raggio di confine e cambiarlo.
Invece di 25 pixel, se voglio meno di una curva, posso renderla 5 pixel.
Si può vedere che succede in tempo reale.
Se vuoi farlo sembrare folle, puoi farlo 50 pixel.
Puoi anche usare le percentuali, se vuoi.
Quindi vado avanti e metto il 15%.
Quindi è un po 'giocare con tutte queste cose in modo dinamico e poi
una volta ottenuto un valore che ti piace molto, copiarlo e metterlo nel tuo file CSS.
Quindi i prefissi del browser sono solo qualcosa con cui giocare che può essere divertente.
Puo' essere frustrante.
Ma la cosa più importante è che si dovrebbe capire che è molto semplice.
Una delle cose che potresti fare mentre stai aggiungendo prefissi è che realizzi,
per ora, la cosa più semplice da fare è aggiungere quei prefissi a mano.
Metti la proprieta' che vuoi mettere dentro, diciamo «raggio di confine».
E poi entra e aggiungi webkit, moz, le diverse cose del genere.
Quando inizi a usare i prefissi,
quello che farai è aggiungerli a mano.
Se sai che hai il raggio di confine, vai avanti e fai il raggio di confine
e poi aggiungi quel moz, il webkit, cose diverse del genere a mano.
Man mano che diventi più esperto e forse vuoi provare cose diverse,
ci sono modi per automatizzare l'aggiunta di questi prefissi.
Se stai usando un editor come Sublime,
puoi effettivamente mettere piccoli pacchetti lì dove puoi controllare se
vuoi che Sublime aggiunga o meno quei pacchetti ogni volta che vedono proprietà diverse.
È inoltre possibile utilizzare programmi esterni che cambieranno dinamicamente il codice
man mano che le persone lo caricano per inserire solo i prefissi di cui hanno bisogno.
Se ricordi nel mio esempio, anche se stavo usando Chrome,
il mio foglio di stile aveva ancora tutti i diversi prefissi.
Questo aggiungerà automaticamente solo quelli di cui hai bisogno.
Di nuovo, questi sono un po 'cool, ma non preoccupatevi di loro in questo momento.
Per ora, concentriamoci sulle basi.
Quindi, per rivedere, quando inizi a codificare,
quando inizi a creare fogli di stile, vorrai
pensare a usare un foglio di stile predefinito per rimuovere quelle differenze stilistiche.
E quando lo farai, ho bisogno che tu pensi ad alcune cose.
Quindi, prima, quel foglio di stile predefinito dovrebbe essere interno o esterno?
E speriamo che tutti abbiate detto esterno.
Perche' se e' interno,
sovrascrivera' tutte le altre cose per cui hai lavorato cosi' duramente.
Allo stesso modo, quando inserisci un link al foglio di stile predefinito,
assicurati che sia il primo.
Perché il modo in cui i browser funzionano è che va foglio di stile, foglio di stile, foglio di stile.
Quindi, se metti il tuo primo e poi il foglio
di stile predefinito, sovrascriverà tutto ciò che hai fatto finora.
Infine, ricorda che i prefissi del browser
possono aiutare a rimuovere alcune di queste differenze causate da opzioni non supportate.
Ma non vuoi usarla troppo.
Non schiaffeggiare un prefisso su ogni singola proprietà solo perché non ne sei sicuro.
Invece, vuoi andare in quei siti come posso usare e testarlo e
fare davvero un'ipotesi istruita sul fatto che tu voglia usarlo o meno.
Stai davvero andando lontano in questa intera idea di sviluppo web.
E speriamo che tu stia disegnando delle pagine davvero interessanti.
E voglio che tu sia in grado di usare tutte le diverse proprietà che ci sono là fuori.
Quindi non lasciarti intimidire dall'idea che potresti dover usare fogli di stile che
non hai scritto o che devi usare i prefissi del browser.
Hai completamente questo e so che puoi codificare usando questi diversi strumenti.
Allora, buona fortuna.