Šta su stilovi korisničkog agenta i koji su načini za rad sa njima?

Stilovi korisničkog agenta — to je skup podrazumevanih CSS stilova koje pregledači primenjuju na HTML elemente pre učitavanja bilo kakvih autorskih stilskih tabela ili tabela korisničkih stilova. Oni obezbeđuju osnovni izgled elemenata (na primer, razmaci kod paragrafa, podebljani tekst kod <strong>).

Sa njima se može raditi na sledeće načine:

1. Prepisivanje stilova: Autorski stilovi sa višom specifičnošću ili nakon u CSS kodu prepisuju stilove korisničkog agenta.

   p {
     margin: 0; /* Prepisuje standardni margin */
   }
   

2. Korišćenje CSS Reset ili Normalize.css: Ove biblioteke resetuju ili ujednačavaju osnovne stilove elemenata, neutralizujući razlike u stilovima korisničkog agenta različitih pregledača.

   • Reset CSS: Potpuno uklanja većinu stilova korisničkog agenta. Primer:

     /* Primer iz Eric Meyer's Reset CSS */
     html, body, div, span, applet, object, iframe,
     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     a, abbr, acronym, address, big, cite, code,
     del, dfn, em, img, ins, kbd, q, s, samp,
     small, strike, strong, sub, sup, tt, var,
     b, u, i, center,
     dl, dt, dd, ol, ul, li,
     fieldset, form, label, legend,
     table, caption, tbody, tfoot, thead, tr, th, td,
     article, aside, canvas, details, embed,
     figure, figcaption, footer, header, hgroup,
     menu, nav, output, ruby, section, summary,
     time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
     }
     /* Ostatak reset stilova */
     

   • Normalize.css: Korektuje stilove korisničkog agenta kako bi bili konzistentniji između pregledača, zadržavajući korisne osnovne stilove.

     /* Primer iz Normalize.css */
     html {
       line-height: 1.15; /* 1 */
       -webkit-text-size-adjust: 100%; /* 2 */
     }
     body {
       margin: 0;
     }
     /* Ostatak normalize stilova */
     

3. Provera u DevTools: Alati za razvoj u pregledaču omogućavaju da se vidi koji stilovi korisničkog agenta se primenjuju na određeni element.

Razumevanje stilova korisničkog agenta važno je za predvidljivo prikazivanje elemenata i osiguranje kompatibilnosti između pregledača.