⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS slinkties juostos generatorius

Sukurkite slinkties juostos plotį, takelį, nykščio ir užvedimo spalvą, tada pamatykite tikrąjį WebKit rezultatą šalia tikrojo „Firefox“ rezultato – dvi visiškai skirtingos naršyklės sistemos viena šalia kitos.

10px
8px

Sukurta naudojant ::-webkit-slinkties juostos pseudoelementus – šis laukelis atvaizduojamas naudojant tikrąjį jūsų naršyklės variklį, jei tai „Chrome“, „Safari“ ar „Edge“.

Sukurta naudojant „Firefox“ slinkties juostos pločio ir slinkties juostos spalvų savybes. Kitos naršyklės to nepaiso ir čia rodo savo numatytąją slinkties juostą – atidarykite šį puslapį „Firefox“, kad pamatytumėte tikrąjį rezultatą.

„Firefox“ neturi atskiros užvedimo spalvos, nykščio kraštinės spindulio ar nepriklausomo takelio stiliaus – tik slinkties juostos plotis, čia susietas nuo pasirinkto storio iki tikrojo raktinio žodžio: thin

Apdorojama... 0%

Rezultatas

„Chrome“, „Safari“ ir „Edge“ stiliaus slinkties juostos su pseudoelementų ::-webkit-slinkties juostos šeima: atskiros takelio, nykščio ir nykščio užvedimo būsenos taisyklės, taip pat tikslus pikselio plotis ir nykščio kraštinės spindulys. „Firefox“ visa tai visiškai nepaiso ir vietoj to nuskaito dvi standartines ypatybes – slinkties juostos plotį ir slinkties juostos spalvą, kurios vėliau pateko į CSS slinkties juostų specifikaciją. Tai nėra du tos pačios funkcijos dialektai – tai du skirtingi funkcijų rinkiniai su skirtingomis lubomis, o dauguma slinkties juostos generatorių tyliai perkelia spragą rodydami tik WebKit rezultatą. Šis ne.

Vieną kartą nustatykite plotį, takelio spalvą, nykščio spalvą, pelės žymeklio spalvą ir nykščio kampo spindulį ir įrankis sukurs du taisyklių rinkinius iš tų pačių įvesčių. „WebKit“ blokų apimtys ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ir jo :hover būsena į kairįjį demonstracinį laukelį, todėl ten matote būtent tai, ką pateikia „Chrome“, „Safari“ ir „Edge“ – tikras naršyklės variklis, o ne imituota perdanga. „Firefox“ blokas nustato slinkties juostos plotį ir spalvą dešiniajame demonstraciniame laukelyje, naudodamas tos pačios naršyklės variklį, todėl langelis atrodo kitaip tik tada, kai šis puslapis iš tikrųjų atidarytas „Firefox“; „WebKit“ naršyklėje jis rodo savo numatytąją slinkties juostą, o įrankis taip sako, o ne padirbinėja „Firefox“ išvaizdą su skolintais pikseliais.

Pločio žemėlapis yra aiškiausias tarpo pavyzdys: „Firefox“ slinkties juostos plotis priima tik raktinius žodžius „auto“, „plonas“ arba „ne“ – niekada nėra tikslaus pikselių skaičiaus. Šis generatorius sąžiningai atvaizduoja jūsų pasirinktą plotį (8 pikseliai ir mažesnis tampa plonas, bet kas platesnis tampa automatinis) ir rodo gautą raktinį žodį šalia jūsų įvesties, o ne sugalvoja netikrą pikselių tobulą Firefox rezultatą, kurio nėra. „Firefox“ taip pat negali nustatyti atskiros užvedimo spalvos, nepriklausomo nykščio kraštinės spindulio arba takelio spalvos, kuri nėra tik antroji slinkties juostos spalvos reikšmė – tai nuolatiniai, tikri platformos apribojimai, o ne šio įrankio praleidimai.

Nukopijuokite sujungtą CSS bloką ir abu taisyklių rinkiniai keliauja kartu, kiekvienas su savo komentaru, paruoštas įklijuoti į stiliaus lapą tokį, koks yra. Viskas atvaizduojama ir atnaujinama jūsų naršyklėje, kai velkate valdiklius – nėra įkėlimo, paskyros, serverio atgal ir veikia neprisijungus, kai puslapis įkeliamas.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Bendri valdikliai – plotis, takelio spalva, nykščio spalva, užvedimo spalva, nykščio kampo spindulys – valdo abu variklius iš tų pačių įėjimų.
  • Sąžiningas slinkties juostos pločio atvaizdavimas: „Firefox“ palaiko tik ploną, automatinį arba jokio, todėl tiksli jūsų pasirinkta pikselių reikšmė susieta su artimiausiu tikru raktiniu žodžiu ir rodoma šalia jūsų įvesties.
  • Kombinuota, kopijuojama CSS išvestis su WebKit pseudoelementų taisyklėmis ir „Firefox“ standartinėmis savybėmis, aiškiai komentuojama.

Pagrindiniai privalumai

✓ Dvi tiesioginės demonstracinės dėžutės pateikia tikrą kiekvieno variklio slinkties juostą – „WebKit“ langelis visada rodo tikrąjį „Chrome“, „Safari“ ir „Edge“ rezultatą, be suklastoto atvaizdavimo.
✓ „Firefox“ galimybių trūkumas rodomas, o ne paslėptas: užvedimo spalva, nykščio spindulys ir nepriklausomas takelio stilius „Firefox“ tiesiog neegzistuoja, o įrankis tai aiškiai sako, o ne apsimeta kitaip.
✓ Vienas nukopijuojamas CSS blokas pateikia abu taisyklių rinkinius kartu su atsarginiu komentaru, paruoštu įklijuoti tokį, koks yra.

Naudojimo atvejai

  • • Sukurkite prietaisų skydelio šoninės juostos slinkties juostos stilių, kad ji atitiktų prekės ženklo paletę, o prieš išsiunčiant tiksliai matydami, kiek toli šis stilius pasiekia „Firefox“.
  • • Paimkite sąžiningą „Firefox“ slinkties juostos pločio raktinį žodį, kad pasirinktumėte pasirinktą storį, užuot spėlioję, ar plonas ar automatinis yra artimesnis.
  • • Nukopijuokite vieną CSS bloką, kuriame yra WebKit pseudoelementų taisyklės ir Firefox standartinės savybės, kiekviena aiškiai pakomentuota, tiesiai į stiliaus lapą.