25. 4. 2007 v sekci webdesign:

Resetování CSS

Resetovat, neresetovat, co resetovat, jak určitě neresetovat a několik podnětných odkazů. Pouze pro kaskádisty.

Na zahraničních blozích se vedou diskuse o resetování základních nastavení prohlížečů. Podstatná většina diskutujících se shoduje na jednom – resetovat, resetovat, resetovat. Bez počátečního resetu vám vznikne jen další práce při řešení konfliktů přednastavení jednotlivých prohlížečů.

Hvězdičkový selektor

V roce 2005 jsem napsal článek o hvězdičkovém selektoru – je to jednoduché a prosté řešení, jež zabere minimum řádků kódu. A nechutně vytíží prohlížeč – zvláště pak na větších webech. Doporučení – resetujte vše postupně. Tolik značek zas HTML nemá.

Osobně do svého iniciálního stylu rovněž cpu definice, které používám pořád a stále – autoclearování floatů pomocí :after, blokové zobrazování obrázků (čti: dám všem obrázkům display: block), nějaké skrývací třídy, co mám domluvené s programátorem apod. Ano, mohl bych si vytvořit další styl, leč méně stylových souborů je méně dotazů na server, ablablabla..

Jaké máte zkušenosti s resetováním CSS vy?

Související články

Komentáře

1. Ukee
25. 04. 07, 17.31

Já třeba resetuju hvězdičkou a problémy s tím nemám … teda teď už ne, než jsem zjistil, že zase zpětně musím vyřešit např. „p“, aby opravdu vypadalo jako „pragraph“ a ne jako hnusný blok textu.

2. JC
25. 04. 07, 18.17

K tomu clearovani floatu… Vim o reseni, ktere se mi zda jako nejcistsi ze vsech. Zadne css hacky, zadne elementy s clear: bloth navic… Jen staci rodicovskemu prvku nastavit jakoukoliv sirku (i procentni) a pridat overflow: hidden. Pak si uvnitr muzeme plavat jak chceme a rodicovsky element bude zakonceny az pod plavacky :-)

Zdroj: http://www.quirksmode.org/…learing.html

25. 04. 07, 18.57

[2] Ještě, že si píšu blog, jinak bych přišel o spoustu informací.. třeba o tenhle článek jsem zakopnul poprvé právě DNES. Muhehe.

25. 04. 07, 19.44

[2] Pokud ovšem opakuješ pozadí (tedy simuluješ sloupce) tak stejně musíš nastavit clearovací prvek, nebo ne?

5. dgx
25. 04. 07, 19.45

Nic neresetovat! Alespoň ne bezhlavě, třeba pomocí hvězdičky. Způsobí to víc komplikací než užitku.

Resetujte jen s rozmyslem a pouze konkrétní značky a u každé dobře zvolené vlastnosti (například smazat border pro img).

25. 04. 07, 20.18

Nu – já jsem starý resetář :-) ale faktem je, že vše zresetované by mělo být nastylováno – reset je pouze zjednodušení následného stylování..

7. tiso
25. 04. 07, 20.46

Súhlasím s dgx – resetujem iba to čo mi robí problém, resp. aj tak by som tie hodnoty menil:
html, body, h1,h2, a{margin: 0;border:0;padding: 0;}
Rozdiely pri ostatných textových prvkoch nie sú podstatné, nie je nutné nastavovať margin a padding presne na pixel pre každý prehliadač…

25. 04. 07, 20.51

resetovat s rozmyslem… hvězdičkový reset dělá v určitých případech problémy formulářovým prvkům
rozhodnutí resetovat vybrané prvky padlo už před lety a teď už si nevzpomínám proč :) ale určitě to nebylo jen tak…

25. 04. 07, 21.13

Já se přiznávám k užívání hvězdičkovýho selectoru, vážně mi to ušetřilo spoustu starostí (avšak některé i přineslo) a teď od něj upouštím, za těch pár webů s hvězdičkovým resetem jsem si už zjistil, které prvky si já potřebuju resetnout, takže teď už se to týká jen jich :)

