CSS - @supports - Provera podržanosti svojstava

Uvod

U praktičnom smislu, nije potrebno previše brinuti o tome da li će CSS svojstva koja koristimo u web dizajnu biti podržana u browserima preko kojih korisnici pristupaju sajtovima. Većina svojstava podržana je duže vreme unazad i korisnici ('načelno') redovno ažuriraju svoje browsere (ako ništa drugo, programi sami 'insistiraju' na tome minimum jednom sedmično).

Međutim, u situacijama kada je potrebno da budemo sasvim sigurni da će određeno svojstvo biti podržano, i (naravno), ukoliko je potrebno obezbediti podršku za (mnogo) starije verzije programa koje bi neki od posetilaca sajta mogli koristiti pod određenim okolnostima, mehanizam provere je svakako dobrodošao.

Provera se obavlja preko CSS direktiva @supports i @supports not.

Provera podržanosti

Pogledajmo u sledećem primeru CSS kod koji proverava da li browser podržava upotrebu pseudoklase first-letter:

		
@supports (::first-letter) {
	p:first-child:first-letter { 
		float:     left;
		font-size: 60px;
		padding:   8px 4px 0 0;
     }
}

Slika 1. - CSS direktiva @supports, preko koje se proverava da li je određeno svojstvo podržano u browseru u kome se sajt prikazuje (u gornjem primeru, proverava se da li browser podržava upotrebu pseudoklase first-letter).

Ukoliko browser podržava navedenu pseudoklasu, dobićemo efekat predimenzionisanog prvog slova u prvom pasusu ("drop cap"), a ako browser ne podržava svojstvo, najprostije rečeno - neće se desiti "ništa" (prvo slovo će biti ispisano na regularan način).

U gornjem primeru, proveravali smo da li browser podržava svojstvo novijeg datuma, preko koga se može postići dodatna funkcionalnost (tj. praktično smo se bavili 'ulepšavanjem stranice').

Nije teško zaključiti da, ako isti pristup primenimo na svojstvo koje obezbeđuje osnovnu funkcionalnost ....

		
@supports (display: flex) {
	#div_1 {
		display:         flex;
		flex-direction:  column;
		justify-content: flex-start;
		align-items:     stretch;
	}
}

Slika 3. - Ukoliko upotrebimo direktivu "@supports" da proverimo da li browser podržava određeno svojstvo, a pri tom ne obezbedimo "rezervni" mehanizam koji će proraditi ukoliko svojstvo nije podržano, bićemo u nezavidnoj situaciji!

.... nećemo mnogo postići.

Ukoliko je svojstvo podržano, biće sve u redu, ali, ukoliko svojstvo nije podržano: niti smo uspeli da obezbedimo određenu funkcionalnost, niti da ponudimo 'rezervni plan'.

Jedan od praktičnih načina za rešavanje prethodno navedenog problema (rekli bismo, najpraktičniji način), može biti to da napišemo dva selektora:

regularni selektor, koji nije obuhvaćen direktivama koje proveravaju podržanost
selektor koji je definisan unutar direktive @supports not, koji će važiti ako svojstvo nije podržano (pri čemu takav selektor treba da sadržati samo svojstva koja se razlikuju u odnosu na prvi selektor, to jest, svojstva koja obezbeđuju funkcionalnost u starijim browserima)

		
// Ukoliko sve 'prođe po planu', odeljak
// sa id-om div_1 poprimiće svojstva
// preko donjeg selektora:

#div_1 {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
}

// Ukoliko nešto 'krene naopako',
// aktiviraće se selektor iz odeljka
// '@supports not' (i pri tom će biti
// aktivirana i sva svojstva iz gornjeg
// selektora koja browser prepoznaje)

@supports not (display: flex) {
	#div_1 {
		display: block;
		align:   center;
	}
}

Slika 4. - Primer upotrebe CSS direktive "@supports not".

Moguće je (naravno), koristiti i dva odeljka @supports (jedan bez sufiksa not, u kome može biti definisan osnovni CSS kod, i drugi, sa sufiksom not, koji bi služio kao "rezerva"), međutim - u širem kontekstu - takav način zapisivanja CSS koda je previše "zvaničan", to jest, nepotreban u većini situacija, i stoga pristup sa slike #4 praktično predstavlja optimalno rešenje.

Kratak rezime

Kao što smo već naveli na početku, svojstva flexbox, grid i sl, podržana su duži niz godina unazad, i stoga implementacija navedenih svojstava najčešće ne podrazumeva posebne provere, ali, ako baš "insistiramo" - opcija za proveru postoji.

Za sam kraj, jedan link:

caniuse.com

U pitanju je sajt preko koga uvek možete proveriti da li određena verzija nekog od programa za pregled internet sadržaja, podržava određena CSS svojstva ili HTML tagove.

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.