Reset styli CSS

11 maja 2010

No tak… Ledwo się Riddle pojawił a już mi podebrał temat o którym planowałem w najbliższych dniach napisać ;) Ale to bardzo dobrze bo pewnie nie mielibyście takiego pożytku z mojego wpisu jak z jego.

Każda przeglądarka internetowa ma zbiór podstawowych reguł CSS, które ustawiają właściwości tagów HTML. Dzięki temu możemy stworzyć dokument HTML bez żadnych reguł CSS a mimo to będzie odpowiednio wyglądał (tag strong będzie pogrubiał, h1 będzie ustawiał odpowiednio duży nagłówek itd.). To nie jest efekt jakichś magicznych reguł umieszczonych wprost w kodzie źródłowym przeglądarki a właśnie rezultat zastosowania CSS.

Wszystko byłoby pięknie gdyby twórcy przeglądarek umieli się dogadać ale jak wszyscy wiemy nie potrafią nawet stosować się do przyjętych standardów więc jak tu wymagać aby stosowali takie same zasady w mniej formalnych aspektach. Z tego powodu mamy totalny bajzel. Wystarczy spojrzeć na te dwie strony (tu i tu – adresy też znaleziony u Riddle :) ) aby przekonać się jak duże różnice są między przeglądarkami a nawet ich poszczególnymi wersjami.

Dążąc do perfekcji (aby nasze strony wyglądały identycznie w każdej przeglądarce) webmasterzy postanowili stworzyć zbiór reguł CSS, które zresetują wszystkie zasady CSS ustawione przez przeglądarki. W ten sposób zaczniemy budować każdą stronę z „czystym kontem”. Wystarczy jednak wpisać w Google „CSS reset” aby się przekonać, że pomysłów na rozwiązanie problemu jest wiele. Który jest najlepszy?

Rozwiązaniem może być to co wczoraj zaproponował Riddle. Wygląda to naprawdę zgrabnie, jest dokładnie opisane, przygotowuje nas już do pracy z HTML5. Polecam.

Pamiętaj jednak, że nim zaczniesz stosować te reguły to dobrze byłoby je zrozumieć. Znam przykłady gdzie koder zastosował jakieś reguły mimo, że ich nie potrzebował i potem przy każdym wystąpieniu np. odnośnika (tu zwróć uwagę na to co napisał Riddle o text-decoration) je „odkręcał”. Z drugiej strony warto rozszerzać te reguły o swoje własne jeżeli upraszczają pracę z Twoim projektem. Nie chodzi przecież o to aby mieć idealne reguły resetujące ustawienia przeglądarek a o to aby posiadać reguły maksymalnie ułatwiające nam budowanie własnej strony.

EDIT 02.02.2011
Eric Meyer opublikował drugą wersję swoich resetujących styli, link tutaj.

  • Dodano: wtorek, 11 maj 2010 roku o godzinie 16:59
  • Kategorie: Tworzenie stron www
  • Tagi: , ,
  • Możesz śledzić odpowiedzi poprzez RSS
  • Możesz przeskoczyć do końca i zostawić komentarz. Pingowanie aktualnie jest wyłączone .
Dodaj komentarz

7 odpowiedzi dla tego wpisu

  1. Michał napisał: 11.05.10 o godzinie 21:46

    Dobrze pewne rzeczy poznać. Jednakże mam wrażenie, iż twój wpis na bloga nie robi nic innego, jak tylko reklamuje tamten.

  2. MariuszT napisał: 11.05.10 o godzinie 22:13

    Ja tu nie prowadzę działalności komercyjnej żebym miał coś reklamować ;) Zamierzałem jutro wziąć się porządnie za ten temat ale skoro ktoś mnie ubiegł i zrobił to naprawdę dobrze to pozostaje mi tylko podlinkować. Z drugiej strony nie mam w zwyczaju zamieszczać na tym blogu wpisów na dwa zdania z linkiem dlatego dodałem kilka słów od siebie dla osób, które zetknęły się ze sprawą pierwszy raz.

    Naprawdę nie sądzę żeby wpisy informujące o artykułach innych były bezwartościowe. Dobre praktyki trzeba reklamować wszelkimi sposobami. A powtarzanie po kimś też się mija z celem… Czasami ja linkuję, czasami linkują do mnie. I świadomość webmasterów rośnie :)

  3. MariuszT napisał: 11.05.10 o godzinie 22:16

    PS Piotrka nie znam, w życiu z nim słowa nie zamieniłem, czytałem jedynie jego blog i dzisiaj dwa razy się tutaj wypowiedział. Piszę na wszelki wypadek gdyby komuś przyszło do głowy, że mam jakiś ukryty cel w tym, że dwa ostatnie wpisy mają z nim związek.

  4. Kamil napisał: 12.05.10 o godzinie 1:02

    Jeśli już używać jakiegoś arkusza resetującego domyślne ustawienia przeglądarek to lepiej wybrać te zalecane przez najlepszych, nie szukać w Googlach pierwszych lepszych. Mam na myśli oczywiście:

    http://yui.yahooapis.com/2.8.1.....et-min.css
    http://meyerweb.com/eric/tools/css/reset/

    Riddle wspomniał o konieczności czytania komentarzy w powyższych stylach. Przestrzegając zaleceń i ostrzeżeń autorów, takie style są w zupełności wystarczające :-)

    Z drugiej strony myślę, że na Riddle też można polegać i jego arkusz resetujący jest również bardzo dobry – choć szczerze mówiąc nie analizowałem.

  5. MariuszT napisał: 12.05.10 o godzinie 2:02

    Kamilu, nigdzie nie nakłaniam do korzystania z pierwszego lepszego reset.css znalezionego w Google. Wręcz przeciwnie, pokazuję, że mnogość rozwiązań jest problemem. Każde z tych najpopularniejszych rozwiązań jest dobre, to od Riddle też. Pod jednym warunkiem: że rozumiemy jak działa. Rozwiązanie Piotra zasługuje na wyróżnienie bo jest opisane, uczy czegoś więcej niż CTRL+C, CTRL+V.

  6. Kamil napisał: 12.05.10 o godzinie 10:29

    No tak, ale styl Eric Mayera także jest opisany w komentarzach. Natomiast o stylu YUI jest nawet 40-minutowy filmik na ich stronie :-) http://developer.yahoo.com/yui/reset/

    Warto też wspomnieć, że Eric jest ‘invited expert’ w W3C, więc myślę, że dobrze wie co robi ^^ Riddle opisał co i jak, więc też jak najbardziej na plus. Wyprzedza innych tym, że zdefiniował style resetujące dla HTML5.

  7. MariuszT napisał: 12.05.10 o godzinie 12:17

    Dobrze, więc należy się chyba zgodzić, że wszystkie trzy są godne polecenia i przeanalizowania ;)

Odpowiedz



Podobne wpisy: