CSS ritjoslas ģenerators

Chrome, Safari un Edge stila ritjoslas ar pseidoelementu saimi ::-webkit-scrollbar: atsevišķi noteikumi celiņam, īkšķim un īkšķa kursora novietojuma stāvoklim, kā arī pikseļa precīzs platums un īkšķa apmales rādiuss. Firefox to visu pilnībā ignorē un tā vietā nolasa divus standarta rekvizītus, ritjoslas platumu un ritjoslas krāsu, kas vēlāk tika ievadīti CSS ritjoslu specifikācijā. Tie nav divi vienas funkcijas dialekti — tie ir divi dažādi funkciju komplekti ar dažādiem griestiem, un vairums ritjoslas ģeneratoru klusi pārvērš atstarpi, parādot tikai WebKit rezultātu. Šis nav.

Vienreiz iestatiet platumu, celiņa krāsu, īkšķa krāsu, kursora virzīšanas krāsu un īkšķa stūra rādiusu, un rīks izveido divas noteikumu kopas no tām pašām ievadēm. WebKit bloka darbības jomas ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb un tā :hover statuss uz kreiso demonstrācijas lodziņu, tāpēc tur redzamais ir tieši tas, ko atveido Chrome, Safari un Edge — pārlūkprogrammas pašas dzinējs, nevis simulēts pārklājums. Firefox bloks iestata ritjoslas platumu un ritjoslas krāsu labajā demonstrācijas lodziņā, izmantojot tās pašas pārlūkprogrammas programmu, tāpēc lodziņš izskatās savādāk tikai tad, ja šī lapa ir atvērta pārlūkprogrammā Firefox; WebKit pārlūkprogrammā tas parāda savu noklusējuma ritjoslu, un rīks tā saka, nevis viltot Firefox izskatu ar aizņemtiem pikseļiem.

Platuma kartēšana ir spilgtākais atstarpes piemērs: Firefox ritjoslas platums pieņem tikai atslēgvārdus auto, thin vai none — nekad nav precīzu pikseļu skaitli. Šis ģenerators godīgi kartē jūsu izvēlēto platumu (8 pikseļi un mazāks kļūst plāns, viss, kas platāks, kļūst par automātisku) un parāda iegūto atslēgvārdu blakus jūsu ievadei, nevis izgudro viltotu pikseļu perfektu Firefox rezultātu, kas neeksistē. Firefox arī nevar iestatīt atsevišķu kursora krāsu, neatkarīgu īkšķa apmales rādiusu vai celiņa krāsu, kas nav tikai ritjoslas krāsas otrā vērtība — tie ir pastāvīgi, reāli platformas ierobežojumi, nevis izlaidumi šajā rīkā.

Nokopējiet apvienoto CSS bloku, un abas kārtulu kopas ceļo kopā, katrai zem sava komentāra un ir gatavas ielīmēt stila lapā tādu, kāda tā ir. Viss tiek renderēts un atjaunināts jūsu pārlūkprogrammā, velkot vadīklas — nav augšupielādes, nav konta, nav servera turp un atpakaļ, un tas turpina darboties bezsaistē, tiklīdz lapa ir ielādēta.