CSS – zanimive tehnike preteklega leta

CSS (Cascading Style Sheets) je preprost slogovni jezik za oblikovanje spletnih strani. Zaradi vedno večjih zahtev glede oblikovanje se konstantno spreminja in nadgrajuje. Nekaj zanimivih novih funkcionalnosti, ki so bile dodane v prejšnjem letu so večja začetna črka, variable fonts, logične lastnosti in vrednosti, scroll snapping, test za podporo v brskalnikih in izboljšave za media query.

Začetna črka omogoči enostavno ustvarjanje večje prve črke, ki lahko tudi zasede nižje vrstice. Da spremenimo velikost črke uporabimo selektor ::first-letter , ki izbere prvo črko, nato pa jo oblikujemo na način, da naprej vnesemo vrednost za višino vrstic, ki jih črka zaseda in nato vrednost za število vrstic, ki jih zaseda v globino.

p::first-letter {
    -webkit-initial-letter: 4 3;
    initial-letter: 4 3;
}

V tem primeru bo prva črka visoka štiri vrstice in bo segala do tretje vrstice. Če želimo obnoviti privzeto vrednost uporabimo vrednost initial-letter: normal;. Trenutno je funkcionalnost delujoča le v brskalniku Safari.

Do sedaj je bilo pri uporabi pisave po meri treba prenesti za vsako pisavo, ki jo želimo uporabiti različne vrste iste pisave (različne vrste debeline, poševno), kar zahteva več klicev in večje število datotek za prenos. Spremenljiva pisava (variable fonts) je datoteka vrste OpenType, ki vsebuje vse oblike enega fonta v eni datoteki in poenostavi integracijo fonta in zmanjša število datotek, ki jih mora brskalnik prenesti.

Pri uporabi vrednosti za višino in širino bo element ohranil velikost ne glede na usmerjenost, zrcaljenje in obračanje. Če se element, ki nima enake širine in višine, obrne, za četrtino kroga, se bo podrla postavitev sosednjih elementov. Z logičnimi lastnostmi pa lahko nadzorujemo velikosti elementa in prostora, ki ga zasede v logičnih smereh in s tem lažje omejimo prostor, ki ga element zaseda. Na izbiro sta dve lastnosti, block-size za navpično velikost elementa in inline-size za vodoravno velikost elementa.

block-size: 100px;
inline-size: 200px;

Scroll snapping je funkcija, ki omogoča, da se pri pomikanju vrh zaslona ali elementa ustavi (zaskoči) na določeni točki, na primer na naslovu ali vrhu elementa. V elementu, ki se pomika se določi tip, ki je lahko brez (none), v bližini (proximity) in obvezno (mandatory).

scroll-snap-type: y mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: y mandatory;

Če je izbran none se ne bo ustavilo na izbranem elementu, če je izbran proximity se bo ustavilo na elementu le ko smo v bližini dela elementa, v primeru mandatory pa bo mogoče pomikanje le med elementi, ki imajo nastevljeno lastnost scroll-snap-align. Možnosti za scroll-snap-align pa so none, start, end in center.

scroll-snap-align: none;
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;

CSS je razvil test za podporo novih funkcionalnosti v brskalnikih (feature query). Na ta način se lahko preveri ali funkcija v brskalniku deluje, če deluje bo uporabljena drugače pa ne.

@supports (display: grid) {
    div {
        display: grid;
    }
}

Media query se uporablja za oblikovanje elementov pri različnih medijih. Dodatne funkcije olajšajo pregled glede velikosti saj omogočajo izbiro velikosti glede na obseg.

Do sedaj se je lahko obseg določil z uporabo predpon min- in max-

@media (min-width: 800px) and (max-width: 1000px)

Z novimi funkcionalnostmi pa je mogoče tudi z uporabo logičnih operatorjev, kar precej poenostavi zapis in pregled določanja velikosti.

@media (800px <= width <= 1000px)

Ker so te funkcije novejše so podprte le v zadnjih verzijah nekaterih modernih brskalnikov, ko so Chrome, Firefox, Safari. Nekateri brskalniki pa določenih funkcij ne integrirajo in njihova uporaba ni in tudi ne bo mogoča.