arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up
arrow_drop_up

Zapoznaj się z artykułami na naszym blogu! |

home
Poznaj nas
info
Kursy programowania
people
Sylwetki wykładowców
location_on
Gdzie działamy?
create
Nasze artykuły
mail
Zapraszamy do kontaktu!

Artykuły.

Reset i normalizacja w CSS.

Jak zapewne wiesz przeglądarka ma swoje domyślne style CSS, które są stosowane do Twojej strony. Zazwyczaj te ustawienia nie są optymalne i powinniśmy je resetować. Możemy to zrobić za pomocą właściwości priorytetów stosowania styli. Zauważ, że style autora mają większy priorytet, niż style przeglądarki. Można to zatem wykorzystać w praktyce. Tworząc swój plik CSS nadpisujesz ustawienia domyślne przeglądarki. Taki minimalny reset CSS może wyglądać następująco:

* { margin: 0; padding: 0; }

Jednak warto się zastanowić nad całkowitym resetem wszystkich ustawień domyślnych. Przykład zawartości pliku resetującego ustawienia przeglądarki znajdziesz na wielu stronach traktujących o CSS. Przykładowy plik można pobrać np. z tej lokalizacji:

https://css-tricks.com/snippets/css/meyer-reset/

Oto zawartość resetu:

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, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

                margin: 0;

                padding: 0;

                border: 0;

                outline: 0;

                font-weight: inherit;

                font-style: inherit;

                font-size: 100%;

                font-family: inherit;

                vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

                outline: 0;

}

body {

                line-height: 1;

                color: black;

                background: white;

}

ol, ul {

                list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

                border-collapse: separate;

                border-spacing: 0;

}

caption, th, td {

                text-align: left;

                font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

                content: "";

}

blockquote, q {

                quotes: "" "";

}

 

Warto również zajrzeć do tej lokalizacji:

http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/

 

Normalizacja CSS.

Coraz częściej pojawiają się głosy mocnej krytyki stosowania resetu CSS. Przeciwnicy tej metody twierdzą,  że resetowanie ustawień, których nigdy nie użyjemy na naszej witrynie nie ma większego sensu, a te które użyjemy i tak musimy generalnie ustawiać od nowa (więc i tak w praktyce resetujemy je samodzielnie).

Powstała więc alternatywna dla resetu normalizacja.

Normalizacja polega na zastosowaniu kodu, który odpowiada za standaryzację interpretacji wybranych znaczników we wszystkich przeglądarkach ! Po zastosowaniu normalize.css mamy pewność, że dany znacznik będzie wyglądał tak samo we wszystkich przeglądarkach. My jedynie
w dalszej kolejności (nadpisując te style) zmieniamy ich wygląd dostosowując je ew. do naszej typografii.

Fragment pliku normalize.css:

article,

aside,

footer,

header,

nav,

section {

  display: block;

}

Od tej pory wszystkie przeglądarki (nawet starsze wer. IE) będą odpowiednio interpretowały nowe znaczniki semantyczne jako elementy blokowe.

Gotowy skrypt normalize.css pobierzesz z następującej lokalizacji:

http://necolas.github.io/normalize.css/

Główna różnica pomiędzy resetem, a normalizacją jest taka, że normalize normalizuje style często używanych elementów np. nagłówków, a reset je „zeruje”.

Co zatem używać ? Musisz sam sobie wyrobić zdanie praktykując oba podejścia. Warto jednak zaznaczyć, że normalize jest podejściem zdecydowanie nowszym. Zdarza się również, że ani jedno, ani drugie rozwiązanie nie jest nam przecież do niczego potrzebne ;)

Lista artykułów Strona główna
menu
arrow_drop_up
Front-End (14.09.2024), Full-Stack (14.09.2024) [ szczegóły ]