Novosti v CSS-u

Kaj prinašajo nove specifikacije?

45 min

keynote.weingerl.com

CSS spremenljivke

CSS custom properties

ideja iz predprocesorjev – SASS ($) in LESS (@)
spreminjanje med izvajanjem
(preko JS ali @media pravil)

ideja o CSS spremenljivkah prišla iz priljubljenih predprocesorjev kot sta SASS in LESS.
pomembna razlika: SASS/LASS spremenljivke se pretvorijo v statične vrednosti pri pretvorbi v CSS
se ne morejo spreminjat v realnem času oz. pri uporabi strani
CSS spremenljivke so prave spremenljivke, katerih vrednost se lahko spreminjajo tudi med uporabo spletne strani.
To pomeni, da lahko spremenljivke spreminjamo v realnem času preko JS ali @media pravil.
spreminjanje vrednosti pri preklopu teme – tematiziranje spletne strani

Lokalna uporaba spremenljivk

            
                section.hero {
                  --main-color: orange;
                }

                p {
                  color: var(--main-color);
                }

Dva načina definiranja
Prvi način: znotraj pravila namesto lastnosti zapišemo ime spremenljivke pred katero zapišemo --.
Spremenljivka je dostopna znotraj elemena, ki ga izbere uporabljen selektor in vseh njegovih otrok.
Spremenljivko nato uporabimo z funkcijo var. V tem primeru smo vrednost spremenljivke main-color dodelili vsem p elementom.
Ker smo pri definiranju spremenljivke uporabili section.hero, bo spremenljivka dostopna samo znotraj tega elementa. Drugi odstavek bo tako ostal privzete barve in ne bo oranžen.
Če spremenljivka ni dostopna pri klicanju oz. uporabi, dobimo neveljavno vrednost (invalid value)

Privzeta vrednost

            
                section.hero {
                  --main-color: orange;
                }

                p {
                  color: var(--main-color, red);
                }

Globalna uporaba spremenljivk

            
                :root {
                  --main-color: orange;
                }

                p {
                  color: var(--main-color);
                }

Definiranje s @property

syntax values – vrednosti tipi

Uporaba znotraj JS

imena so občutljiva na velike in male črke
uporabljene so lahko samo kot vrednosti
ne moremo jih uporabiti pri imenovanju lastnosti, selektorjih, definiranju medijskih poizvedb (@media), poizvedb o vsebniku (@container) ...

ne moremo jih uporabiti za interpolacijo, kot pri SASS ali LESS #{$variable} .icon-#{$size} { width: $size; }

Zakaj bi uporabljali spremenljivke?

CSS gnezdenje

CSS Nesting

Dosedanja praksa
descendent selector

Gnezdenje
z uporabo operatorja &

Gnezdenje brez operatorja &

Obvezna uporaba &

Pripenjanje ugnezdenih selektorjev

appended nesting selector

Ugnezdena @ pravila

@media, @support, @container ...

Zelo priročno je gnezdenje at-pravil, kot so @media, @support, @container, s čimer se izognemu ponavlanju selektorjev.
Na levi prikazana dosedanja praksa
Najprej smo elementu dodelili splošne stile, ki veljajo vedno, ne glede na velikost predstavitvenega polja
Nato pa smo za vsako točko preloma oz. breakpoint definirali @media pravilo. Znotraj @media pravila smo morali ponoviti selektor
V prikazanem primeru bo element z razredom card privzeto širine 90%, ko bo širina predstavitvenega polja najmanj 768px 50%, od 1280 px pa samo 25%
S CSS gnezdenjem lahko kodo naredimo veliko bolj berljivo in pregledno
V tem primeru smo prišli do enakega rezultata.
Izognili smo se pa ponavljanju selektorja

Zakaj bi uporabljali gnezdenje?

Poizvedbe o vsebniku

container queries

dosedaj smo odzivni dizajn vzpostavili z uporabo medijskih poizvedb (media queries), ki so se nanašale na velikost predstavitvenega polja oz. okna brskalnika
poizvedbe o vsebniku pa nam omogočaja prilagajanje elementov glede na kontekst njihove uporabe , npr. glede na velikost njihovega starša oz. glede na prostor, ki ga imajo na voljo.
poizvedbe o vsebniku izvedemo zelo podobno kot medijske poizvedbe, s tem da namesto at pravila media uporabimo pravilo container.
pravilo container se nannaša na lastnosti elementa, ki smo ga določili da ima vlogo vsebnika oz. kontajnerja. Med oklepaji tako zapišemo pogoj, ki mora biti resničen da bo koda znotraj pravila upoštevana
preden se posvetimo sami implementaciji in kodi, bomo za lažje razumevanje pogledali pomembno značilnost CSS-a, ki je zelo pomembna za razumevanje poizvedb o vsebnikih in njihovo uporabo

