Reset stylów CSS

CSS3
CSS3

Chyba każdy, kto tworzył strony internetowe, spotkał się z problemem jakim są różne domyślne style dla elementów, zależnie od przeglądarki internetowej. Wielkości nagłówków, marginesy, wysokość linii, wcięcia w listach mogą dla tych samych elementów być całkowicie różne w Google Chrome, Mozilla Firefox, Internet Explorer i w przeglądarce Edge.

Oczywiście, jeśli napiszemy dla każdego elementu złożone style uwzględniające wszystkie te właściwości, elementy będą tak samo wyświetlane. Jednak czasem z pewnych względów nie uwzględniamy wszystkich stylów lub po prostu testujemy stronę na jednej przeglądarce i zapominamy o pozostałych.

Jednym ze sposobów na rozwiązanie tego problemu jest zresetowanie stylów na początku dokumentu, dzięki czemu wszystkie elementy na stronie będą tak samo wyświetlane w każdej przeglądarce – nawet w archaicznym Internet Explorer. Oto kod jaki musimy dodać w naszym pliku 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;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display:block;
}

body {
  line-height:1;
}

ul, ol {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close