CSS Selectoarele de frați anterioare și cum să le falsifice

Dacă ați folosit vreodată selectori de frați CSS, știți că există doar doi. Combinatorul de + frați selectează primul meci care vine imediat după, iar combinatorul ~ fratele-ulterior se potrivește cu toate cele care vin după.
Dar nu există nici o modalitate de a selecta ceea ce a venit înainte. Fie selectori părinți, nici selecții frați anteriori nu sunt pur și simplu un lucru.

Știu că o vrei, știi că o vreau, dar adevărul dur este că nu există (și probabil că nu o vor face niciodată). Există un milion de postări despre whys. Există chiar propuneri despre cum să le implementăm. Dar suntem blocați în procesarea unidirecțională a regulilor CSS, cel mai probabil să ne protejeze de „lipsa de expertiză”, rămânându-ne blocați în re-fluxuri și chiar bucle infinite.

Din fericire, la fel ca în majoritatea limitărilor CSS, îl putem falsifica.

Primul lucru de luat în considerare este motivul pentru care ne dorim ca frații anteriori să înceapă.
Două cazuri îmi vin în minte:

  1. Trebuie să selectăm toți frații unui anumit element, iar ~ combinatorul de fratii ~ ulterior îi selectează doar pe cei care vin după.
  2. Trebuie să selectăm doar frații care au venit înainte

1. Selectarea tuturor fraților

Uneori trebuie să selectăm atât frații precedenți, cât și următorii. Pentru a face acest lucru, putem selecta de fapt părintele și vom folosi câteva trucuri în jurul lui.

De exemplu, pentru a selecta toate întinderile din următoarea structură atunci când trecem pe oricare dintre ele, am putea folosi doar selectorul de copii de la pasul părintelui. Ne asigurăm să dezactivăm evenimentele pointer de la părinte și să le resetăm copiilor. Deci orice acțiune dorim să se întâmple se va trage numai atunci când intrăm în copil și nu părintele în sine.

Dacă aveți nevoie să selectați toți frații, cu excepția celui care a fost ascuns, puteți combina tehnica anterioară cu: nu selector pentru a o exclude.

Un caz tipic de utilizare este meniurile:

Codul de mai sus va opri opacitatea tuturor elementelor, dar cel care este ascuns.

Mai mult, puteți utiliza filtre, cum ar fi selecția de tip și al nouălea, pentru a fi mai precise pentru frații pe care doriți să-i afectați.

Cu un anumit stil, ar trebui să funcționeze astfel:

Vă rugăm să rețineți: dacă veți rula evenimentele pointer: nici o abordare, nu uitați că poate fi încurcat cu stivuirea (vă poate permite să selectați elemente care sunt „mai jos” în ordinea stivuirii). De asemenea, nu va funcționa în IE10 și mai jos, în afară de implicația că s-ar putea să aveți nevoie de evenimentele pointer pentru altceva. Deci, aveți grijă deosebită atunci când îl utilizați.

2. Selectarea a venit anterior

Pentru acest caz de utilizare, putem inversa comanda pe HTML, apoi sortați-o în CSS și folosiți ~ combinatorul de frați sau + selectorul de frați alăturat. În acest fel vom selecta următorii frați, dar se pare că îi selectăm pe cei precedenți.

Există mai multe modalități de a face acest lucru. Cel mai simplu și probabil cel mai vechi este schimbarea direcției de scriere a containerului nostru:

Dacă elementele dvs. trebuie să afișeze textul efectiv, îl puteți întoarce întotdeauna:

Dar asta poate ieși din mână în multe feluri. Din fericire, cutia de instrumente CSS modernă o face mult mai simplă și mai sigură. Putem doar să folosim Flexbox pe container și să inversăm comanda cu flex-direcție: rând-invers:

Cel mai bun lucru despre abordarea Flexbox este că nu ne încurcăm cu direcția de scriere. Nu trebuie să resetăm copiii și totul este mult mai previzibil.

Folosirea „fraților anteriori” pentru a crea un sistem de evaluare pentru stele numai CSS