25. 04. 07, 22.24

no já resetuji prakticky jen body, html, ul a li a p.
hvězdička určitě ne, pak se velmi blbě stylují formuláře

spíš by mě ale zajímalo, jak resetovat expost – chtěl bych nějak elegantně čistě přes css vyřešit zobrazení pro pda, aby fungovalo ale i v tom pitmoým ie co tam je, které zobrazuje styl i když je určen pro jiné zobrazovací médium než handheld. Buď mě napadaly nějaké hacky a nebo právě následné vyresetování všech stylů pro handheld css, takže by to viděly jen pda prohlížeče. jde to nějak (vyjma hvězdičky a !important? nebo jak to řešíte vy (nechci to dělat server side)?

11. Kukuč
26. 04. 07, 06.43

A já bych řekl, že dnes už se řeší jen kraviny. Vše podstatné bylo řečeno, tak se vrtá i v tomto ačkoli to nemá žádný smysl.

Resetování s hvězdičkou používám neustále a nikdy to nepřineslo žádný problém ani komplikaci. Jsou to takové pindy a mýty. Stejně jako tom, že tato deklarace může v některých případech brzdit pomalá PC a zatěžovat je. Blábol.

A to že není vše nastavovat na pixel přesně ve všech prohlížečích? No u klanového webu asi ne, ale profesionální práce se má snažit býti pixel-perfect jak nejvíce to jde.

12. Tom
26. 04. 07, 07.11

Co se týče resetování, snažím se být opatrný a resetovat skutečně jen to, co způsobuje problémy…

to JC: myslím si to, co IVO TOMAN – při použití opakující ho se pozadí ve sloupcích je stejně nutné použití clear:both… ale můžu se mýlit.

26. 04. 07, 08.49

Osobně používám jeden CSS soubor, kde předefinuju výchozí nastavení toho, co potřebuju – zpravidla provedení nadpisů, barvy odkazů, základní font ve stránce a prvcích formuláře, nebo třeba styl odrážek. Mám to pak pěkně po ruce a zároveň odděleně, a vím přesně co upravuju.

26. 04. 07, 09.55

[11] a mohl bys mi předvést nějaký svůj skutečně velký web? Něco jako 1000 řádků HTML kódu / stránka? Nemohl.. proto je to pro tebe kravina.

15. Ukee
26. 04. 07, 10.53

Já si zase myslím, že být pixel perfect je jen zbytečná noční můra.

Nikdy jsem se např. nesnažil, aby ve všech majoritních prohlížečích web vypadal stejně, osobně mám radši, když je web decentně jiný – stejně se najde jen mizivé procento uživatelů, kteří pro návštěvu jednoho webu používají více prohlížečů – to snad dělají jen ti, kteří se tím živí.

Na druhou stranu je fakt, že „magická hvězdička“ dokáže u hodně velkého webu nadělat celkem paseku. S vytížením PC bych si zase tak moc hlavu nelámal.

16. kahi
26. 04. 07, 20.32

> A nechutně vytíží prohlížeč – zvláště pak na větších webech.

Co je to prohlížeč? Co je to větší web?

27. 04. 07, 09.00

Otestováno na FF, web byl něco ve smyslu 60kB HTML, 60kB stylu, 30kB obrazku a 60kB JS :-) renderovani stranky 5s bez prenosu.. coz samozrejme nebylo zpusobeno JEN hvezdickou.. ale taky mela svuj podil..

28. 04. 07, 02.10

Tak zase jeden užitečný článek. Nikdy by mě nenapadlo (tedy čtu prvně), že by * dělala problémy. Já osobně se s tím zatím nesetkal.

Ale zase je to podnět k doplnění vzdělání a upravení už tak kvalitních stylů :-D

19. kahi
29. 04. 07, 00.06

Jak to tak vypadá, solidního důkazu nebo argumentu, že hvězdička je špatná, se asi nedočkám. :-)

29. 04. 07, 10.06

Přesně tak – klidně to dál používej :-) pro ostatní: Starting with CSS, ale důkaz tam taky nenajdete :-)