Kaj se je zgodilo

V svetu spletnega oblikovanja se pripravlja nova zmogljiva lastnost CSS z imenom border-shape. Kot poroča CSS-Tricks v članku Get Ready For the Powerful CSS border-shape Property!, ta novost sledi nedavno predstavljenima funkciji `shape()` in lastnosti `corner-shape`, ki sta že razširili možnosti risanja oblik neposredno v CSS. Skratka, brskalniki dobivajo vse bogatejši nabor orodij za ustvarjanje netipičnih oblik, robov in kotov brez uporabe slik ali zapletenih rešitev.

Za lastnika slovenskega podjetja to na prvi pogled zveni kot suha tehnična podrobnost. A v resnici gre za spremembo, ki bo v prihodnjih letih vplivala na to, kako sodobno, hitro in izpiljeno bo videti tvoje spletno mesto. V nadaljevanju razložimo, kaj ta razvoj pomeni v praksi in zakaj se ti splača biti na tekočem.

Ozadje: zakaj so oblike v CSS sploh pomembne

CSS je jezik, s katerim se določa videz spletne strani, torej barve, razmiki, tipografija in oblike elementov. Dolga leta so bili robovi elementov omejeni na pravokotnike z zaobljenimi koti. Če je oblikovalec želel poševno črto, valovit rob, izrezan kot ali kakšno bolj domiselno obliko, je moral posegati po enem od naslednjih obhodov:

  • Slike in ikone, ki jih je bilo treba naložiti dodatno in so upočasnjevale stran.
  • SVG grafike, ki so sicer prilagodljive, a zahtevajo več znanja in vzdrževanja.
  • Trike s senčenjem, gradienti in obračanjem elementov, ki so pogosto krhki in se lomijo ob spremembah.

Vsak od teh pristopov ima svojo ceno: več kode, počasnejše nalaganje, težje vzdrževanje in več priložnosti za napake na mobilnih napravah. Zato je vsaka nova lastnost, ki omogoča risanje oblik neposredno v CSS, pomemben korak naprej. Manj obhodov pomeni čistejšo kodo, hitrejše strani in bolj dosleden videz.

Kaj konkretno prinaša border-shape

Ime `border-shape` nakazuje, da bo lastnost namenjena oblikovanju robov elementov v bolj svobodnih oblikah, kot smo jih bili vajeni doslej. Skupaj s funkcijo `shape()` in lastnostjo `corner-shape` gre za družino orodij, ki oblikovalcem omogoča, da poševne, valovite, izrezane ali kako drugače stilizirane robove opišejo z nekaj vrsticami kode namesto z zunanjimi datotekami.

Ker gre za lastnost, ki je še v fazi uvajanja, je ključno razumeti eno stvar: podpora v brskalnikih se razvija postopoma. To pomeni, da se takšne novosti uvaja premišljeno, z rezervnimi rešitvami za starejše brskalnike, da nihče od tvojih obiskovalcev ne ostane s pokvarjenim videzom.

Kaj to pomeni za tvoje malo ali srednje podjetje

Verjetno se sprašuješ, zakaj bi te kot lastnika podjetja to sploh zanimalo. Odgovor je preprost: videz in hitrost spletne strani neposredno vplivata na to, ali ti obiskovalec zaupa in ali postane stranka.

1. Bolj sodoben videz brez teže

Netipične oblike, poševni robovi in mehki prehodi dajejo spletni strani sodoben, premišljen videz. Doslej so takšni detajli pogosto pomenili dodatne slike, ki so upočasnjevale nalaganje. Z novimi lastnostmi CSS je mogoče enak učinek doseči brez dodatnih datotek. Tvoja stran bo torej lahko hkrati lepša in hitrejša, kar je redka kombinacija.

2. Hitrost je denar

Vsaka odvečna slika, ki jo mora brskalnik naložiti, podaljša čas, preden se obiskovalcu prikaže vsebina. Počasne strani odganjajo obiskovalce in slabše kotirajo na Googlu. Ko se okrasni elementi narišejo neposredno v CSS namesto s slikami, se zmanjša število zahtevkov in velikost strani. To pomeni hitrejše nalaganje, boljšo uporabniško izkušnjo in posredno tudi boljšo uvrstitev v iskalnikih.

3. Lažje vzdrževanje in nižji stroški dolgoročno

Ko so oblike zapisane v kodi in ne v slikah, je spremembe veliko lažje uvesti. Sprememba barve, oblike ali razmika je stvar nekaj vrstic, ne pa novega risanja grafike v grafičnem programu. To pomeni, da so posodobitve hitrejše in cenejše, tvoje spletno mesto pa dlje ostane sveže.

