⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

CSS ritjoslu ģenerators

Iestatiet ritjoslas platumu, sliedes, pogas un virziena krāsu, pēc tam redziet īsto WebKit rezultātu līdzās īstajam Firefox rezultātam – divas patiesi atšķirīgas pārlūku sistēmas, blakus.

🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.

10px
8px

Stilizēts ar ::-webkit-scrollbar pseidoelementiem — šī lodziņa atveido jūsu pārlūka īstais dzinējs, ja tas ir Chrome, Safari vai Edge.

Stilizēts ar Firefox scrollbar-width un scrollbar-color īpašībām. Citi pārlūki tās ignorē un šeit rāda savu noklusēto ritjoslu — atveriet šo lapu pārlūkā Firefox, lai redzētu īsto rezultātu.

Firefox nav atsevišķas kursora krāsas, ritjoslas īkšķa apmales rādiusa vai neatkarīga fona stila — tikai scrollbar-width, kas šeit kartēts no jūsu izvēlētā biezuma uz īsto atslēgvārdu: thin

Apstrādā... 0%

Rezultāts

Pārlūki Chrome, Safari un Edge stilizē ritjoslas ar ::-webkit-scrollbar pseidoelementu saimi: atsevišķi noteikumi sliedei, pogai un pogas virziena stāvoklim, kā arī pikseļos precīzs platums un pogas border-radius. Firefox to visu pilnībā ignorē un tā vietā nolasa divas standarta īpašības, scrollbar-width un scrollbar-color, kuras vēlāk iekļuva CSS Scrollbars specifikācijā. Tās nav divi vienas funkcijas dialekti – tās ir divas dažādas funkciju kopas ar atšķirīgām iespēju robežām, un lielākā daļa ritjoslu ģeneratoru klusi aizklāj šo atšķirību, rādot tikai WebKit rezultātu. Šis to nedara.

Vienreiz iestatiet platumu, sliedes krāsu, pogas krāsu, virziena krāsu un pogas noapaļojumu, un rīks no tiem pašiem ievadiem izveido divus noteikumu kopumus. WebKit bloks ietver ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb un tā :hover stāvokli kreisajā demonstrācijas rūtiņā, tāpēc tur redzamais ir tieši tas, ko atveido Chrome, Safari un Edge – pārlūka paša īstais dzinējs, nevis imitēts pārklājums. Firefox bloks iestata scrollbar-width un scrollbar-color labajā demonstrācijas rūtiņā, izmantojot tā paša pārlūka dzinēju, tāpēc rūtiņa izskatās atšķirīgi tikai tad, kad šī lapa patiešām ir atvērta pārlūkā Firefox; WebKit pārlūkā tā rāda savu noklusēto ritjoslu, un rīks to pasaka, nevis vilto Firefox izskatu ar aizgūtiem pikseļiem.

Platuma kartēšana ir spilgtākais atšķirības piemērs: Firefox scrollbar-width pieņem tikai atslēgvārdus auto, thin vai none – nekad precīzu pikseļu skaitli. Šis ģenerators godīgi kartē jūsu izvēlēto platumu (8px un mazāk kļūst par thin, viss platāks kļūst par auto) un parāda iegūto atslēgvārdu blakus jūsu ievadei, nevis izgudro viltus pikseļprecīzu Firefox rezultātu, kura nemaz nav. Firefox arī nevar iestatīt atsevišķu virziena krāsu, neatkarīgu pogas border-radius vai sliedes krāsu, kas nav vienkārši scrollbar-color otrā vērtība – tie ir pastāvīgi, reāli platformas ierobežojumi, nevis šī rīka izlaidumi.

Nokopējiet apvienoto CSS bloku, un abi noteikumu kopumi ceļo kopā, katrs zem sava komentāra, gatavi ielīmēšanai stila failā bez izmaiņām. Viss tiek atveidots un atjaunināts jūsu pārlūkā, kamēr pārvietojat vadīklas – bez augšupielādes, bez konta, bez servera pieprasījumiem, un tas turpina darboties bezsaistē, tiklīdz lapa ir ielādēta.

Patīk šis rīks? Domājat, ka šis produkts ir noderīgs? Redzat tajā potenciālu un vēlaties to atbalstīt?

🛡️
Izpildīts pārlūkā

Jūsu faili un ievadītie dati nekad nepamet šo ierīci. Apstrāde notiek pilnībā bezsaistē. 100% droši.

Pieņemtie formāti un noteikumi

  • Kopīgas vadīklas – platums, sliedes krāsa, pogas krāsa, virziena krāsa, pogas noapaļojums – vada abus dzinējus no vieniem un tiem pašiem ievadiem.
  • Godīga ritjoslas platuma kartēšana: Firefox atbalsta tikai thin, auto vai none, tāpēc izvēlētā precīzā pikseļu vērtība tiek kartēta uz tuvāko reālo atslēgvārdu un parādīta blakus jūsu ievadei.
  • Apvienota, kopējama CSS izvade ar gan WebKit pseidoelementu noteikumiem, gan Firefox standarta īpašībām, skaidri komentēta.

Galvenās priekšrocības

✓ Divas tiešraides demonstrācijas rūtiņas atveido katra dzinēja īsto ritjoslu – WebKit rūtiņa vienmēr rāda patieso rezultātu pārlūkos Chrome, Safari un Edge, bez imitēta attēlojuma.
✓ Firefox iespēju ierobežojumi tiek parādīti, nevis slēpti: virziena krāsa, ritjoslas pogas noapaļojums un neatkarīga sliežu stila iestatīšana Firefox vienkārši nepastāv, un rīks to pasaka skaidri, nevis izliekas citādi.
✓ Viens kopējams CSS bloks apvieno abus noteikumu kopumus ar atkāpšanās komentāru, gatavs ielīmēšanai bez izmaiņām.

Lietošanas gadījumi

  • • Stilizējiet paneļa sānjoslas ritjoslu atbilstoši zīmola krāsu paletei, vienlaikus redzot, cik tālu šis stils sasniedz pārlūkprogrammā Firefox, pirms to ieviešat.
  • • Paņemiet īsto Firefox ritjoslas platuma atslēgvārdu izvēlētajam biezumam, nevis miniet, vai "thin" vai "auto" ir tuvākā atbilstība.
  • • Kopējiet vienu CSS bloku, kas satur gan WebKit pseidoelementu noteikumus, gan Firefox standarta rekvizītus, katrs skaidri komentēts, tieši stila lapā.