Kaip padaryti neįmanomą CSS naudojant šiek tiek kūrybiškumo

Jei kada nors naudojatės CSS brolių ir seserų selektoriais, žinote, kad yra tik du. +Giminystės Combinator pasirenka pirmąjį rungtynių, kuris ateina iš karto po, ir ~po to, broliai ir seserys Combinator atitinka visus tuos, kurie ateis po.

Bet nėra galimybės pasirinkti, kas buvo anksčiau. Arba tėvai, ar ankstesni brolių ar seserų selektoriai, paprasčiausiai nėra dalykas.

Aš žinau, kad tu to nori, tu žinai, kad aš to noriu, bet griežta tiesa yra ta, kad jų nėra (ir tikriausiai niekada nebus). Apie milijonus pranešimų yra apie milijoną. Yra net pasiūlymų, kaip juos įgyvendinti. Tačiau mes esame įstrigę vienakrypčiame CSS taisyklių apdorojime, greičiausiai apsaugodami mus nuo „patirties stokos“, kuri mus įstrigtų pakartotiniuose srautuose ir net begalinėse kilpose.

Laimei, kaip ir daugumoje CSS apribojimų, mes galime tai padirbti .

Pirmiausia reikia atsižvelgti į tai, kodėl mes norime, kad prasidėtų ankstesni broliai ir seserys.

Į galvą ateina du atvejai:

  1. Turime pasirinkti visus tam tikro elemento brolius ir seseris, o ~paskesnis brolių ir seserų kombinatorius parenka tik tuos, kurie ateina paskui.
  2. Turime pasirinkti tik tuos brolius ir seseris, kurie buvo anksčiau

1. Visų brolių ir seserų pasirinkimas

Kartais mums reikia pasirinkti ir ankstesnius, ir kitus brolius. Norėdami tai padaryti, mes iš tikrųjų galime pasirinkti tėvą ir panaudoti keletą gudrybių.

Pvz., Norėdami pasirinkti visus diapazonus šioje struktūroje, kai mes užklijuojame bet kurį iš jų, galėtume tiesiog naudoti vaiko parinkiklį ant tėvų pakabos. Mes būtinai išjungėme pointer-eventstėvą ir vėl nustatėme jį vaikams. Taigi bet koks veiksmas, kurio norime įvykti, suveiks tik tada, kai įeisime į vaiką, o ne patį tėvą.

Jei reikia pasirinkti visus brolius ir seseris, išskyrus užvestą, galite sujungti ankstesnę techniką su :notparinkikliu, kad jos neįtrauktumėte.

Tipiškas šio atvejo naudojimo atvejis yra meniu:

Šis kodas bus išjunk visų neskaidrumo <li> Ele mas ai bet viena būtybė svyruoti.

Be to, norėdami paveikti brolius ir seseris, galite naudoti tokius filtrus kaip tipas ir n-tasis selektoriai.

Naudojant tam tikrą stilių, jis turėtų veikti taip:

Atkreipkite dėmesį : jei ketinate naudoti pointer-events:nonemetodą, turėkite omenyje, kad tai gali sugadinti krovimą (gali leisti pasirinkti elementus, kurie yra „žemiau“ krovimo tvarka). Tai taip pat neveiks IE10 ir naujesnėse versijose, išskyrus tai, kad jums gali prireikti žymeklio įvykių kažkam kitam. Taigi būkite ypač atsargūs jį naudodami.

2. Pasirinkimas to, kas buvo anksčiau

Šiuo naudojimo atveju mes galime pakeisti HTML eiliškumą, tada jį rūšiuoti atgal į CSS ir naudoti ~tolesnį brolių ir seserų kombinatorių arba +gretimą brolių ir seserų selektorių. Tokiu būdu mes atrinksime kitus brolius ir seseris, bet atrodys, kad mes pasirinkome ankstesnius.

Tai padaryti galima keliais būdais. Paprasčiausias ir tikriausiai seniausias keičia konteinerio rašymo kryptį:

Jei jūsų elementuose reikia rodyti faktinį tekstą, visada galite jį pakeisti:

Tačiau tai gali pasisukti įvairiais būdais. Laimei, šiuolaikinis CSS įrankių rinkinys daro jį daug paprastesnį ir saugesnį. Mes galime tiesiog naudoti „Flexbox“ ant konteinerio ir pakeisti užsakymą flex-direction:row-reverse:

Geriausias dalykas, susijęs su „Flexbox“ požiūriu, yra tas, kad mes nesijaudiname su rašymo kryptimi. Mums nereikia iš naujo nustatyti vaikų, ir viskas yra daug labiau nuspėjama.

Naudojant „ankstesnius brolius ir seseris“ sukuriama tik CSS žvaigždžių vertinimo sistema

Semantiniu požiūriu vertinimo sistemą galima laikyti tiesiog paprastu radijo mygtukų su atitinkamomis etiketėmis sąrašu. Tai praverčia, nes tai leis mums naudoti :checkedpseudo selektorių brolių ir seserų modifikavimui.

Taigi pradėkime nuo ten:

Kaip aptarėme anksčiau, elementai yra atvirkštine tvarka, kad būtų galima pasirinkti „ankstesnio brolio“ pasirinkimą. Atkreipkite dėmesį, kad tuščioms žvaigždėms vaizduoti naudojame „unicode“ simbolį „balta žvaigždė“ (U + 2606).

Parodykime juos šalia, teisinga (atvirkštine) tvarka:

Dabar paslėpkite patys radijo mygtukus, niekas to nenori matyti:

Žvaigždžių personažams pritaikykite keletą stilių:

Vienintelė tikrai svarbi linija yra position:relative. Tai leis mums absoliučiai užfiksuoti užpildytą žvaigždės (U + 2605) pseudo elementą jo viršuje, kuris iš pradžių bus paslėptas.

Kai mes užvedame virš žvaigždės, užpildytas žvaigždės pseudo elementas turėtų tapti matomas jai ir visiems ankstesniems broliams ir seserims.

Tas pats dalykas pasirinktam reitingui, suderinant visas etiketes, esančias prieš pažymėtą akutę:

Atminkite, kad „!“ Svarbios vėliavos naudojimas yra visiškai priešingas gerajai praktikai. Aš tai darau čia, nes nėra jokio kito būdo, kaip pasiekti kitame skyriuje aptartą papildomą funkciją be jo.

Paskutinis, bet ne mažiau svarbus dalykas, mes turime „prisiminti“ dabartinį įvertinimą, tik tuo atveju, jei vartotojas nori jį pakeisti. Pavyzdžiui, jei jie pasirinko penkias žvaigždes ir dėl kokių nors priežasčių nori jas pakeisti į keturias, mes turėtume rodyti žvaigždes nuo 1 iki 4 kaip užpildytas, o penktą - kaip permatomas, kai užvedame virš ketvirtosios.

Tai galima pasiekti pakeitus ankstesnių patikrintų įvestų brolių ir seserų neskaidrumą, kai užvedama virš konteinerio:

Dėl to mums taip pat reikėjo opacity:1 !importantpirminės sklandančios deklaracijos. Priešingu atveju ši paskutinė taisyklė būtų laimėjusi konkretumo konkursą ir viskam pritaikiusi pusiau skaidrų užpildą.

Ir mes turime ją, daugialypę naršyklę, visiškai veikiančią tik CSS žvaigždžių vertinimo sistemą, naudojančią „ankstesnių brolių ir seserų“ selektorius.

Kaip matote, vien tai, kad „tai neįmanoma“, nereiškia, kad neturėtumėte bandyti. Programavimas yra ribų peržengimas. Taigi, kai tik atsitrenkite į sieną, tiesiog šiek tiek paspauskite. Arba spėju, kad tai bus geresnė analogija? ... vis tiek žinote, ką turiu omenyje. Toliau įsilaužkite!

Pastaba apie prieinamumą

Ankstesnis fragmentas yra supaprastinimas, kad jį būtų lengva suprasti. Tai nėra tai, ką aš norėčiau rekomenduoti naudoti gamyboje dėl daugelio laikrodžiu apribojimų.

Kad fragmentas būtų šiek tiek prieinamesnis, pirmiausia reikėtų paslėpti radijo mygtukus beveik bet kokia technika, išskyrus display:nonetai, kad jie būtų fokusuojami. Mes taip pat turėtume pridėti židinio žiedą ant visų žvaigždžių fragmento, kai bet kuris viduje esantis elementas yra nukreiptas, per pseudo selektorių :focus-within.

Ekrano skaitytuvams nėra jokios prasmės vienodoms „☆“ etiketėms, todėl geriausias būdas bus turėti an> inside the label with “n Stars” text, that will be hidden from sighted users .

Also the reverse HTML source + display:row-reverse approach makes keyboard rating awkward, as it doesn’t get reversed back. Flexbox and keyboard accessibility is quite a messy topic, but closest thing to a solution for that one is adding aria-flowtotag to each element, which at least fixes the issue for some screen readers + browser combinations.

For a more accessible snippet (using an alternative technique of modifying next siblings to look empty instead of trying to asses previous ones) check Patrick Cole’s, as we discussed in the answers below.