[Musica]
[Applausi]
Va bene ciao così la conferenza mi ha chiesto di
vieni e parla di alcuni dei
roba interessante che sta facendo strada
nelle specifiche CSS e c’è un intero
mucchio di cose davvero interessanti tipo
di atterrare semplicemente nei browser al
momento e arrivo molto presto e così
questo discorso è davvero molto veloce
raccolta di cose e varie
esempi di cose che penso siano
interessanti alcuni dei quali sono in realtà
molto utilizzabile ora e gli altri sono una specie di
appena all’orizzonte uno dei molti cappelli
Indosso come esperto invitato il CSS
gruppo di lavoro tuttavia questa diapositiva ha
alcune delle altre cose con cui sono coinvolto
e mentre io sono veramente interessato a tutto
di questa nuova roba è il mio tipo di lavoro di un giorno
come co-fondatore di una gestione dei contenuti
prodotto di sistema e quindi devo fare i conti
con tutti i vecchi browser come
tutti gli altri non c’è sicuramente
torri d’avorio qui e così via
Ti spiegherò lo stato del browser
supporto per tutte queste cose e modi
per tipo di trattare con i vecchi browser così sono
inizierò con il mio preferito
soggetto in CSS e davvero il motivo per cui
Sono nel gruppo di lavoro CSS e
questo è il layout e questo è un modulo a
che se hai usato flexbox a tutti voi
conoscerà anche se tu potessi
Non ho sentito parlare del suo allineamento del nome della scatola
livello 3 perché sembra che per a
molto tempo molto lungo
il centraggio verticale è stato il più difficile
problema nel web design e così è
che scatola di allineamento e scatola flessibile pure
come risolvere così tante ragioni per cui siamo
l’uso di flexbox è fondamentalmente quello di ottenere quello
allineamento verticale mi capita spesso
trasformare qualcosa in un contenitore Flex
solo per poter allineare le cose
al suo interno come questo è come lo facciamo in
Flex box stiamo usando gli elementi di allineamento e
giustificare le proprietà del contenuto qui
Centra l’ immagine verticalmente e
orizzontalmente e quelle proprietà sono
parte delle specifiche della scatola flessibile e se lo fai
questo ti ritroverai con qualcosa di simile
questo e possiamo avere layout flessibili e noi
può allineare le cose tutt’intorno a quei layout
qui ho il contenitore degli effetti
l’altezza del quale è definita dall’altezza
immagine e stiamo allineando gli altri elementi
contro di essa, quindi stiamo usando una linea di auto
e stiamo allineando i singoli elementi
sul
il sassofono quindi per Flexbox abbiamo una linea
inizio flex auto-centrale e flex end così
il flex box è veramente bello e allora
abbiamo fatto è che abbiamo quelle proprietà
che fanno l’allineamento in Flex box e
sono stati portati fuori e messi in questo
nuova specifica chiamata allineamento della scatola
e quale allineamento della scatola ci lascia fare
quindi applicare tali proprietà ad altri
parti del layout che alla fine potrebbero
significa che potresti far galleggiare un oggetto e ancora
usa quelle proprietà di allineamento con esso
piuttosto che doverlo trasformare in a
Flex contenitore in modo che è piuttosto fresco così
abbiamo queste proprietà della parte
dell’allineamento della scatola e abbiamo l’allineamento
e anche cose come la distribuzione dello spazio
e queste le proprietà così abbiamo
giustificare contenuto contenuto allineato lì
giustifica l’ autoallineamento e combatti gli oggetti
e allineare gli oggetti così mentre non ce l’abbiamo
a un punto in cui possiamo usare questa roba
sul layout del blocco, ma non possiamo usarlo quando
fluttuiamo qualcosa o posizioniamo qualcosa
c’è una specifica in cui abbiamo
ha iniziato a utilizzare già queste proprietà
e che layout griglia CSS ora ho
praticamente un seminario di un’intera giornata che
si occupa di layout griglia CSS è un marchio
nuova specifica posso parlarne
tutto il giorno e non lo facciamo ora, ma vado
per mostrarti un qualche tipo di modifica
punti salienti di che così attaccare
allineamento è così che la griglia implementa
la specifica di allineamento della scatola così sono
in realtà creando lo stesso identico layout
Ho avuto per la flexbox questa volta con la griglia
Sto dicendo griglia di visualizzazione piuttosto che
mostra flex e quindi sto configurando a
layout a quattro colonne Sto usando la ripetizione
sintassi quindi ti sto dicendo di ripetere quattro volte a
1 colonna di unità frazione che 1fr è un
unità interessanti per flettere l’unità a
unità di frazione che definisce una frazione di
lo spazio disponibile nella griglia
contenitore quindi se abbiamo per uno dei nostri
unità di cui ognuna ha una uguale parte di
lo spazio che abbiamo diviso lo spazio in quattro
e poi qui sto usando un self line
auto-allineato al centro piuttosto che
flex start e una linea auto-end per allineare
gli oggetti all’interno delle loro aree di griglia che
ci dà lo stesso layout del Flex
layout ma questa volta usiamo in griglia e
allineamento della scatola all’interno della griglia e questi URL
qui quando ottieni le diapositive alla fine
puoi cliccare e sono tutti
penne del codice puoi dare un’occhiata e giocare
in giro con il codice, quindi qual è il
differenza con la griglia e la griglia della flexbox
il layout è stato progettato come un quinto
metodo di layout di scopo davvero per il
prima volta per il web ed è stato progettato
lavorare accanto ad altri metodi di layout
compresa la flexbox e la differenza è
davvero è per i layout bidimensionali
e questo è chiarire le cose sia come
riga e una colonna allo stesso tempo così a
utilizzare la griglia come nell’esempio precedente
diciamo griglia di visualizzazione e poi ne definiamo alcuni
colonne e opzionalmente alcune righe così qui
Sto definendo tre colonne tutte di una
unità di frazione e abbiamo il divario di griglia
proprietà e questo è buono definire un 10
gutter pixel tra quelle tracce e
puoi anche utilizzare il gap di colonna della griglia e
vuoti di fila della griglia per trovare quelli individualmente
e poi se ho un set di oggetti e
sono dentro quel genitore che ho
detto griglia di visualizzazione su che stanno andando a
sistemarsi sulla griglia che ho
definito uno in ogni cella della griglia ora
se provi a ottenere questo tipo di display
usando la flexbox che molti di voi potrebbero avere
provato a fare già dici flex display
lasci che gli oggetti si avvolgano e noi siamo
utilizzando una base flessibile di uno e di 200
pixel e dicendo crescono e si restringono
quello ora perché flexbox è uno
dimensionale si ottiene così anche se
si sta avviando alla riga successiva ciascuno
allineare ogni riga nella casella o colonna Flex se
stai lavorando per colonne diventa sua
possiedi un contenitore Flex in modo che lo spazio
la distribuzione sta accadendo attraverso la fila
lì arriviamo alla seconda fila che abbiamo solo
ha due carte e quindi ha solo diviso il
spazio tra loro e quello è il
differenza davvero tra griglia e
la griglia della flexbox manterrebbe quelle cose
rigorosamente nella loro colonna tiene traccia del bello
la cosa con Flex box è se lo facessimo
questo schermo più ampio e c’era di più
spazio potremmo ottenere più di quelle immagini
si adatterebbe uno accanto all’altro
cosa carina perché possiamo avere
più numeri di colonne flessibili
all’interno di un contenitore e possiamo effettivamente
farlo con griglie pure anche se
comporta un aspetto abbastanza sconcertante
Sintassi ecco sto creando il mio griglia Sono
usando il
compilare automaticamente la parola chiave nella ripetizione
che usare un valore piuttosto che dire
ripeti quattro volte sto dicendo errore automatico
quindi mi piacerebbe che la griglia riempisse altrettante colonne
tracce che si adattano al mio contenitore e
allora sto usando questa cosa minima di Max così sono
dicendo di rendere quelle tracce di colonna a
minimo di 200 pixel ma massimo di
un’unità di una frazione l’effetto di quello
perché l’unità della frazione condivide il tutto
spazio disponibile otteniamo tanti 200 pixel
colonna tracce come ci adatteremo quindi il
lo spazio disponibile è distribuito equamente
tra le colonne che fondamentalmente
ci dà la possibilità di avere una flessibilità
contenitore con tante colonne di
tra 200 flat 200 pixel e poi il
il riposo è un po ‘ condiviso con quello che
è abbastanza pulito consente il tipo rigoroso
del layout di righe e colonne ma altrettante
colonne come in forma così min max che min max
le cose sono state pazzesche per i libri sulla griglia
chi ha bisogno di un modo di fare quel tipo di
traccia il dimensionamento e si scopre che risolve
tutti i tipi di problemi interessanti qui
uno quindi questo è il consiglio più il sito web a
sito web tutorial e ne hanno uno
questo tipo di layout squadrati sulla casa
Pagina che tipo di vedere tutto il
utilizzare per la navigazione il problema
con queste cose è quello nel reale
mondo da cui proviene un sacco di contenuti
sistemi di gestione dei contenuti e il
editor di contenuti arriva e il
progettisti pensato bene dovrò solo
due righe di contenuto lì, ma hanno
ho qualcosa di veramente importante da dire
che ha bisogno di un intero paragrafo da così
lo mettono dentro e rompono il
il layout in questo caso è tutto sovrapposto
che non è l’ideale e mi chiedevo se io
potrebbe fare questo tipo di layout
con la griglia e risolvere quel tipo di problema
e si scopre che posso questo è il
layout che ho creato ho i tre
punti di rottura corrispondenti all’esempio
che stavo guardando e che abbiamo
ha una sorta di larghezza mobile e una più ampia
larghezza qui e poi molto più ampio ma
di nuovo abbiamo questa cosa dove abbiamo
ottenuto questi blocchi di altezza fissi e questo è
parte del design che anche se è un
un po ‘di sms che vuoi ancora
bloccare per mostrare abbastanza dell’immagine ma
quello che vogliamo è quella tolleranza per extra
contenuto per arrivare lì almeno non
rompere anche se questo non è il design che
voglio
e quindi ecco cosa facciamo il più possibile
vedere sulla destra in alto a destra
bloccare le persone arrabbiate al Balloon
Fiesta ha un bel po ‘più di testo
di quanto ci aspettassimo
ed è espanso e ciò che è
è successo è l’intera riga è espansa
e così anche le due immagini successive
più spazio in là e sono stati
in grado di espanderci così possiamo farlo
avere una dimensione minima per la nostra traccia di 150
pixel alti e poi espandere se
più contenuti entrano e questo è fatto da
di nuovo usando min max così sto dicendo
rendere le mie tracce almeno 150
pixel alti e un massimo di auto e
auto si risolverà nel contenuto se lo è
non ne ho altri di altezza diversa
applicato in modo da rendere lo spazio sufficiente per
tutto ciò che viene messo in quella scatola ora lo è
potrebbe essere che il progettista avrebbe poi
venire avanti e dire oh io tiro fuori alcuni dei
quel contenuto del mercato del pip perché lo voglio
quelli sembrano belli e puliti ma almeno
non si rompe e tutto si allinea a
la parte inferiore dell’immagine così è
abbastanza bello sai dare un’occhiata al
esempio il codice link nelle mie diapositive e
ci sono alcune piccole cose lì dentro
che sono piuttosto interessanti sulla griglia
layout che ti potrebbe piacere avere un
guarda così rimarrò un po ‘con la griglia
un po ‘più a lungo e parliamo un po’ di
algoritmo di posizionamento automatico perché così è
anche qualcos’altro è molto bello
questo è in un layout di griglia ora che hai
già visto quando dichiariamo la griglia e noi
brinda in una griglia tutto il bambino
gli elementi si dispongono su quella griglia
che è proprio come con la flexbox se tu
dire display flex tutti gli articoli all’interno
diventare un oggetto flessibile in modo che possiamo giocare
in giro con questa capacità e possiamo
inizia a creare alcune regole per diversi
oggetti in modo che agiscano diversamente quando
la griglia li incontra così ero
ricordando i giorni gloriosi in cui noi
aveva solo due cento e sedici colori
con cui giocare e così ho creato un elenco di
quei colori sicuri per il web dentro solo un vecchio
elencare con una classe di colori e io sono
sistemerò quelli fuori come una griglia così ancora
Sto usando la possibilità di crearne altrettanti
colonne questa volta con un minimo di 80
pixel e li creeremo
con un’altezza
di 80 pixel e un minimo quindi io
prendi piccole scatole quadrate e griglia
Disporre gli articoli come questo che è
abbastanza carina ma posso iniziare a giocare
in giro con questo sto aggiungendo alcune classi
Ho deciso che il bianco e il
i quadrati neri sulla griglia hanno effettivamente
per occupare una fila completa, quindi sto dicendo
inizia quelli se ne trovi uno con
la classe del bianco inizia su una griglia
linea di colonna uno quindi in questo qui tu
può vedere la griglia : la prima riga che è l’inizio
linea e meno uno è la linea di fondo
la griglia sono in una lingua da sinistra a destra
quindi la linea 1 è la tua linea a sinistra e
-1 è l’ estrema destra che si scambia
se si sta lavorando in una destra a sinistra
il linguaggio e il dire iniziano così dopo
griglia Riga 3 riga riga riga 3 e poi
stiamo facendo lo stesso con quello nero
Ho anche avuto così tanto che ho chiesto di abbracciare
colonne, quindi andremo a finire
con alcuni blocchi più grandi sulla mia griglia che
mi dà questo e abbiamo questo tipo
di grandi lacune nella griglia e c’è
questo genere di bit neri così fondamentalmente
lacune nella griglia come la griglia è la posa di questi
cose fuori perché sta per andare
attraverso la fonte e si stende
cose e ne viene fuori una che è
troppo grande per adattarsi alla fine di una riga e
quindi passeremo alla fila successiva
e poi proseguirò fino a quando non troverà
un altro che è troppo grande e poi
che ti è caduta giù così si finisce con questi
tipo di lacune nella griglia che è gentile
di ciò che normalmente vorresti tendenzialmente
vuoi che il tuo ordine fonte di rimanere in
ordinare che lo metti nel documento
a meno che non aggiungiamo il flusso automatico della griglia
proprietà con un valore di ammaccature e quello
vorrà dire che la griglia ricopre il
spazi vuoti man mano che la griglia progredisce in avanti
gli oggetti fuori si imbatte in uno che
non si adatta e quindi scende sul
la prossima linea ma la prossima volta ne trova una
che si inserirà in quel vuoto lo sceglierà
prendere fuori dall’ordine sorgente e mettere
nello spazio in modo da ottenere una bella
Esposizione stretta di scatole che è
fantastico finché lo stai mostrando
qualcosa che non ha una logica
ordina che non sarebbe così bello per te
forme e questo tipo di evidenzia un problema
che mi piace entrare e basta
persone consapevoli di ciò con tutto questo
la disposizione della griglia in particolare ma con
anche la flexbox ha una capacità molto reale
rovinare questo tipo di ordine logico di
il tuo documento e il nella specifica per
sia buono che flessibile
dice che c’è qualche riordino con
posizionamento automatico o perché sei giusto
impostando le colonne e così via
solo una cosa visiva non influisce
l’ordine logico del tuo documento così dentro
termini di accessibilità che devi fare
certo l’ordine logico dei tuoi documenti
ha senso anche se abbiamo tutto
questa incredibile capacità di iniziare a muoversi
le cose intorno penso che sia davvero un
discussione che stiamo appena iniziando
avere con la griglia perché la griglia non lo è
attualmente vivo in qualsiasi browser ancora questo
è griglia browser esempio calme che
è il mio sito web di esempi di griglia che ho
molti di loro se ci vai tu
può vedere lo stato attualmente nei browser
la griglia è stata sviluppata dietro il browser
bandiere se qualcuno ha lavorato con flexbox
potresti essere consapevole che abbiamo finito
con tre versioni di flexbox in
i browser e questo era un grande fastidio
a tutti noi e questo è perché flexbox
è stato sviluppato con il fornitore di prefissi
prefissi e le specifiche sono cambiate dopo
i browser sono stati implementati e così siamo finiti
di versioni disordinate del layout della griglia di Flexbox
è stato sviluppato per l’ultimo
cinque anni circa è stato sviluppato
dietro le bandiere dei browser c’era un anticipo
L’implementazione Microsoft è arrivata
da Microsoft originariamente così in IE 10 11
e bordo c’era una specie di più vecchio
versione del layout della griglia in cui siamo ora
Firefox e in un batter d’occhio quindi in chrome e
l’opera ci è davvero buona e anche
nell’anteprima tecnica di Safari abbiamo a
è davvero una buona implementazione della griglia
abbastanza probabile che arrivi il primo trimestre di
l’anno prossimo verrà spedito in quelli
browser al quale punto circa il 70% di
la gente che guarda il sito medio è
probabilmente avrà un supporto di rete
ed è un po ‘fatto se abiliti
flag di funzionalità della piattaforma web sperimentale
in chrome ci sono tutti i miei esempi
lavorare si può avere un gioco intorno con esso
così in scatola Flex e nella corrente
implementazioni di elementi di layout di griglia
bisogno di essere un figlio diretto dell’elemento
che dici display flex o display
griglia per diventare elementi flex o grid ora
la griglia funziona
avere un metodo di cottura nel
specifica per abilitare il supporto della sub-griglia così tu
potrebbe dire che qualcosa era una griglia sub
nel qual caso potrebbe utilizzare la griglia
tipo definito di più in alto l’albero
quale sarebbe molto bello permetterci di
tipo di creare una griglia e poi il bambino
oggetti e anche i bambini di quelli
gli oggetti potrebbero sedere sulla stessa griglia che
sarebbe bello che nessuno ha ancora implementato
è abbastanza probabile che ciò si ottenga
spinto nel livello due delle specifiche
perché nessuno lo sta implementando ma
c’è un altro valore di visualizzazione che
è una specie di aggirare questo problema è
già stato implementato in Firefox e
si chiama contenuto della visualizzazione cosa
visualizza i contenuti fa è si ferma un
elemento che genera qualsiasi casella in modo che il
effetti di ciò significa che un bambino
questo è un elemento figlio diretto di
qualcosa che è impostato per visualizzare la griglia
o mostra flex e questa è una scatola come questa
genererebbe sarebbe scomparire e così
i bambini potrebbero quindi essere trattati come
elementi di griglia o flex che suona molto
davvero strano ed è molto semplice
per vedere se dovresti giocare con un
esempio quindi ecco il markup
Ho un div per la classe di wrapper
ha alcuni bambini diretti l’h1 è
un bambino diretto i paragrafi che
blockquote e così è la lista non ordinata
con una classe di immagini comunque il li
gli oggetti all’interno non sono un bambino diretto quindi
non saranno influenzati da
griglia di visualizzazione applicata al wrapper così
questo è quello che sto facendo sto creando questo
due colonne e sto impostando quelle
dirige i bambini a h1 il paragrafo a
span proprio attraverso la griglia e il blocco
citazione ha una classe di inserto così
entra nella colonna dopo la colonna uno
e il seguente paragrafo va dopo
colonna linea due e questo ci dà questo
tipo di cosa puoi vedere i due
colonne sopra la citazione e il testo
accanto ad esso e poi abbiamo quelli
immagini che sono all’interno di una lista e così
non sono disposti sulla griglia
quello che mi piacerebbe che facessero è mettersi in fila
sotto le altre colonne ma perché
non sono figli diretti che non sono
lo farò a meno che non utilizzi display
contenuto quindi abbiamo questo ul con a
classe di immagini che dicono di visualizzare i contenuti
e l’effetto di ciò è che l’UL è
non più nel Dom per la visualizzazione
scopi è solo una specie di svanire e noi
finiscono per essere in grado di deporre quegli oggetti
Il posizionamento automatico li posizionerà semplicemente
la griglia molto molto utile è possibile utilizzare
questo già per gli articoli flessibili e funziona
in Firefox e molto ben cromato
ha detto che lo implementeranno
così stiamo entrando in quello
i browser mi piacerebbe vedere proprio sub
supporto di rete di terra nei browser per la griglia
pure, ma questo potrebbe farcene avere un po ‘
il modo in cui molti casi d’uso
la gente penso che sia stata probabilmente risolta da
visualizzare contenuti sicuramente qualcosa da fare
guarda in futuro come quello ottiene di più
supporto del browser in modo da allontanarsi dal grande
cose di layout parliamo un po ‘
sulle forme CSS perché è davvero
bella piccola specifica ed è
qualcosa che può funzionare come un
valorizzazione abbastanza bene le specifiche delle forme
proveniva da Adobe in origine era uno di
le loro specifiche e definisce
possibilità per noi di scorrere il testo in una curva
linea o una linea diversa da una sorta di
scatola rettangolare per usare le forme
devi far galleggiare il tuo oggetto che può essere solo
la specifica di livello uno può essere applicata solo
galleggiare così qui ho un’immagine qui
con una classe di pallone che ho
fluttuò a sinistra e dato una larghezza e poi
Ho usato questa forma fuori dalla proprietà
che è ciò che è definito nelle specifiche che sono
dire cerchio un 50% che mi dà questo
che è molto carino non è necessario
avvolgere le cose attorno a un’immagine a cui tendi
vedi tutti gli esempi di come le cose si sono avvolte
intorno alle immagini non è necessario farlo
potresti galleggiare e devi galleggiare
cose che potresti far galleggiare alcune generate
contenuto così qui sto solo generando un po ‘
contenuto impostandolo su display block
flottante a sinistra dandogli una larghezza per
l’altezza e usando la forma all’esterno di nuovo
che mi dà questo in modo che tu possa tipo di
avere queste linee curve senza bisogno
mettere un’immagine in là così come
forme che è possibile utilizzare i percorsi di clip c’è a
diversa una specifica diversa ma
la cosa bella del percorso della clip
proprietà ci vuole lo stesso
valori come forme fanno così una volta che hai funzionato
puoi anche usare la tua forma
parte di clip per tagliare via qualsiasi cosa intorno
dì l’immagine che stai curvando
testo in giro così qui sto usando la mia forma
e stavolta sto usando l’ellisse
funzione puoi anche usare un poligono
lì per creare forme davvero stravaganti se
vuoi e poi sto usando il web clip
percorso della clip di cui hai bisogno al momento
e percorso della clip con gli stessi valori e
questo ci dà questo e così quell’immagine è
essenzialmente rettangolare e abbiamo appena
ritagliato il contenuto intorno ad esso
tipo di vedere questo genere di cose che ho visto
un sito web della conferenza di stasera così ovunque
dove hai come piccoli avatar di
le persone e sono tutti quadrati e tu
fluttali e avvolgi il testo
e poi se hai forme che fai
li circolari e avvolgono il testo
in una curva che è davvero bella
miglioramento non ha importanza se
le persone non hanno il supporto per le forme
stanno per ottenere l’ immagine quadrata
che sta per essere fatto galleggiare andrà tutto bene
se hai il supporto, allora lo è
andando a curva intorno a questa è la corrente
supporto del browser per le specifiche della forma
abbastanza bene Firefox ha detto che sono
andando a implementarlo così spero che lo faremo
fallo presto anche su Firefox e andiamo
dì che è il genere di cose che tu
potrebbe implementare la gente vedrà se
ora hanno il cromo se lo usano
Safari e poi quando Firefox si aggiorna
anche queste persone lo vedranno
probabilmente non andando a rompere nulla come
Finché sei abbastanza attento, non lo fai
finire con per esempio se lo sei
ritagliare i ritagli di contenuti tecnici per
un’immagine e hai roba sopraffatta
c’è una possibilità che tu possa finire
fare causa illeggibile così quelli il tipo di
situazioni devi stare attento se
usando forme ma CSS ha creato un
soluzione per questo problema di supporto del browser
qualcuno qui ha usato il modernizzatore o lo sa
quale modernizzatore è sì va bene così CSS
le query di funzionalità sono essenzialmente
modernizzato che la capacità di rilevare
supporto per una funzionalità CSS ma al posto di
usando javascript per farlo
possiamo farlo proprio all’interno del nostro CSS e
stiamo usando questa regola di supporto app è
una regola del gruppo condizionale è un po ‘come
media query e in questo caso però
invece di testare quanto largo
di voi Porter stiamo testando se
l’utente-agente dichiara che supporta
una proprietà CSS e una coppia di valori che
significa che possiamo scrivere un foglio di stile
che controlla il supporto di un nuovo CSS
caratteristica prima di usarlo che significa che tu
puoi fare due cose e puoi farlo
sovrascrivi le cose che hai fatto prima per
browser più vecchi dopo aver controllato
supporto
la cosa con le query sulle funzionalità è
hanno un fantastico supporto per i browser, quindi
i tuoi browser moderni supportano tutte le funzionalità
domande che significa che nulla di nuovo è
entrerà in CSS da questo giorno
inoltrare che non è possibile utilizzare la query di funzionalità
per verificare se è lì o no quale
è abbastanza bello, quindi puoi usarlo
implementare nuovi CSS senza causare a
problema per i browser più vecchi, quindi questo è
come lo usi Qui sto controllando per vedere
se il browser ha il supporto per la griglia
layout così sto dicendo al display di supporto
griglia se abbiamo il layout della griglia fare cose
per il layout della griglia è possibile testare più
le cose pure, quindi qui sto cercando
mostra la griglia e forma anche all’esterno
cerchia il fatto che stiamo usando
le coppie di valori di proprietà sono davvero utili
perché se sai che un browser ha
ha ottenuto il supporto per parte di una specifica ma non
tutto ciò che può accadere per esempio
un browser potrebbe inviare supporto per sub-grid in
layout di griglia che puoi semplicemente cercare
potresti cercare la griglia secondaria di visualizzazione se
stai cercando quella parte della specifica
e tu non stai cercando l’intero
lo spettro in realtà è merda con a
specifica completata quindi se anche se
si sa se si sa che qualcosa
non è implementato , puoi cercarlo
è un modo davvero bello per testare
supporto ora quando vi ha mostrato il grafico
di possibilità per questo ora vedere questo
non è supportato nelle versioni precedenti di ie
ma non importa perché
quello che facciamo è quando usiamo funzionalità
domande che scrivi il tuo CSS per il vecchio
browser o per i non supportati
i browser poi fai la tua query di funzionalità
e poi tu sovrascrivi tutto ciò che tu
non servono e quindi fanno le tue cose nuove così
qui con l’esempio del pallone da
prima ho intenzione di dargli un confine
e alcune imbottiture per la mia forma di nan
supporto ai browser che vorrei
Test per il supporto e poi io mi libero
di quel confine e il padding e poi
Faccio le mie cose di forma all’interno della funzione
query è molto simile a quando lo facciamo
media query e facciamo qualcosa per
dispositivi mobili e poi andiamo al nostro
layout più ampio e forse ne togliamo alcuni
di quella roba e fare alcune altre cose
praticamente la stessa idea e se ce l’abbiamo
ottenuto supporto otteniamo il nostro bello tagliato
forma e se non supportiamo il supporto noi
abbiamo questo non abbiamo alcun problema
è un buon modo per assicurarti che il tuo
il nuovo CSS non causa potenzialmente
problemi per i tuoi vecchi browser e I
penso ci siano cose davvero eccitanti
iniziare a utilizzare e non c’è assolutamente alcun
motivo per cui non è possibile iniziare a utilizzare la funzione
domande ora per verificare il supporto di più recenti
roba e sono semplicemente geniali
creando questo tipo di siti web che possono
migliorare se stessi come la loro piattaforma
migliora sotto di loro che è ciò che è
succedendo lo sai con sempreverde
browser che conosci ogni due settimane, quindi
una volta che il browser sarà aggiornato e loro
ottenere alcune cose nuove e richieste di funzionalità
lascia che risponda a quello e
costruire siti e applicazioni che gestiscono
con quella realtà così qualcosa con molto
piccolo supporto ma che è abbastanza pulito
è la lettera iniziale che probabilmente penso di più
persone che fanno sviluppo di front-end di
il design a un certo punto ha provato a farlo
un adeguato effetto di capolettera ed è a
compito che in realtà non è molto facile nonostante
il fatto che i CSS sono molto buoni
supportata la prima lettera di pseudo-classe
è abbastanza difficile da ottenere davvero
bello effetto di capolettera o lo è stato fino a noi
ha ricevuto la lettera iniziale in modo che questo sia definito in
il modello di layout in linea CSS
specifica che ci consente di creare correttamente
lettere iniziali nei nostri documenti così
ecco come lo usiamo che sto prendendo di mira qui
il paragrafo direttamente dopo un h1 e
Sto impostando la lettera iniziale di quello
paragrafo in grassetto e in quattro righe
alto quindi questo è il primo valore quindi
Sto dicendo quattro righe il secondo valore
determina se la lettera iniziale è
completamente in linea con il contenuto o
tipo di bastoncini nella parte superiore del contenuto
quindi sto dicendo che dovrebbero essere tre
linee incorporate nel contenuto è
quattro righe alte tre linee incorporate
che ci dà questo in modo da poter vedere come
che W sta cadendo
alto ma una delle linee è una specie di
tirato fuori la parte superiore del contenuto così tu
puoi giocare con quello che potresti avere
è completamente dentro se vuoi ora
se non c’è supporto per quello allora
lo otterremo se non accadrà nulla
perché è così che i CSS funzionano se a
browser non supporta qualcosa che
semplicemente non fa niente così è
praticamente bene finché non lo fai
voglia di fare qualsiasi altra cosa a quella iniziale
lettera che i browser supportano perché
questo è attualmente solo Safari 9 e versioni successive
è attualmente in fase di implementazione in
Firefox quindi se hai intenzione di fare un
grande lettera e non lo è
supportato va bene, ma forse tu
voglio iniziare a giocare e fare
sto facendo un po ‘di stile in più
un po ‘di stile sto prendendo uno sfondo
immagine e scherzi con le forme CSS
ora sta andando la proprietà della lettera iniziale
essere ignorato ma tutte quelle altre cose
non sarà ignorato perché
la maggior parte dei browser supporta la pseudo classe
e così facciamo andare avanti questo genere di cose
su quello non è l’ideale ma abbiamo già
ho una soluzione
abbiamo domande sulle funzionalità in modo che possiamo testare
per quella lettera iniziale di supporto e poi
inserire il CSS all’interno di una funzione
query così facciamo questo controllo per il supporto
della lettera iniziale e se ce l’abbiamo
supporto otteniamo questo che probabilmente non lo è
molto meglio ma non sono un designer
così è ma puoi vedere che puoi
prova per il supporto e poi fai cosa
vuoi così domande sulle funzionalità se prendi
una cosa di distanza caratteristica si interrogano
sei davvero il tuo nuovo migliore amico che puoi
inizia a usare queste cose con cui stare
modalità di scrittura dei contenuti ora quando mi sono iscritto
il gruppo di lavoro CSS che non avevo
capito è che in realtà la maggior parte del
le discussioni riguardano la maggior parte del tempo
la direzione delle cose è stata scritta così
si scopre che è molto complicato
se le cose vanno da sinistra a destra o
da destra a sinistra o dall’alto verso il basso o
se hai contenuto che è misto
alcuni vanno da destra a sinistra e
alcuni vanno dall’alto verso il basso e lo sono
molto molto complicato e molti molti
discussioni sorprendenti si verificano sulla scrittura
modalità e c’è tutto questo a
specifica per affrontare le modalità di scrittura
ma non hai solo bisogno di usare questi per
creare un testo lungo in
lingue che puoi usare per giocare
in giro con il testo in cui conosci il tuo
la mia lingua , ovviamente, sto usando
Inglese che va da sinistra a destra
lingua e ho un titolo qui e
Ho deciso che mi piacerebbe averlo
la mia voce è rovesciata sul lato e
visualizzato lungo il lato del documento
e posso farlo con una combinazione di
la griglia e le modalità di scrittura ne fanno alcune
le cose qui ho impostato il mio wrapper
griglia di visualizzazione Sto creando una colonna due
griglia con una griglia e poi sulla mia h1
Sto dicendo che la modalità verticale RL sono io
anche usando la trasformazione per capovolgerla e
allineare il testo e metterlo dopo
riga di colonna di griglia uno che mi dà questo
quindi è una specie di trucco, ma il
altro posto dove questo genere di cose è
molto utile fuori Manderò un esempio
da qualcuno che voleva sapere come me
farebbe un layout con la griglia e aveva un
un mazzo di bottoni che erano sul lato
e il testo è appena capovolto
quindi il testo era in realtà un po ‘in basso
il lato del pulsante e lo fai
con modalità di scrittura in modo da poter creare genere
dell’interfaccia utente dell’applicazione con il testo sul suo
di nuovo usando la specifica della modalità di scrittura
quindi è abbastanza buono
supportare un supporto migliore di quello che vorresti
immagina così un paio di cose che tu
potrebbe aspettarsi di trovare in un preprocessore
piuttosto che come CSS nativo penso che il
la ragione per la maggior parte di noi ha iniziato a usare
pre-processori o il motivo che consideriamo
sai che la prima cosa che pensiamo sia
sarebbe davvero bello avere delle variabili in
il mio CSS sono stufo di cercare e
sostituendo tutti questi file CSS con
trova i colori o i caratteri o altro
lo è e quindi usi un preprocessore come
sass o meno in modo da poter usare le variabili così
abbiamo iniziato abbiamo portato questi in
le specifiche CSS ora e la specifica che
si occupa di variabili è chiamato personalizzato
proprietà così proprietà personalizzate significa
che gli autori possono fare ciò che definiscono
proprietà che è possibile impostare e quindi
puoi usarli nei tuoi file CSS
ecco un semplice esempio, quindi eccomi qui
impostando alcuni colori ho a
colore primario che
impostato su blu e segretario per arancione e
poi nel mio h1 invece di avere il
colore dico var e poi scelgo il mio
proprietà personalizzata che vorrei usare
qualcosa che è bello è che puoi
utilizzare le query sulle funzionalità per verificarle
puoi provare se hai supporto per
quelle proprietà personalizzate prima di utilizzare
loro che significa che potresti farti
potrebbe avere valori predefiniti e quindi sovrascrivere
li con le tue proprietà personalizzate se tu
sappi che hai supporto che è
abbastanza pulito e questo è solo un collegamento a
questo esempio in modo da poter dare un’occhiata
più tardi
arrivando di un vantaggio c’è
qualcosa che dobbiamo inseguire ma si
di nuovo supporto ragionevole sta ottenendo
lì abbiamo un bel po ‘di supporto
per questa roba e così l’altra cosa
siamo noi con i pre-processori
aggiungere le cose facciamo matematica di base
e potresti pensare bene perché preoccuparti ma
la maggior parte di noi sta probabilmente usando sass o
meno a questo punto perché preoccuparsi di farlo
roba in CSS la cosa fondamentale di
funzione calc in CSS che ci permette di fare
questa matematica di base è che puoi
mescola le unità di lunghezza non puoi fare qualcosa
come ogni preprocessore che non puoi dire prendere
20 pixel di distanza dal 50% ma non lo fai
sai quando lo fai
preprocessore non sai cosa sia il 50% di
cosa sai quanto è grande, quindi non puoi
farlo mentre con calc in CSS puoi farlo
Effettivamente , puoi mescolare le unità
quindi ne ho un esempio molto veloce
Ho delle scatole qui e dentro loro
ottenuto un altro div nested all’interno di loro e
solo così possiamo giocare con un po ‘
altezze e vedere come funziona così ho
definito un’altezza per due di loro il
il primo sta per prendere il
altezza del contenuto quindi è qualsiasi cosa
il contenuto è lì e poi questo
bersaglia tutte quelle div interne
tutto dentro la scatola e quello che siamo
dire per la sua altezza è che dovrebbe
essere il 50% del suo contenitore meno 20 pixel
e otteniamo questo così il meno 20 pixel
è un accordo con il fatto che la scatola sia
assolutamente posizionato dal basso
così così se dicessimo che il 50% sarebbe
alto di un effettivo 50% perché non abbiamo
preso in considerazione che 20 pixel così da
rimuovendo i 20 pixel all’altezza di noi
prendi queste scatole a mezza altezza da qualche parte
altrove calice molto utile è
posizionamento delle immagini di sfondo che fanno
sicuro che in realtà hanno definito il
il modo giusto dal basso puoi usarlo
per quello, ma comunque è necessario mescolare
unità di lunghezza nel tuo calc CSS è
incredibilmente maneggevole e ha davvero
buon supporto per il browser puoi praticamente
usa questo e quindi è qualcosa che
puoi iniziare a usare sai di me
pensa se hai delle cose belle
molto assoluti e fai il tuo
preprocessore ma ci sono posti dove
può essere davvero utile farlo uscire
in realtà anche nel tuo live CSS
come guardare cose che stiamo facendo in pre
processi e tipo di prendere idee da
che stiamo iniziando a vedere cose nei CSS
che abbiamo fatto per sempre con
JavaScript lo sai da anni e anni
abbiamo fatto certe cose con
JavaScript che ora sta iniziando ad andare
in specifiche native che significa solo
saranno più performanti se
è una cosa nativa CSS piuttosto che
deve succedere in JavaScript è
andando è un lavoro praticamente andando molto
più bello quindi questa è una di quelle cose
questo è un nuovo valore della posizione
proprietà adesiva posizionamento è così appiccicoso
quando hai qualcosa posizionato in
il tuo documento e inizi a scorrere
e scorre perfettamente con il testo
come normale e poi quando colpisce dice il
in cima al viewport rimane messo e il
Il Texas cresce al di sotto di cose comuni
come la navigazione e così via e iniziare
il centro del tuo documento arriva al
sopra e quello e poi inizia a scorrere così
è un po ‘ diverso da avere
qualcosa di statico che poi inizia in a
posto e rimane sempre lì che hai
che bello effetto di muoverlo prima e
quindi rimanendo così è così che lo facciamo
Ho una lista di elementi con cui ho
termini di definizione seguiti da multipli
la definizione e voglio i termini
bastone mentre scorri così che cosa dobbiamo fare
per quello dicono posizione appiccicosa e poi noi
diciamo top zero e questo significa che io
voleva rimanere bloccato quando colpisce la cima
del viewport piuttosto che in parte come te
potrebbe avere un valore lì se volessi
si attacca un po ‘più in basso e noi
fai succedere questo genere di cose così tu
possono vedere mentre colpiscono la cima che si attaccano
e le cose scorrono sotto di loro così
questo è un effetto abbastanza pulito da dire che è
qualcosa che abbiamo fatto con
JavaScript per molto tempo comunque e come
il supporto del browser in cui sta arrivando
cromato come puoi vedere versioni future di
cromato ce l’hanno in Canary sicuramente
ed è segnalato in altri
Chrome è anche un buon candidato
polyfill è possibile polyfill questo siamo
già facendo così con JavaScript così
è un candidato abbastanza buono per te
usa la posizione appiccicosa solo se è lì
e se non si usa JavaScript per fingere
oppure potresti lasciarlo fuori solo se a
il browser non supporta la posizione appiccicosa
che nulla sta per accadere solo
andando a scorrere normalmente come in te
sapere in quel tipo di caso sarebbe
assolutamente bene e scorrere questo scatto
è una specifica molto interessante, quindi è così
il genere di cose quando stai scorrendo
attraverso un’interfaccia
da sinistra a destra dall’alto in basso
forse qualcosa è più simile a un’app
una volta superato un certo punto, il
scorrimento di luci e tipo di salti a
il riquadro successivo in modo da essere piacevole
effetto non sei tipo di dover gentilezza
di scorrere in vista e quindi provare e
mettilo in fila per saltare
come si aspetta e c’è un nuovo
Specifica CSS che si occupa di scroll
schioccare è quel candidato
stato di raccomandazione ma ha molto
molto recentemente cambiato così il codice che
funziona attualmente nei browser non è il
le cose finali che useremo per
scorrere lo snap che è praticamente il
modo di nuove specifiche fino al
le cose diventano troppo gentili di raccomandazione
e sono un po ‘in agguato per le cose
potrebbe cambiare e per quale motivo sono le cose
tipicamente accade dietro le bandiere del browser
in questi giorni possiamo darci da fare
con loro e capire il modo migliore per
fare cose
supporto del browser così frammentario e dico il
roba che è implementata è leggermente
più vecchio ma questo è piuttosto bello è
è bello vedere come funziona così
questa demo attualmente funziona in Firefox e
le modifiche alle specifiche perdono lo scroll
scatta destinazione e vieni
comprare lo scroll snap punti perché
proprietà in un tipo di snap scroll ma
è più o meno simile a quello che tu
vedrà così puoi avere un gioco con il
esempio e puoi vedere che sei un po ‘
tirandolo lo trascini sopra e tu
trascinalo sopra e finché non oltrepassa il
punto centrale poi si blocca in posizione
quindi è un bell’effetto specialmente
se stai costruendo qualcosa che vuole
comportarsi più come un pisolino e possiamo andare
l’ altro modo in cui è possibile scorrere su
asse y ancora questa è la vecchia specifica e
vedi allora non puoi trascinare e
giù fino a quando non vai oltre il punto
e poi salta così bene
cosa penso che sia un bell’esempio di
come stiamo cercando di fare cose che siamo
fare con JavaScript spesso e non a
ottimo modo in modo opposto performante
sta arrivando nelle specifiche CSS così
possiamo provarlo e usarlo in a
modo migliore che mi porta davvero a
Ti ho mostrato un sacco di cose
ecco che è abbastanza nuovo e parte di esso
funziona solo in un browser che conosci
e scroll snapping necessita ancora di aggiornamento
e ti ho mostrato come i CSS ti danno un
metodo per affrontare la mancanza di supporto, ma
soprattutto con i nostri grandi metodi di layout
abbiamo bisogno di quelli e di tutti i browser
noi per poter contare su di loro non lo sei
andare a rischiare l’intero layout su
qualcosa che ha solo supporto in uno
browser e poly che riempiono il tutto
il layout non è probabile che si traduca in un molto
buon risultato finale per te o per il tuo
o i tuoi utenti, ma la cosa è che noi
come gli sviluppatori web possono fare un sacco di
incoraggiare l’adozione di queste funzionalità da parte di
i browser dicono ai produttori di browser che tu
voglio che questa roba sollevi bug contro roba
non funziona come si vota
cose come l’uso marginale del nostro sito tu
sappi se vuoi che le forme in orlo vadano e
digli anche se puoi vedere un buon uso
caso per queste caratteristiche e non è possibile
usali perché non sono supportati
in un certo browser scrivi su di esso parlare
su di esso sai assicurarti che esca
Là
così quando i venditori di browser ti stanno guardando
sappi che gli sviluppatori web si preoccupano di questo
roba se potessero trovarmi solo a scrivere
sulla griglia e poi suona il clacson che non sono
andrò ad attuare cose così io
Penso che sia la cosa più importante è che
c’è rumore su questa roba e se
ci sediamo tutti e diciamo bene che non posso
usalo quindi non lo guarderò nemmeno
non li capiamo e così è davvero
molto molto
importante per far conoscere i tuoi pensieri
con i venditori di browser e appena uscito
lì sul tuo blog di un mezzo o
se scrivi cose su Twitter e
in modo che sappiano che è richiesto
e che se attuano esso
Gli sviluppatori sarà come yay Abbiamo
capito e possiamo costruire più cose
questo è molto importante e anche con il mio
Schema di gruppo di lavoro CSS se ne vedi
di questa funzionalità queste funzionalità e pensare
che la visione di questo gruppo di lavoro ha
totalmente perso la trama poi le lettere sanno
se hai un caso d’uso che non è risolto
da qualche nuova specifica CSS fateci
sappiamo che vogliamo saperlo o solo
scrivici e sai solo twittare
a questo proposito, stiamo guardando ora quando
quando abbiamo conversazioni sul settimanale
chiamare o il faccia a faccia è abbastanza spesso
alla domanda viene chiesto cosa fa web
sviluppatori che cosa effettivamente fanno gli autori
pensa a questa caratteristica lo vogliono
lo stanno usando stanno avendo
problemi con quello che pensano
dovrebbe essere chiamato un sacco di
le discussioni riguardano proprio come
dovremmo chiamare questa cosa e non lo faremo mai
conosce e in modo da sapere Sii su una chiamata
googling per vedere se qualcuno ha scritto
su questo ancora e qualche creatore che conosci
creando liste di quella roba così se
sei là fuori a scrivere e
scrivendo sui casi d’uso che hai
sicuramente viene ascoltato e
può letteralmente essere tre o quattro
le persone che scrivono di qualcosa possono significare
viene implementato e sai che ottiene
inserire una specifica perché tu
scopri che non sono così tante persone
così puoi scrivere su CSS in anticipo
fai sentire la tua voce e in particolare se
sei una persona a cui piace scrivere
JavaScript e cose e tu sei
costruire cose che sono interessanti e
potrebbe essere risolto in modo nativo vorremmo
sapere tutto ciò che riguarda il CSS
le specifiche sono ora discusse
github sono stati spostati di quest’anno per ottenere
fuori dalla orrenda mailing list
che non potrei mai incoraggiare nessuno a farlo
vai e guarda com’è stato davvero
qualcosa fuori dagli anni ’90 ed è ora
tutto su Github dove tutti gli altri
il progetto open-source è così puoi venire
lungo è possibile cercare diversi
specifiche e puoi vedere quali
vengono sollevate questioni che molte di quelle
vieni durante la causa e li mettiamo
lì puoi persino sollevare nuovi problemi
tu stesso sai se è particolarmente
per le specifiche è che non conosci le specifiche finali
sai facci sapere se pensi cose
si chiamano cose stupide o qualsiasi altra cosa se
non sta facendo qualcosa di cui hai bisogno
perché potrebbe essere discusso e
cresciuti e sei veramente sai
tipo di fare il tuo futuro un favore
facendo questa roba
perché in un anno tra due anni è così
sta per essere là fuori nelle cose dei browser
stanno accadendo molto molto rapidamente questi
giorni e tu puoi davvero davvero
influenza ciò e parlando per me stesso
lo sai che non sono affiliati a un browser
venditore, faccio tutto il possibile per dire che funziona
roba di gruppo davvero come una specie di a
strano passatempo ma mi diverto molto
molto da contribuire a questa roba
e in realtà scoprire l’interno
il funzionamento di tutto ciò è stato davvero
interessante quindi è un po ‘interessante
solo per ascoltare se c’è qualcosa di particolare
le specifiche che ti interessano vanno seguite
li su Github e, per favore, fallo
offri i tuoi pensieri che ci piacerebbe davvero
ascoltali così tutte le mie diapositive e il codice
e così via a questo link grazie
molto per l’ascolto
[Applausi]
Evon, guarda che è una stanza molto calda, allora io
avere uno che è lei ha detto che il
le query CSS consentono il controllo per
le funzionalità disponibili e anche più , ma
Non sono sicuro di quale sia la tua raccomandazione
per quanto riguarda il layout della griglia è davvero
suggerisci di giocarci ora o usarlo
ora devi solo essere pronto quando le cose
iniziato quando è un buon momento per iniziare
usando quelle cose molto avanzate proprio io
significa così così grits interessante perché
è tutto lì, ma non possiamo
a meno che tu non sia io a dirlo agli utenti
prendere una piattaforma web sperimentale
caratteristiche flag e la cosa con griglia è
è molto probabile che sta andando a finire
all’inizio del prossimo anno, ma quello
non può essere garanzia di conoscere alcun browser
potrei decidere che ce ne fossero alcuni
showstopper con prestazioni o
qualcosa e non spedirlo fino a dopo
l’anno penso che valga sicuramente la pena
iniziando a imparare ora perché quando
spedisce sta per atterrare praticamente
completo su quei browser così
c’è una buona possibilità e in particolare
se sai che hai un caso d’uso per
che l’implementazione in Chrome
interessante è stato pagato da
Bloomberg hanno pagato l’open source
consulenza o Galia per svilupparlo e
metterlo in battito di ciglia in modo che abbiano ovviamente
un uso per questo e molto molto acuto da vedere
là fuori, quindi vale sicuramente la pena avere
uno sguardo a una grande speculazione c’è molto da fare
e se puoi iniziare a ottenere una testa
iniziare e capire la griglia sarà
utile a voi sicuramente tra un anno
non è qualcosa che anche una volta
nei browser non è qualcosa che vorrei
suggerire poli riempimento ciò che vorrei
suggerisco è che si inizia a usarlo per
la griglia di componenti è brillante per la posa
piccoli componenti e piace davvero
tweaking l’allineamento e ottenere un
bella esposizione di cose e quando lavori
su una specie di micro livello è più facile
ricorrere a un display più semplice per
cose che non supportano e una volta che siamo
parlando del 7080 percento delle persone
avere una rete che potremmo comprare
attraverso l’ anno prossimo sai che ne fa di più
senso per iniziare a conoscere la funzione di utilizzo
le query rilevano il supporto della griglia do a
layout più bello sai migliorare un planare
uno penso in genere usando roba e
valorizzare il più possibile piuttosto
di cercare di fare qualsiasi brutto tipo di poli
il riempimento di questa roba è probabilmente a
migliore idea grazie
quando eseguo il test in JavaScript
come nel contenuto di carico pigro mentre loro
darle a un annuncio di importazione in determinati annunci
Supporta che verrebbe caricato ogni
single single time c’è un pensiero in
la specifica su come devono agire gli user-agent
trattatemi, non sono sicuro di no
pensaci e questo è sì
qualcosa che potresti fare non faccio niente
nella specifica che in particolare avrebbe trattato
con quello sì, è interessante
pensiero interessante dovremmo parlare di
va bene altre domande
okay e grazie operatore grazie
[Applausi]
[Applausi]
Va bene ciao così la conferenza mi ha chiesto di
vieni e parla di alcuni dei
roba interessante che sta facendo strada
nelle specifiche CSS e c’è un intero
mucchio di cose davvero interessanti tipo
di atterrare semplicemente nei browser al
momento e arrivo molto presto e così
questo discorso è davvero molto veloce
raccolta di cose e varie
esempi di cose che penso siano
interessanti alcuni dei quali sono in realtà
molto utilizzabile ora e gli altri sono una specie di
appena all’orizzonte uno dei molti cappelli
Indosso come esperto invitato il CSS
gruppo di lavoro tuttavia questa diapositiva ha
alcune delle altre cose con cui sono coinvolto
e mentre io sono veramente interessato a tutto
di questa nuova roba è il mio tipo di lavoro di un giorno
come co-fondatore di una gestione dei contenuti
prodotto di sistema e quindi devo fare i conti
con tutti i vecchi browser come
tutti gli altri non c’è sicuramente
torri d’avorio qui e così via
Ti spiegherò lo stato del browser
supporto per tutte queste cose e modi
per tipo di trattare con i vecchi browser così sono
inizierò con il mio preferito
soggetto in CSS e davvero il motivo per cui
Sono nel gruppo di lavoro CSS e
questo è il layout e questo è un modulo a
che se hai usato flexbox a tutti voi
conoscerà anche se tu potessi
Non ho sentito parlare del suo allineamento del nome della scatola
livello 3 perché sembra che per a
molto tempo molto lungo
il centraggio verticale è stato il più difficile
problema nel web design e così è
che scatola di allineamento e scatola flessibile pure
come risolvere così tante ragioni per cui siamo
l’uso di flexbox è fondamentalmente quello di ottenere quello
allineamento verticale mi capita spesso
trasformare qualcosa in un contenitore Flex
solo per poter allineare le cose
al suo interno come questo è come lo facciamo in
Flex box stiamo usando gli elementi di allineamento e
giustificare le proprietà del contenuto qui
Centra l’ immagine verticalmente e
orizzontalmente e quelle proprietà sono
parte delle specifiche della scatola flessibile e se lo fai
questo ti ritroverai con qualcosa di simile
questo e possiamo avere layout flessibili e noi
può allineare le cose tutt’intorno a quei layout
qui ho il contenitore degli effetti
l’altezza del quale è definita dall’altezza
immagine e stiamo allineando gli altri elementi
contro di essa, quindi stiamo usando una linea di auto
e stiamo allineando i singoli elementi
sul
il sassofono quindi per Flexbox abbiamo una linea
inizio flex auto-centrale e flex end così
il flex box è veramente bello e allora
abbiamo fatto è che abbiamo quelle proprietà
che fanno l’allineamento in Flex box e
sono stati portati fuori e messi in questo
nuova specifica chiamata allineamento della scatola
e quale allineamento della scatola ci lascia fare
quindi applicare tali proprietà ad altri
parti del layout che alla fine potrebbero
significa che potresti far galleggiare un oggetto e ancora
usa quelle proprietà di allineamento con esso
piuttosto che doverlo trasformare in a
Flex contenitore in modo che è piuttosto fresco così
abbiamo queste proprietà della parte
dell’allineamento della scatola e abbiamo l’allineamento
e anche cose come la distribuzione dello spazio
e queste le proprietà così abbiamo
giustificare contenuto contenuto allineato lì
giustifica l’ autoallineamento e combatti gli oggetti
e allineare gli oggetti così mentre non ce l’abbiamo
a un punto in cui possiamo usare questa roba
sul layout del blocco, ma non possiamo usarlo quando
fluttuiamo qualcosa o posizioniamo qualcosa
c’è una specifica in cui abbiamo
ha iniziato a utilizzare già queste proprietà
e che layout griglia CSS ora ho
praticamente un seminario di un’intera giornata che
si occupa di layout griglia CSS è un marchio
nuova specifica posso parlarne
tutto il giorno e non lo facciamo ora, ma vado
per mostrarti un qualche tipo di modifica
punti salienti di che così attaccare
allineamento è così che la griglia implementa
la specifica di allineamento della scatola così sono
in realtà creando lo stesso identico layout
Ho avuto per la flexbox questa volta con la griglia
Sto dicendo griglia di visualizzazione piuttosto che
mostra flex e quindi sto configurando a
layout a quattro colonne Sto usando la ripetizione
sintassi quindi ti sto dicendo di ripetere quattro volte a
1 colonna di unità frazione che 1fr è un
unità interessanti per flettere l’unità a
unità di frazione che definisce una frazione di
lo spazio disponibile nella griglia
contenitore quindi se abbiamo per uno dei nostri
unità di cui ognuna ha una uguale parte di
lo spazio che abbiamo diviso lo spazio in quattro
e poi qui sto usando un self line
auto-allineato al centro piuttosto che
flex start e una linea auto-end per allineare
gli oggetti all’interno delle loro aree di griglia che
ci dà lo stesso layout del Flex
layout ma questa volta usiamo in griglia e
allineamento della scatola all’interno della griglia e questi URL
qui quando ottieni le diapositive alla fine
puoi cliccare e sono tutti
penne del codice puoi dare un’occhiata e giocare
in giro con il codice, quindi qual è il
differenza con la griglia e la griglia della flexbox
il layout è stato progettato come un quinto
metodo di layout di scopo davvero per il
prima volta per il web ed è stato progettato
lavorare accanto ad altri metodi di layout
compresa la flexbox e la differenza è
davvero è per i layout bidimensionali
e questo è chiarire le cose sia come
riga e una colonna allo stesso tempo così a
utilizzare la griglia come nell’esempio precedente
diciamo griglia di visualizzazione e poi ne definiamo alcuni
colonne e opzionalmente alcune righe così qui
Sto definendo tre colonne tutte di una
unità di frazione e abbiamo il divario di griglia
proprietà e questo è buono definire un 10
gutter pixel tra quelle tracce e
puoi anche utilizzare il gap di colonna della griglia e
vuoti di fila della griglia per trovare quelli individualmente
e poi se ho un set di oggetti e
sono dentro quel genitore che ho
detto griglia di visualizzazione su che stanno andando a
sistemarsi sulla griglia che ho
definito uno in ogni cella della griglia ora
se provi a ottenere questo tipo di display
usando la flexbox che molti di voi potrebbero avere
provato a fare già dici flex display
lasci che gli oggetti si avvolgano e noi siamo
utilizzando una base flessibile di uno e di 200
pixel e dicendo crescono e si restringono
quello ora perché flexbox è uno
dimensionale si ottiene così anche se
si sta avviando alla riga successiva ciascuno
allineare ogni riga nella casella o colonna Flex se
stai lavorando per colonne diventa sua
possiedi un contenitore Flex in modo che lo spazio
la distribuzione sta accadendo attraverso la fila
lì arriviamo alla seconda fila che abbiamo solo
ha due carte e quindi ha solo diviso il
spazio tra loro e quello è il
differenza davvero tra griglia e
la griglia della flexbox manterrebbe quelle cose
rigorosamente nella loro colonna tiene traccia del bello
la cosa con Flex box è se lo facessimo
questo schermo più ampio e c’era di più
spazio potremmo ottenere più di quelle immagini
si adatterebbe uno accanto all’altro
cosa carina perché possiamo avere
più numeri di colonne flessibili
all’interno di un contenitore e possiamo effettivamente
farlo con griglie pure anche se
comporta un aspetto abbastanza sconcertante
Sintassi ecco sto creando il mio griglia Sono
usando il
compilare automaticamente la parola chiave nella ripetizione
che usare un valore piuttosto che dire
ripeti quattro volte sto dicendo errore automatico
quindi mi piacerebbe che la griglia riempisse altrettante colonne
tracce che si adattano al mio contenitore e
allora sto usando questa cosa minima di Max così sono
dicendo di rendere quelle tracce di colonna a
minimo di 200 pixel ma massimo di
un’unità di una frazione l’effetto di quello
perché l’unità della frazione condivide il tutto
spazio disponibile otteniamo tanti 200 pixel
colonna tracce come ci adatteremo quindi il
lo spazio disponibile è distribuito equamente
tra le colonne che fondamentalmente
ci dà la possibilità di avere una flessibilità
contenitore con tante colonne di
tra 200 flat 200 pixel e poi il
il riposo è un po ‘ condiviso con quello che
è abbastanza pulito consente il tipo rigoroso
del layout di righe e colonne ma altrettante
colonne come in forma così min max che min max
le cose sono state pazzesche per i libri sulla griglia
chi ha bisogno di un modo di fare quel tipo di
traccia il dimensionamento e si scopre che risolve
tutti i tipi di problemi interessanti qui
uno quindi questo è il consiglio più il sito web a
sito web tutorial e ne hanno uno
questo tipo di layout squadrati sulla casa
Pagina che tipo di vedere tutto il
utilizzare per la navigazione il problema
con queste cose è quello nel reale
mondo da cui proviene un sacco di contenuti
sistemi di gestione dei contenuti e il
editor di contenuti arriva e il
progettisti pensato bene dovrò solo
due righe di contenuto lì, ma hanno
ho qualcosa di veramente importante da dire
che ha bisogno di un intero paragrafo da così
lo mettono dentro e rompono il
il layout in questo caso è tutto sovrapposto
che non è l’ideale e mi chiedevo se io
potrebbe fare questo tipo di layout
con la griglia e risolvere quel tipo di problema
e si scopre che posso questo è il
layout che ho creato ho i tre
punti di rottura corrispondenti all’esempio
che stavo guardando e che abbiamo
ha una sorta di larghezza mobile e una più ampia
larghezza qui e poi molto più ampio ma
di nuovo abbiamo questa cosa dove abbiamo
ottenuto questi blocchi di altezza fissi e questo è
parte del design che anche se è un
un po ‘di sms che vuoi ancora
bloccare per mostrare abbastanza dell’immagine ma
quello che vogliamo è quella tolleranza per extra
contenuto per arrivare lì almeno non
rompere anche se questo non è il design che
voglio
e quindi ecco cosa facciamo il più possibile
vedere sulla destra in alto a destra
bloccare le persone arrabbiate al Balloon
Fiesta ha un bel po ‘più di testo
di quanto ci aspettassimo
ed è espanso e ciò che è
è successo è l’intera riga è espansa
e così anche le due immagini successive
più spazio in là e sono stati
in grado di espanderci così possiamo farlo
avere una dimensione minima per la nostra traccia di 150
pixel alti e poi espandere se
più contenuti entrano e questo è fatto da
di nuovo usando min max così sto dicendo
rendere le mie tracce almeno 150
pixel alti e un massimo di auto e
auto si risolverà nel contenuto se lo è
non ne ho altri di altezza diversa
applicato in modo da rendere lo spazio sufficiente per
tutto ciò che viene messo in quella scatola ora lo è
potrebbe essere che il progettista avrebbe poi
venire avanti e dire oh io tiro fuori alcuni dei
quel contenuto del mercato del pip perché lo voglio
quelli sembrano belli e puliti ma almeno
non si rompe e tutto si allinea a
la parte inferiore dell’immagine così è
abbastanza bello sai dare un’occhiata al
esempio il codice link nelle mie diapositive e
ci sono alcune piccole cose lì dentro
che sono piuttosto interessanti sulla griglia
layout che ti potrebbe piacere avere un
guarda così rimarrò un po ‘con la griglia
un po ‘più a lungo e parliamo un po’ di
algoritmo di posizionamento automatico perché così è
anche qualcos’altro è molto bello
questo è in un layout di griglia ora che hai
già visto quando dichiariamo la griglia e noi
brinda in una griglia tutto il bambino
gli elementi si dispongono su quella griglia
che è proprio come con la flexbox se tu
dire display flex tutti gli articoli all’interno
diventare un oggetto flessibile in modo che possiamo giocare
in giro con questa capacità e possiamo
inizia a creare alcune regole per diversi
oggetti in modo che agiscano diversamente quando
la griglia li incontra così ero
ricordando i giorni gloriosi in cui noi
aveva solo due cento e sedici colori
con cui giocare e così ho creato un elenco di
quei colori sicuri per il web dentro solo un vecchio
elencare con una classe di colori e io sono
sistemerò quelli fuori come una griglia così ancora
Sto usando la possibilità di crearne altrettanti
colonne questa volta con un minimo di 80
pixel e li creeremo
con un’altezza
di 80 pixel e un minimo quindi io
prendi piccole scatole quadrate e griglia
Disporre gli articoli come questo che è
abbastanza carina ma posso iniziare a giocare
in giro con questo sto aggiungendo alcune classi
Ho deciso che il bianco e il
i quadrati neri sulla griglia hanno effettivamente
per occupare una fila completa, quindi sto dicendo
inizia quelli se ne trovi uno con
la classe del bianco inizia su una griglia
linea di colonna uno quindi in questo qui tu
può vedere la griglia : la prima riga che è l’inizio
linea e meno uno è la linea di fondo
la griglia sono in una lingua da sinistra a destra
quindi la linea 1 è la tua linea a sinistra e
-1 è l’ estrema destra che si scambia
se si sta lavorando in una destra a sinistra
il linguaggio e il dire iniziano così dopo
griglia Riga 3 riga riga riga 3 e poi
stiamo facendo lo stesso con quello nero
Ho anche avuto così tanto che ho chiesto di abbracciare
colonne, quindi andremo a finire
con alcuni blocchi più grandi sulla mia griglia che
mi dà questo e abbiamo questo tipo
di grandi lacune nella griglia e c’è
questo genere di bit neri così fondamentalmente
lacune nella griglia come la griglia è la posa di questi
cose fuori perché sta per andare
attraverso la fonte e si stende
cose e ne viene fuori una che è
troppo grande per adattarsi alla fine di una riga e
quindi passeremo alla fila successiva
e poi proseguirò fino a quando non troverà
un altro che è troppo grande e poi
che ti è caduta giù così si finisce con questi
tipo di lacune nella griglia che è gentile
di ciò che normalmente vorresti tendenzialmente
vuoi che il tuo ordine fonte di rimanere in
ordinare che lo metti nel documento
a meno che non aggiungiamo il flusso automatico della griglia
proprietà con un valore di ammaccature e quello
vorrà dire che la griglia ricopre il
spazi vuoti man mano che la griglia progredisce in avanti
gli oggetti fuori si imbatte in uno che
non si adatta e quindi scende sul
la prossima linea ma la prossima volta ne trova una
che si inserirà in quel vuoto lo sceglierà
prendere fuori dall’ordine sorgente e mettere
nello spazio in modo da ottenere una bella
Esposizione stretta di scatole che è
fantastico finché lo stai mostrando
qualcosa che non ha una logica
ordina che non sarebbe così bello per te
forme e questo tipo di evidenzia un problema
che mi piace entrare e basta
persone consapevoli di ciò con tutto questo
la disposizione della griglia in particolare ma con
anche la flexbox ha una capacità molto reale
rovinare questo tipo di ordine logico di
il tuo documento e il nella specifica per
sia buono che flessibile
dice che c’è qualche riordino con
posizionamento automatico o perché sei giusto
impostando le colonne e così via
solo una cosa visiva non influisce
l’ordine logico del tuo documento così dentro
termini di accessibilità che devi fare
certo l’ordine logico dei tuoi documenti
ha senso anche se abbiamo tutto
questa incredibile capacità di iniziare a muoversi
le cose intorno penso che sia davvero un
discussione che stiamo appena iniziando
avere con la griglia perché la griglia non lo è
attualmente vivo in qualsiasi browser ancora questo
è griglia browser esempio calme che
è il mio sito web di esempi di griglia che ho
molti di loro se ci vai tu
può vedere lo stato attualmente nei browser
la griglia è stata sviluppata dietro il browser
bandiere se qualcuno ha lavorato con flexbox
potresti essere consapevole che abbiamo finito
con tre versioni di flexbox in
i browser e questo era un grande fastidio
a tutti noi e questo è perché flexbox
è stato sviluppato con il fornitore di prefissi
prefissi e le specifiche sono cambiate dopo
i browser sono stati implementati e così siamo finiti
di versioni disordinate del layout della griglia di Flexbox
è stato sviluppato per l’ultimo
cinque anni circa è stato sviluppato
dietro le bandiere dei browser c’era un anticipo
L’implementazione Microsoft è arrivata
da Microsoft originariamente così in IE 10 11
e bordo c’era una specie di più vecchio
versione del layout della griglia in cui siamo ora
Firefox e in un batter d’occhio quindi in chrome e
l’opera ci è davvero buona e anche
nell’anteprima tecnica di Safari abbiamo a
è davvero una buona implementazione della griglia
abbastanza probabile che arrivi il primo trimestre di
l’anno prossimo verrà spedito in quelli
browser al quale punto circa il 70% di
la gente che guarda il sito medio è
probabilmente avrà un supporto di rete
ed è un po ‘fatto se abiliti
flag di funzionalità della piattaforma web sperimentale
in chrome ci sono tutti i miei esempi
lavorare si può avere un gioco intorno con esso
così in scatola Flex e nella corrente
implementazioni di elementi di layout di griglia
bisogno di essere un figlio diretto dell’elemento
che dici display flex o display
griglia per diventare elementi flex o grid ora
la griglia funziona
avere un metodo di cottura nel
specifica per abilitare il supporto della sub-griglia così tu
potrebbe dire che qualcosa era una griglia sub
nel qual caso potrebbe utilizzare la griglia
tipo definito di più in alto l’albero
quale sarebbe molto bello permetterci di
tipo di creare una griglia e poi il bambino
oggetti e anche i bambini di quelli
gli oggetti potrebbero sedere sulla stessa griglia che
sarebbe bello che nessuno ha ancora implementato
è abbastanza probabile che ciò si ottenga
spinto nel livello due delle specifiche
perché nessuno lo sta implementando ma
c’è un altro valore di visualizzazione che
è una specie di aggirare questo problema è
già stato implementato in Firefox e
si chiama contenuto della visualizzazione cosa
visualizza i contenuti fa è si ferma un
elemento che genera qualsiasi casella in modo che il
effetti di ciò significa che un bambino
questo è un elemento figlio diretto di
qualcosa che è impostato per visualizzare la griglia
o mostra flex e questa è una scatola come questa
genererebbe sarebbe scomparire e così
i bambini potrebbero quindi essere trattati come
elementi di griglia o flex che suona molto
davvero strano ed è molto semplice
per vedere se dovresti giocare con un
esempio quindi ecco il markup
Ho un div per la classe di wrapper
ha alcuni bambini diretti l’h1 è
un bambino diretto i paragrafi che
blockquote e così è la lista non ordinata
con una classe di immagini comunque il li
gli oggetti all’interno non sono un bambino diretto quindi
non saranno influenzati da
griglia di visualizzazione applicata al wrapper così
questo è quello che sto facendo sto creando questo
due colonne e sto impostando quelle
dirige i bambini a h1 il paragrafo a
span proprio attraverso la griglia e il blocco
citazione ha una classe di inserto così
entra nella colonna dopo la colonna uno
e il seguente paragrafo va dopo
colonna linea due e questo ci dà questo
tipo di cosa puoi vedere i due
colonne sopra la citazione e il testo
accanto ad esso e poi abbiamo quelli
immagini che sono all’interno di una lista e così
non sono disposti sulla griglia
quello che mi piacerebbe che facessero è mettersi in fila
sotto le altre colonne ma perché
non sono figli diretti che non sono
lo farò a meno che non utilizzi display
contenuto quindi abbiamo questo ul con a
classe di immagini che dicono di visualizzare i contenuti
e l’effetto di ciò è che l’UL è
non più nel Dom per la visualizzazione
scopi è solo una specie di svanire e noi
finiscono per essere in grado di deporre quegli oggetti
Il posizionamento automatico li posizionerà semplicemente
la griglia molto molto utile è possibile utilizzare
questo già per gli articoli flessibili e funziona
in Firefox e molto ben cromato
ha detto che lo implementeranno
così stiamo entrando in quello
i browser mi piacerebbe vedere proprio sub
supporto di rete di terra nei browser per la griglia
pure, ma questo potrebbe farcene avere un po ‘
il modo in cui molti casi d’uso
la gente penso che sia stata probabilmente risolta da
visualizzare contenuti sicuramente qualcosa da fare
guarda in futuro come quello ottiene di più
supporto del browser in modo da allontanarsi dal grande
cose di layout parliamo un po ‘
sulle forme CSS perché è davvero
bella piccola specifica ed è
qualcosa che può funzionare come un
valorizzazione abbastanza bene le specifiche delle forme
proveniva da Adobe in origine era uno di
le loro specifiche e definisce
possibilità per noi di scorrere il testo in una curva
linea o una linea diversa da una sorta di
scatola rettangolare per usare le forme
devi far galleggiare il tuo oggetto che può essere solo
la specifica di livello uno può essere applicata solo
galleggiare così qui ho un’immagine qui
con una classe di pallone che ho
fluttuò a sinistra e dato una larghezza e poi
Ho usato questa forma fuori dalla proprietà
che è ciò che è definito nelle specifiche che sono
dire cerchio un 50% che mi dà questo
che è molto carino non è necessario
avvolgere le cose attorno a un’immagine a cui tendi
vedi tutti gli esempi di come le cose si sono avvolte
intorno alle immagini non è necessario farlo
potresti galleggiare e devi galleggiare
cose che potresti far galleggiare alcune generate
contenuto così qui sto solo generando un po ‘
contenuto impostandolo su display block
flottante a sinistra dandogli una larghezza per
l’altezza e usando la forma all’esterno di nuovo
che mi dà questo in modo che tu possa tipo di
avere queste linee curve senza bisogno
mettere un’immagine in là così come
forme che è possibile utilizzare i percorsi di clip c’è a
diversa una specifica diversa ma
la cosa bella del percorso della clip
proprietà ci vuole lo stesso
valori come forme fanno così una volta che hai funzionato
puoi anche usare la tua forma
parte di clip per tagliare via qualsiasi cosa intorno
dì l’immagine che stai curvando
testo in giro così qui sto usando la mia forma
e stavolta sto usando l’ellisse
funzione puoi anche usare un poligono
lì per creare forme davvero stravaganti se
vuoi e poi sto usando il web clip
percorso della clip di cui hai bisogno al momento
e percorso della clip con gli stessi valori e
questo ci dà questo e così quell’immagine è
essenzialmente rettangolare e abbiamo appena
ritagliato il contenuto intorno ad esso
tipo di vedere questo genere di cose che ho visto
un sito web della conferenza di stasera così ovunque
dove hai come piccoli avatar di
le persone e sono tutti quadrati e tu
fluttali e avvolgi il testo
e poi se hai forme che fai
li circolari e avvolgono il testo
in una curva che è davvero bella
miglioramento non ha importanza se
le persone non hanno il supporto per le forme
stanno per ottenere l’ immagine quadrata
che sta per essere fatto galleggiare andrà tutto bene
se hai il supporto, allora lo è
andando a curva intorno a questa è la corrente
supporto del browser per le specifiche della forma
abbastanza bene Firefox ha detto che sono
andando a implementarlo così spero che lo faremo
fallo presto anche su Firefox e andiamo
dì che è il genere di cose che tu
potrebbe implementare la gente vedrà se
ora hanno il cromo se lo usano
Safari e poi quando Firefox si aggiorna
anche queste persone lo vedranno
probabilmente non andando a rompere nulla come
Finché sei abbastanza attento, non lo fai
finire con per esempio se lo sei
ritagliare i ritagli di contenuti tecnici per
un’immagine e hai roba sopraffatta
c’è una possibilità che tu possa finire
fare causa illeggibile così quelli il tipo di
situazioni devi stare attento se
usando forme ma CSS ha creato un
soluzione per questo problema di supporto del browser
qualcuno qui ha usato il modernizzatore o lo sa
quale modernizzatore è sì va bene così CSS
le query di funzionalità sono essenzialmente
modernizzato che la capacità di rilevare
supporto per una funzionalità CSS ma al posto di
usando javascript per farlo
possiamo farlo proprio all’interno del nostro CSS e
stiamo usando questa regola di supporto app è
una regola del gruppo condizionale è un po ‘come
media query e in questo caso però
invece di testare quanto largo
di voi Porter stiamo testando se
l’utente-agente dichiara che supporta
una proprietà CSS e una coppia di valori che
significa che possiamo scrivere un foglio di stile
che controlla il supporto di un nuovo CSS
caratteristica prima di usarlo che significa che tu
puoi fare due cose e puoi farlo
sovrascrivi le cose che hai fatto prima per
browser più vecchi dopo aver controllato
supporto
la cosa con le query sulle funzionalità è
hanno un fantastico supporto per i browser, quindi
i tuoi browser moderni supportano tutte le funzionalità
domande che significa che nulla di nuovo è
entrerà in CSS da questo giorno
inoltrare che non è possibile utilizzare la query di funzionalità
per verificare se è lì o no quale
è abbastanza bello, quindi puoi usarlo
implementare nuovi CSS senza causare a
problema per i browser più vecchi, quindi questo è
come lo usi Qui sto controllando per vedere
se il browser ha il supporto per la griglia
layout così sto dicendo al display di supporto
griglia se abbiamo il layout della griglia fare cose
per il layout della griglia è possibile testare più
le cose pure, quindi qui sto cercando
mostra la griglia e forma anche all’esterno
cerchia il fatto che stiamo usando
le coppie di valori di proprietà sono davvero utili
perché se sai che un browser ha
ha ottenuto il supporto per parte di una specifica ma non
tutto ciò che può accadere per esempio
un browser potrebbe inviare supporto per sub-grid in
layout di griglia che puoi semplicemente cercare
potresti cercare la griglia secondaria di visualizzazione se
stai cercando quella parte della specifica
e tu non stai cercando l’intero
lo spettro in realtà è merda con a
specifica completata quindi se anche se
si sa se si sa che qualcosa
non è implementato , puoi cercarlo
è un modo davvero bello per testare
supporto ora quando vi ha mostrato il grafico
di possibilità per questo ora vedere questo
non è supportato nelle versioni precedenti di ie
ma non importa perché
quello che facciamo è quando usiamo funzionalità
domande che scrivi il tuo CSS per il vecchio
browser o per i non supportati
i browser poi fai la tua query di funzionalità
e poi tu sovrascrivi tutto ciò che tu
non servono e quindi fanno le tue cose nuove così
qui con l’esempio del pallone da
prima ho intenzione di dargli un confine
e alcune imbottiture per la mia forma di nan
supporto ai browser che vorrei
Test per il supporto e poi io mi libero
di quel confine e il padding e poi
Faccio le mie cose di forma all’interno della funzione
query è molto simile a quando lo facciamo
media query e facciamo qualcosa per
dispositivi mobili e poi andiamo al nostro
layout più ampio e forse ne togliamo alcuni
di quella roba e fare alcune altre cose
praticamente la stessa idea e se ce l’abbiamo
ottenuto supporto otteniamo il nostro bello tagliato
forma e se non supportiamo il supporto noi
abbiamo questo non abbiamo alcun problema
è un buon modo per assicurarti che il tuo
il nuovo CSS non causa potenzialmente
problemi per i tuoi vecchi browser e I
penso ci siano cose davvero eccitanti
iniziare a utilizzare e non c’è assolutamente alcun
motivo per cui non è possibile iniziare a utilizzare la funzione
domande ora per verificare il supporto di più recenti
roba e sono semplicemente geniali
creando questo tipo di siti web che possono
migliorare se stessi come la loro piattaforma
migliora sotto di loro che è ciò che è
succedendo lo sai con sempreverde
browser che conosci ogni due settimane, quindi
una volta che il browser sarà aggiornato e loro
ottenere alcune cose nuove e richieste di funzionalità
lascia che risponda a quello e
costruire siti e applicazioni che gestiscono
con quella realtà così qualcosa con molto
piccolo supporto ma che è abbastanza pulito
è la lettera iniziale che probabilmente penso di più
persone che fanno sviluppo di front-end di
il design a un certo punto ha provato a farlo
un adeguato effetto di capolettera ed è a
compito che in realtà non è molto facile nonostante
il fatto che i CSS sono molto buoni
supportata la prima lettera di pseudo-classe
è abbastanza difficile da ottenere davvero
bello effetto di capolettera o lo è stato fino a noi
ha ricevuto la lettera iniziale in modo che questo sia definito in
il modello di layout in linea CSS
specifica che ci consente di creare correttamente
lettere iniziali nei nostri documenti così
ecco come lo usiamo che sto prendendo di mira qui
il paragrafo direttamente dopo un h1 e
Sto impostando la lettera iniziale di quello
paragrafo in grassetto e in quattro righe
alto quindi questo è il primo valore quindi
Sto dicendo quattro righe il secondo valore
determina se la lettera iniziale è
completamente in linea con il contenuto o
tipo di bastoncini nella parte superiore del contenuto
quindi sto dicendo che dovrebbero essere tre
linee incorporate nel contenuto è
quattro righe alte tre linee incorporate
che ci dà questo in modo da poter vedere come
che W sta cadendo
alto ma una delle linee è una specie di
tirato fuori la parte superiore del contenuto così tu
puoi giocare con quello che potresti avere
è completamente dentro se vuoi ora
se non c’è supporto per quello allora
lo otterremo se non accadrà nulla
perché è così che i CSS funzionano se a
browser non supporta qualcosa che
semplicemente non fa niente così è
praticamente bene finché non lo fai
voglia di fare qualsiasi altra cosa a quella iniziale
lettera che i browser supportano perché
questo è attualmente solo Safari 9 e versioni successive
è attualmente in fase di implementazione in
Firefox quindi se hai intenzione di fare un
grande lettera e non lo è
supportato va bene, ma forse tu
voglio iniziare a giocare e fare
sto facendo un po ‘di stile in più
un po ‘di stile sto prendendo uno sfondo
immagine e scherzi con le forme CSS
ora sta andando la proprietà della lettera iniziale
essere ignorato ma tutte quelle altre cose
non sarà ignorato perché
la maggior parte dei browser supporta la pseudo classe
e così facciamo andare avanti questo genere di cose
su quello non è l’ideale ma abbiamo già
ho una soluzione
abbiamo domande sulle funzionalità in modo che possiamo testare
per quella lettera iniziale di supporto e poi
inserire il CSS all’interno di una funzione
query così facciamo questo controllo per il supporto
della lettera iniziale e se ce l’abbiamo
supporto otteniamo questo che probabilmente non lo è
molto meglio ma non sono un designer
così è ma puoi vedere che puoi
prova per il supporto e poi fai cosa
vuoi così domande sulle funzionalità se prendi
una cosa di distanza caratteristica si interrogano
sei davvero il tuo nuovo migliore amico che puoi
inizia a usare queste cose con cui stare
modalità di scrittura dei contenuti ora quando mi sono iscritto
il gruppo di lavoro CSS che non avevo
capito è che in realtà la maggior parte del
le discussioni riguardano la maggior parte del tempo
la direzione delle cose è stata scritta così
si scopre che è molto complicato
se le cose vanno da sinistra a destra o
da destra a sinistra o dall’alto verso il basso o
se hai contenuto che è misto
alcuni vanno da destra a sinistra e
alcuni vanno dall’alto verso il basso e lo sono
molto molto complicato e molti molti
discussioni sorprendenti si verificano sulla scrittura
modalità e c’è tutto questo a
specifica per affrontare le modalità di scrittura
ma non hai solo bisogno di usare questi per
creare un testo lungo in
lingue che puoi usare per giocare
in giro con il testo in cui conosci il tuo
la mia lingua , ovviamente, sto usando
Inglese che va da sinistra a destra
lingua e ho un titolo qui e
Ho deciso che mi piacerebbe averlo
la mia voce è rovesciata sul lato e
visualizzato lungo il lato del documento
e posso farlo con una combinazione di
la griglia e le modalità di scrittura ne fanno alcune
le cose qui ho impostato il mio wrapper
griglia di visualizzazione Sto creando una colonna due
griglia con una griglia e poi sulla mia h1
Sto dicendo che la modalità verticale RL sono io
anche usando la trasformazione per capovolgerla e
allineare il testo e metterlo dopo
riga di colonna di griglia uno che mi dà questo
quindi è una specie di trucco, ma il
altro posto dove questo genere di cose è
molto utile fuori Manderò un esempio
da qualcuno che voleva sapere come me
farebbe un layout con la griglia e aveva un
un mazzo di bottoni che erano sul lato
e il testo è appena capovolto
quindi il testo era in realtà un po ‘in basso
il lato del pulsante e lo fai
con modalità di scrittura in modo da poter creare genere
dell’interfaccia utente dell’applicazione con il testo sul suo
di nuovo usando la specifica della modalità di scrittura
quindi è abbastanza buono
supportare un supporto migliore di quello che vorresti
immagina così un paio di cose che tu
potrebbe aspettarsi di trovare in un preprocessore
piuttosto che come CSS nativo penso che il
la ragione per la maggior parte di noi ha iniziato a usare
pre-processori o il motivo che consideriamo
sai che la prima cosa che pensiamo sia
sarebbe davvero bello avere delle variabili in
il mio CSS sono stufo di cercare e
sostituendo tutti questi file CSS con
trova i colori o i caratteri o altro
lo è e quindi usi un preprocessore come
sass o meno in modo da poter usare le variabili così
abbiamo iniziato abbiamo portato questi in
le specifiche CSS ora e la specifica che
si occupa di variabili è chiamato personalizzato
proprietà così proprietà personalizzate significa
che gli autori possono fare ciò che definiscono
proprietà che è possibile impostare e quindi
puoi usarli nei tuoi file CSS
ecco un semplice esempio, quindi eccomi qui
impostando alcuni colori ho a
colore primario che
impostato su blu e segretario per arancione e
poi nel mio h1 invece di avere il
colore dico var e poi scelgo il mio
proprietà personalizzata che vorrei usare
qualcosa che è bello è che puoi
utilizzare le query sulle funzionalità per verificarle
puoi provare se hai supporto per
quelle proprietà personalizzate prima di utilizzare
loro che significa che potresti farti
potrebbe avere valori predefiniti e quindi sovrascrivere
li con le tue proprietà personalizzate se tu
sappi che hai supporto che è
abbastanza pulito e questo è solo un collegamento a
questo esempio in modo da poter dare un’occhiata
più tardi
arrivando di un vantaggio c’è
qualcosa che dobbiamo inseguire ma si
di nuovo supporto ragionevole sta ottenendo
lì abbiamo un bel po ‘di supporto
per questa roba e così l’altra cosa
siamo noi con i pre-processori
aggiungere le cose facciamo matematica di base
e potresti pensare bene perché preoccuparti ma
la maggior parte di noi sta probabilmente usando sass o
meno a questo punto perché preoccuparsi di farlo
roba in CSS la cosa fondamentale di
funzione calc in CSS che ci permette di fare
questa matematica di base è che puoi
mescola le unità di lunghezza non puoi fare qualcosa
come ogni preprocessore che non puoi dire prendere
20 pixel di distanza dal 50% ma non lo fai
sai quando lo fai
preprocessore non sai cosa sia il 50% di
cosa sai quanto è grande, quindi non puoi
farlo mentre con calc in CSS puoi farlo
Effettivamente , puoi mescolare le unità
quindi ne ho un esempio molto veloce
Ho delle scatole qui e dentro loro
ottenuto un altro div nested all’interno di loro e
solo così possiamo giocare con un po ‘
altezze e vedere come funziona così ho
definito un’altezza per due di loro il
il primo sta per prendere il
altezza del contenuto quindi è qualsiasi cosa
il contenuto è lì e poi questo
bersaglia tutte quelle div interne
tutto dentro la scatola e quello che siamo
dire per la sua altezza è che dovrebbe
essere il 50% del suo contenitore meno 20 pixel
e otteniamo questo così il meno 20 pixel
è un accordo con il fatto che la scatola sia
assolutamente posizionato dal basso
così così se dicessimo che il 50% sarebbe
alto di un effettivo 50% perché non abbiamo
preso in considerazione che 20 pixel così da
rimuovendo i 20 pixel all’altezza di noi
prendi queste scatole a mezza altezza da qualche parte
altrove calice molto utile è
posizionamento delle immagini di sfondo che fanno
sicuro che in realtà hanno definito il
il modo giusto dal basso puoi usarlo
per quello, ma comunque è necessario mescolare
unità di lunghezza nel tuo calc CSS è
incredibilmente maneggevole e ha davvero
buon supporto per il browser puoi praticamente
usa questo e quindi è qualcosa che
puoi iniziare a usare sai di me
pensa se hai delle cose belle
molto assoluti e fai il tuo
preprocessore ma ci sono posti dove
può essere davvero utile farlo uscire
in realtà anche nel tuo live CSS
come guardare cose che stiamo facendo in pre
processi e tipo di prendere idee da
che stiamo iniziando a vedere cose nei CSS
che abbiamo fatto per sempre con
JavaScript lo sai da anni e anni
abbiamo fatto certe cose con
JavaScript che ora sta iniziando ad andare
in specifiche native che significa solo
saranno più performanti se
è una cosa nativa CSS piuttosto che
deve succedere in JavaScript è
andando è un lavoro praticamente andando molto
più bello quindi questa è una di quelle cose
questo è un nuovo valore della posizione
proprietà adesiva posizionamento è così appiccicoso
quando hai qualcosa posizionato in
il tuo documento e inizi a scorrere
e scorre perfettamente con il testo
come normale e poi quando colpisce dice il
in cima al viewport rimane messo e il
Il Texas cresce al di sotto di cose comuni
come la navigazione e così via e iniziare
il centro del tuo documento arriva al
sopra e quello e poi inizia a scorrere così
è un po ‘ diverso da avere
qualcosa di statico che poi inizia in a
posto e rimane sempre lì che hai
che bello effetto di muoverlo prima e
quindi rimanendo così è così che lo facciamo
Ho una lista di elementi con cui ho
termini di definizione seguiti da multipli
la definizione e voglio i termini
bastone mentre scorri così che cosa dobbiamo fare
per quello dicono posizione appiccicosa e poi noi
diciamo top zero e questo significa che io
voleva rimanere bloccato quando colpisce la cima
del viewport piuttosto che in parte come te
potrebbe avere un valore lì se volessi
si attacca un po ‘più in basso e noi
fai succedere questo genere di cose così tu
possono vedere mentre colpiscono la cima che si attaccano
e le cose scorrono sotto di loro così
questo è un effetto abbastanza pulito da dire che è
qualcosa che abbiamo fatto con
JavaScript per molto tempo comunque e come
il supporto del browser in cui sta arrivando
cromato come puoi vedere versioni future di
cromato ce l’hanno in Canary sicuramente
ed è segnalato in altri
Chrome è anche un buon candidato
polyfill è possibile polyfill questo siamo
già facendo così con JavaScript così
è un candidato abbastanza buono per te
usa la posizione appiccicosa solo se è lì
e se non si usa JavaScript per fingere
oppure potresti lasciarlo fuori solo se a
il browser non supporta la posizione appiccicosa
che nulla sta per accadere solo
andando a scorrere normalmente come in te
sapere in quel tipo di caso sarebbe
assolutamente bene e scorrere questo scatto
è una specifica molto interessante, quindi è così
il genere di cose quando stai scorrendo
attraverso un’interfaccia
da sinistra a destra dall’alto in basso
forse qualcosa è più simile a un’app
una volta superato un certo punto, il
scorrimento di luci e tipo di salti a
il riquadro successivo in modo da essere piacevole
effetto non sei tipo di dover gentilezza
di scorrere in vista e quindi provare e
mettilo in fila per saltare
come si aspetta e c’è un nuovo
Specifica CSS che si occupa di scroll
schioccare è quel candidato
stato di raccomandazione ma ha molto
molto recentemente cambiato così il codice che
funziona attualmente nei browser non è il
le cose finali che useremo per
scorrere lo snap che è praticamente il
modo di nuove specifiche fino al
le cose diventano troppo gentili di raccomandazione
e sono un po ‘in agguato per le cose
potrebbe cambiare e per quale motivo sono le cose
tipicamente accade dietro le bandiere del browser
in questi giorni possiamo darci da fare
con loro e capire il modo migliore per
fare cose
supporto del browser così frammentario e dico il
roba che è implementata è leggermente
più vecchio ma questo è piuttosto bello è
è bello vedere come funziona così
questa demo attualmente funziona in Firefox e
le modifiche alle specifiche perdono lo scroll
scatta destinazione e vieni
comprare lo scroll snap punti perché
proprietà in un tipo di snap scroll ma
è più o meno simile a quello che tu
vedrà così puoi avere un gioco con il
esempio e puoi vedere che sei un po ‘
tirandolo lo trascini sopra e tu
trascinalo sopra e finché non oltrepassa il
punto centrale poi si blocca in posizione
quindi è un bell’effetto specialmente
se stai costruendo qualcosa che vuole
comportarsi più come un pisolino e possiamo andare
l’ altro modo in cui è possibile scorrere su
asse y ancora questa è la vecchia specifica e
vedi allora non puoi trascinare e
giù fino a quando non vai oltre il punto
e poi salta così bene
cosa penso che sia un bell’esempio di
come stiamo cercando di fare cose che siamo
fare con JavaScript spesso e non a
ottimo modo in modo opposto performante
sta arrivando nelle specifiche CSS così
possiamo provarlo e usarlo in a
modo migliore che mi porta davvero a
Ti ho mostrato un sacco di cose
ecco che è abbastanza nuovo e parte di esso
funziona solo in un browser che conosci
e scroll snapping necessita ancora di aggiornamento
e ti ho mostrato come i CSS ti danno un
metodo per affrontare la mancanza di supporto, ma
soprattutto con i nostri grandi metodi di layout
abbiamo bisogno di quelli e di tutti i browser
noi per poter contare su di loro non lo sei
andare a rischiare l’intero layout su
qualcosa che ha solo supporto in uno
browser e poly che riempiono il tutto
il layout non è probabile che si traduca in un molto
buon risultato finale per te o per il tuo
o i tuoi utenti, ma la cosa è che noi
come gli sviluppatori web possono fare un sacco di
incoraggiare l’adozione di queste funzionalità da parte di
i browser dicono ai produttori di browser che tu
voglio che questa roba sollevi bug contro roba
non funziona come si vota
cose come l’uso marginale del nostro sito tu
sappi se vuoi che le forme in orlo vadano e
digli anche se puoi vedere un buon uso
caso per queste caratteristiche e non è possibile
usali perché non sono supportati
in un certo browser scrivi su di esso parlare
su di esso sai assicurarti che esca
Là
così quando i venditori di browser ti stanno guardando
sappi che gli sviluppatori web si preoccupano di questo
roba se potessero trovarmi solo a scrivere
sulla griglia e poi suona il clacson che non sono
andrò ad attuare cose così io
Penso che sia la cosa più importante è che
c’è rumore su questa roba e se
ci sediamo tutti e diciamo bene che non posso
usalo quindi non lo guarderò nemmeno
non li capiamo e così è davvero
molto molto
importante per far conoscere i tuoi pensieri
con i venditori di browser e appena uscito
lì sul tuo blog di un mezzo o
se scrivi cose su Twitter e
in modo che sappiano che è richiesto
e che se attuano esso
Gli sviluppatori sarà come yay Abbiamo
capito e possiamo costruire più cose
questo è molto importante e anche con il mio
Schema di gruppo di lavoro CSS se ne vedi
di questa funzionalità queste funzionalità e pensare
che la visione di questo gruppo di lavoro ha
totalmente perso la trama poi le lettere sanno
se hai un caso d’uso che non è risolto
da qualche nuova specifica CSS fateci
sappiamo che vogliamo saperlo o solo
scrivici e sai solo twittare
a questo proposito, stiamo guardando ora quando
quando abbiamo conversazioni sul settimanale
chiamare o il faccia a faccia è abbastanza spesso
alla domanda viene chiesto cosa fa web
sviluppatori che cosa effettivamente fanno gli autori
pensa a questa caratteristica lo vogliono
lo stanno usando stanno avendo
problemi con quello che pensano
dovrebbe essere chiamato un sacco di
le discussioni riguardano proprio come
dovremmo chiamare questa cosa e non lo faremo mai
conosce e in modo da sapere Sii su una chiamata
googling per vedere se qualcuno ha scritto
su questo ancora e qualche creatore che conosci
creando liste di quella roba così se
sei là fuori a scrivere e
scrivendo sui casi d’uso che hai
sicuramente viene ascoltato e
può letteralmente essere tre o quattro
le persone che scrivono di qualcosa possono significare
viene implementato e sai che ottiene
inserire una specifica perché tu
scopri che non sono così tante persone
così puoi scrivere su CSS in anticipo
fai sentire la tua voce e in particolare se
sei una persona a cui piace scrivere
JavaScript e cose e tu sei
costruire cose che sono interessanti e
potrebbe essere risolto in modo nativo vorremmo
sapere tutto ciò che riguarda il CSS
le specifiche sono ora discusse
github sono stati spostati di quest’anno per ottenere
fuori dalla orrenda mailing list
che non potrei mai incoraggiare nessuno a farlo
vai e guarda com’è stato davvero
qualcosa fuori dagli anni ’90 ed è ora
tutto su Github dove tutti gli altri
il progetto open-source è così puoi venire
lungo è possibile cercare diversi
specifiche e puoi vedere quali
vengono sollevate questioni che molte di quelle
vieni durante la causa e li mettiamo
lì puoi persino sollevare nuovi problemi
tu stesso sai se è particolarmente
per le specifiche è che non conosci le specifiche finali
sai facci sapere se pensi cose
si chiamano cose stupide o qualsiasi altra cosa se
non sta facendo qualcosa di cui hai bisogno
perché potrebbe essere discusso e
cresciuti e sei veramente sai
tipo di fare il tuo futuro un favore
facendo questa roba
perché in un anno tra due anni è così
sta per essere là fuori nelle cose dei browser
stanno accadendo molto molto rapidamente questi
giorni e tu puoi davvero davvero
influenza ciò e parlando per me stesso
lo sai che non sono affiliati a un browser
venditore, faccio tutto il possibile per dire che funziona
roba di gruppo davvero come una specie di a
strano passatempo ma mi diverto molto
molto da contribuire a questa roba
e in realtà scoprire l’interno
il funzionamento di tutto ciò è stato davvero
interessante quindi è un po ‘interessante
solo per ascoltare se c’è qualcosa di particolare
le specifiche che ti interessano vanno seguite
li su Github e, per favore, fallo
offri i tuoi pensieri che ci piacerebbe davvero
ascoltali così tutte le mie diapositive e il codice
e così via a questo link grazie
molto per l’ascolto
[Applausi]
Evon, guarda che è una stanza molto calda, allora io
avere uno che è lei ha detto che il
le query CSS consentono il controllo per
le funzionalità disponibili e anche più , ma
Non sono sicuro di quale sia la tua raccomandazione
per quanto riguarda il layout della griglia è davvero
suggerisci di giocarci ora o usarlo
ora devi solo essere pronto quando le cose
iniziato quando è un buon momento per iniziare
usando quelle cose molto avanzate proprio io
significa così così grits interessante perché
è tutto lì, ma non possiamo
a meno che tu non sia io a dirlo agli utenti
prendere una piattaforma web sperimentale
caratteristiche flag e la cosa con griglia è
è molto probabile che sta andando a finire
all’inizio del prossimo anno, ma quello
non può essere garanzia di conoscere alcun browser
potrei decidere che ce ne fossero alcuni
showstopper con prestazioni o
qualcosa e non spedirlo fino a dopo
l’anno penso che valga sicuramente la pena
iniziando a imparare ora perché quando
spedisce sta per atterrare praticamente
completo su quei browser così
c’è una buona possibilità e in particolare
se sai che hai un caso d’uso per
che l’implementazione in Chrome
interessante è stato pagato da
Bloomberg hanno pagato l’open source
consulenza o Galia per svilupparlo e
metterlo in battito di ciglia in modo che abbiano ovviamente
un uso per questo e molto molto acuto da vedere
là fuori, quindi vale sicuramente la pena avere
uno sguardo a una grande speculazione c’è molto da fare
e se puoi iniziare a ottenere una testa
iniziare e capire la griglia sarà
utile a voi sicuramente tra un anno
non è qualcosa che anche una volta
nei browser non è qualcosa che vorrei
suggerire poli riempimento ciò che vorrei
suggerisco è che si inizia a usarlo per
la griglia di componenti è brillante per la posa
piccoli componenti e piace davvero
tweaking l’allineamento e ottenere un
bella esposizione di cose e quando lavori
su una specie di micro livello è più facile
ricorrere a un display più semplice per
cose che non supportano e una volta che siamo
parlando del 7080 percento delle persone
avere una rete che potremmo comprare
attraverso l’ anno prossimo sai che ne fa di più
senso per iniziare a conoscere la funzione di utilizzo
le query rilevano il supporto della griglia do a
layout più bello sai migliorare un planare
uno penso in genere usando roba e
valorizzare il più possibile piuttosto
di cercare di fare qualsiasi brutto tipo di poli
il riempimento di questa roba è probabilmente a
migliore idea grazie
quando eseguo il test in JavaScript
come nel contenuto di carico pigro mentre loro
darle a un annuncio di importazione in determinati annunci
Supporta che verrebbe caricato ogni
single single time c’è un pensiero in
la specifica su come devono agire gli user-agent
trattatemi, non sono sicuro di no
pensaci e questo è sì
qualcosa che potresti fare non faccio niente
nella specifica che in particolare avrebbe trattato
con quello sì, è interessante
pensiero interessante dovremmo parlare di
va bene altre domande
okay e grazie operatore grazie
[Applausi]
Please follow and like us: