CSS Prethodni odabiri braće i braće i kako ih lažno poduprijeti

Ako ste ikada koristili CSS-ove birače braće, znate da postoje samo dva. Kombinator + braća odabire prvu utakmicu koja dolazi odmah nakon toga, a ~ daljnji bračni kombinator odgovara svim onima koji dolaze nakon.
Ali nema načina da odaberete ono što je prije bilo. Ni selektori roditelja ili prethodni birali braće ili sestre jednostavno nisu stvar.

Znam da to želiš, znaš da i ja to želim, ali oštra je istina da oni ne postoje (a vjerojatno nikad neće). Postoji milijun postova o whysima. Postoje čak i prijedlozi kako ih provesti. Ali zaglavili smo u jednosmjernoj obradi CSS pravila, najvjerojatnije da nas zaštiti od „nedostatka stručnosti“, zaglavimo u ponovnim tokovima, pa čak i beskonačnim petljama.

Srećom, kao i kod većine CSS ograničenja, možemo to lažirati.

Prvo što treba razmotriti je zašto želimo da započnu prethodni braća i sestre.
U obzir dolaze dva slučaja:

  1. Moramo odabrati sve braće i sestre određenog elementa, a sljedeći ~ kombinator braće samo odabire one koji će doći poslije.
  2. Moramo odabrati samo braću i sestre koji su došli ranije

1. Odabir svih braće i sestara

Ponekad trebamo odabrati i prethodnu i sljedeću braću i sestre. Da bismo to postigli, zapravo možemo odabrati roditelja i koristiti neke trikove oko njega.

Na primjer, da za odabir svih raspona u sljedećoj strukturi kad lebdimo bilo koji od njih, jednostavno bismo mogli upotrijebiti dječji selektor na pokazivaču miša. Obavezno onemogućimo pointer-događaje od roditelja i ponovo ga vratimo na djecu. Dakle, sve što želimo da se dogodi, aktiviraće se samo kad uđemo u dijete, a ne u roditelja.

Ako trebate odabrati sve braće i sestre, osim one koja lebdi, možete kombinirati prethodnu tehniku ​​s odabirom: a ne da biste je isključili.

Tipičan slučaj upotrebe za ovo su izbornici:

Gornji kôd će smanjiti neprozirnost svih

  • elemenata, osim onoga koji lebdi.

    Nadalje, možete upotrijebiti filtre poput tipova i n selektora da biste bili precizni na braću i sestre na koje želite utjecati.

    S nekim bi stylingom trebalo funkcionirati ovako:

    Imajte na umu: Ako ćete pokrenuti pokazivače-događaje: nijedan pristup, imajte na umu da se on ne može slagati s slaganjem (može vam omogućiti da odaberete elemente koji su "ispod" u redoslijedu slaganja). Također neće raditi u IE10 i niže, osim implikacije da će vam možda trebati događaji pokazivača za nešto drugo. Stoga budite posebno oprezni kada ga koristite.

    2. Odabir onoga što je prije bilo

    U ovom slučaju, možemo preokrenuti redoslijed na HTML-u i zatim ga sortirati natrag u CSS-u i upotrijebiti ~ sljedeći kombinator braće ili + susjedni bračni brat. Na ovaj ćemo način birati sljedeće braće i sestre, ali izgledat će kao da odabiremo prethodne.

    Postoji više načina da se to postigne. Najjednostavnija i vjerojatno najstarija promjena je pravca pisanja u našem spremniku:

    Ako vaši elementi trebaju prikazati stvarni tekst, uvijek ga možete obrnuti natrag:

    Ali, to može ispasti iz ruke na više načina. Srećom, moderni CSS alatni alat čini ga mnogo jednostavnijim i sigurnijim. Možemo samo koristiti Flexbox na spremniku i obrnuti redoslijed flekso-smjerom: row-reverse:

    Najbolja stvar u pristupu Flexboxa je ta što se ne petljamo sa smjerom pisanja. Ne trebamo resetirati djecu, a sve je mnogo predvidljivije.

    Upotreba "prethodnih braće i sestara" za kreiranje sustava ocjenjivanja zvjezdica samo za CSS

    Semantički se sustav ocjenjivanja može smatrati samo jednostavnim popisom radio gumba s pripadajućim oznakama. To nam dobro dolazi jer će nam omogućiti korištenje: provjerenog pseudo selektora za izmjenu braće i sestara.

    Pa krenimo od tamo:

    Kao što smo prethodno raspravljali, elementi su obrnutim redoslijedom, kako bi se omogućilo selektor "prethodne braće". Opazite da koristimo unicode znak "bijele zvijezde" (U + 2606) da bismo predstavili prazne zvijezde.

    Prikažimo ih jedan pored drugog, u ispravnom (obrnutom) redoslijedu:

    Sada sakrijte same tipke radio i nitko to ne želi vidjeti:

    I primijenite neke stilove na zvijezde likove:

    Jedina doista važna crta je pozicija: relativna. Omogućit će nam apsolutni položaj pseudo elementa ispunjenog zvijezde (U + 2605) na njemu, koji će u početku biti skriven.

    Kad lebdimo iznad zvijezde, ispunjeni pseudo element zvijezde trebao bi postati vidljiv za nju i sve prethodne braće i sestre.

    Ista stvar za odabranu ocjenu, spajanjem svih oznaka koje se nalaze prije provjerenog radio gumba:

    Imajte na umu da je uporaba važne zastave upravo suprotno dobroj praksi. To radim ovdje jer ne postoji drugi način da se bez dodane funkcionalnosti govori u sljedećem odjeljku bez nje.

    Posljednje, ali ne najmanje bitno, trebamo se prisjetiti trenutne ocjene, samo u slučaju da korisnik to želi promijeniti. Na primjer, ako su odabrali pet zvijezda i iz bilo kojeg razloga ih žele promijeniti u četiri, trebali bismo prikazati zvijezde 1 do 4 kao napunjene, a petu kao poluprozirnu kada lebdimo iznad četvrte.

    To se može postići promjenom neprozirnosti prijašnjih braće i babe provjerenog ulaza kada se pokazivač iznad miša sprema:

    Zbog toga nam je trebala neprozirnost: važno u početnoj lebdećoj deklaraciji. U suprotnom, ovo posljednje pravilo pobijedilo bi na natječaju za specifičnosti i na sve bi primijenilo poluprozirni ispun.

    I tu ga imamo, unakrsni preglednik, u potpunosti funkcionalan CSS sustav ocjenjivanja zvijezda koji koristi selektore "prethodne braće i sestara".

    Kao što vidite, samo zato što "nemoguće" ne znači i ne biste trebali pokušavati. Programiranje znači pokretanje granica. Dakle, kad god udarite u zid, samo pritisnite malo jače. Ili pretpostavljam da bi pronalazak ovoga mogao biti bolja analogija? ... ionako znate što mislim. Nastavite hakirati!

    Napomena o pristupačnosti

    Prethodni isječak je pojednostavljenje kako bi ga bilo lakše razumjeti. To nije nešto što bih preporučio koristiti na proizvodnji zbog mnogih ograničenja pristupačnosti.

    Da bi isječak bio malo pristupačniji, prvo bi bilo sakriti tipke na radiju gotovo bilo kojom tehnikom osim prikaza: nijednom kako bi ih učinili fokusiranima. Treba dodati i prsten za fokus na isječku cijele zvijezde kada je bilo koji element iznutra fokusiran, pomoću pseudo-selektora: fokus-unutar.

    Identične oznake "la" nemaju smisla za čitatelje ekrana, tako da je najbolji pristup imati unutar etikete s tekstom "n Stars" koji će biti skriven od vidnih korisnika.

    Također obrnuti HTML izvor + prikaz: obrnuti redak čini ocjenu tipkovnice nezgodnom jer se ne vraća unatrag. Pristupačnost Flexboxa i tipkovnice prilično je zbrkana tema, ali najbliža stvar za rješenje je dodavanje aria-flowtotag-a svakom elementu, što će barem riješiti problem nekih čitača zaslona + kombinacija preglednika.

    Za pristupačniji isječak (koristeći alternativnu tehniku ​​izmjene sljedećeg braće i sestre kako bi izgledali prazni umjesto pokušaja procjene prethodnih) provjerite Patrick Cole, kao što smo raspravljali u odgovorima u nastavku.