Resetowanie domyślnych stylów CSS
Zanim rozpoczniemy stylowanie strony internetowej warto zresetować domyślne wartości CSS ustawiane przez przeglądarkę WWW. Jest to o tyle ważne, że tak naprawdę każda przeglądarka internetowa inaczej interpretuje wygląd poszczególnych elementów HTML. Takie zachowanie wiąże się z tym, że w niektórych sytuacjach strona może nie wyświetlać się poprawnie czego raczej chcielibyśmy uniknąć. Do tego dochodzi również dodatkowy problem polegający na tym, że jeżeli zdecydujemy się już na wykorzystanie domyślnie osadzonych stylów CSS to de facto tracimy kontrolę nad własnym projektem, a w przypadku jakiejś niezależnej od nas aktualizacji, wszystko może się zepsuć.
Jakie style wymagają zresetowania?
Oczywiście nie wszystkie domyślne style CSS resetujemy. Nie ma większego sensu wykonywać tej procedury na przykład dla znacznika <code> </code> zmieniając format czcionki. Zresetowania wymagają między innymi elementy takie jak:
margin,padding,ul,ol,line-height,outline,border,vertical-align…blockquote.
Kod resetujący
Najpopularniejszym resetem CSS’a jest chyba reset autorstwa Erica Meyera. Jego kod możecie dowolnie wykorzystać w swoich projektach:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
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;
}Po wklejeniu tego kodu na początku swojego arkusza stylów możecie bez większego problemu rozpocząć dalszą pracę.
Myślę, że to rozwiązanie w całości załatwia sprawę ale jeśli chcielibyście coś dodać do tematu to zapraszam do dyskusji w komentarzach…
Jak widać w komentarzu jest to kod z 2011 roku. Obecnie praktycznie zawsze korzysta się z frameworków HTML (np. Bootstrapa) i wtedy nie mamy żadnego problemu z resetowaniem stylów CSS.
Nawet jeśli korzystamy z czystego CSSa to nie jest to jakoś bardzo konieczne i odpowiednie style zmienia się po prostu według własnego uznania. Wiem, bo miesiąc temu skończyłem projekt bez użycia jakichkolwiek frameworków :)
No ale warto wiedzieć, że takie coś było i ewentualnie można takie coś zastosować w razie potrzeby.
Jeżeli korzystamy z frameworków to nie ma o czym mówić ;) Ale jeśli ich nie używamy no to tutaj moim zdaniem warto te CSS’y zresetować, oszczędzi to wiele pracy i nerwów w późniejszych etapach projektu ;)
Tak, zmienia się według własnego uznania, ale, powiedzmy że robisz coś w chromie, a on sobie nadaje swoją jakąś tam wartość vertical align(która nam odpowiada), a firefox swoją(która już nam coś psuje) i teraz ten sam kod wygląda inaczej i musisz potem to sprawdzać i ręcznie ustalać. Resetowanie oszczędza nam czasem tych kilku drobnych nieścisłości pomiędzy przeglądarkami. :)
Obecnie właśnie korzystanie z takich durnych frameworków jest debilizmem. Nawet obserwijac rynek, korzystają z tego głównie ci, którzy nie wiedzą, co robia. Uzywajac natywnego flexboxa czy grida, w 5 minut masz pełny układ calej strony, ktory działa lepiej, nic nie narzuca, działa szybciej i jest w pełni elastyczny.
Artykuł dobry, krótki i treściwy. Przydatny szczególnie dla początkujących programistów stron internetowych. Liczę na więcej tego typu wpisów, z konkretną dawką wiedzy :)
A co jeśli reset działa tylko na niektórych przeglądarkach? Nie wiedzieć czemu firefox 53.0.2 nie przyjął tego resetu i w związku z tym nie wyświetla stylów ustalonych w cssie. Jak to naprawić? Wie ktoś może?
Jakie style konkretnie się wyświetlają dalej?
Jaki Pan spodziewa się rewanż za użycie „kodu resetu styli css” ?
Oferuję (pod)linkowanie na czterech domenach :
fand.pl
8kompetencji.pl
12kompetencji.pl
eko-fand.pl
i perspektywicznie jeszcze „nie wpiętą w Internet” domenę samostanowczyk.pl
-Doczytałem „o dowolnym udostępnieniu” Pańskiego rozwiązania. I, i tak oferuję (pod)linkowanie, jeżeli moje treści nie kłócą się w Wizerunkiem STREFYKODERA.PL
Hej, Andrzej. Dziękuję, za każdy link :) Możesz również powiedzieć znajomym o blogu oraz zapisać się do newslettera (formularz w prawej kolumnie). Zapraszam do lektury innych artykułów!
Inaugurujesz więc „zakresy” tematyczne „Linki SEO” na moich domenach. Chciałem znaleźć ( chyba ) skromną formę tym zakresom i z Twoją odpowiedzią to się stało.
Kliknąłem dodane linki SEO. Chwil kilka minęło, tyle że Żywym Słowem Pisałem.
Kliknięcia u mnie widoczne w statystykach domen. ;)