Sobes.tech
Junior

Šta je CSS Reset?

sobes.tech АИ

Одговор од АИ

CSS Reset — је скуп правила у CSS-у који је дизајниран да постави уједначене основне стилове за све HTML елементе по подразумеваној вредности, превазилазећи разлике у стандардним стиловима прегледача. Ово помаже у обезбеђивању предвидљивијег и преко прегледача компатибилног приказа веб страница.

Главни циљеви CSS Reset-а:

  • Уклањање или ресетовање подразумеваних маргина (margin, padding) и граница.
  • Ресетовање стандардних величина фонта и размаке између редова за заглавља, параграфе итд.
  • Једнако оформљавање листа (ul, ol).
  • Ресетовање стилова за табеле, форме, слике и друге елементе.

Пример основног CSS Reset-а:

/*
   CSS Reset: ресетује подразумеване стилове прегледача
   како би обезбедио уједначену основну изгледу елемената.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Укључује padding и border у укупну ширину/висину елемента */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Глаткоћа фонта */
}

img, picture, video, canvas, svg {
  display: block; /* Уклања подразумевани простор испод inline слика */
  max-width: 100%; /* Гарантује да слике не прелазе границе контејнера */
}

input, button, textarea, select {
  font: inherit; /* Наслеђује фонт од родитеља */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Омогућава пресецање дугих речи */
}

Постоје различите варијанте CSS Reset-а, као што су Reset CSS од Ерика Мејера или Normalize.css. Normalize.css, за разлику од потпуног ресета, задржава корисне подразумеване стилове и исправља само оне који изазивају проблеме са компатибилношћу. Избор зависи од пројекта и преференција развојног тима.