Introducere în Web Development

Uneori, producătorii de browsere vor să adauge noi funcționalități în CSS.

Poate vor să testeze o viitoare proprietate, sau o proprietate propusă la W3C (World Wide Web Consortium, organizația care definește standardele CSS și HTML).

Pentru că e posibil ca aceste funcționalități să fie modificate în varianta finală, soluția pe care o alegeau în trecut browserele era să le introducă dar cu un prefix.

Cele mai întâlnite prefixe sunt -webkit- (specifică browserelor Chrome, Safari, și derivate din acestea), și -moz- (Firefox), dar e posibil și să mai întâlnești prefixul -ms- pentru browserul Internet Explorer și versiunile vechi ale Microsoft Edge.

De obicei codul sursă al browserelor este în totalitate sau parțial deschis oricui știe să îl analizeze. De aceea, aceste teste ajung repede cunoscute și programatorii web le folosesc.

Utilizarea acestora, însă, este din-ce-în-ce mai rară, și o menționez doar ca să nu vă speriați când vedeți în cod vechi proprietăți precum -webkit-box-shaddow, sau -moz-transition.

Unele dintre cele mai interesante funcționalități din CSS au apărut cu prefix înainte să fie standardizate.

În zilele noastre, însă, această practică a dispărut în mare parte. Producătorii de browsere colaborează între ei pentru a defini noi standarde în CSS. Dacă au nevoie să demonstreze o funcționalitate o pot pune într-o setare ascunsă pentru a fi testată doar de către developerii care știu de ea.

Scrollbar

Una din ultimele redute ale prefixelor de producător este atunci când vrem să configurăm bara de scroll. Vrem asta pentru că bara de pe Windows și alte sisteme de operare de desktop este foarte urâtă și ne strică designul.

Putem să îi controlăm grosimea, dar și culoarea. Din păcate, modul în care se face asta diferă drastic de la Firefox la Chrome și Safari.

Pe Firefox, se face cu două proprietăți:

• scrollbar-width controlează grosimea, dar se pot folosi doar cuvintele thin, auto, și none.

• scrollbar-color controlează culoarea. Poate primi două culori, astfel încât prima controlează bara care se mișcă (thumb), iar a 2-a culaore zona de dedesubt (track).

Abordarea Safari și Chrome este să folosească pseudo-elemente, cu prefix:

• ::-webkit-scrollbar pentru a seta proprietăți ce se aplică întregii bare.

• ::-webkit-scrollbar-track pentru a seta proprietăți pentru zona de jos, pe care se mișcă bara (thumb).

• ::-webkit-scrollar-thumb pentru a seta proprietăți pentru bară.

Această abordare permite control mult mai granular asupra barei de scroll, dar a fost respinsă de W3C. Deci în viitor probabil și Safari și Chrome vor adopta versiunea folosită deja de Firefox.

                    /* Firefox */
.custom-scrollbar {
  scrollbar-width: thin; /* sau thick sau none */
  scrollbar-color: #0FB7FF #ED1D90;
}

/* Chrome & Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 0.25rem;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #0FB7FF;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #ED1D90;
}