CSS se še naprej hitro razvija, vsako leto se dodajajo nove funkcionalnosti in zmogljivosti, ki omogočajo bolj dinamično spletno oblikovanje in poenostavljajo razvoj. V članku je opisanih nekaj najbolj zanimivih sprememb, ki znatno olajšajo pisanje in oblikovanje.

Ena izmed novosti, ki precej pripomore enostavnosti pisanja stilov je gnezdenje. Gnezdenje je bilo predhodno že mogoče z uporabo preprocesorjev, kot sta SASS in LESS. CSS gnezdenje se od ostalih razlikuje po tem, da je procesirano direktno v brskalniku in ne potrebuje predhodne kompilacije. Gnezdenje zmanjša ponavljanje pisanja selektorjev in naredi kodo bolj berljivo ter lažjo za vzdrževanje.

article {

  h1 {

    color: #4b82aa;

  }

  p {

    color: #666666;

  }

}

V zgornjem primeru sta targetirana h1 in p elementa, ki se nahajata znotraj elementa article. Spodnji primer prikazuje kako izgleda koda, ko jo brskalnik sprocesira.

article h1 {

color: #4b82aa;

}

article p {

color: #666666;

}

CSS gnezdenje je trenutno podprto le v najnovejših brskalnikih, zato je za širšo podporo za enkrat še vedno bolje uporabljati SASS ali LESS.

Selektor :has() predstavlja velik napredek pri uporabnosti CSS-ja, saj omogoča urejanje nadrejenih elementov na podlagi podrejenih, kar je bilo prej mogoče le z uporabo JavaScripta. Če želimo na določen način oblikovati nadrejene elemente, ki vsebujejo specifične elemente, je bilo prej potrebno najprej poiskati element, se nato premakniti na nadrejeni element in mu dodati specifičen class ali stile, s selektorjem :has() pa se vsebovanje lahko preveri direktno v CSSju. V spodnje primeru je dodan padding-bottom vsem elementom s clsssom vrstica, ki vsebujejo elemente h2.

.vrstica:has(h2) {

padding-bottom: 10px;

}

Selektor :has() se lahko dodatno kombinira s selektorjem :not(), s katerima lahko oblikujemo elemente, ki ne vsebujejo specifičnih podrejenih elementov.

.vrstica:not(:has(h2)) {

    padding-bottom: 20px;

}

Selektor :has() je sedaj že zelo dobro podprt in deluje v večini brskalnikov in na večini naprav.

Še ena novost v CSSju je @layer, ki omogoča združevanje skupin slogov v plasti za večkratno uporabo. @layer omogoča določanje vrstnega reda prioritet in lahko v veliko primerih nadomesti !important, kadar imamo več slojev lahko tako specifično definiramo prioriteto. Na vrhu najprej definiramo vrstni red slojev, nato pa določimo stile za vsak posamičen sloj. Ker je na začetku naveden sloj clanek za slojem stran, bo ta prepisal sloj stran.

@layer stran, clanek;

@layer clanek {

  p {

    font-size: 14px;

  }

}

@layer stran {

  p {

    font-size: 16px;

  }

}

Na tak način, z uporabo slojev lahko posledično povečamo prioriteto stilov  v primerjavi z obstoječimi. Obstoječe sloge lahko dodamo v sloj 'stari', nove pa v 'novi' in določimo, da so novi dodani za starimi, tako lahko povozimo stare stile brez uporabe značke !important.

Container queries omogočajo elementom prilagajanje glede na velikost nadrejenega elementa, za razliko od media querijev, ki omogočajo prilagoditev glede na velikost vmesnika.  Uporablja se jih tako, da se najprej določi kontekst kontejnerja, nato pa uporabi lastnosti container-type in container-name. V primeru je zaposleni nadrejeni, element z classom oseba pa podrejeni. V prvem primeru je določeno oblikovanje za elemente z classom oseba, ki se nahajajo v elementu, ki je širši od 1200px, nadrejenemu elementu pa je treba določiti container-type.

.zaposleni {

    container-type: inline-size;

}

@container (min-width: 1200px) {

    .oseba {

        width: 25%;

    }

}

V drugem primeru je prikazano še poimenovanje kontejnerjev, ki omogoča targetiranje specifičnih elementov. V zadnje primeru pa je prikazan še krajši način določanja enot.

.zaposleni {

    container-type: inline-size;

    container-name: zaposleni;

}

@container zaposleni (min-width: 1200px) {

    .oseba {

        font-size: 2em;

    }

}

.zaposleni {

    container: zaposleni / inline-size;

}

Poleg tega so za kontejnerje na voljo tudi posebne enote za velikost, tako kot so enote za viewport (vh, vw). Enota cqw, predstavja 1% širine nadrejenega elementa, cqh 1% širine, cqi 1% inline velikosti, cqb 1% block velikosti, cqmin manjša od cqi ali cqb in cqmax večja vrednost od cqi ali cqb.

CSS se bo še naprej hitro razvijal, ne glede na to, kakšne vrste spletnih mest bomo gradili v prihodnosti, bo čist in semantično pravilen CSS ostal bistveni del oblikovanja funkcionalnih in privlačnih uporabniških vmesnikov. Nekatere novosti znatno olajšajo razvoj in jih je dobro poznati, tudi če jih, zaradi širše podprtosti, trenutno še ne moramo uporabljati.

Imate dodatna vprašanja?

Za več informacij smo vam vedno z veseljem na voljo. Pišite nam na info@kompas-xnet.si ali nas pokličite 01 5136 990.