4. Konkurenčna prednost

Večina slovenskih malih podjetij ima spletne strani, ki so videti povprečno in zastarelo. Če tvoja stran izstopa s premišljenimi detajli, ki delujejo tekoče na vseh napravah, si takoj korak pred konkurenco. Prav tu se izplača sodelovanje s studiom, ki spremlja tovrstne novosti in jih zna uporabiti premišljeno, ne pa na silo.

Kje je past, na katero moraš paziti

Nove lastnosti CSS so mamljive, a pri njih velja previdnost. Naj naštejemo najpogostejša tveganja, ki jih vidimo pri strankah:

  • Prezgodnja uporaba brez rezervne rešitve. Če se okrasni elementi prikazujejo samo v najnovejših brskalnikih, del obiskovalcev vidi pokvarjeno stran. Vedno potrebuješ zasnovo, ki deluje tudi tam, kjer novost še ni podprta.
  • Pretiravanje z okraski. Zato ker nekaj zmoreš, še ne pomeni, da moraš. Preveč nenavadnih oblik zmede obiskovalca in odvrne pozornost od tega, kar je res pomembno, torej od tvoje ponudbe in klicev k dejanju.
  • Dostopnost. Vsaka vizualna finesa mora delovati tudi za uporabnike s slabšim vidom ali na počasnejših napravah. Lep videz nikoli ne sme iti na račun uporabnosti.

Ravno zato ni dovolj le poznati novo tehnologijo. Treba jo je znati uporabiti v pravi meri in ob pravem času. Prav to je razlika med spletno stranjo, ki je videti sodobno in deluje brezhibno, ter tisto, ki je polna trikov, a se lomi.

Kako pri Carpolab gledamo na tovrstne novosti

Pri Carpolab spremljamo razvoj spletnih tehnologij, ker verjamemo, da mora imeti vsako slovensko podjetje spletno stran, ki je sodobna, hitra in vzdržljiva skozi čas. Nove lastnosti, kot je `border-shape`, uvedemo takrat, ko so pripravljene za resnično uporabo, in vedno z rezervno rešitvijo, da nihče od tvojih obiskovalcev ne ostane praznih rok.

Naš pristop je preprost: tehnologija je v službi tvojih poslovnih ciljev, ne obratno. Zanima nas, ali tvoja stran hitreje nalaga, ali izgleda bolje od konkurence in ali obiskovalce spreminja v stranke. Okrasni detajli imajo pri tem vlogo le, če tem ciljem služijo.

Če razmišljaš o novi spletni strani ali prenovi obstoječe, ti okvirno ceno hitro izračunaš v našem kalkulatorju. Tako dobiš občutek za obseg in vložek, še preden se pogovoriva o podrobnostih.

Kaj naredi zdaj

Ni ti treba postati strokovnjak za CSS. Dovolj je, da razumeš širšo sliko: spletne tehnologije napredujejo hitro in stran, ki je bila videti sodobno pred petimi leti, danes deluje zastarelo. Vlaganje v spletno mesto ni enkraten strošek, ampak stalna naložba v podobo tvojega podjetja.

Praktičen nasvet: kadar naslednjič posodabljaš spletno stran, vprašaj svojega izvajalca, kako skrbi za hitrost, dostopnost in dolgoročno vzdržljivost. Če se pogovor vrti le okoli tega, kaj je trenutno v modi, brez razmisleka o rezervnih rešitvah in uporabniku, je to opozorilni znak.

Pogosta vprašanja

Ali moram takoj prenoviti spletno stran zaradi nove lastnosti CSS?

Ne. `border-shape` je novost, ki se šele uvaja, in ni razlog za paniko. Je pa dober povod za razmislek, ali tvoja obstoječa stran sledi sodobnim standardom glede hitrosti in videza. Če je stara več let, je verjetno čas za prenovo iz širših razlogov.

Ali bo nova lastnost delovala v vseh brskalnikih?

Podpora se uvaja postopoma, zato mora vsaka resna izvedba vsebovati rezervno rešitev za starejše brskalnike. Pravilno zasnovana stran deluje povsod, novejši detajli pa se prikažejo le tam, kjer so podprti. Prav za to poskrbimo pri gradnji.

Bo moja stran zaradi teh oblik počasnejša?

Ravno nasprotno. Ker se oblike narišejo neposredno v CSS namesto s slikami, se pogosto zmanjša velikost strani in število zahtevkov, kar pomeni hitrejše nalaganje. Ključno je le, da se tehnologija uporabi premišljeno in ne za vsak okrasek posebej.

Vir: CSS-Tricks