Resetowanie CSS, po mojemu
Nawykowe już wklepywanie właściwości zerujących marginesy, dopełnienia itd. zaczęło mnie irytować do tego stopnia, że wziąłem się w garść i napisałem własny arkusz resetujący domyślne reguły CSS.
Reguły są dość rygorystyczne. Po zastosowaniu arkusza należałoby nadać właściwości przede wszystkim takim elementom jak emfaza (em), silna emfaza (strong), źródło odwołania (cite) i zawartość wstawiona (ins) – moje ustawienia są dla nich bezlitosne. Mnie oszczędzi to trochę pisania, jeśli komuś nie odpowiada, niech sobie zmodyfikuje, co trzeba. Linie 33. i 39. z założenia mają służyć do określenia domyślnego kroju czcionki używanego na stronie (elementy formularzy są w tej kwestii dość kapryśne). Dodałem także odpowiednie cudzysłowy dla cytatów liniowych (q). Trochę to sprzeczne z ideą resetowania, ale i tak wypadałoby zastosować coś takiego (tutaj w wersji właściwej dla stron w języku polskim). Skrótom i skrótowcom ustawiłem kursor pomocy – tak lubię.
Kod wyciąłem ze względu na aktualizację pliku. Numery linii, do których odnosiłem się wyżej we wpisie są nadal aktualne ;-)
Całość oparta na „niemiłych” doświadczeniach. Waliduje się jako CSS3. Przy pisaniu wspomagałem się użyteczną listą poleceń, pochodzącą z kursu HTML autorstwa Pawła Wimmera. Uzupełniające hacki dla Internet Explorera już wkrótce (IE6 nie obsługuje selektora atrybutu; żadna z wersji IE nie radzi sobie z cudzysłowami w cytatach liniowych).
Gotowy arkusz do pobrania: reset.css.
Plik udostępniam na takiej samej licencji, jak wpisy na niniejszym blogu. Komentarze/sugestie mile widziane ;-)
Arek F. pisze:
Bardzo przydatna rzecz. :D
Dzięęęęęęekuuujeeeeemyyy :)
Swoją drogą, w jaki sposób tak fajnie pokolorowałeś kod ;p ?
Dodano 13 kwietnia 2008 o 16:27:59 ¶
Wasacz pisze:
Kolorowanie składni z GeSHi ;)
Dodano 13 kwietnia 2008 o 16:29:16 ¶
Minio pisze:
Jest jakiś powód wypisywania tylu tagów zamiast po prostu * (gwiazdki) w pierwszej deklaracji?
Dodano 13 kwietnia 2008 o 17:53:09 ¶
Wasacz pisze:
Minio: przede wszystkim, nie chcemy stylować wszystkich elementów, np. formularzy.
Dodano 13 kwietnia 2008 o 18:00:37 ¶
Minio pisze:
Aha.
Chociaż z doświadczenia wiem, że formularze też potrafią sprawić problem: inputy pod okienkiem do wyszukiwania w MediaWiki z godnym podziwu uporem nie chciały się wyświetlić w jednej linii w Fx :) .
Dodano 13 kwietnia 2008 o 18:06:28 ¶
Dominik Porada pisze:
@Minio, <IE6 nie obsługują *, chociaż już mało kto na to patrzy, ale IMO i tak lepiej zrobić sobie całość w stylu Wasacza, ponieważ ma się nad tym lepszą kontrolę – niepozbawianie formularzy swojego wyglądu też FTW. :)
Dodano 14 kwietnia 2008 o 00:29:25 ¶
Chris Trynkiewicz pisze:
Sexy, dzieki ;)
Sie by przydaly hacki pod ie… Moze jeszcze naprawianie position: fixed w ie? Sie czasem przy reklamach stosuje…
Dodano 14 kwietnia 2008 o 08:58:30 ¶
zx pisze:
A to nie było tak z tą gwiazdką, że jej zaaplikowanie do wszystkich elementów jest dużo wolniejsze niż przydzielenie stylu do iluśtam elementów oddzielnie?
Dodano 14 kwietnia 2008 o 10:33:01 ¶
art.stk pisze:
Też myślałem nad zrobieniem swojego „css-reset”, ale ograniczyłem się do lekkiej modyfikacji niedawno zaktualizowanego zestawu Erica Meyera.
Dodano 14 kwietnia 2008 o 12:58:48 ¶
Minio pisze:
Dominik Porada: niedziałanie w archaicznej przeglądarce sprzed 9 lat nie jest argumentem, co zresztą zauważyłeś.
zx, wasacz: mówicie o odczuwalnym zwolnieniu wyświetlania strony/działania przeglądarki/whatever na przeciętnym komputerze (powiedzmy 2GHz i 512 MB RAM-u), czy zwolnieniu rzędu setnej części sekundy wykazanemu przez benchmarki?
Dodano 14 kwietnia 2008 o 13:10:59 ¶
zx pisze:
Minio: Ktoś mi jakoś kiedyś wpoił, że gwiazdka jest ‘be’ i się nawet nie zastanawiałem. Ale tak mi się wydaje, że to może być zauważalne jednak. Pewnie nie zawsze, ale jeśli nałożyłoby się na siebie kilka podobnie ‘niewiele zwalniających’ usterek, to mogło by z tego coś być. A im więcej różnych elementów w kodzie się użyje, tym bardziej.
Dodano 14 kwietnia 2008 o 13:21:18 ¶
Minio pisze:
Wiadomo, gwiazdka użyta na stronie pokroju onet.pl z pewnością będzie przetwarzana dłużej niż na google.pl ;) .
Ale wydaje mi się, że nie ma powodu by gwiazdki unikać jak ognia. Jednak, oczywiście, każdy wybiera co lubi.
Dodano 14 kwietnia 2008 o 13:33:44 ¶
Wasacz pisze:
Minio: w kilku miejscach znalazłem podobne uzasadnienia: przede wszystkim „gwiazdka może działać” wolniej – czasem nieznacznie, ale wolniej. Na bardzo prostych stronach nie zawsze jest potrzeba resetowania domyślnych reguł. A przy większych projektach „gwiazdka” odpada, wiadomo.
Druga sprawa to formularze: jeśli zaczniesz usuwać obramowania, tło i tak dalej, kontrolki będą wyglądać okropnie, a do domyślnego wyglądu ciężko będzie powrócić. Poza tym nie zawsze istnieje konieczność resetowania wszystkich elementów (ze szczególnym naciskiem na elementy wyświetlane w linii).
Trzeci argument, już raczej nieaktualny: „gwiazdka” jest obsługiwana dopiero od IE6. Na chwilę obecną nie mówi się raczej o wsparciu dla IE5.x – w końcu mamy IE7, a prace nad IE8 są już na bardzo zaawansowanym etapie.
I właściwie, to wszystkie te argumenty padły tutaj, w komentarzach. Podsumowałem tylko :)
Dodano 14 kwietnia 2008 o 14:09:20 ¶
Wasacz pisze:
Chris Trynkiewicz: bardzo dobry zestaw hacków od Deana Edwardsa ;-)
art.stk: Eric Meyer opublikował zaktualizowaną wersję arkusza, o którym piszesz.
Dodano 14 kwietnia 2008 o 14:10:16 ¶
Chris Trynkiewicz pisze:
@Wasacz: Dzieki, bookmarked ;)
Dodano 14 kwietnia 2008 o 14:11:12 ¶
art.stk pisze:
Wasacz: a, tak, o ten mi chodziło, tylko zły link podałem ;)
Dodano 14 kwietnia 2008 o 14:14:55 ¶
Luken pisze:
Jeśli dobrze pamiętam to Yahoo udostępniło coś podobnego.
Edit: http://developer.yahoo.com/yui/reset/
Można tam znaleźć inne ciekawe rzeczy do zabawy z CSS. ;)
Dodano 14 kwietnia 2008 o 16:45:21 ¶
Wasacz pisze:
Dużo jest gotowych arkuszy resetujących :) Ja potrzebowałem swojego, w którym uwzględnione byłyby moje potrzeby :)
Dodano 14 kwietnia 2008 o 16:46:33 ¶
Bodek pisze:
moze głupie pytanie ale nie za bardzo wiem: do czego jest ten plik, czemu ma słuzyc i jak go uzyc?
Dodano 14 kwietnia 2008 o 17:30:05 ¶
Wasacz pisze:
Plik służy to resetowania domyślnych właściwości CSS. Oszczędza to późniejsze wklepywanie konstrukcji typu:
margin: 0; padding: 0;itd. podczas pisania kodu.Zastosować najlepiej poprzez importowanie do głównego arkusza:
Dodano 14 kwietnia 2008 o 17:35:58 ¶
michonek pisze:
bardzo fajny i przydatny pliczek :)
Dodano 19 kwietnia 2008 o 21:32:38 ¶
rad pisze:
osobiście używam reset.css od Erica Meyera, trochę śmieci w Firebugu, ale cóż.
Dzięki za info nie wiedziałem, że wydał nową wersję.
Ja używam domyślnie dwóch arkuszy stylów reset.css do resetowania i default.css do ustawiania tego co zawsze ustawiam np. font-size na 62.5% (1em=10px)
co do resetowania przez * to powinniśmy resetować konkretne elementy które są złe, a nie wszystko. Idea polega na tym, że mamy powracać do tego co jest ustalone w standardach, poprawiać to co źle robią przeglądarki, a nie ustawiać według własnego widzimisię.
Dodano 24 kwietnia 2008 o 23:41:27 ¶
Wasacz pisze:
Ja część „defaultowych” reguł wrzucam do arkusza resetującego (po co mnożyć liczbę żądań do serwera).
Dodano 25 kwietnia 2008 o 16:15:06 ¶
rad pisze:
@Wasacz: oczywiście tak, ale to już kwestia optymalizacji. W procesie tworzenia, projektowania użycie osobnych styli jest znacznie wygodniejsze :P
Dodano 25 kwietnia 2008 o 17:25:44 ¶
Wasacz pisze:
Racja, ale potem nie żałujesz sobie osobnych arkuszy na layout, formularze, typografię, kolory… Chyba, że magicznie (w locie) parsujesz to w jeden plik :)
Dodano 25 kwietnia 2008 o 17:27:24 ¶
rad pisze:
> Racja, ale potem nie żałujesz sobie osobnych arkuszy na layout, formularze, typografię, kolory…
z reguły obok reset.css i default.css jest jeszcze jeden plik style.css tam jest wszystko logicznie ułożone i ładnie skomentowane. Chyba, że robię jakiś większy projekt wtedy np. jest reset, default jakiś główny, a reszta adekwatnie do np. wtyczek
> Chyba, że magicznie (w locie) parsujesz to w jeden plik :)
to już chyba lepiej niech będzie jedno więcej odwoładnie do pliku :P takie parsowanie w locie na bierząco może
się źle skończyć dla serwera ;P Chyba, że robisz to magicznie, albo używasz cacheu ;)
Dodano 25 kwietnia 2008 o 17:35:03 ¶
Wasacz pisze:
Cache, cache ;-)
Dodano 25 kwietnia 2008 o 17:41:09 ¶
Wasacz pisze:
Aktualizacja pliku – zresetowałem rozmiar czionki dla elementów formularzy oraz poprawiłem problem z linkami, które mają fokus. Przy okazji zmienił się URL pliku.
Dodano 30 czerwca 2008 o 20:17:41 ¶