Prva je ta, da so določene lastnosti elementov odvisne od njihovih podrejenih elementov – njihovih otrok oz. elementov, ki so vgnezdeni znotraj njih.
Tipični primer sta višina in širina elementa.
Višina se pri vseh elementih privzeto prilagaja njihovi vsebini, razen če je ekplicitno ne nastavimo.
Širina se privzeto pri inline elementih prilagaja vsebini, pri blokovnih pa zajema celotno širino. Ampak tudi to lahko spremenimo, če uporabimo vrednost fit-content, tako kot v prikazanem primeru
Zakaj menite, da je to pomembno za delovanje poizvedb o vsebniku?

Kaj bi se zgodilo, če bi glede na širino vsebnika spreminjali velikost pisave odstavka, ki je znotraj njega, pri tem bi pa širina vsebnika bila odvisna od njegove vsebine?
Tukaj imamo zelo preprosto html strukturo, div znotraj katerega se nahaja odstavek
Predpostavimo, da smo div-u določili vlogo kontajnerja in nastavili, da se njegova širina prilagaja njegovi vsebini. (width: fit-content)
Nato pa z poizvedbo pogojujemo velikost pisave p elementa, kot je prikazano. Torej bo privzeta velikost pisave p elementa 1rem, v primeru, da bo div manjše širine od 10 rem pa 3rem.
Kaj se bo zgodilo?
Pri prvem rendriranju, bo uporabljena privzeta velikost pisave, torej 1rem. Ker bo v tem primeru div element manjše širine od 10 rem kot je prikazano na prvi sliki, bo brsklanih upošteval stil znotraj container pravila in povečal velikost pisave na 3 rem
Posledično se bo širina diva povečala na 16 rem kot je prikazano
Ker bo pogoj znotraj kontajner pravila neresničen, bo brskalnik ponovno uporabil privzeto velikost pisave ....
Ujeli smo se z neskončno zanko... brskalnik bo v nedolgled preklapljal med velikostjo 1 rem in 3 rem ...

Ne moremo spreminjati lastnosti, ki jo merimo oz. na podlagi česar pogojujemo dizajn.

Z lastnostjo container type določimo kateri element bo imel vlogo vsebnika in na podlagi katerih njegovih dimenzij bo poizvedba storjena.
V tem primeru sem vlogo vsebnika dodelil elementu article z razredom card.
Zakaj točno sem uporabil vrednost inlne-size, bom razložil nekoliko kasneje
Ker sem za vsebnik določil article z razredom card, lahko uporabim poizvedbo pri vseh elementih, ki so ugnezdeni znoraj njega (wrapper, image in text)
V tem primeru smo jo uporabili pri divu z razredom card__wrapper, da sem smer flexbox-a spremenili iz privzete vrednosti v column, ko je širina vsebnika manjša ali enaka 30 rem.
Poizvedba o vsebniku se nanaša na prvi predhodni element z lastnostjo container type. V našem primeru je to element article z razredom card.

Imenovanje vsebnika

container-type

size: poizvedba na podlagi inline in block dimenzij (širine in višine)
širina in višina vsebnika sta neodvisni od ugnezdenih otrok
inline-size: poizvedba na podlagi inline dimenzije (širine)
širina vsebnika je neodvisna od ugnezdenih otrok
normal: vsebnik pri katerem poizvedba ne bo na podlagi njegove velikosti

Poglejmo si bolj podrobno katere vrednosti lahko uporabimo pri lastnosti container-type
Če izberemo vrednost size, bomo poizvedovali o višini in širini vsebnika. Posledično se velikost vsebnika ne bo več prilagajala glede na velikost njegovih otrok. Element se bo sesedel – njegova višina po enaka 0, če je ekplicitno ne nastavimo.
Z vrednostjo inline-size (inline dimenzija je tipično širina) definiramo, da samo širina elementa ni odvisna od njegove vsebine. Višina ostane privzeto odvisna od vsebine elementa.
V primeru, da izberemo vrednost normal dizajna elementov ne bomo pogojevali na podlagi njegove velikosti ampak drugih karakteristih. Npr. vrednosti spremenljivk, velikosti pisave, uporabljene teme ...

Zakaj bi uporabljali poizvedbe o vsebniku?

Kaskadne plasti

Cascade Layers

@layer theme

@layer components

@layer normalizemain.css

Kaskadne plasti

Kaskada

Izvor slogov in pomembnost
Specifičnost selektorjev
Položaj oz. vrstni red pravil
Kaskadne plasti

Kakšne barve sem?

uporabnik (vtičnik)

avtor (razvijalec)

če pogledamo kar na konkretnem primeru.
Kakšne barve bo besedilo in kakšne ozadje, če bo preko vtičnika vključeno pravilo na levi, mi pa dodamo pravila na desni
najprej bo brskalnik preveril, če se vsa pravila nanašajo na isti element ...
nato bo pogledal vir in pomembnost
ker znotraj slogov vtičnika nimamo pomembnih informacij, bo v tem primeru brskalnik dal prednost našim deklaracijam
pravilo vtičnika lahko sedaj zanemarimo in se posvetimo pravilom na desni
pri lastnosti background je ena deklaracija označena kot pomembna. Zato bo imela prednsot ne glede na specifičnost uporabljenega selektorja oz. vrstni red.
ozadje bo aquamarine
pri lastnosti color pa bo brskalnik upošteval specifičnost uporabljenega selektorja in vrstni red pravil. Ali sta selektorja iste specifičnosti?
ne, zato bo upošteval pravilo s selektorjem najvišje specifičnosti, in to je class selektor .note
besedilo bo belo

