Mis on kasutajaagendi stiilid ja kuidas nendega…

Kasutaja agendi stiilid — see on komplekt vaikimisi CSS-stiileid, mida brauserid rakendavad HTML-elementidele enne mis tahes autori stiililehtede või kasutaja stiililehtede laadimist. Need tagavad elementide põhilise välimuse (näiteks lõiguvahede, paksu teksti <strong> puhul).

Nende kasutamiseks on järgmised viisid:

Stiilide üle kirjutamine: Autoristiilid, millel on kõrgem spetsiifilisus või mis on CSS-koodis pärast, kirjutavad üle kasutaja agendi stiilid.
```
p {
  margin: 0; /* Vaikimisi marginaali üle kirjutamine */
}
```

CSS Reset või Normalize.css kasutamine: Need teegid nullivad või ühtlustavad elementide põhi-stiile, neutraliseerides erinevate brauserite kasutaja agendi stiilide erinevused.

Reset CSS: eemaldab täielikult suurema osa kasutaja agendi stiilidest. Näide:

/* Näide Eric Meyer Reset CSS-st */
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;
}
/* Reset stiilide ülejäänud osa */

Normalize.css: korrigeerib kasutaja agendi stiile, muutes need brauserite vahel ühtlasemaks, säilitades samal ajal kasulikud põhi-stiilid.

/* Näide Normalize.css-st */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
/* Normalize stiilide ülejäänud osa */

Kontroll DevToolsis: Brauseri arendustööriistad võimaldavad näha, millised kasutaja agendi stiilid on konkreetsele elemendile rakendatud.

Kasutaja agendi stiilide mõistmine on oluline elementide prognoositava kuvamise ja brauseritevahelise ühilduvuse tagamiseks.

Mis on kasutajaagendi stiilid ja kuidas nendega töötada?