Semantic, un sistem de rating poate fi gândit doar la o simplă listă de butoane radio cu etichetele corespunzătoare. Acest lucru vine la îndemână, deoarece ne va permite să utilizăm: pseudo-selecționatorul verificat pentru a modifica frații.

Să începem de acolo:

Așa cum am discutat anterior, elementele sunt în ordine inversă pentru a permite un selecționer „fratele anterior”. Observați că folosim caracterul "stea albă" unicod (U + 2606) pentru a reprezenta stelele goale.

Să le afișăm unul lângă altul, în ordinea corectă (inversă):

Acum ascunde singuri butoanele radio, nimeni nu vrea să vadă asta:

Și aplicați câteva stiluri pentru personajele vedetei:

Singura linie cu adevărat importantă este poziția: relativă. Ne va permite să poziționăm absolut o stea plină (U + 2605) pseudo element deasupra ei, care va fi ascunsă inițial.

Când trecem peste o stea, pseudo elementul cu stea plină ar trebui să devină vizibil pentru ea și pentru toți frații anteriori.

Același lucru pentru evaluarea selectată, potrivind toate etichetele care vin înaintea butonului radio verificat:

Nu uitați că folosirea steagului! Important este exact opusul unei bune practici. Fac acest lucru aici, deoarece nu există altă modalitate de a realiza funcționalitatea adăugată discutată în secțiunea următoare fără ea.

Nu în ultimul rând, trebuie să „amintim” actualul rating, doar în cazul în care utilizatorul dorește să-l schimbe. De exemplu, dacă au selectat cinci stele și, din orice motiv, doriți să-l schimbați la patru, ar trebui să afișăm stele de la 1 la 4 la fel de pline, iar a cincea la fel de semi-transparentă când trecem pe a patra.

Acest lucru poate fi obținut prin schimbarea opacității fraților anteriori ai intrării verificate la trecerea peste container:

Acesta este și motivul pentru care aveam nevoie de opacitate: 1! Important în declarația inițială plină de viteză. Altfel, această ultimă regulă ar fi câștigat concursul de specificitate și ar fi aplicat o completare semitransparentă tuturor.

Și acolo îl avem, un sistem de evaluare a stelelor cu CSS-browser complet, funcțional, folosind selectoarele „fraților anteriori”.

După cum vedeți, doar pentru că „este imposibil” nu înseamnă că nu ar trebui să încercați. Programarea înseamnă împingerea limitelor. Deci, de fiecare dată când lovești peretele, trebuie doar să apese puțin mai tare. Sau cred că găsirea drumului tău ar putea fi o analogie mai bună?… Oricum, știi ce vreau să spun. Continuați hackingul!

O notă despre accesibilitate

Fragmentul anterior este o simplificare pentru a ușura înțelegerea. Nu este un lucru pe care l-aș recomanda să îl folosesc la producție, din cauza multor limitări de accesibilitate.

Pentru a face fragmentul un pic mai accesibil, primul lucru ar fi să ascunzi butoanele radio cu aproape orice altă tehnică în afară de afișare: niciuna care să le facă focalizate. Ar trebui să adăugăm, de asemenea, câteva inele de focus pe fragmentul de stele întregi atunci când orice element din interior este focalizat, prin intermediul pseudo-selectorului: focus-inside.

Etichetele „☆” identice nu au niciun sens pentru cititorii de ecran, așa că cea mai bună abordare va fi să aveți un în etichetă cu textul „n Stars”, care va fi ascuns utilizatorilor vizionați.

De asemenea, sursa inversă HTML + afișare: abordarea rând-invers face ca evaluarea tastaturii să fie incomodă, deoarece nu se inversează. Accesibilitatea Flexbox și tastatură este un subiect destul de dezordonat, dar cel mai apropiat lucru pentru o soluție este acela de a adăuga aria-flowtotag la fiecare element, ceea ce rezolvă cel puțin problema pentru unele cititoare de ecran + combinații de browser.

Pentru un fragment mai accesibil (folosind o tehnică alternativă de modificare a următorilor frați pentru a părea goi, în loc să încercați să-i asculte pe cei precedenți), verificați Patrick Cole, așa cum am discutat în răspunsurile de mai jos.