Kakšne barve sem?

uporabnik (vtičnik)

avtor (razvijalec)

Pravilo @layer

plast lahko definiramo z uporabo at pravila @layer
Tukaj smo deniirali dve plasti in v vsaki od njih odstavku določili barvo teksta
v prvi plasti smo določili, da naj bo rdeče barve, v drugi pa oranžne
Kaj menite kakšne barve bo besedilo, rdeče ali oranžne?
Besedilo bo oranžne barve, saj bo deklaracija v zadnji plasti imela prednost.
to da je pri prvi plasti selektor bolj specifičen v tem primeru ni pomembno
če bi oba pravila zapisali izven plasti, bi bil odstavek rdeč, v tem primeru pa bo oranžen
Vrstni red je bolj pomemben kot specifičnost uporabljenega selektorja. Znoraj posamesne plasti ima specifičnost selektorjev še vedno isto vlogo

Deklaracija @layer

Funkcija layer()

Slogi izven plasti

Ugnezdene plasti

Plasti lahko tudi ugnezdimo
Pri tem moramo pazit, saj bodo stili definirani izven ugnezdenega pravila imeli prednosti pred stili znotraj ugnezdenega pravila!
V tem primeru smo najprej ustcvarili dve plasti, nato znotraj plasti komponent ugnezili plast note in slider
V tem primeru bo odstavek modre barve, saj iamjo stili definirani izven ugnezdenega pravila prednost pred stili znotraj ugnezdenega pravila!
Morda v nasprotju s pričakovanji imajo tako generalna pravila vedno prednost pred ugnezdenimi.
še enkrat specifičnost selektorja tukaj ne igra vloge

Plasti & !important

	Lokacija	Pomembnost
1	stili znotraj plasti	normal
2	stili izven plasti	normal
3	inline `stili`	normal
4	animations
5	stili izven plasti	`!important`
6	stili znotraj plasti	`!important`
7	inline `stili`	`!important`
8	transitions

Zakaj bi uporabljali kaskadne plasti?

uporaba knjižnic, ogrodij, vtičnikov ... Še posebej če jih nismo sami razvili ... Npr. bootstrap, material UI ...
delo več razvijalcev, vsak svoj način razmišljanja in specifičen slog
razvijanje v okviru obstoječih rešitev, nadgradnja – npr. razvoj teme za wordpress, ki temelji na obstoječi temi ...
V teh primerih smo se pogosto znašli pri uporabi zelo specifičnih selektorjev in uporabi direktive !important
Zadeva je bila še bolj problematična, če je kdo želel za nami prepisat določene sloge ...

Novosti v CSS-u

Kaj prinašajo nove specifikacije?

CSS spremenljivke

CSS custom properties

Lokalna uporaba spremenljivk

Privzeta vrednost

Globalna uporaba spremenljivk

Definiranje s @property

Uporaba znotraj JS

Zakaj bi uporabljali spremenljivke?

CSS gnezdenje

CSS Nesting

Dosedanja praksa descendent selector

Gnezdenje z uporabo operatorja &

Gnezdenje brez operatorja &

Obvezna uporaba &

Pripenjanje ugnezdenih selektorjev

Ugnezdena @ pravila

Zakaj bi uporabljali gnezdenje?

Poizvedbe o vsebniku

container queries

Ne moremo spreminjati lastnosti, ki jo merimo oz. na podlagi česar pogojujemo dizajn.

Imenovanje vsebnika

Imenovanje vsebnika

container-type

Zakaj bi uporabljali poizvedbe o vsebniku?

Kaskadne plasti

Cascade Layers

Kaskadne plasti

Kaskada

Kakšne barve sem?

Kakšne barve sem?

Pravilo @layer

Deklaracija @layer

Funkcija layer()

Slogi izven plasti

Ugnezdene plasti

Plasti & !important

Zakaj bi uporabljali kaskadne plasti?

CSS barve

CSS Colors

Nova sintaksa

Neodvisni barvni prostori

Funkcija color()

Izbira barvnih prostorov

Funkcija color()

Izbira barvnih prostorov

Relativne barve

Relativne barve

Mešanje barv

color-mix()

Barvne sheme

podpora barvnih tem – color-scheme

Barvne sheme

pogojno oblikovanje z medijskimi poizvedbami

Barvne sheme

pogojno oblikovanje s funkcijo light-dark()

Vprašanja?

Hvala za pozornost

Dosedanja praksa
descendent selector

Gnezdenje
z uporabo operatorja &