[Musica]
ciao questo è forte, sono Chris, lo sono
lavorando su Microsoft su JavaScript
motore e editor JavaScript è per questo
quando quando mi hanno chiesto di venire a questo
conferenza che mi hanno chiesto di parlare
CSS perché nessun altro voleva che
sembra e questo è quello che voglio davvero
Parliamo oggi di come sviluppatore web
che sono stato per 20 anni, è così
sempre piuttosto bizzarro come CSS contro
JavaScript è questa costante battaglia
stiamo avendo qui e volevo ricordare
tu oggi su alcune cose che i CSS
ha raggiunto quello che potrebbe essere
interessante per voi da usare e per
in realtà smettila di sminuirlo, ci sono così
molte cose in cui ti piace ogni volta
solo per parlare di CSS c’è questo
Gif animato Family Guy con Kim
cercando di ottenere D la gelosia e me ne vado
è tutto così difficile e così difficile
fare in CSS e mi sento un po ‘stanco di
questo perché questo battibecco che facciamo
tra diverse frazioni del nostro
il mercato non aiuta nessuno in sostanza
dobbiamo costruire cose per gli utenti e
quello che usiamo per arrivarci è ciò che ci ha fatto
efficace ma è anche buono per la fine
utente così ieri sera sono andato qui e
Mi sono prima di tutto realizzato in Olanda
prendi gli studi di South Park che è bello
perché in Inghilterra non capisco
perchè non lo so ma anche su Netflix tu
se questa guerra civile avesse mantenuto il film in America
e mi sono già annoiato con quello sul
aereo quindi ho pensato che potevo annoiarmi
con lui di nuovo a casa e vedere di cosa si tratta
se è ancora meglio o se lo è
solo se semplicemente non mi piacesse e
Mi sono ancora annoiato perché il
problema con un film del genere è quello
Marvel ha introdotto 10.000 caratteri
tutti vogliono fare un film in più
da e poi tutto ad un tratto lo è stato anche
molti e non ricordavamo più chi
era chi e cosa stava succedendo , così sono
come hey facciamo un film dove loro
tutti scontenti l’uno con l’altro e poi
combattono tra loro in un aeroporto
e tu uccidi tutti i tipi di aeroplani e
ritardare il mio volo e fare ogni tipo di
cose insieme e io tutta la lotta
stava annoiando il suo toast perché lo erano
tutti uguali avevano tutti gli stessi poteri
avevano tutti la stessa cosa che erano
amici stavano tutti lavorando insieme io
sapeva che non ci sarebbe stato come tenuto
Il taglio dell’America degli Ironman doveva andare
come ah ah ah, vai, lo sai
perché era un film PG 12
e io ero proprio come quello che è tutto questo
aggressività per se non c’è un punto finale
ad esso e questo è esattamente quello che sento
quando stiamo parlando di JavaScript o
CSS o qualsiasi altra cosa che facciamo per ottenere
qualcosa sullo schermo perché tutto
di quelli hanno poteri che sono diversi
alle altre tecnologie e tutte
dovrebbero essere usati per il loro uso migliore
caso piuttosto che solo perché usarlo
così CSS sembra essere fonte di confusione per
programmatori e questo è successo da noi
l’ ho inventato intendo che ho fatto il 1997
prima volta come perché lo facciamo?
cosa bgcolor e layout di tabella cosa può
lo facciamo e allora era come farlo
i tuoi siti web più veloce con CSS perché
l’aspetto è solo in un file
che può essere memorizzato nella cache dal browser e
siamo come oh questo è così bello e gente
poi come cinque anni dopo sei ancora
pensa che sia bello quello che è
davvero niente che sta succedendo su ciò che
fare è guardare quello che posso fare reagirà ma
Mi piace twittare l’altro giorno dove
lei è come possono questi due gruppi sì
così facile non è nemmeno la codifica CSS è così
abbiamo bisogno di sostituirlo con
JavaScript si prega di parlarsi e
questo a volte è lo stesso gruppo perché
guardiamo ai CSS come sviluppatori e troviamo
la sintassi è strana come il punto esclamativo
importante significa che è importante come a
Sviluppatore JavaScript Sono sempre inciampato
su quello è un po ‘strano
tutto è una stringa tutto è
fondamentalmente una dichiarazione e sono solo
stando lì cosa sta succedendo e poi
facciamo ciò che ogni sviluppatore ci fa
cambia cose e vedi cosa succede e
facciamo casino e CSS e quando
il display non lo controlla correttamente
allora effettivamente diciamo che la lingua è
terribile e dovrebbe essere sostituito da
qualcosa di utile come ad esempio OpenGL
Lo adoro quando apro la shell mostrami
e poi ottieni il triangolo con
i colori lì e un sacco di volte
ogni volta che parlo con le persone che vengono
da giochi di programmazione di livello superiore
programmando sul web sono come perché
non posso usare GL per quello e sono come
perché non conosci il funzionamento
sistema non si conosce il processore voi
non so dove sta andando questa cosa
correre così qualcosa come i CSS è molto di più
perdonando e molto più ragionevole a
ambiente che non è definito ma è
un po ‘ strano per noi farlo perché
noi non vogliamo dare via che il controllo
e questo è ciò che tutta la lotta è
sul controllo dell’ambiente
controllando il display quindi se pensi
a riguardo CSS è tollerante ai guasti e questo
è come tutto sul web HT
Malus fault-tolerant se fai qualcosa
sbagliato in un file CSS salta il parser
quella linea e dice pure guardiamo
a un altro non mi interessa se lo fai
Errore JavaScript in uno di essi
Processi JavaScript con cui non gioco
tu più andrò e andrò in a
angolo ora e non parlare con te in modo CSS
e HTML è pensato per consentire l’editore
è pensato per permettere alla persona che lo scrive
per commettere errori senza l’ utente finale
essere punito e come sviluppatore
sembra sempre strano perché vogliamo
sapere almeno perché o ottenerne un po ‘
console.log o qualche attrice di prova che cosa
è successo ma i CSS sono silenziosi quando
fallisce, sappiamo solo che è fallito e
questo è tutto
quindi può essere fonte di confusione per gli sviluppatori
che vogliono controllare tutto ma è
in realtà ottimo per le persone che pensano bene
se ho fatto un errore non è la mia fine
gli utenti che ne devono soffrire lo sono
il mio lavoro per scoprire cosa sta succedendo e
è per questo che uso un editor adeguato
hanno anche i CSS che linting nell’editor
e hai intuizioni persino in bilico
dicendoti cosa significano queste cose che uso
Codice di Visual Studio, perché io sono parte di
quella squadra e ci lavorerò su quello e noi
anche avere una bella estensione ora che
ti dice quando corri su CSS che
browser supportato invece di dover
guardare in su ogni singolo tempo sul web
e questo è ciò che pensiamo che dovremmo essere
andando a dovremmo iniziare di più
su come limitare il debugging prima di noi
scrivere un codice stupido perché passare attraverso tutto
e poi trova l’errore facciamolo
ci impediscono di scrivere l’ errore nel
primo posto molto simile a quello che abbiamo
come risorse in qualcosa come una parola
quindi praticamente ogni volta che scrivi una parola
sbagliando ti capita di sottolinearlo
è quello che dovremmo fare per la codifica
più che javascript non è colpa
tollerante che può essere disastroso
perché ottieni queste pagine web che sono
vuoto è per questo che sei infinito
spinners sul web è per questo un sito web
ti dice oh tu non sei su Chrome sei
non su un MacBook Pro mi dispiace non internet
per te e questo non è ciò che è il web
di questo non è ciò che intendeva il web
essere e non iniziare con il Regno Unito
governo che cerca di censurarlo è un
storia diversa su di esso posso parlare
per quello anche per ore e così in CSS
applichi i tuoi stili e tu speri
ha funzionato questo è in realtà tutto ciò che hai e
questo è abbastanza bello perché dipende da
l’ utente finale per vedere qualcosa che rende
senti che il tuo CSS non dovrebbe mai essere nel
modo di K e tu
abbiamo avuto un grosso problema qui prefissi CSS
da un pulsante abbiamo avuto improvvisamente
avevamo pulsanti con testo bianco e bianco
sfondo perché lo sfondo era a
Gradiente WebKit che funziona solo su
primo iPhone quindi c’erano pulsanti da
le dozzine su internet solo dal
centinaia di migliaia su internet
erano completamente inutilizzabili per qualcuno
non avendo un iPhone perché il
lo sviluppatore era troppo pigro per definire solo un
colore di sfondo e quindi sovrascriverlo
con un gradiente solo quando il browser
lo supporta e questo è quello che dovresti
stai pensando ai CSS tutto il tempo che è
un miglioramento di un’interfaccia utente , quindi se
fai il layout con i CSS e la cosa
si accumula in un ordine ragionevole quando il
Il CSS non può essere eseguito o non lo è
supportato da quel browser eccezionale che hai
fatto niente di sbagliato tu costruisci un
interfaccia costruisci un’interfaccia ragionevole
non hai costruito qualcosa che sia
perfetto per tutti perché quello
non funziona lo paragono sempre con
scale mobili contro ascensori scale mobili quando
si rompono sono grandi perché
sono scale si può ancora andare al
altro livello ci vuole più sforzo ma
non ti è impedito di raggiungere il
altro livello su un ascensore ti trovi in un
stanza che è rotto con cinque persone che
non voglio essere dentro
così le scale mobili sono lì per accelerare
il nostro modo di o qualcosa che è mio
preferito all’aeroporto quando hai
le passerelle e le persone stanno in piedi
loro e sono come queste cose sono
pensato per farti muovere più velocemente non a
farti muovere togliti di mezzo
ora potrebbe essere solo cattiva in
JavaScript comunque tu controlli il
styling e puoi e devi verificare
che ha funzionato non appena ne fai un
interfaccia di luan e lo rendi dipendente
su JavaScript tocca a te per renderlo
disponibile per le persone dipende da te
capire cosa fare quando qualcosa
va storto e non sta dicendo all’utente
per favore scarica un altro browser
perché è quello che abbiamo fatto nel 1996
è per questo che abbiamo malware su molti
computer in questo momento perché le persone
non sbarazzarsi di quei vecchi computer
e quei vecchi browser che tutti
doveva usare ora CSS significa abbracciare il
Squishiness of the web Amo questo termine
da Brad frost dove è come tutto
è morbido non hai idea di
risoluzione che conosci del pixel
densità e così via, e così via
in realtà l’elenco di questo ora così qui
sono le cose che vanno oltre il tuo
controllo sul web e non c’è niente
si può fare a questo proposito che si può calpestare la vostra
piede che puoi
arrabbiarsi molto si può dire ai vostri utenti
che sono degli idioti ma non è un buono
idea di business quindi il browser è tuo
gli utenti non sono nel tuo controllo
ogni volta che la gente silico dovrebbe solo
aggiornamento andare in vacanza e andare a
vacanze come reception e prova a stampare
i tuoi biglietti su un Mac dal 2003 in poi
non è stato cambiato da allora hai
un computer migliore a casa ma non lo fai
averlo con me con te in età avanzata
I telefoni Android ti fanno schifo
browser che non è possibile rimuovere o
potrebbe sostituire con qualcos’altro lì
sono ambienti in cui non puoi
controlla il browser e non puoi dirlo
persone di usare sempre un browser sviluppatore
è come 0.0 punto 0.2 per cento del
commercializza la risoluzione la morte dei pixel
le impostazioni dei colori dei dispositivi
non so che sia la loro connessione
affidabilità e velocità come oh sembra
ottimo nel nostro ufficio e poi lo provi
su un telefono 3G e tu sei come oh I just
aspettato 50 secondi che nessuno fa su a
il cellulare tre secondi è tutto per te
allora le persone o daranno un pugno a loro
telefono o dirvi che ho intenzione di usare
il concorrente la connettività
risorse Ness restrittive possono essere
bloccato come fa main fa gli ad blockers
ma anche su dispositivi mobili su dispositivi mobili più economici
connessioni in Inghilterra potrebbero
in realtà minify il tuo JavaScript senza
dicendoti il fornitore di telefonia mobile
lo fa e il provider CSS lo fa
così pure il tuo codice viene cambiato da a
man-in-the-middle senza che tu abbia un
possibilità di cambiare qualcosa al riguardo
la loro dimensione del carattere e alcune esigenze come me
invecchiando ho bisogno di un font più grande
quindi non puoi dirmi come 12 pixel è
abbastanza soprattutto non quando sono cinese
e il lettering è così grande questo
non funziona la disponibilità di
risorse sulle loro macchine per il tuo
il prodotto è troppo CPU che sta già bruciando questo
sta succedendo tutto il tempo gente come oh
questo computer il tuo sito è così lento
mentre in realtà ne stanno eseguendo alcuni
Renderer WebGL e come tutti i tipi di
conversioni in background l’importo
del contenuto del testo e delle dimensioni dell’immagine nel tuo
prodotto perché li costruiamo sempre
grandi cose che sembrano grandi e poi noi
consegnalo a un sistema di gestione dei contenuti
e le persone scrivono come tre teaser e
metti come l’Ulisse di James Joyce in a
titolo e come caricare BMP e questi
tipo di cose perché non sono state
addestrato perché pensiamo che la manutenzione sia
fatto da persone che non dovrebbero essere pagati
molto che è il motivo per cui rompono tutto il nostro
prodotti tutto il tempo quindi in CSS è il
lavoro del browser per funzionare bene
GPU
risorse e saltare la funzionalità così a
L’animazione CSS che non è liscia viene tagliata
spento dal browser e quindi non è un
l’animazione va solo alla fine del
animazione la tua animazione JavaScript
per esempio è il tuo lavoro da testare
supporto per garantire che il rendering
Dipingi e riflussi velocemente e per mantenere
la tua animazione pensa di avere di più
controllo ma hai molto di più
responsabilità pure e questo non è un
responsabilità possiamo andare via da noi
non posso dirti che i nostri utenti dovrebbero esserlo
l’aggiornamento dovrebbe essere migliore lì
siamo un servizio di consegna che ci viene pagato molto
di soldi per farlo così quando qualcuno
piagnucoli sui nostri utenti finali che non hanno
il browser giusto e io sono quello che sono
vieni pagato per non averlo ricevuto
pagato per essere più efficace che stai ricevendo
pagato per costruire davvero qualcosa
funziona in modo che le persone facciano clic sugli annunci in modo che le persone
compra le cose così le persone pagano il nostro salario così
il nostro lavoro è costruire interfacce che funzionino
quindi perché sottostimiamo costantemente
CSS e sopravvaluta i benefici di
JavaScript non ho idea del modello minore
potrebbe essere potrebbe essere cosa storica io
non lo so è che nei tempi antichi
browser siamo anche termini tecnici di merda
e in pratica non seguivano a
standard non c’era standard che loro
potrebbe seguire e hanno gareggiato con ciascuno
altro sul fare le cose solo per le nostre
browser e queste cose non sono mai andate via
quindi queste cose sono ancora sul web e
le persone comunque li supportano anche se
non dovrebbero più Internet
Explorer è morto e fondamentalmente buono
liberazione
non dargli nulla è perché non può
ingoiare dato l’ aspetto HTML al CSS di base
per visualizzare qualcosa in cima a ciascuno
altro se il caso d’ uso principale del tuo
sito web funziona in tutti i browser
le persone sono felici non danno internet
explorer 6 utenti belle interfacce esso
semplicemente li confonde a cui non sono abituati
bellezza a cui non sono abituati
l’interattività sono solo loro piacciono
le loro caselle di rilascio e i loro pulsanti di opzione
e spero che quando qualcosa scatta
qualcosa succede a tutti gli interni
sistemi che dobbiamo usare in Microsoft per
antipasti e quindi CSS avevano una storia accidentata esso
inizialmente era molto limitato ed era giusto
lì per sostituire cose come sfondo
elementi di colore e carattere e tabella simile
layout e le nostre linee e centri alle ore
e tutte le cose che sono grafiche
e HTML che non avrebbe mai
e poi abbiamo il supporto per browser patchy
e errori molto strani senza debugging
le opzioni di debugging allora sono state inserite
avviso su tutto e spero che tu trovi
alcune informazioni al di fuori di esso
non avevamo strumenti di sviluppo come noi
abbiamo al giorno d’oggi un grande campione
funzionalità quando iPhone diventa una cosa
in Apple ha chiamato i colpi quando Apple
ha detto che html5 è il futuro ed ecco
tutte le cose interessanti che WebKit può fare
CSS cool, ero davvero eccitato
davvero incazzato anche per quello
non era standardizzato ma lo era
tutto solo per WebKit quindi quando lo facciamo
margine rilasciato quando ero parte di quello
squadra abbiamo dovuto mettere un sacco di bug di
altri browser in un nuovo browser non a
rompere il web perché gli sviluppatori fanno affidamento
su funzionalità sperimentale quando
qualcosa aveva un prefisso CSS che non hai
controllo su quello
quella compagnia cambiò completamente aspetto
e sentire e la funzionalità di questo e
si deve tenere il passo è per questo che è
chiamato sperimentale in esperimenti
le persone muoiono a volte noi non pixel
dovrebbe essere spostato, ma è ancora
una cosa strana su cui contare e molto
problemi con le pareti del browser in giro
prefissi così oh abbiamo questo dovresti
usa il nostro browser o browser per farlo tu
dovrebbe usare il nostro browser e per fortuna
abbastanza tutti i produttori di browser sono cresciuti
questo e ci rendiamo conto che uccidere ciascuno
altri non accadrà browser
non sono importanti nessuno fa soldi
con il browser hai mai pagato per
un browser ok opera era un browser che avevi
pagare a volte come un blocco di annunci
browser su un telefono cellulare la gente lo farebbe
pagare ma i browser sono un mezzo per un
fine di portare servizi agli utenti finali
Chrome non è di Google perché loro
vogliono vendere un browser che è per voi di
usa i servizi di Google e ottieni la ricerca
risultati e ottengono soldi per la presentazione
risultati di ricerca è un modo per voi da usare
servizi di Google molto simile a bordo è impostato
per Microsoft molto simile a Safari è quello
per i browser Apple sono lì da visualizzare
contenuto quindi non importa cosa cosa
pensi che sia il migliore che le persone faranno
probabilmente usa quello che viene fornito
la loro macchina e nessun altro loro
non so nemmeno cosa sia il browser
fino ad ora non c’era un layout
moduli così imballati che usiamo solo le tasse
posizionamento e posizionamento assoluto o
fluttuante e quello era sempre un molto
punto di confusione per le persone che non lo sono
inclinato graficamente e assoluto
il posizionamento era facile ma assolutamente
terribile perché appena cambierai il
dimensione del carattere e non hai usato EMS
tutto si sovrappone e tu
poteva
utilizzare l’interfaccia più a lungo in modo che il nostro
la soluzione era sempre quella di ricucire
JavaScript perché in JavaScript abbiamo avuto
per controllare non abbiamo mai avuto in CSS
Posso leggere quanto è largo il browser
può anche leggere quale fosse la dimensione del carattere
Usato
Posso leggere il colore che posso usare
contenuto generato posso usare tutte le cose
per sapere cosa sta succedendo e JavaScript
ha questa meravigliosa dichiarazione se bene
è come se funzionasse e poi mostralo se
non fare qualcosa al riguardo e CSS questo
se le affermazioni sono sempre sottintese per il
browser da noi quindi abbiamo creato HTML
stile applicato e abbiamo fatto tutti i tipi di
risolve con tutti i polyfills che mi piacciono
quando un browser aveva funzionalità e
gli altri non abbiamo messo il polyfill
in tutti hanno avuto la funzionalità
ma non abbiamo mai eliminato il polyfill quando
questi browser cessano di esistere o addirittura di essere
qui essendo supportato è per questo che abbiamo
un sacco di lotti di JavaScript sul web
non è necessario
ma i CSS hanno fatto passi da gigante
negli ultimi mesi e anni e a
molte volte ci siamo arresi
perché vediamo solo questo comune
denominatore dello spettro di IE 9 e
tutto il resto non è ancora utilizzabile così
i browser sempreverdi sono una cosa e
sono una cosa molto importante qualcosa
piace qualcosa come voglio piangere e
il ransomware mi mostra che dobbiamo mantenere
il nostro software up-to-date per tutto il tempo
perché i cattivi sono più veloci
abusando di quello che stiamo applicando
supportandolo fornisce gli strumenti del browser
intuizioni dettagliate intendo che ottengo il mucchio
analisi ottengo tracce di stack che ottengo
tutto nei browser oggi lo so
perché qualcosa è lento, so perché
qualcosa non è stato applicato il supporto va bene
documentato posso usare dot com è il tuo
amico questo è davvero fantastico
sito Web che mostra quale browser
supporta cosa e perché non supporta
e quali gli errori sono e dove
passo che la gente dovrebbe lamentarsi esso
dovrebbe risolvere il problema quindi non andare su Twitter e
dì come se questo browser fosse terribile
l’altro è meglio andare a questi bug
referenze vai a file bug vai a caricare un bug
vai a caricare un sistema perché è quello che
i nostri ingegneri sono seduti su tutti i browser
i produttori supportano i canali e il bug tracking
è disponibile per quasi tutti i browser che sono
dicendo quasi tutti i browser che non sono
menzionando nomi ma Apple abbiamo pre
processi come sass e meno che hanno
alzato il calore per innovare le specifiche
più veloce la maggior parte delle persone CSS che sono già
entusiasta di CSS quando
– ride un po ‘di tempo fa, perché
hai avuto il senso comune delle variabili
hai avuto tutti i tipi di cose davvero interessanti
sta succedendo lì e molto simile a jQuery
ci ha fatto rivisitare e ripensare cosa
JavaScript può fare al giorno d’oggi questi
i preprocessisti ci hanno fatto ripensare a ciò che i CSS
posso fare anche venerdì di CSS soggiorno
qui effettivamente ad Amsterdam, quindi c’è
molte buone informazioni che escono
ci sono approcci come il corpo di CSS chiamato
Sullivan design anatomico di Brad Brad
gelo permesso con più manutenibilità
anche di componenti diversi
CSS più gestibili su larga scala
piuttosto che come un sacco di ripetizione a
molte cose problematiche che era CSS
lì perché è davvero facile da scrivere
un sacco di CSS che non viene applicato
e ci sono molti strumenti in giro
quello ora così io voglio solo elencare a
alcune cose incredibili che i CSS possono fare ora
e che dovresti considerare di usare e
anche se non pensi di usarlo, sappi
che esiste e si associa a qualcuno
che ti piace SS e gli piace fare i layout
il più grande critico più grande che fossi
trovare con i CSS è quello di tutti
si lamenta perché ci viene chiesto
per farlo basta dire di no e dire hey, sono un
amministratore del database Sono come un
sviluppatore full stack cosa diavolo
dovrei avere a che fare con i CSS questo è
qualcosa di un’interfaccia persona che se ne frega
sulle interfacce e conosce utenti e
sa che i browser dovrebbero avere noi se tu
essere licenziato
Microsoft sta assumendo lo sai come noi
non ho nulla da perdere in questo momento, ma noi
prova ad assumere tutti i lavori che non lo sono
il nostro fare così perché dovresti dare
te stesso quel dolore che non vuoi
giocare con cose semplici come
valori CSS calcolati che hai probabilmente
sentito parlare di questo o alzare la mano se
non hai che sarebbe interessante
per vedere si dice per esempio che hai un
casella di input in cui si desidera avere il
casella di inserimento troppo piena per riempire il tutto
cosa e anche avere qualche imbottitura
intorno e hai anche qualche imbottitura
intorno è sempre il problema con quello
non è così che è stato fatto normalmente
come una larghezza del 98% e poi speri
l’ 1% è sufficiente ma in percentuale
sempre fuori dall’elemento genitore se il
elemento genitore non ha più spazio
non c’è nessuna imbottitura, quindi
quello che fai invece è una larghezza di
calc
100% – 1 am 1 am è un personaggio così
si calcola che cosa fa il 100% di quella scatola
– 1 su cui è 0,5 am su ciascuno
lato
ciò che è rosso ciò che è la larghezza di
che rendono quel browser che non hai
pensare a questo proposito non si deve sapere
che cosa è allo stesso modo quando hai bisogno
6 caselle l’una accanto all’altra fai un calcolo
100% diviso per 6 ovviamente si potrebbe fare
che nella tua testa o come mettere un sacco
di molte cose là dentro ma penso a
il manutentore se il prossimo manutentore
ha bisogno di 8 elementi là dove deve
cambia il numero 8 in cui non fai i conti
la loro testa è nuovamente divisa al 100 percento
8 significa che i calcoli nei CSS sono i
la prima cosa che è andata lì che è stata fatta
vederci più dinamici perché
originariamente non era mai dinamico era solo
applicato e non è possibile
cambiarlo nel CSS stesso
supportato in tutto il negozio tranne che per
Opera Mini perché Opera Mini è un è un
browser di streaming che prende il tuo HTML
CSS e JavaScript lo raggruppano in
una stringa e la invia al
browser questo è in realtà ed alla fine
telefono degli utenti questo è nei paesi in cui
la connettività è davvero molto costosa
davvero pessimo o se stai srotolando
e devi fondamentalmente voler farlo
quindi non c’è modo in Opera Mini di fare
qualcosa dopo che la pagina è stata
reso questo è il motivo per cui tutte queste cose
non sono supportate le query multimediali
un’altra grande cosa che è stata intorno
da anni ormai ciò che le richieste dei media consentono
devi fare diversi CSS
secondo le cose che stanno accadendo
sullo schermo quindi se in questo caso se lo è
una larghezza massima di 600 pixel quindi effettivamente
non visualizzare quell’elemento della barra laterale
perché vuoi mostrarlo solo in a
legge in un inferiore in un’immagine inferiore in a
più piccola finestra più piccola puoi farlo
su elementi di collegamento in cui potresti farlo
gli stessi stili e puoi fare le cose
come se fosse ritratto se fosse un paesaggio
se è palmare se si stampa, aggiungere
supporto sono queste sono le query multimediali
molto molto potente per fare solo cose
quando una certa cosa è abbinata , può
ottenere abbastanza difficile da mantenere, ma noi siamo
tornerò più tardi perché
c’è un modo intelligente per farlo ma
sono stati supportati per secoli in tutti
singolo browser quindi non provare solo a leggere
in JavaScript quanto è ampio lo schermo
usa un media
per questo perché è molto più affidabile
e non c’è un browser che non lo fa
supportarlo tranne per I IE 10 è morto come
beh, va tutto bene c’è anche a
proprietà sorella in javascript per quello
chiamato match media, che non vedo
le persone usano molto, quindi il problema è CSS
le domande dei media sono così anche se lo hai
come va bene hai 12 immagini lì dentro
dicendo come se fosse uno spettacolo di 2000 pixel
quell’immagine se è per lo spettacolo di pixel
quello e così via e così via che il
il browser li carica tutti e poi solo
visualizza uno di questi se usi la corrispondenza
media in JavaScript invece e poi
crea l’immagine e sostituisci a
immagine più piccola con esso quindi non lo fai
avere quel problema, ma ancora una volta questo è un
questo è un modo in cui dovremmo usare un’immagine
elemento in HTML, perché abbiamo
quelli adesso ma questo è un esempio
per assicurarti che le cose vengano caricate solo
quando hanno bisogno e tu hai qualcosa
più piccolo che viene sostituito da qualcosa
media più interessanti con i media di corrispondenza
sono una cosa interessante pure
il contenuto generato è qualcosa che noi
continua a stimare ed è molto
strano perché originariamente guardavo
nel documento HTML in cui si trova l’HTML
lì e CSS non hanno fatto nulla con esso
appena aggiunto i colori si aggiungono modulo in modo
che lo ha fatto sembrare diverso ma
non ha modificato il contenuto dell’elemento
stesso ma a volte vuoi contenuti
non è nell’HTML e così è
solo un piacere avere o una cosa carina
fai quello che vuoi, non vuoi digitare tutto
il tempo e questo cosa ha generato il contenuto
entra così un esempio qui è questo spunto
elementi in cui si desidera avere il
citazioni all’inizio e alla fine così
ce n’è uno blu e uno rosso no
riesci a schermo ma è proprio come te
fai prima e cue dopo e tu
creare il contenuto in questo modo, quindi
uno ti dà è un handle di stile da fare
qualcosa in più su questo elemento che
ha senso solo in uno stile
ambiente ma non ha valore un cieco
l’utente non si preoccupa se quello è un blu o un
citazione rosso fintanto che sanno che
è una citazione e loro lo sanno usando
l’elemento cue mentre come te no
voglio mantenerlo in JavaScript tu
non voglio sostenere che nel codice HTML
con una campata con la porta dentro
perché non sono necessari, lo sono
solo necessario quando è una cosa visiva
da mostrare e le persone lo usano per tutti
tipo di cose selvagge , c’è un grande
sito web chiamato mare
un singolo tuffo calmo e loro fanno questo genere
di cose queste sono tutte un elemento diff
usando i gradienti CSS usando le ombre esterne
usando tutti i tipi di cose in CSS e
generato contenuto intorno a loro in modo che tu possa
creare una visuale davvero molto complessa
cose senza dover cambiare la tua
HTML senza usare alcun JavaScript
se hai qualcuno in CSS che lo sa
le loro cose e queste sono belle da vedere
a volte sono davvero orribili
in realtà in termini di complessità quando tu
inizia a scorrere lo schermo e roba così
questi sono belli per mostrare alla gente il potere
di loro ma li usi con parsimonia perché
non vuoi avere come un’immagine di
come un extra e ogni paragrafo o
qualcosa del genere supporta ancora tutto
sopra il browser il fronte del browser sì
non ci sono scuse per non usare generato
contenuto quando ha senso perché
queste sono cose visivamente belle
avere perché dovrebbero essere mantenuti dentro
un sistema di gestione dei contenuti perché dovrebbe
sono mantenuti in JavaScript oh
è un vero peccato
okay, andiamo a vedere le animazioni e
transizioni e sai dove sto andando
con questo questi sono potenti non usare
troppo non si eccitano troppo
su tutte le cose interessanti che puoi fare
con le animazioni perché sono costose
non in termini di dollari ma in Amici
di potenza della CPU e potenza della GPU e sono
anche molto distraente quindi qualcuno con a
apprendimento disabilità per esempio con
lampeggiante, animato e rotante
cose ma è impossibile per loro farlo
utilizzare il contenuto e non si vuole
essere troppo frivolo con esso pure perché
se devi animazione cutesy
qualcosa cade quando qualcosa va
male se vedo che per il momento mi decima
iniziare non fidandosi più della vostra azienda
riguardo a ciò che fai al ritmo
piuttosto che aiutarmi in modo da animazioni e
le transizioni sono state definite nel
standard per un po ‘di tempo e il mio
il favorito è le transizioni perché solo da
avendo una transizione di trasformare uno
qui i secondi nove e tredici
tutto più fluido così la demo che io
sento che ho scritto come otto anni
fa o qualcosa invece ho fatto un a
piccolo elemento che quando si fa clic
da qualche parte sulla pagina mette una palla
lì e quando si fa nuovamente clic su di esso
si muove senza problemi da uno all’altro
a causa di quella transizione che potrei avere
fatto in JavaScript ma non l’ho fatto
bisogno di mettere solo una transizione
qualcosa va
da una parte all’altra e se il
il browser non lo supporta e va solo
alla fine di quell’animazione non si ottiene nessuno
male
e nessuno deve caricare molto
JavaScript e in realtà fare un ciclo for
e cambiando e re rendering e
rinfrescante e riverniciatura ogni – ogni
tempo perché quello gira sulla GPU dal
browser scelto per te
le animazioni sono la stessa cosa che hai
nomi di animazione durata animazione e
hai dei fotogrammi chiave in cui il più semplice
come fai da un tutù ma puoi farlo
fare come uno zero per cento l’ uno per cento due
percento e così via e così via
questo mi fa sempre impazzire perché
c’è sempre uno sviluppatore JavaScript
vuoi mettere i due punti dopo il da o
il – ma non è la sintassi CSS così
questa è una cosa che è giusta
abbastanza semplicemente non ho una vita
le animazioni sono piuttosto sorprendenti
supportati e in realtà stanno facendo
il loro lavoro bene c’è anche una rete
API di animazione in JavaScript, se lo desideri
avere un controllo di frame per secondo se tu
vuoi avere il controllo dei keyframe se tu
desidera rimuovere e aggiungere i fotogrammi chiave
di conseguenza, ma ancora una volta significa che sei
responsabile per fare quel lavoro cosa in
questo caso il browser salta
cerchi si piega all’indietro e cuoce
il tuo cookie per farlo davvero
animazione accadere e non c’è bisogno di
preoccuparsi perché se non lo fa
succede che ancora non è nel modo di
utente finale mentre se il tuo JavaScript
l’animazione nel ciclo for diventa lenta e
mangia tutte le risorse che hai
un’animazione semifinita che non vuoi mai
per vedere un’animazione semilavorata su
web sono supportati ovunque di nuovo
intercettare per Opera Mini a causa del
ragioni che ho detto prima del
cosa interessante di animazioni e
transizioni è che l’ interazione con
JavaScript è via eventi, quindi spara
eventi mentre è in realtà prima che sia
accadendo mentre sta accadendo e dopo
sta succedendo così puoi farlo
come si può catena di animazioni in questo modo
o può reagire all’animazione quando
qualcosa era finito, ne ho scritti alcuni
giochi che usano solo quello di base era
come un grande gestore di eventi che semplicemente
ascoltato la fine di un’animazione
perché alla fine dell’animazione voi
sentire che si ottiene il nome dell’animazione
e quale elemento è stato animato così
modo in cui puoi facilmente sincronizzare le tue animazioni
e crearne uno nuovo applicando una classe
ad un elemento genitore , per esempio
le unità viewport sono una cosa molto bella
pensaci e il problema più grande noi
avere con la tipografia sul web è quello
le cose devono essere leggibili ma schermate
potrebbe essere di dimensioni completamente diverse e
non sappiamo quale sia la dimensione del
lo schermo è così le unità viewport sono nuove di te
unità nuove in CSS che non sono pixel
che non sono EMS ma in realtà sono
chiamato VW e VH quindi una larghezza viewport
è una percentuale della piena finestra
larghezza 480 pixel wide screen 10 VW è 10
percentuale o 48 pixel la differenza
tra il 10% e il 10 VW è quello
la percentuale è la percentuale di
elemento genitore VW è la percentuale di
la finestra quindi se ora ho un div all’interno
un div all’interno di un div all’interno di un div dove io
fare un 10% diventa 10% 10
percentuale del 10 percento 10 percento di
tempera e diventa sempre più piccolo
più nidifichi mentre una VW lo farà
rimani sempre, non importa quanto il tuo nidificato
Gli elementi HTML sono in questa finestra di visualizzazione
l’altezza è la stessa per il viewport
altezza del browser e visualizzazione come
molte cose come il viewport come il
altezza del documento il browser si nasconde così
viewport è fondamentalmente ciò che è visibile in
lo schermo ora così così che puoi
usa queste cose per fare appiccicoso
navigazione intestazioni appiccicose piè di pagina tale
che sono sempre abbastanza grandi per
effettivamente vedere le cose quindi questa finestra
minimo che è una percentuale del
larghezza o altezza finestra qualunque sia
più piccolo e così per esempio il pin 10 V è
10% della larghezza della finestra corrente in
ritratto o il 10 percento della porta di visualizzazione
paesaggio da ragazza, quindi non vuoi farlo
layout diversi per quello che usi
V bin usi V Max per l’altro modo
circa così la percentuale del viewport
larghezza o altezza qualunque sia maggiore cosa
puoi fare con questo è come davvero
davvero semplice una tipografia che è
leggibile così ancora una volta usi la calcutta
spiegato in anticipo dove dici come
dimensione carattere calc 16 pixel più 1 VW così
il tuo font sarà sempre 16 pixel no
importa quale sia la risoluzione più
cosa c’è di extra disponibile, quindi più grande
schermi che saranno più grandi su più piccoli
schermi sarà più piccolo che significa
la lunghezza della frase rimane il
stesso
che è come noi
come umani, poi fai un’altezza di linea
dove ti piace la misura verticale
e allora probabilmente vorresti farlo
qualcosa come in un punto 2 e 3
BW per un h1 e se diventa troppo grande se
il sito X VDD è davvero enorme allora
fermalo a 50 pixel perché non lo fai
voglio avere un 3.000 o in questo caso a
3.000 per 2.000 risoluzione, ma un 400
l’ intestazione dei pixel è davvero troppo
lo spazio usa solo per il titolo e allora
sembra che in un browser sia come se
ridimensiona sempre il carattere del browser
rimane leggibile indipendentemente dallo schermo
è in questo caso che non abbiamo limitato il
lunghezza di esso in modo che la lunghezza della frase è
non la cosa ma puoi vedere come è
non diventare troppo grande non sta diventando
troppo piccolo rimane sempre leggibile e
è un modo molto semplice per farlo
piuttosto che doverlo fare a
JavaScript o qualsiasi altra cosa in cui proviamo a fare
il passato una cosa rapida su questo ogni
Sviluppatore CSS e ogni JavaScript
lo sviluppatore continua a fare ciò che manteniamo
ridimensionando i nostri schermi per guardare i nostri
diverso come essere media query
applicato spostiamo le cose intorno a nessuno
lo fa sempre se ci sono problemi in
tra le diverse dimensioni mentre loro
stanno cambiando non importa e gli utenti hanno a
risoluzione e non ridimensionano il loro
navigatori tutto il tempo e vedere e così via
possono rompere solo gli sviluppatori e il controllo qualità
la gente fa così che si assicuri che il
la cosa funziona in un certo stato ma il
gli intermediari non sono così importanti
quando le persone fanno domande sui media con simili
500 break-up breakpoints questo è
in realtà non aiuta nessuno a farlo come
il più semplice possibile il meno codice che abbiamo inserito
su un sito web ci sono le unità viewport migliori
supportato in tutti i browser Edge ha il
problema che v min e v max non è
supportato ma per favore vai e lamentati
noi di questo abbiamo deciso che è dentro
la realizzazione, ma abbiamo bisogno di più persone da fare
è una cosa generale se pensi di essere
se vedi qualcosa non supportato
lamentarsi si lamentano lamentarsi o addirittura
meglio usarlo usarlo in show di produzione
noi come il tuo sito web è terribile perché
non lo sosteniamo, più siamo noi
effettivamente ottenere casi d’uso reali del web
piuttosto che oh questo dovrebbe essere
perché l’altro browser
più possiamo effettivamente mettere ingegneri
fuori e in realtà portarli sul posto di lavoro
abbiamo anche una società di software come Google
è anche una società di software finora è un
società di software abbiamo un limitato
quantità di risorse che non abbiamo a
macchina di clonazione per gli sviluppatori noi
in realtà devo applicare make developers
fai cose che sono importanti
ora la flexbox parla di scatole flessibili
Dio, Xbox è fondamentalmente ciò che tu sempre
volevo che i CSS facessero e non ti venissi mai
mai voluto capire questo è ciò
abbiamo fatto con le tabelle di layout in modo che tu possa fare
quasi tutto in orizzontale o
visualizzazione verticale di un elemento così dentro
questo caso c’è un enorme Divya o
in realtà è il corpo e puoi farlo
come allineare queste cose a sinistra a
la cima verso il basso per mettere lo spazio
tra loro mette lo spazio intorno
li allineano tutti a sinistra allineati
loro tutte le cose cambiano il loro ordine
quindi l’ordine in cui erano in HTML no
significa necessariamente l’ordine che sono
essere visualizzato sulla pagina il mio
il blog personale lo fa per la mia intestazione
Voglio dire che ho la mia foto nel
al centro di esso e rileva intorno ad esso ma
in HTML è la mia prima immagine e poi
il testo quindi l’ordine per un utente cieco
ha perfettamente senso per un utente visivo
avere una bella interfaccia quando ce n’è abbastanza
spazio sullo schermo e se non proprio giusto
ricade di nuovo su una lista di collegamenti
flexbox è la cosa da usare se vuoi
allineare effettivamente le cose in un certo
guarda la porta o se vuoi allineare le cose
in un certo altro elemento è il
migliore sostituzione per assoluto
posizionamento in una posizione relativamente
elemento che avevamo prima che ci sia un grande
gioco se vuoi giocare con esso se tu
vogliono imparare come ordinare questa è una
modo che io insegno per i bambini
la registrazione in flexbox si chiama fondamentalmente
cambia il codice in giro per saltare a mettere
le rane su queste ninfee così tu
impara la sintassi della flexbox in questo modo
c’è una bella chiacchierata da un eroe locale , Zoe
Zoe Gillenwater lei due anni fa lei
in realtà ha parlato a Smashing Kampf
questa è lei su Twitter dove lei
mostra effettivamente come sta usando booking.com
flexbox e back tenon era la mia stanza, io dio
utilizzare flexbox già al giorno d’oggi non lo fanno
anche più fastidio a dirlo, ma lei
mostra anche come
si piega di nuovo a interfaccia sensibile e
quando la flexbox non è supportata invece di
saltare attraverso i cerchi e fare ogni tipo
di posizionamento flexbox è di nuovo
supportato da tutti i browser ad eccezione di ie
e questo è fatto ora se vuoi andare
anche la griglia CSS di Wilder CSS è una vera e propria
la cosa più bella in questo momento in CSS
perché ogni discorso è ogni conferenza
sulla griglia CSS ho pensato di parlare
sulla griglia CSS esclusivamente oggi qui
ma poi di nuovo ho pensato che potesse annoiare
gente se parliamo solo di una cosa
Griglia di CSS è molto simile nella misura FlexBox
che definisci una griglia nella tua pagina e
quindi posizioni gli elementi intorno ma
è così flessibile è incredibile cosa
puoi farcela puoi nominare il
le linee è possibile modificare l’ordine del
gli elementi della griglia intorno a te possono spostarsi
cose in loro così invece di andare
attraverso molte sintassi e mostrandoti
quello che è fatto è una grande risorsa
chiamato griglia per esempio che ti dà
copia e incolla i layout se vuoi
usa la griglia CSS e ti dà anche dei video
tutorial che cosa significano e come loro
funzione e come interagiscono
cambiare intorno in modo che se la luce definisce
cosa significa l’unità fr che ripetizione
notazione e così via e così via la
la notazione può sembrare un po ‘scoraggiante ma
è una volta che hai capito bene
in realtà incredibilmente potente e se tu
non voglio impararlo bene
capire che questo è lì che non lo fai
bisogno di un sistema di griglia CSS come 960 CSS o
qualunque altro abbiamo avuto là fuori perché
i browser supportano che ora di nuovo c’è
un gioco anche se vuoi impararlo
chiamato CSS grid garden dove devi
spostare l’ acqua per innaffiare le carote e
anche questo è davvero fantastico – fantastico
parla – guarda che voglio dire che lo sono
spingendo gli steli qui perché ho capito
roba registrata passo il tempo a scrivere la mia
parla di tutta questa merda è gratis su
uso del Web usa queste cose per insegnare
te stesso nuove cose piuttosto che chiedere
il tuo capo per andare a un allenamento della griglia CSS
queste cose sono disponibili per il download
i video si siedono in ufficio con a
caffè e biscotti guardano uno di quelli
parla con i tuoi colleghi e poi
discuti come puoi usarlo in produzione
perché non così layout griglia CSS di Rachel
Andrews ha parlato duramente di CSS
layout di griglia da quattro cinque sei sette
otto anni e nessuno le ha creduto
ma ora ce l’abbiamo
e la vera direzione artistica per il web di
Anche Jen Simmons di Mozilla è così
un’altra grande chiacchierata per conoscere il
potere della griglia la cosa interessante
sulla griglia CSS è stato un era
La specifica di Microsoft era in realtà
prima supportato in ie8 penso e come esso
a Microsoft non piaceva nessuno griglia
il layout funziona ovunque è ancora
prefissato in alcuni dei vecchi II e
ma ancora ci stiamo lavorando su questo
perché in realtà abbiamo qualche bug nel
il comitato standard che deve essere
Risolto il primo deludente qui è
Browser Android e devo guardarlo
non so perché questo sia, ma questo è
veramente male come questo genere di cose
non voglio avere così perché c’è un
scatola flessibile e una griglia che sembrano essere
facendo la stessa cosa, allineati
qualcosa lungo una griglia bene
la scatola flessibile è stata progettata per il layout in uno
dimensione o è una griglia di riga o di colonna
pensato per essere in due dimensioni, quindi puoi
posiziona le cose ovunque mentre piace
flex box è lì per impaginare un elemento
secondo quello che dici dovrebbe essere
facendo così griglia dovrebbe usare flexbox per il suo
si integra e quindi non è male
idea che non lavorano per datare il loro lavoro
insieme non lavorano contro ciascuno
altro ora le proprietà personalizzate CSS sono le
l’ultima cosa di cui voglio parlare e
sono la cosa davvero fantastica
che alla fine non è nemmeno CSS quando
le persone hanno iniziato a usare sass anziché CSS
volevano variabili che volevano
definire un colore aziendale e quindi utilizzare l’uso
società di colore e non so cosa
il colore dell’azienda è perché se cambia
ogni due mesi devo fare una ricerca
e sostituire e tutti i miei CSS devo
trova le cose che non è divertente farlo
quali proprietà personalizzate ti consentono
fare un – – primo colore e poi tu
chiamalo con var – – first color that
potrebbe essere qualsiasi CSS o qualsiasi Contenuto che sia
un modo valido per definire qualcosa in CSS
che puoi iniziare a riutilizzare e uno
cosa potente a cui pensare in questo
caso è come hai visto calc prima e se
Voglio calcolare su un calcolo
Non posso nidificare calc in CSS perché è così
non è ciò che una sintassi CSS è destinata a fare ma
Posso usare le variabili per quello che posso
diciamo con a è 100 pixel e con B è
il calcolo di VAR a – con
della larghezza a divisa per due con C è
un calcolo della larghezza B
diviso per due e poi si imposta il
larghezza a R con C in modo da poter nidificare a
calcoli usando proprietà personalizzate ma
questa è solo la punta dell’iceberg
le proprietà personalizzate davvero fanno davvero un
molto senso nei CSS perché permettono
tu per nominare cose che non eri in grado
per nominare prima e per riutilizzare le cose
attraverso il tuo CSS che non vuoi
avere lo stesso modo in dieci diversi
luoghi come la cattiva programmazione, quindi se tu
voglio imparare tutto su quello
strato Beru ha dato un incredibile discorso CSS
rutti del nostro sottotitolo dove va
attraverso tutte le cose ti dà come
dieci take-away ha scritto un grande post sul blog
su di esso pure così per esempio in questo
caso ho una grondaia di due pixel
l’elemento radice e in una sezione che dico
come margine di scolo che così mi dà due
margine di pixel attorno a tutta la sezione
elementi ma se la larghezza minima di
mille è quindi la grondaia dovrebbe essere
dieci pixel così si può veramente trovare quelli
variabili e sovrascriverle all’interno di a
media query all’interno di un calc all’interno di tutto il
se la dichiarazione II cose che abbiamo dentro
CSS è un modo molto potente per
definire qualcosa e riutilizzarlo piuttosto
che come conoscere il valore tutto il tempo
sono ben supportati in tutto
i browser cioè 11 non li fanno affatto
e in realtà non so quale sia il limite
il problema è adesso ma non lo sarei
preoccuparsi troppo se ne andranno
anche io devo cercare su CSS
le query di funzionalità sono una cosa che è
così di base e se la dichiarazione per CSS così tu
può fare un add se supporta il nome dell’animazione
prova quindi sappiamo che il browser supporta
animazioni e possiamo iniziare a definire il
fotogrammi chiave così che non hai mai avuto
fotogrammi chiave che sono solo inutili in
il tuo CSS in questo caso e te ne assicuri
che tutte le cose sono supportate correttamente
ora puoi anche fare un non supportato così
si aggiunge il supporto non è quindi le cose
che il browser non fa così da dare
un fallback per i browser che sono
peggio ma questo è un po ‘pazzo perché
stai effettivamente costruendo per il passato
stai costruendo per una cosa che è
diventando piuttosto il tuo lavoro di manutenzione
rispetto ai produttori di browser
assicurandosi che il loro browser supporti
queste cose sono dotate di query supporter in
tutti i browser ma, ad esempio, perché non c’è
nuove funzionalità per ie anyways now we
parlato di CSS e JavaScript così simili
il motivo per cui si usa uno o l’altro ho sempre
penso che sia una cosa molto molto potente per
farli funzionare l’uno con l’altro
javascript è lì per me per interagire
per un a reagire a ciò che le persone hanno
fatto alla mia pagina o per reagire quali dati
è venuto in ciò che le cose sono state caricate e
Il CSS è lì per definire il
interfaccia che viene renderizzata in
browser senza che io non debba sapere
come il browser lo gestisce così ovviamente
la vecchia scuola era JavaScript CS come un
HTML tutto deve fare cose diverse e
quando lavori in uno spazio come una reazione
componente quando lavori in uno spazio
è un ambiente modulare e questo è tutto
fuori dalla finestra voglio dire che tu sei già
basandosi su un instradamento sul lato client
stai già facendo affidamento su un’interfaccia
che si costruisce non come era l’HTML
pensato per essere costruito così nel caso di in
Nel caso di moduli hai un pulsante
che ha bisogno di avere la sua propria JavaScript
CSS e HTML solo per quel pulsante cuz
vuoi riutilizzarlo attraverso la pagina
senza altri stili sanguinanti
e questo non è il posto dove i CSS eccellono
c’è standard venendo siamo stati
provarlo non è così facile ma
quando guardi come componenti web e
guardi i sistemi componenti come
reagire o angolare lo fa sotto il
cappuccio quindi non sto dicendo che i CSS possono
risolvi tutto ma penso quando
arriva ai layout di pagina quando si tratta di
documento quando si tratta di pieno
applicazioni piuttosto che guidate dal modulo
applicazioni dove lo conosci CSS e
JavaScript funziona insieme davvero
fa davvero il lavoro e usi CSS quando
puoi usare le cose che ho appena
ti ha mostrato di non leggere l’interiore interiore
la larghezza di un browser non lo fai più
è necessario che abbiamo un sacco di CSS da trattare
con quel tipo di problema se è necessario
comunicare con i CSS considera il cambiamento
proprietà personalizzate perché puoi cambiare
li al volo
e se questo non è un’opzione applicare
classi agli elementi parent usando la classe
liste con elenchi di classe ora non di classe
nome più che è molto potente come
bene e come ultima risorsa è possibile
anche lo stile direttamente ma questo è un
molto pessimo modo di interagire
con il browser ed è in realtà più
casi che intercettano i browser
rendendo di nuovo così di nuovo da quel discorso
elementi target value property – – who
ottiene la proprietà da get stile in linea
lo stile calcolato ottiene ottiene il valore della proprietà
da dove e puoi impostare a
variabile sullo stile inline con
Anche JavaScript, quindi cosa puoi fare
con questo è così potente che puoi fare tutto
le cose che JavaScript può fare
Il CSS non può farlo e darlo al tuo CSS
fare qualcosa con un esempio che lei
ha in quel discorso è che tu hai un
movimento del mouse e sul movimento del mouse
mi dà il mouse X e il mouse Y e
crea una proprietà personalizzata in CSS così in
qualsiasi CSS che posso ora posizionare le cose al
puntatore del mouse senza doverlo fare
in JavaScript più che abbiamo usato
fare da quando i giorni HTML così questo
la funzionalità diventa disponibile per i CSS
e il mio CSS ci fa il rendering per me
e questo era impossibile da fare prima di noi
aveva proprietà personalizzate quindi se ti piace
come un traduttore X – – Mouse X VAR ax –
– Mouse X e tradurre Y – – miles Y
in realtà posizioni la cosa dove
il mouse è in questo momento e ogni volta
il browser ogni volta che arriva il mouse
spostato questa proprietà personalizzata viene aggiornata
e il renderer CSS fa il lavoro per te
ogni cambiamento di stile ha conseguenze
anche se così si inizia a fare scherzi
con gli stili non le proprietà personalizzate
ma come con l’alta posizione blah il
il browser deve fare qualcosa che ha un
ottimo sito web chiamato CSS trigger di
Paul Lewis e il batterista di Google
ha fatto tutte le ricerche per voi per dire come
ciò che viene influenzato da quale cosa così
assicurati che quando ti chiedi perché?
la tua interfaccia è veramente molto lenta
questa è una grande risorsa da dirti
cosa sta succedendo sotto il cofano e da
il browser sta effettivamente iniziando a
avvia il fan e ti infastidisce
quindi i CSS sono molto più affidabili di questo
era e nel CSS nel w3c
specifiche qualsiasi di esse è definita come
utenti sugli autori rispetto agli implementatori
sugli specificatori rispetto alla purezza teorica
quindi cosa viene alla fine della tua fine
l’utente è ciò che deve essere a prova di proiettile
quindi se i CSS possono togliere un sacco di dolore
da te consideri l’utilizzo di CSS piuttosto che
avere il pieno controllo del
interfaccia
javascript perché poi hai anche tu
piena responsabilità dei nostri utenti
interfacce che sono affidabili e lisce
non uccidere le loro batterie questo è il
il più grande problema nel mobile quindi consideri
Sears come un po ‘di più si può essere pigri e
puoi costruire sul lavoro del
comunità c’è una grande comunità
intorno a CSS che parla della costruzione di fissaggi
le cose per te ci sono un sacco di cose
che puoi usare quello che ho fatto qui
una laurea anche perché qui ce ne sono alcuni
CSS super stimolante e altamente attivo
folk se vuoi sapere cosa sta succedendo
e vedi è che qui c’è una lista di persone
che seguo e scriverò
anche in un post sul blog che mi ha ispirato
molto da fare questo discorso quindi c’è Chris
Collier che fa i trucchi CSS è calmo
fondamentalmente il miglior sito web in questo momento
scopri cosa sta succedendo nel sanguinamento
mondo marginale dell’applicazione CSS no
standard ma come usare effettivamente i CSS
Rachele andrew è semplicemente la dea dei CSS
le griglie su due porte fanno molta matematica
animazioni con CSS solo che non lo sono
davvero così utile ma sono davvero
davvero carina e ti mostra il potere di
ciò che i CSS possono fare nelle animazioni ci può fare
ama Anna perché la sua roba è così brutale
al browser che in realtà siamo
testare i nostri motori CSS contro di esso
renderli più veloci quindi è molto molto
il suo piano di codice è davvero molto bello
Emozionante guardare Iria a conoscere il darydary
Chrome è un nuovo arrivato che lei realmente fa
quel pezzettino di blog in codice dove c’è
molte spiegazioni molto semplici di nuove
cose che stanno accadendo anche in CSS
in JavaScript, così ha detto una Gillenwater
prima di ciò i migliori discorsi su flex box
e lei è locale qui a Amsterdam Brad
gelo polveroso fa le cose di design atomico
Rachel Neighbors è un mio collega
lei è effettivamente qui oggi e parla a
il venerdì
lei è un’animazione esperta di animazioni CSS
e animazioni web unik robert
parlato molto su modalità di fusione di
CSS e filtri CSS e anche ultimamente a
molto su UJS e fare grafica
le animazioni in CSS layer roux è
fondamentalmente come ho detto lei prende sempre
una cosa CSS e fa una chiacchierata di un’ora
fuori da ciò che lo analizza al
ennesimo grado e ti spiega come
usalo con cui può diventare molto forte
le persone un giorno quando comunicano
con lei come perché è quella cosa
dovrebbe usare
ma i suoi discorsi sono davvero veri
informativo e davvero eccitante
ascolta che è una ricercatrice del MIT così
è molto approfondita nella sua ricerca
sulla sua pena, la Svezia è una
sviluppatore dal Libano e lei ha fatto il
layout per una casa favolosa per i più nuovi
Smashing Magazine per quel milione di bambini
hanno un sacco di discorsi su tutto il
dettagli che hanno messo lì e tutti
le cose come lo fanno funzionare molto
flessibilmente molto accessibile che è il
persona eccitante da seguire pure
Sarah Dresner è di nuovo una scrittrice per
CSS Twix e lei è in giro per abbastanza
un po ‘come sviluppatore che vedi è
sempre in un modo che è molto graduale
tutti i tipi di utenti e tutti i tipi di
prodotti e Jen Simmons sta funzionando
Mozilla e lei parlano molto di arte
progettare sul web usando ogni tipo di nuovo
tecnologie così come un sacco di gente a
segui l’interesse ascoltalo sempre
mandare cose interessanti in giro, quindi pensaci
che quando stai pensando a CSS e
questo è tutto quello che ho tempo per così grazie
[Applausi]
ciao questo è forte, sono Chris, lo sono
lavorando su Microsoft su JavaScript
motore e editor JavaScript è per questo
quando quando mi hanno chiesto di venire a questo
conferenza che mi hanno chiesto di parlare
CSS perché nessun altro voleva che
sembra e questo è quello che voglio davvero
Parliamo oggi di come sviluppatore web
che sono stato per 20 anni, è così
sempre piuttosto bizzarro come CSS contro
JavaScript è questa costante battaglia
stiamo avendo qui e volevo ricordare
tu oggi su alcune cose che i CSS
ha raggiunto quello che potrebbe essere
interessante per voi da usare e per
in realtà smettila di sminuirlo, ci sono così
molte cose in cui ti piace ogni volta
solo per parlare di CSS c’è questo
Gif animato Family Guy con Kim
cercando di ottenere D la gelosia e me ne vado
è tutto così difficile e così difficile
fare in CSS e mi sento un po ‘stanco di
questo perché questo battibecco che facciamo
tra diverse frazioni del nostro
il mercato non aiuta nessuno in sostanza
dobbiamo costruire cose per gli utenti e
quello che usiamo per arrivarci è ciò che ci ha fatto
efficace ma è anche buono per la fine
utente così ieri sera sono andato qui e
Mi sono prima di tutto realizzato in Olanda
prendi gli studi di South Park che è bello
perché in Inghilterra non capisco
perchè non lo so ma anche su Netflix tu
se questa guerra civile avesse mantenuto il film in America
e mi sono già annoiato con quello sul
aereo quindi ho pensato che potevo annoiarmi
con lui di nuovo a casa e vedere di cosa si tratta
se è ancora meglio o se lo è
solo se semplicemente non mi piacesse e
Mi sono ancora annoiato perché il
problema con un film del genere è quello
Marvel ha introdotto 10.000 caratteri
tutti vogliono fare un film in più
da e poi tutto ad un tratto lo è stato anche
molti e non ricordavamo più chi
era chi e cosa stava succedendo , così sono
come hey facciamo un film dove loro
tutti scontenti l’uno con l’altro e poi
combattono tra loro in un aeroporto
e tu uccidi tutti i tipi di aeroplani e
ritardare il mio volo e fare ogni tipo di
cose insieme e io tutta la lotta
stava annoiando il suo toast perché lo erano
tutti uguali avevano tutti gli stessi poteri
avevano tutti la stessa cosa che erano
amici stavano tutti lavorando insieme io
sapeva che non ci sarebbe stato come tenuto
Il taglio dell’America degli Ironman doveva andare
come ah ah ah, vai, lo sai
perché era un film PG 12
e io ero proprio come quello che è tutto questo
aggressività per se non c’è un punto finale
ad esso e questo è esattamente quello che sento
quando stiamo parlando di JavaScript o
CSS o qualsiasi altra cosa che facciamo per ottenere
qualcosa sullo schermo perché tutto
di quelli hanno poteri che sono diversi
alle altre tecnologie e tutte
dovrebbero essere usati per il loro uso migliore
caso piuttosto che solo perché usarlo
così CSS sembra essere fonte di confusione per
programmatori e questo è successo da noi
l’ ho inventato intendo che ho fatto il 1997
prima volta come perché lo facciamo?
cosa bgcolor e layout di tabella cosa può
lo facciamo e allora era come farlo
i tuoi siti web più veloce con CSS perché
l’aspetto è solo in un file
che può essere memorizzato nella cache dal browser e
siamo come oh questo è così bello e gente
poi come cinque anni dopo sei ancora
pensa che sia bello quello che è
davvero niente che sta succedendo su ciò che
fare è guardare quello che posso fare reagirà ma
Mi piace twittare l’altro giorno dove
lei è come possono questi due gruppi sì
così facile non è nemmeno la codifica CSS è così
abbiamo bisogno di sostituirlo con
JavaScript si prega di parlarsi e
questo a volte è lo stesso gruppo perché
guardiamo ai CSS come sviluppatori e troviamo
la sintassi è strana come il punto esclamativo
importante significa che è importante come a
Sviluppatore JavaScript Sono sempre inciampato
su quello è un po ‘strano
tutto è una stringa tutto è
fondamentalmente una dichiarazione e sono solo
stando lì cosa sta succedendo e poi
facciamo ciò che ogni sviluppatore ci fa
cambia cose e vedi cosa succede e
facciamo casino e CSS e quando
il display non lo controlla correttamente
allora effettivamente diciamo che la lingua è
terribile e dovrebbe essere sostituito da
qualcosa di utile come ad esempio OpenGL
Lo adoro quando apro la shell mostrami
e poi ottieni il triangolo con
i colori lì e un sacco di volte
ogni volta che parlo con le persone che vengono
da giochi di programmazione di livello superiore
programmando sul web sono come perché
non posso usare GL per quello e sono come
perché non conosci il funzionamento
sistema non si conosce il processore voi
non so dove sta andando questa cosa
correre così qualcosa come i CSS è molto di più
perdonando e molto più ragionevole a
ambiente che non è definito ma è
un po ‘ strano per noi farlo perché
noi non vogliamo dare via che il controllo
e questo è ciò che tutta la lotta è
sul controllo dell’ambiente
controllando il display quindi se pensi
a riguardo CSS è tollerante ai guasti e questo
è come tutto sul web HT
Malus fault-tolerant se fai qualcosa
sbagliato in un file CSS salta il parser
quella linea e dice pure guardiamo
a un altro non mi interessa se lo fai
Errore JavaScript in uno di essi
Processi JavaScript con cui non gioco
tu più andrò e andrò in a
angolo ora e non parlare con te in modo CSS
e HTML è pensato per consentire l’editore
è pensato per permettere alla persona che lo scrive
per commettere errori senza l’ utente finale
essere punito e come sviluppatore
sembra sempre strano perché vogliamo
sapere almeno perché o ottenerne un po ‘
console.log o qualche attrice di prova che cosa
è successo ma i CSS sono silenziosi quando
fallisce, sappiamo solo che è fallito e
questo è tutto
quindi può essere fonte di confusione per gli sviluppatori
che vogliono controllare tutto ma è
in realtà ottimo per le persone che pensano bene
se ho fatto un errore non è la mia fine
gli utenti che ne devono soffrire lo sono
il mio lavoro per scoprire cosa sta succedendo e
è per questo che uso un editor adeguato
hanno anche i CSS che linting nell’editor
e hai intuizioni persino in bilico
dicendoti cosa significano queste cose che uso
Codice di Visual Studio, perché io sono parte di
quella squadra e ci lavorerò su quello e noi
anche avere una bella estensione ora che
ti dice quando corri su CSS che
browser supportato invece di dover
guardare in su ogni singolo tempo sul web
e questo è ciò che pensiamo che dovremmo essere
andando a dovremmo iniziare di più
su come limitare il debugging prima di noi
scrivere un codice stupido perché passare attraverso tutto
e poi trova l’errore facciamolo
ci impediscono di scrivere l’ errore nel
primo posto molto simile a quello che abbiamo
come risorse in qualcosa come una parola
quindi praticamente ogni volta che scrivi una parola
sbagliando ti capita di sottolinearlo
è quello che dovremmo fare per la codifica
più che javascript non è colpa
tollerante che può essere disastroso
perché ottieni queste pagine web che sono
vuoto è per questo che sei infinito
spinners sul web è per questo un sito web
ti dice oh tu non sei su Chrome sei
non su un MacBook Pro mi dispiace non internet
per te e questo non è ciò che è il web
di questo non è ciò che intendeva il web
essere e non iniziare con il Regno Unito
governo che cerca di censurarlo è un
storia diversa su di esso posso parlare
per quello anche per ore e così in CSS
applichi i tuoi stili e tu speri
ha funzionato questo è in realtà tutto ciò che hai e
questo è abbastanza bello perché dipende da
l’ utente finale per vedere qualcosa che rende
senti che il tuo CSS non dovrebbe mai essere nel
modo di K e tu
abbiamo avuto un grosso problema qui prefissi CSS
da un pulsante abbiamo avuto improvvisamente
avevamo pulsanti con testo bianco e bianco
sfondo perché lo sfondo era a
Gradiente WebKit che funziona solo su
primo iPhone quindi c’erano pulsanti da
le dozzine su internet solo dal
centinaia di migliaia su internet
erano completamente inutilizzabili per qualcuno
non avendo un iPhone perché il
lo sviluppatore era troppo pigro per definire solo un
colore di sfondo e quindi sovrascriverlo
con un gradiente solo quando il browser
lo supporta e questo è quello che dovresti
stai pensando ai CSS tutto il tempo che è
un miglioramento di un’interfaccia utente , quindi se
fai il layout con i CSS e la cosa
si accumula in un ordine ragionevole quando il
Il CSS non può essere eseguito o non lo è
supportato da quel browser eccezionale che hai
fatto niente di sbagliato tu costruisci un
interfaccia costruisci un’interfaccia ragionevole
non hai costruito qualcosa che sia
perfetto per tutti perché quello
non funziona lo paragono sempre con
scale mobili contro ascensori scale mobili quando
si rompono sono grandi perché
sono scale si può ancora andare al
altro livello ci vuole più sforzo ma
non ti è impedito di raggiungere il
altro livello su un ascensore ti trovi in un
stanza che è rotto con cinque persone che
non voglio essere dentro
così le scale mobili sono lì per accelerare
il nostro modo di o qualcosa che è mio
preferito all’aeroporto quando hai
le passerelle e le persone stanno in piedi
loro e sono come queste cose sono
pensato per farti muovere più velocemente non a
farti muovere togliti di mezzo
ora potrebbe essere solo cattiva in
JavaScript comunque tu controlli il
styling e puoi e devi verificare
che ha funzionato non appena ne fai un
interfaccia di luan e lo rendi dipendente
su JavaScript tocca a te per renderlo
disponibile per le persone dipende da te
capire cosa fare quando qualcosa
va storto e non sta dicendo all’utente
per favore scarica un altro browser
perché è quello che abbiamo fatto nel 1996
è per questo che abbiamo malware su molti
computer in questo momento perché le persone
non sbarazzarsi di quei vecchi computer
e quei vecchi browser che tutti
doveva usare ora CSS significa abbracciare il
Squishiness of the web Amo questo termine
da Brad frost dove è come tutto
è morbido non hai idea di
risoluzione che conosci del pixel
densità e così via, e così via
in realtà l’elenco di questo ora così qui
sono le cose che vanno oltre il tuo
controllo sul web e non c’è niente
si può fare a questo proposito che si può calpestare la vostra
piede che puoi
arrabbiarsi molto si può dire ai vostri utenti
che sono degli idioti ma non è un buono
idea di business quindi il browser è tuo
gli utenti non sono nel tuo controllo
ogni volta che la gente silico dovrebbe solo
aggiornamento andare in vacanza e andare a
vacanze come reception e prova a stampare
i tuoi biglietti su un Mac dal 2003 in poi
non è stato cambiato da allora hai
un computer migliore a casa ma non lo fai
averlo con me con te in età avanzata
I telefoni Android ti fanno schifo
browser che non è possibile rimuovere o
potrebbe sostituire con qualcos’altro lì
sono ambienti in cui non puoi
controlla il browser e non puoi dirlo
persone di usare sempre un browser sviluppatore
è come 0.0 punto 0.2 per cento del
commercializza la risoluzione la morte dei pixel
le impostazioni dei colori dei dispositivi
non so che sia la loro connessione
affidabilità e velocità come oh sembra
ottimo nel nostro ufficio e poi lo provi
su un telefono 3G e tu sei come oh I just
aspettato 50 secondi che nessuno fa su a
il cellulare tre secondi è tutto per te
allora le persone o daranno un pugno a loro
telefono o dirvi che ho intenzione di usare
il concorrente la connettività
risorse Ness restrittive possono essere
bloccato come fa main fa gli ad blockers
ma anche su dispositivi mobili su dispositivi mobili più economici
connessioni in Inghilterra potrebbero
in realtà minify il tuo JavaScript senza
dicendoti il fornitore di telefonia mobile
lo fa e il provider CSS lo fa
così pure il tuo codice viene cambiato da a
man-in-the-middle senza che tu abbia un
possibilità di cambiare qualcosa al riguardo
la loro dimensione del carattere e alcune esigenze come me
invecchiando ho bisogno di un font più grande
quindi non puoi dirmi come 12 pixel è
abbastanza soprattutto non quando sono cinese
e il lettering è così grande questo
non funziona la disponibilità di
risorse sulle loro macchine per il tuo
il prodotto è troppo CPU che sta già bruciando questo
sta succedendo tutto il tempo gente come oh
questo computer il tuo sito è così lento
mentre in realtà ne stanno eseguendo alcuni
Renderer WebGL e come tutti i tipi di
conversioni in background l’importo
del contenuto del testo e delle dimensioni dell’immagine nel tuo
prodotto perché li costruiamo sempre
grandi cose che sembrano grandi e poi noi
consegnalo a un sistema di gestione dei contenuti
e le persone scrivono come tre teaser e
metti come l’Ulisse di James Joyce in a
titolo e come caricare BMP e questi
tipo di cose perché non sono state
addestrato perché pensiamo che la manutenzione sia
fatto da persone che non dovrebbero essere pagati
molto che è il motivo per cui rompono tutto il nostro
prodotti tutto il tempo quindi in CSS è il
lavoro del browser per funzionare bene
GPU
risorse e saltare la funzionalità così a
L’animazione CSS che non è liscia viene tagliata
spento dal browser e quindi non è un
l’animazione va solo alla fine del
animazione la tua animazione JavaScript
per esempio è il tuo lavoro da testare
supporto per garantire che il rendering
Dipingi e riflussi velocemente e per mantenere
la tua animazione pensa di avere di più
controllo ma hai molto di più
responsabilità pure e questo non è un
responsabilità possiamo andare via da noi
non posso dirti che i nostri utenti dovrebbero esserlo
l’aggiornamento dovrebbe essere migliore lì
siamo un servizio di consegna che ci viene pagato molto
di soldi per farlo così quando qualcuno
piagnucoli sui nostri utenti finali che non hanno
il browser giusto e io sono quello che sono
vieni pagato per non averlo ricevuto
pagato per essere più efficace che stai ricevendo
pagato per costruire davvero qualcosa
funziona in modo che le persone facciano clic sugli annunci in modo che le persone
compra le cose così le persone pagano il nostro salario così
il nostro lavoro è costruire interfacce che funzionino
quindi perché sottostimiamo costantemente
CSS e sopravvaluta i benefici di
JavaScript non ho idea del modello minore
potrebbe essere potrebbe essere cosa storica io
non lo so è che nei tempi antichi
browser siamo anche termini tecnici di merda
e in pratica non seguivano a
standard non c’era standard che loro
potrebbe seguire e hanno gareggiato con ciascuno
altro sul fare le cose solo per le nostre
browser e queste cose non sono mai andate via
quindi queste cose sono ancora sul web e
le persone comunque li supportano anche se
non dovrebbero più Internet
Explorer è morto e fondamentalmente buono
liberazione
non dargli nulla è perché non può
ingoiare dato l’ aspetto HTML al CSS di base
per visualizzare qualcosa in cima a ciascuno
altro se il caso d’ uso principale del tuo
sito web funziona in tutti i browser
le persone sono felici non danno internet
explorer 6 utenti belle interfacce esso
semplicemente li confonde a cui non sono abituati
bellezza a cui non sono abituati
l’interattività sono solo loro piacciono
le loro caselle di rilascio e i loro pulsanti di opzione
e spero che quando qualcosa scatta
qualcosa succede a tutti gli interni
sistemi che dobbiamo usare in Microsoft per
antipasti e quindi CSS avevano una storia accidentata esso
inizialmente era molto limitato ed era giusto
lì per sostituire cose come sfondo
elementi di colore e carattere e tabella simile
layout e le nostre linee e centri alle ore
e tutte le cose che sono grafiche
e HTML che non avrebbe mai
e poi abbiamo il supporto per browser patchy
e errori molto strani senza debugging
le opzioni di debugging allora sono state inserite
avviso su tutto e spero che tu trovi
alcune informazioni al di fuori di esso
non avevamo strumenti di sviluppo come noi
abbiamo al giorno d’oggi un grande campione
funzionalità quando iPhone diventa una cosa
in Apple ha chiamato i colpi quando Apple
ha detto che html5 è il futuro ed ecco
tutte le cose interessanti che WebKit può fare
CSS cool, ero davvero eccitato
davvero incazzato anche per quello
non era standardizzato ma lo era
tutto solo per WebKit quindi quando lo facciamo
margine rilasciato quando ero parte di quello
squadra abbiamo dovuto mettere un sacco di bug di
altri browser in un nuovo browser non a
rompere il web perché gli sviluppatori fanno affidamento
su funzionalità sperimentale quando
qualcosa aveva un prefisso CSS che non hai
controllo su quello
quella compagnia cambiò completamente aspetto
e sentire e la funzionalità di questo e
si deve tenere il passo è per questo che è
chiamato sperimentale in esperimenti
le persone muoiono a volte noi non pixel
dovrebbe essere spostato, ma è ancora
una cosa strana su cui contare e molto
problemi con le pareti del browser in giro
prefissi così oh abbiamo questo dovresti
usa il nostro browser o browser per farlo tu
dovrebbe usare il nostro browser e per fortuna
abbastanza tutti i produttori di browser sono cresciuti
questo e ci rendiamo conto che uccidere ciascuno
altri non accadrà browser
non sono importanti nessuno fa soldi
con il browser hai mai pagato per
un browser ok opera era un browser che avevi
pagare a volte come un blocco di annunci
browser su un telefono cellulare la gente lo farebbe
pagare ma i browser sono un mezzo per un
fine di portare servizi agli utenti finali
Chrome non è di Google perché loro
vogliono vendere un browser che è per voi di
usa i servizi di Google e ottieni la ricerca
risultati e ottengono soldi per la presentazione
risultati di ricerca è un modo per voi da usare
servizi di Google molto simile a bordo è impostato
per Microsoft molto simile a Safari è quello
per i browser Apple sono lì da visualizzare
contenuto quindi non importa cosa cosa
pensi che sia il migliore che le persone faranno
probabilmente usa quello che viene fornito
la loro macchina e nessun altro loro
non so nemmeno cosa sia il browser
fino ad ora non c’era un layout
moduli così imballati che usiamo solo le tasse
posizionamento e posizionamento assoluto o
fluttuante e quello era sempre un molto
punto di confusione per le persone che non lo sono
inclinato graficamente e assoluto
il posizionamento era facile ma assolutamente
terribile perché appena cambierai il
dimensione del carattere e non hai usato EMS
tutto si sovrappone e tu
poteva
utilizzare l’interfaccia più a lungo in modo che il nostro
la soluzione era sempre quella di ricucire
JavaScript perché in JavaScript abbiamo avuto
per controllare non abbiamo mai avuto in CSS
Posso leggere quanto è largo il browser
può anche leggere quale fosse la dimensione del carattere
Usato
Posso leggere il colore che posso usare
contenuto generato posso usare tutte le cose
per sapere cosa sta succedendo e JavaScript
ha questa meravigliosa dichiarazione se bene
è come se funzionasse e poi mostralo se
non fare qualcosa al riguardo e CSS questo
se le affermazioni sono sempre sottintese per il
browser da noi quindi abbiamo creato HTML
stile applicato e abbiamo fatto tutti i tipi di
risolve con tutti i polyfills che mi piacciono
quando un browser aveva funzionalità e
gli altri non abbiamo messo il polyfill
in tutti hanno avuto la funzionalità
ma non abbiamo mai eliminato il polyfill quando
questi browser cessano di esistere o addirittura di essere
qui essendo supportato è per questo che abbiamo
un sacco di lotti di JavaScript sul web
non è necessario
ma i CSS hanno fatto passi da gigante
negli ultimi mesi e anni e a
molte volte ci siamo arresi
perché vediamo solo questo comune
denominatore dello spettro di IE 9 e
tutto il resto non è ancora utilizzabile così
i browser sempreverdi sono una cosa e
sono una cosa molto importante qualcosa
piace qualcosa come voglio piangere e
il ransomware mi mostra che dobbiamo mantenere
il nostro software up-to-date per tutto il tempo
perché i cattivi sono più veloci
abusando di quello che stiamo applicando
supportandolo fornisce gli strumenti del browser
intuizioni dettagliate intendo che ottengo il mucchio
analisi ottengo tracce di stack che ottengo
tutto nei browser oggi lo so
perché qualcosa è lento, so perché
qualcosa non è stato applicato il supporto va bene
documentato posso usare dot com è il tuo
amico questo è davvero fantastico
sito Web che mostra quale browser
supporta cosa e perché non supporta
e quali gli errori sono e dove
passo che la gente dovrebbe lamentarsi esso
dovrebbe risolvere il problema quindi non andare su Twitter e
dì come se questo browser fosse terribile
l’altro è meglio andare a questi bug
referenze vai a file bug vai a caricare un bug
vai a caricare un sistema perché è quello che
i nostri ingegneri sono seduti su tutti i browser
i produttori supportano i canali e il bug tracking
è disponibile per quasi tutti i browser che sono
dicendo quasi tutti i browser che non sono
menzionando nomi ma Apple abbiamo pre
processi come sass e meno che hanno
alzato il calore per innovare le specifiche
più veloce la maggior parte delle persone CSS che sono già
entusiasta di CSS quando
– ride un po ‘di tempo fa, perché
hai avuto il senso comune delle variabili
hai avuto tutti i tipi di cose davvero interessanti
sta succedendo lì e molto simile a jQuery
ci ha fatto rivisitare e ripensare cosa
JavaScript può fare al giorno d’oggi questi
i preprocessisti ci hanno fatto ripensare a ciò che i CSS
posso fare anche venerdì di CSS soggiorno
qui effettivamente ad Amsterdam, quindi c’è
molte buone informazioni che escono
ci sono approcci come il corpo di CSS chiamato
Sullivan design anatomico di Brad Brad
gelo permesso con più manutenibilità
anche di componenti diversi
CSS più gestibili su larga scala
piuttosto che come un sacco di ripetizione a
molte cose problematiche che era CSS
lì perché è davvero facile da scrivere
un sacco di CSS che non viene applicato
e ci sono molti strumenti in giro
quello ora così io voglio solo elencare a
alcune cose incredibili che i CSS possono fare ora
e che dovresti considerare di usare e
anche se non pensi di usarlo, sappi
che esiste e si associa a qualcuno
che ti piace SS e gli piace fare i layout
il più grande critico più grande che fossi
trovare con i CSS è quello di tutti
si lamenta perché ci viene chiesto
per farlo basta dire di no e dire hey, sono un
amministratore del database Sono come un
sviluppatore full stack cosa diavolo
dovrei avere a che fare con i CSS questo è
qualcosa di un’interfaccia persona che se ne frega
sulle interfacce e conosce utenti e
sa che i browser dovrebbero avere noi se tu
essere licenziato
Microsoft sta assumendo lo sai come noi
non ho nulla da perdere in questo momento, ma noi
prova ad assumere tutti i lavori che non lo sono
il nostro fare così perché dovresti dare
te stesso quel dolore che non vuoi
giocare con cose semplici come
valori CSS calcolati che hai probabilmente
sentito parlare di questo o alzare la mano se
non hai che sarebbe interessante
per vedere si dice per esempio che hai un
casella di input in cui si desidera avere il
casella di inserimento troppo piena per riempire il tutto
cosa e anche avere qualche imbottitura
intorno e hai anche qualche imbottitura
intorno è sempre il problema con quello
non è così che è stato fatto normalmente
come una larghezza del 98% e poi speri
l’ 1% è sufficiente ma in percentuale
sempre fuori dall’elemento genitore se il
elemento genitore non ha più spazio
non c’è nessuna imbottitura, quindi
quello che fai invece è una larghezza di
calc
100% – 1 am 1 am è un personaggio così
si calcola che cosa fa il 100% di quella scatola
– 1 su cui è 0,5 am su ciascuno
lato
ciò che è rosso ciò che è la larghezza di
che rendono quel browser che non hai
pensare a questo proposito non si deve sapere
che cosa è allo stesso modo quando hai bisogno
6 caselle l’una accanto all’altra fai un calcolo
100% diviso per 6 ovviamente si potrebbe fare
che nella tua testa o come mettere un sacco
di molte cose là dentro ma penso a
il manutentore se il prossimo manutentore
ha bisogno di 8 elementi là dove deve
cambia il numero 8 in cui non fai i conti
la loro testa è nuovamente divisa al 100 percento
8 significa che i calcoli nei CSS sono i
la prima cosa che è andata lì che è stata fatta
vederci più dinamici perché
originariamente non era mai dinamico era solo
applicato e non è possibile
cambiarlo nel CSS stesso
supportato in tutto il negozio tranne che per
Opera Mini perché Opera Mini è un è un
browser di streaming che prende il tuo HTML
CSS e JavaScript lo raggruppano in
una stringa e la invia al
browser questo è in realtà ed alla fine
telefono degli utenti questo è nei paesi in cui
la connettività è davvero molto costosa
davvero pessimo o se stai srotolando
e devi fondamentalmente voler farlo
quindi non c’è modo in Opera Mini di fare
qualcosa dopo che la pagina è stata
reso questo è il motivo per cui tutte queste cose
non sono supportate le query multimediali
un’altra grande cosa che è stata intorno
da anni ormai ciò che le richieste dei media consentono
devi fare diversi CSS
secondo le cose che stanno accadendo
sullo schermo quindi se in questo caso se lo è
una larghezza massima di 600 pixel quindi effettivamente
non visualizzare quell’elemento della barra laterale
perché vuoi mostrarlo solo in a
legge in un inferiore in un’immagine inferiore in a
più piccola finestra più piccola puoi farlo
su elementi di collegamento in cui potresti farlo
gli stessi stili e puoi fare le cose
come se fosse ritratto se fosse un paesaggio
se è palmare se si stampa, aggiungere
supporto sono queste sono le query multimediali
molto molto potente per fare solo cose
quando una certa cosa è abbinata , può
ottenere abbastanza difficile da mantenere, ma noi siamo
tornerò più tardi perché
c’è un modo intelligente per farlo ma
sono stati supportati per secoli in tutti
singolo browser quindi non provare solo a leggere
in JavaScript quanto è ampio lo schermo
usa un media
per questo perché è molto più affidabile
e non c’è un browser che non lo fa
supportarlo tranne per I IE 10 è morto come
beh, va tutto bene c’è anche a
proprietà sorella in javascript per quello
chiamato match media, che non vedo
le persone usano molto, quindi il problema è CSS
le domande dei media sono così anche se lo hai
come va bene hai 12 immagini lì dentro
dicendo come se fosse uno spettacolo di 2000 pixel
quell’immagine se è per lo spettacolo di pixel
quello e così via e così via che il
il browser li carica tutti e poi solo
visualizza uno di questi se usi la corrispondenza
media in JavaScript invece e poi
crea l’immagine e sostituisci a
immagine più piccola con esso quindi non lo fai
avere quel problema, ma ancora una volta questo è un
questo è un modo in cui dovremmo usare un’immagine
elemento in HTML, perché abbiamo
quelli adesso ma questo è un esempio
per assicurarti che le cose vengano caricate solo
quando hanno bisogno e tu hai qualcosa
più piccolo che viene sostituito da qualcosa
media più interessanti con i media di corrispondenza
sono una cosa interessante pure
il contenuto generato è qualcosa che noi
continua a stimare ed è molto
strano perché originariamente guardavo
nel documento HTML in cui si trova l’HTML
lì e CSS non hanno fatto nulla con esso
appena aggiunto i colori si aggiungono modulo in modo
che lo ha fatto sembrare diverso ma
non ha modificato il contenuto dell’elemento
stesso ma a volte vuoi contenuti
non è nell’HTML e così è
solo un piacere avere o una cosa carina
fai quello che vuoi, non vuoi digitare tutto
il tempo e questo cosa ha generato il contenuto
entra così un esempio qui è questo spunto
elementi in cui si desidera avere il
citazioni all’inizio e alla fine così
ce n’è uno blu e uno rosso no
riesci a schermo ma è proprio come te
fai prima e cue dopo e tu
creare il contenuto in questo modo, quindi
uno ti dà è un handle di stile da fare
qualcosa in più su questo elemento che
ha senso solo in uno stile
ambiente ma non ha valore un cieco
l’utente non si preoccupa se quello è un blu o un
citazione rosso fintanto che sanno che
è una citazione e loro lo sanno usando
l’elemento cue mentre come te no
voglio mantenerlo in JavaScript tu
non voglio sostenere che nel codice HTML
con una campata con la porta dentro
perché non sono necessari, lo sono
solo necessario quando è una cosa visiva
da mostrare e le persone lo usano per tutti
tipo di cose selvagge , c’è un grande
sito web chiamato mare
un singolo tuffo calmo e loro fanno questo genere
di cose queste sono tutte un elemento diff
usando i gradienti CSS usando le ombre esterne
usando tutti i tipi di cose in CSS e
generato contenuto intorno a loro in modo che tu possa
creare una visuale davvero molto complessa
cose senza dover cambiare la tua
HTML senza usare alcun JavaScript
se hai qualcuno in CSS che lo sa
le loro cose e queste sono belle da vedere
a volte sono davvero orribili
in realtà in termini di complessità quando tu
inizia a scorrere lo schermo e roba così
questi sono belli per mostrare alla gente il potere
di loro ma li usi con parsimonia perché
non vuoi avere come un’immagine di
come un extra e ogni paragrafo o
qualcosa del genere supporta ancora tutto
sopra il browser il fronte del browser sì
non ci sono scuse per non usare generato
contenuto quando ha senso perché
queste sono cose visivamente belle
avere perché dovrebbero essere mantenuti dentro
un sistema di gestione dei contenuti perché dovrebbe
sono mantenuti in JavaScript oh
è un vero peccato
okay, andiamo a vedere le animazioni e
transizioni e sai dove sto andando
con questo questi sono potenti non usare
troppo non si eccitano troppo
su tutte le cose interessanti che puoi fare
con le animazioni perché sono costose
non in termini di dollari ma in Amici
di potenza della CPU e potenza della GPU e sono
anche molto distraente quindi qualcuno con a
apprendimento disabilità per esempio con
lampeggiante, animato e rotante
cose ma è impossibile per loro farlo
utilizzare il contenuto e non si vuole
essere troppo frivolo con esso pure perché
se devi animazione cutesy
qualcosa cade quando qualcosa va
male se vedo che per il momento mi decima
iniziare non fidandosi più della vostra azienda
riguardo a ciò che fai al ritmo
piuttosto che aiutarmi in modo da animazioni e
le transizioni sono state definite nel
standard per un po ‘di tempo e il mio
il favorito è le transizioni perché solo da
avendo una transizione di trasformare uno
qui i secondi nove e tredici
tutto più fluido così la demo che io
sento che ho scritto come otto anni
fa o qualcosa invece ho fatto un a
piccolo elemento che quando si fa clic
da qualche parte sulla pagina mette una palla
lì e quando si fa nuovamente clic su di esso
si muove senza problemi da uno all’altro
a causa di quella transizione che potrei avere
fatto in JavaScript ma non l’ho fatto
bisogno di mettere solo una transizione
qualcosa va
da una parte all’altra e se il
il browser non lo supporta e va solo
alla fine di quell’animazione non si ottiene nessuno
male
e nessuno deve caricare molto
JavaScript e in realtà fare un ciclo for
e cambiando e re rendering e
rinfrescante e riverniciatura ogni – ogni
tempo perché quello gira sulla GPU dal
browser scelto per te
le animazioni sono la stessa cosa che hai
nomi di animazione durata animazione e
hai dei fotogrammi chiave in cui il più semplice
come fai da un tutù ma puoi farlo
fare come uno zero per cento l’ uno per cento due
percento e così via e così via
questo mi fa sempre impazzire perché
c’è sempre uno sviluppatore JavaScript
vuoi mettere i due punti dopo il da o
il – ma non è la sintassi CSS così
questa è una cosa che è giusta
abbastanza semplicemente non ho una vita
le animazioni sono piuttosto sorprendenti
supportati e in realtà stanno facendo
il loro lavoro bene c’è anche una rete
API di animazione in JavaScript, se lo desideri
avere un controllo di frame per secondo se tu
vuoi avere il controllo dei keyframe se tu
desidera rimuovere e aggiungere i fotogrammi chiave
di conseguenza, ma ancora una volta significa che sei
responsabile per fare quel lavoro cosa in
questo caso il browser salta
cerchi si piega all’indietro e cuoce
il tuo cookie per farlo davvero
animazione accadere e non c’è bisogno di
preoccuparsi perché se non lo fa
succede che ancora non è nel modo di
utente finale mentre se il tuo JavaScript
l’animazione nel ciclo for diventa lenta e
mangia tutte le risorse che hai
un’animazione semifinita che non vuoi mai
per vedere un’animazione semilavorata su
web sono supportati ovunque di nuovo
intercettare per Opera Mini a causa del
ragioni che ho detto prima del
cosa interessante di animazioni e
transizioni è che l’ interazione con
JavaScript è via eventi, quindi spara
eventi mentre è in realtà prima che sia
accadendo mentre sta accadendo e dopo
sta succedendo così puoi farlo
come si può catena di animazioni in questo modo
o può reagire all’animazione quando
qualcosa era finito, ne ho scritti alcuni
giochi che usano solo quello di base era
come un grande gestore di eventi che semplicemente
ascoltato la fine di un’animazione
perché alla fine dell’animazione voi
sentire che si ottiene il nome dell’animazione
e quale elemento è stato animato così
modo in cui puoi facilmente sincronizzare le tue animazioni
e crearne uno nuovo applicando una classe
ad un elemento genitore , per esempio
le unità viewport sono una cosa molto bella
pensaci e il problema più grande noi
avere con la tipografia sul web è quello
le cose devono essere leggibili ma schermate
potrebbe essere di dimensioni completamente diverse e
non sappiamo quale sia la dimensione del
lo schermo è così le unità viewport sono nuove di te
unità nuove in CSS che non sono pixel
che non sono EMS ma in realtà sono
chiamato VW e VH quindi una larghezza viewport
è una percentuale della piena finestra
larghezza 480 pixel wide screen 10 VW è 10
percentuale o 48 pixel la differenza
tra il 10% e il 10 VW è quello
la percentuale è la percentuale di
elemento genitore VW è la percentuale di
la finestra quindi se ora ho un div all’interno
un div all’interno di un div all’interno di un div dove io
fare un 10% diventa 10% 10
percentuale del 10 percento 10 percento di
tempera e diventa sempre più piccolo
più nidifichi mentre una VW lo farà
rimani sempre, non importa quanto il tuo nidificato
Gli elementi HTML sono in questa finestra di visualizzazione
l’altezza è la stessa per il viewport
altezza del browser e visualizzazione come
molte cose come il viewport come il
altezza del documento il browser si nasconde così
viewport è fondamentalmente ciò che è visibile in
lo schermo ora così così che puoi
usa queste cose per fare appiccicoso
navigazione intestazioni appiccicose piè di pagina tale
che sono sempre abbastanza grandi per
effettivamente vedere le cose quindi questa finestra
minimo che è una percentuale del
larghezza o altezza finestra qualunque sia
più piccolo e così per esempio il pin 10 V è
10% della larghezza della finestra corrente in
ritratto o il 10 percento della porta di visualizzazione
paesaggio da ragazza, quindi non vuoi farlo
layout diversi per quello che usi
V bin usi V Max per l’altro modo
circa così la percentuale del viewport
larghezza o altezza qualunque sia maggiore cosa
puoi fare con questo è come davvero
davvero semplice una tipografia che è
leggibile così ancora una volta usi la calcutta
spiegato in anticipo dove dici come
dimensione carattere calc 16 pixel più 1 VW così
il tuo font sarà sempre 16 pixel no
importa quale sia la risoluzione più
cosa c’è di extra disponibile, quindi più grande
schermi che saranno più grandi su più piccoli
schermi sarà più piccolo che significa
la lunghezza della frase rimane il
stesso
che è come noi
come umani, poi fai un’altezza di linea
dove ti piace la misura verticale
e allora probabilmente vorresti farlo
qualcosa come in un punto 2 e 3
BW per un h1 e se diventa troppo grande se
il sito X VDD è davvero enorme allora
fermalo a 50 pixel perché non lo fai
voglio avere un 3.000 o in questo caso a
3.000 per 2.000 risoluzione, ma un 400
l’ intestazione dei pixel è davvero troppo
lo spazio usa solo per il titolo e allora
sembra che in un browser sia come se
ridimensiona sempre il carattere del browser
rimane leggibile indipendentemente dallo schermo
è in questo caso che non abbiamo limitato il
lunghezza di esso in modo che la lunghezza della frase è
non la cosa ma puoi vedere come è
non diventare troppo grande non sta diventando
troppo piccolo rimane sempre leggibile e
è un modo molto semplice per farlo
piuttosto che doverlo fare a
JavaScript o qualsiasi altra cosa in cui proviamo a fare
il passato una cosa rapida su questo ogni
Sviluppatore CSS e ogni JavaScript
lo sviluppatore continua a fare ciò che manteniamo
ridimensionando i nostri schermi per guardare i nostri
diverso come essere media query
applicato spostiamo le cose intorno a nessuno
lo fa sempre se ci sono problemi in
tra le diverse dimensioni mentre loro
stanno cambiando non importa e gli utenti hanno a
risoluzione e non ridimensionano il loro
navigatori tutto il tempo e vedere e così via
possono rompere solo gli sviluppatori e il controllo qualità
la gente fa così che si assicuri che il
la cosa funziona in un certo stato ma il
gli intermediari non sono così importanti
quando le persone fanno domande sui media con simili
500 break-up breakpoints questo è
in realtà non aiuta nessuno a farlo come
il più semplice possibile il meno codice che abbiamo inserito
su un sito web ci sono le unità viewport migliori
supportato in tutti i browser Edge ha il
problema che v min e v max non è
supportato ma per favore vai e lamentati
noi di questo abbiamo deciso che è dentro
la realizzazione, ma abbiamo bisogno di più persone da fare
è una cosa generale se pensi di essere
se vedi qualcosa non supportato
lamentarsi si lamentano lamentarsi o addirittura
meglio usarlo usarlo in show di produzione
noi come il tuo sito web è terribile perché
non lo sosteniamo, più siamo noi
effettivamente ottenere casi d’uso reali del web
piuttosto che oh questo dovrebbe essere
perché l’altro browser
più possiamo effettivamente mettere ingegneri
fuori e in realtà portarli sul posto di lavoro
abbiamo anche una società di software come Google
è anche una società di software finora è un
società di software abbiamo un limitato
quantità di risorse che non abbiamo a
macchina di clonazione per gli sviluppatori noi
in realtà devo applicare make developers
fai cose che sono importanti
ora la flexbox parla di scatole flessibili
Dio, Xbox è fondamentalmente ciò che tu sempre
volevo che i CSS facessero e non ti venissi mai
mai voluto capire questo è ciò
abbiamo fatto con le tabelle di layout in modo che tu possa fare
quasi tutto in orizzontale o
visualizzazione verticale di un elemento così dentro
questo caso c’è un enorme Divya o
in realtà è il corpo e puoi farlo
come allineare queste cose a sinistra a
la cima verso il basso per mettere lo spazio
tra loro mette lo spazio intorno
li allineano tutti a sinistra allineati
loro tutte le cose cambiano il loro ordine
quindi l’ordine in cui erano in HTML no
significa necessariamente l’ordine che sono
essere visualizzato sulla pagina il mio
il blog personale lo fa per la mia intestazione
Voglio dire che ho la mia foto nel
al centro di esso e rileva intorno ad esso ma
in HTML è la mia prima immagine e poi
il testo quindi l’ordine per un utente cieco
ha perfettamente senso per un utente visivo
avere una bella interfaccia quando ce n’è abbastanza
spazio sullo schermo e se non proprio giusto
ricade di nuovo su una lista di collegamenti
flexbox è la cosa da usare se vuoi
allineare effettivamente le cose in un certo
guarda la porta o se vuoi allineare le cose
in un certo altro elemento è il
migliore sostituzione per assoluto
posizionamento in una posizione relativamente
elemento che avevamo prima che ci sia un grande
gioco se vuoi giocare con esso se tu
vogliono imparare come ordinare questa è una
modo che io insegno per i bambini
la registrazione in flexbox si chiama fondamentalmente
cambia il codice in giro per saltare a mettere
le rane su queste ninfee così tu
impara la sintassi della flexbox in questo modo
c’è una bella chiacchierata da un eroe locale , Zoe
Zoe Gillenwater lei due anni fa lei
in realtà ha parlato a Smashing Kampf
questa è lei su Twitter dove lei
mostra effettivamente come sta usando booking.com
flexbox e back tenon era la mia stanza, io dio
utilizzare flexbox già al giorno d’oggi non lo fanno
anche più fastidio a dirlo, ma lei
mostra anche come
si piega di nuovo a interfaccia sensibile e
quando la flexbox non è supportata invece di
saltare attraverso i cerchi e fare ogni tipo
di posizionamento flexbox è di nuovo
supportato da tutti i browser ad eccezione di ie
e questo è fatto ora se vuoi andare
anche la griglia CSS di Wilder CSS è una vera e propria
la cosa più bella in questo momento in CSS
perché ogni discorso è ogni conferenza
sulla griglia CSS ho pensato di parlare
sulla griglia CSS esclusivamente oggi qui
ma poi di nuovo ho pensato che potesse annoiare
gente se parliamo solo di una cosa
Griglia di CSS è molto simile nella misura FlexBox
che definisci una griglia nella tua pagina e
quindi posizioni gli elementi intorno ma
è così flessibile è incredibile cosa
puoi farcela puoi nominare il
le linee è possibile modificare l’ordine del
gli elementi della griglia intorno a te possono spostarsi
cose in loro così invece di andare
attraverso molte sintassi e mostrandoti
quello che è fatto è una grande risorsa
chiamato griglia per esempio che ti dà
copia e incolla i layout se vuoi
usa la griglia CSS e ti dà anche dei video
tutorial che cosa significano e come loro
funzione e come interagiscono
cambiare intorno in modo che se la luce definisce
cosa significa l’unità fr che ripetizione
notazione e così via e così via la
la notazione può sembrare un po ‘scoraggiante ma
è una volta che hai capito bene
in realtà incredibilmente potente e se tu
non voglio impararlo bene
capire che questo è lì che non lo fai
bisogno di un sistema di griglia CSS come 960 CSS o
qualunque altro abbiamo avuto là fuori perché
i browser supportano che ora di nuovo c’è
un gioco anche se vuoi impararlo
chiamato CSS grid garden dove devi
spostare l’ acqua per innaffiare le carote e
anche questo è davvero fantastico – fantastico
parla – guarda che voglio dire che lo sono
spingendo gli steli qui perché ho capito
roba registrata passo il tempo a scrivere la mia
parla di tutta questa merda è gratis su
uso del Web usa queste cose per insegnare
te stesso nuove cose piuttosto che chiedere
il tuo capo per andare a un allenamento della griglia CSS
queste cose sono disponibili per il download
i video si siedono in ufficio con a
caffè e biscotti guardano uno di quelli
parla con i tuoi colleghi e poi
discuti come puoi usarlo in produzione
perché non così layout griglia CSS di Rachel
Andrews ha parlato duramente di CSS
layout di griglia da quattro cinque sei sette
otto anni e nessuno le ha creduto
ma ora ce l’abbiamo
e la vera direzione artistica per il web di
Anche Jen Simmons di Mozilla è così
un’altra grande chiacchierata per conoscere il
potere della griglia la cosa interessante
sulla griglia CSS è stato un era
La specifica di Microsoft era in realtà
prima supportato in ie8 penso e come esso
a Microsoft non piaceva nessuno griglia
il layout funziona ovunque è ancora
prefissato in alcuni dei vecchi II e
ma ancora ci stiamo lavorando su questo
perché in realtà abbiamo qualche bug nel
il comitato standard che deve essere
Risolto il primo deludente qui è
Browser Android e devo guardarlo
non so perché questo sia, ma questo è
veramente male come questo genere di cose
non voglio avere così perché c’è un
scatola flessibile e una griglia che sembrano essere
facendo la stessa cosa, allineati
qualcosa lungo una griglia bene
la scatola flessibile è stata progettata per il layout in uno
dimensione o è una griglia di riga o di colonna
pensato per essere in due dimensioni, quindi puoi
posiziona le cose ovunque mentre piace
flex box è lì per impaginare un elemento
secondo quello che dici dovrebbe essere
facendo così griglia dovrebbe usare flexbox per il suo
si integra e quindi non è male
idea che non lavorano per datare il loro lavoro
insieme non lavorano contro ciascuno
altro ora le proprietà personalizzate CSS sono le
l’ultima cosa di cui voglio parlare e
sono la cosa davvero fantastica
che alla fine non è nemmeno CSS quando
le persone hanno iniziato a usare sass anziché CSS
volevano variabili che volevano
definire un colore aziendale e quindi utilizzare l’uso
società di colore e non so cosa
il colore dell’azienda è perché se cambia
ogni due mesi devo fare una ricerca
e sostituire e tutti i miei CSS devo
trova le cose che non è divertente farlo
quali proprietà personalizzate ti consentono
fare un – – primo colore e poi tu
chiamalo con var – – first color that
potrebbe essere qualsiasi CSS o qualsiasi Contenuto che sia
un modo valido per definire qualcosa in CSS
che puoi iniziare a riutilizzare e uno
cosa potente a cui pensare in questo
caso è come hai visto calc prima e se
Voglio calcolare su un calcolo
Non posso nidificare calc in CSS perché è così
non è ciò che una sintassi CSS è destinata a fare ma
Posso usare le variabili per quello che posso
diciamo con a è 100 pixel e con B è
il calcolo di VAR a – con
della larghezza a divisa per due con C è
un calcolo della larghezza B
diviso per due e poi si imposta il
larghezza a R con C in modo da poter nidificare a
calcoli usando proprietà personalizzate ma
questa è solo la punta dell’iceberg
le proprietà personalizzate davvero fanno davvero un
molto senso nei CSS perché permettono
tu per nominare cose che non eri in grado
per nominare prima e per riutilizzare le cose
attraverso il tuo CSS che non vuoi
avere lo stesso modo in dieci diversi
luoghi come la cattiva programmazione, quindi se tu
voglio imparare tutto su quello
strato Beru ha dato un incredibile discorso CSS
rutti del nostro sottotitolo dove va
attraverso tutte le cose ti dà come
dieci take-away ha scritto un grande post sul blog
su di esso pure così per esempio in questo
caso ho una grondaia di due pixel
l’elemento radice e in una sezione che dico
come margine di scolo che così mi dà due
margine di pixel attorno a tutta la sezione
elementi ma se la larghezza minima di
mille è quindi la grondaia dovrebbe essere
dieci pixel così si può veramente trovare quelli
variabili e sovrascriverle all’interno di a
media query all’interno di un calc all’interno di tutto il
se la dichiarazione II cose che abbiamo dentro
CSS è un modo molto potente per
definire qualcosa e riutilizzarlo piuttosto
che come conoscere il valore tutto il tempo
sono ben supportati in tutto
i browser cioè 11 non li fanno affatto
e in realtà non so quale sia il limite
il problema è adesso ma non lo sarei
preoccuparsi troppo se ne andranno
anche io devo cercare su CSS
le query di funzionalità sono una cosa che è
così di base e se la dichiarazione per CSS così tu
può fare un add se supporta il nome dell’animazione
prova quindi sappiamo che il browser supporta
animazioni e possiamo iniziare a definire il
fotogrammi chiave così che non hai mai avuto
fotogrammi chiave che sono solo inutili in
il tuo CSS in questo caso e te ne assicuri
che tutte le cose sono supportate correttamente
ora puoi anche fare un non supportato così
si aggiunge il supporto non è quindi le cose
che il browser non fa così da dare
un fallback per i browser che sono
peggio ma questo è un po ‘pazzo perché
stai effettivamente costruendo per il passato
stai costruendo per una cosa che è
diventando piuttosto il tuo lavoro di manutenzione
rispetto ai produttori di browser
assicurandosi che il loro browser supporti
queste cose sono dotate di query supporter in
tutti i browser ma, ad esempio, perché non c’è
nuove funzionalità per ie anyways now we
parlato di CSS e JavaScript così simili
il motivo per cui si usa uno o l’altro ho sempre
penso che sia una cosa molto molto potente per
farli funzionare l’uno con l’altro
javascript è lì per me per interagire
per un a reagire a ciò che le persone hanno
fatto alla mia pagina o per reagire quali dati
è venuto in ciò che le cose sono state caricate e
Il CSS è lì per definire il
interfaccia che viene renderizzata in
browser senza che io non debba sapere
come il browser lo gestisce così ovviamente
la vecchia scuola era JavaScript CS come un
HTML tutto deve fare cose diverse e
quando lavori in uno spazio come una reazione
componente quando lavori in uno spazio
è un ambiente modulare e questo è tutto
fuori dalla finestra voglio dire che tu sei già
basandosi su un instradamento sul lato client
stai già facendo affidamento su un’interfaccia
che si costruisce non come era l’HTML
pensato per essere costruito così nel caso di in
Nel caso di moduli hai un pulsante
che ha bisogno di avere la sua propria JavaScript
CSS e HTML solo per quel pulsante cuz
vuoi riutilizzarlo attraverso la pagina
senza altri stili sanguinanti
e questo non è il posto dove i CSS eccellono
c’è standard venendo siamo stati
provarlo non è così facile ma
quando guardi come componenti web e
guardi i sistemi componenti come
reagire o angolare lo fa sotto il
cappuccio quindi non sto dicendo che i CSS possono
risolvi tutto ma penso quando
arriva ai layout di pagina quando si tratta di
documento quando si tratta di pieno
applicazioni piuttosto che guidate dal modulo
applicazioni dove lo conosci CSS e
JavaScript funziona insieme davvero
fa davvero il lavoro e usi CSS quando
puoi usare le cose che ho appena
ti ha mostrato di non leggere l’interiore interiore
la larghezza di un browser non lo fai più
è necessario che abbiamo un sacco di CSS da trattare
con quel tipo di problema se è necessario
comunicare con i CSS considera il cambiamento
proprietà personalizzate perché puoi cambiare
li al volo
e se questo non è un’opzione applicare
classi agli elementi parent usando la classe
liste con elenchi di classe ora non di classe
nome più che è molto potente come
bene e come ultima risorsa è possibile
anche lo stile direttamente ma questo è un
molto pessimo modo di interagire
con il browser ed è in realtà più
casi che intercettano i browser
rendendo di nuovo così di nuovo da quel discorso
elementi target value property – – who
ottiene la proprietà da get stile in linea
lo stile calcolato ottiene ottiene il valore della proprietà
da dove e puoi impostare a
variabile sullo stile inline con
Anche JavaScript, quindi cosa puoi fare
con questo è così potente che puoi fare tutto
le cose che JavaScript può fare
Il CSS non può farlo e darlo al tuo CSS
fare qualcosa con un esempio che lei
ha in quel discorso è che tu hai un
movimento del mouse e sul movimento del mouse
mi dà il mouse X e il mouse Y e
crea una proprietà personalizzata in CSS così in
qualsiasi CSS che posso ora posizionare le cose al
puntatore del mouse senza doverlo fare
in JavaScript più che abbiamo usato
fare da quando i giorni HTML così questo
la funzionalità diventa disponibile per i CSS
e il mio CSS ci fa il rendering per me
e questo era impossibile da fare prima di noi
aveva proprietà personalizzate quindi se ti piace
come un traduttore X – – Mouse X VAR ax –
– Mouse X e tradurre Y – – miles Y
in realtà posizioni la cosa dove
il mouse è in questo momento e ogni volta
il browser ogni volta che arriva il mouse
spostato questa proprietà personalizzata viene aggiornata
e il renderer CSS fa il lavoro per te
ogni cambiamento di stile ha conseguenze
anche se così si inizia a fare scherzi
con gli stili non le proprietà personalizzate
ma come con l’alta posizione blah il
il browser deve fare qualcosa che ha un
ottimo sito web chiamato CSS trigger di
Paul Lewis e il batterista di Google
ha fatto tutte le ricerche per voi per dire come
ciò che viene influenzato da quale cosa così
assicurati che quando ti chiedi perché?
la tua interfaccia è veramente molto lenta
questa è una grande risorsa da dirti
cosa sta succedendo sotto il cofano e da
il browser sta effettivamente iniziando a
avvia il fan e ti infastidisce
quindi i CSS sono molto più affidabili di questo
era e nel CSS nel w3c
specifiche qualsiasi di esse è definita come
utenti sugli autori rispetto agli implementatori
sugli specificatori rispetto alla purezza teorica
quindi cosa viene alla fine della tua fine
l’utente è ciò che deve essere a prova di proiettile
quindi se i CSS possono togliere un sacco di dolore
da te consideri l’utilizzo di CSS piuttosto che
avere il pieno controllo del
interfaccia
javascript perché poi hai anche tu
piena responsabilità dei nostri utenti
interfacce che sono affidabili e lisce
non uccidere le loro batterie questo è il
il più grande problema nel mobile quindi consideri
Sears come un po ‘di più si può essere pigri e
puoi costruire sul lavoro del
comunità c’è una grande comunità
intorno a CSS che parla della costruzione di fissaggi
le cose per te ci sono un sacco di cose
che puoi usare quello che ho fatto qui
una laurea anche perché qui ce ne sono alcuni
CSS super stimolante e altamente attivo
folk se vuoi sapere cosa sta succedendo
e vedi è che qui c’è una lista di persone
che seguo e scriverò
anche in un post sul blog che mi ha ispirato
molto da fare questo discorso quindi c’è Chris
Collier che fa i trucchi CSS è calmo
fondamentalmente il miglior sito web in questo momento
scopri cosa sta succedendo nel sanguinamento
mondo marginale dell’applicazione CSS no
standard ma come usare effettivamente i CSS
Rachele andrew è semplicemente la dea dei CSS
le griglie su due porte fanno molta matematica
animazioni con CSS solo che non lo sono
davvero così utile ma sono davvero
davvero carina e ti mostra il potere di
ciò che i CSS possono fare nelle animazioni ci può fare
ama Anna perché la sua roba è così brutale
al browser che in realtà siamo
testare i nostri motori CSS contro di esso
renderli più veloci quindi è molto molto
il suo piano di codice è davvero molto bello
Emozionante guardare Iria a conoscere il darydary
Chrome è un nuovo arrivato che lei realmente fa
quel pezzettino di blog in codice dove c’è
molte spiegazioni molto semplici di nuove
cose che stanno accadendo anche in CSS
in JavaScript, così ha detto una Gillenwater
prima di ciò i migliori discorsi su flex box
e lei è locale qui a Amsterdam Brad
gelo polveroso fa le cose di design atomico
Rachel Neighbors è un mio collega
lei è effettivamente qui oggi e parla a
il venerdì
lei è un’animazione esperta di animazioni CSS
e animazioni web unik robert
parlato molto su modalità di fusione di
CSS e filtri CSS e anche ultimamente a
molto su UJS e fare grafica
le animazioni in CSS layer roux è
fondamentalmente come ho detto lei prende sempre
una cosa CSS e fa una chiacchierata di un’ora
fuori da ciò che lo analizza al
ennesimo grado e ti spiega come
usalo con cui può diventare molto forte
le persone un giorno quando comunicano
con lei come perché è quella cosa
dovrebbe usare
ma i suoi discorsi sono davvero veri
informativo e davvero eccitante
ascolta che è una ricercatrice del MIT così
è molto approfondita nella sua ricerca
sulla sua pena, la Svezia è una
sviluppatore dal Libano e lei ha fatto il
layout per una casa favolosa per i più nuovi
Smashing Magazine per quel milione di bambini
hanno un sacco di discorsi su tutto il
dettagli che hanno messo lì e tutti
le cose come lo fanno funzionare molto
flessibilmente molto accessibile che è il
persona eccitante da seguire pure
Sarah Dresner è di nuovo una scrittrice per
CSS Twix e lei è in giro per abbastanza
un po ‘come sviluppatore che vedi è
sempre in un modo che è molto graduale
tutti i tipi di utenti e tutti i tipi di
prodotti e Jen Simmons sta funzionando
Mozilla e lei parlano molto di arte
progettare sul web usando ogni tipo di nuovo
tecnologie così come un sacco di gente a
segui l’interesse ascoltalo sempre
mandare cose interessanti in giro, quindi pensaci
che quando stai pensando a CSS e
questo è tutto quello che ho tempo per così grazie
[Applausi]
Please follow and like us: