CSS reset

shaggy:
V tom případě souhlasím, já byl podle tady místních reakcí přesvědčen, že jste odpůrci jakéhokoliv resetu (viz. Chamurappi) a budete raději 30x v kódu zadávat border:none.

Medvídek:
Nepoužití resetu a "neopakování v kódu třicetkrát..." se nevylučuje.

Medvídek:
„a budete raději 30x v kódu zadávat border:none.“
já taky žádný z „osvědčených“ nebo jinými autory vydaných resetů nepoužívám, a přesto „border: none“ pro obrázky v odkazu zadávám jen jednou.

Naopak, nastavení všemu (nebo nějaké skupině elementě) nulový margin, padding, border a nějakou velikost písma (+ případně další vlastnosti uvedené v resetu) namísto defaultního a jeho následné přepsání skutečně potřebnou hodnotou všech uvedených vlastností... je zbytečný řádek kódu, nic víc.

Obecně platí, že:
s resetem: defaultní hodnoty > nastavení nulových hodnot > nastavení potřebných hodnot
bez resetu: defaultní hodnoty > nastavení potřebných hodnot

Začátečníkovi může nulování (ale pouze u selektivního výběru, nikoliv *) hodnot pomoci, jinak je to (téměř) zbytečné.

osobně již přes rok s maximální spokojeností používám HTML5 Boilerplate - doporučuji brat aktualni verzi z gitu.

tak sem se taky musel kouknout co používám a používám asi Mayerův v2.0 :) vůbec netušim co resetuje a je mi to jedno, jen jsem mu musel doplnit zpět b,strong,i,em na jejich styly, to mě totiž vytáčelo. Chtěl jsem jedno, míň stresu s IE a to ani nevím jak, ale splnil. Teď mam víc stylování se vším (jak píšete), ale všade je výsledek v podstatě stejný. Velkou nevýhodou je že jsou to data a zátěž pro prohlížeč navíc, ale jelikož všechno kolem kompů nesnášim a chci vědět jen to co potřebuju k práci, tak jsem za něj rád. Moje shrnutí - když se obejdeš bez něj je to lepší, ale línému člověku který může pomoci, ve finále totiž ten reset použije každý (i když ne kompletní), jen uvnitř svého jiného stylopisu.

panther:
podle mě Medvídek tak trochu narážel na to, že čím se liší ono img{border:none} když je v reset.css a nebo když je v style.css

Ugo:
„Chtěl jsem jedno, míň stresu s IE a to ani nevím jak, ale splnil.“
Může to ovšem také být jen placebo. :)

„podle mě Medvídek tak trochu narážel na to, že čím se liší ono img{border:none} když je v reset.css a nebo když je v style.css“
Je to zbytečný požadavek na server. Ne vždy musíš nulový border vyžadovat. Pak tu hodnotu musíš stejně později přepisovat.

pEeLL:
„s maximální spokojeností používám HTML5 Boilerplate“
Už dávnejšie som na neho pozeral a považujem to za taký reset v2.0 (čiže ešte horšie, zbytočnejšie, väčšie).

Páči sa mi hlavne tá logika:
1. má to byť jednoduchá vzorová šablóna,
2. a pretože sú moderní, nájdeme všade pekné nové html5 tagy™
3. kvôli predchádzajúcemu bodu doťahujú pekný malý modernizr
4. ako bonus pridávajú množstvo podmienených komentárov pre IE
5. a keďže podľa ich tvrdení IE odmieta uveriť, že stránka s toľkými podmienenými komentármi je moderná (sa mu nečudujem), tak tam ešte pridávajú jeden meta X-UA-Compatible.

Inak povedané, kým tento kanón na toho komára zameriaš a stihneš vystreliť, tak je dosť možné, že komár stihne uletieť a zomrieť na starobu.

pEeLL:
Pozrel som si trochu toho zazracneho kodu. A podobne veci ako napr:
Ma teda dost zarazaju... Bud som teda absolutne neschopny koder, ale jednoducho nepoznam ziadny prehliadac, ktory by tymto tagom daval weight: normal
A takychto blbosti je tam mnoho. Takze zase som dospel k nazoru, ze je to zbytocnost, vlastne OBROVSKA zbytocnost kodu naviac.

Chci se v této diskusi někam dostat.
Luke9 na začátku napsal dotaz: Ahoj lidi, mohl by mi prosím kdokoli doporučit nějaký dobrý CSS reset? Zatím jsem na žádný, co by mně vyhovoval, nenarazil, tak snad někdo něco znáte.

Pár odkazů na resetovací vrstvy se tu objevilo, ale také tu vzplanula obsáhlá diskuse nad smysluplností a efektivností těchto stylů. Padaly zde argumenty proč ano a pro ne. Hodně to i stojí na osobních zkušenostech a postojích nás, jednotlivých kodérů.

Ale jsme tu i tací, kteří toto chceme používat a hledáme nejlepší cestu. Vyzívám nás, abychom sem tedy psali konkrétní CSS Resetovací vrstvy a k nim konkrétní a věcné poznatky. Jestli není zbytečně přeplácaná, jestli někomu neřeže nožičky či nedělá jiné vylomeniny.

V práci používáme http://developer.yahoo.com/yui/reset/#code. Na žádný problémy sem během mého ročního setrvání nenarazil a to sem s CSS pracoval až moc :).

Jak už jsem psal zpět, používám reset z GRID 960. Také nemám problém. Používám to od roku 2009.

Zaujalo mě, jak spousta resetů pečuje o element <q> a jeho nespolehlivé uvozovky. Používá ho někdo z vás?


Reaguji na @koucika:
„CSS reset je pouze berlička. Daleko přínosnější je normalize.css od @necolas, který se snaží pouze o konsistenci napříč browsery“
I to je druh resetu. Také má své vady — způsobuje nekompatibilitu ve velikosti písma u elementů <sup> a <sub>, ve všech Explorerech budou menší kvůli zápisu:
Stejná chyba je i v JaySeeho oblíbeném resetu. Kdo z lidí, kteří na spásné účinky resetu spoléhají, bude schopen ji najít?


Reaguji na pcmanika:
„jednoducho nepoznam ziadny prehliadac, ktory by tymto tagom daval weight: normal“
Logika za takovým zápisem je, že v některých prohlížečích je výchozí styl bold a v některých bolder, takže když jsou tyto elementy uvnitř něčeho tučného, můžou být ještě tučnější (dovoluje-li to písmo). Nevím, jestli se opravdu všem uživatelům resetu paušálně hodí srovnání na bold, mně by přišlo logičtější rovnat na bolder, když už…


Reaguji na precu1:
Koukám na YUI reset:
1) Nulováním u <input>u nabourává vertikální pozici zaškrtávátek a přepínačů (chyba převzatá od dříve zmíněného hvězdičkového resetu).
2) Ničí systémový vzhled <fieldset>ů, což se nemusí pokaždé hodit.
3) Zbytečně nuluje margin u <div>u a padding u většiny elementů v onom selektoru.
4) Zbytečně mění velikost nadpisů na 100%. Copak někdy zůstane taková?
5) K čemu je border-spacing: 0 při border-collapse: collapse?
6) Zrušení výchozího odlišení elementů <em>, <strong>, <abbr> a <acronym> je skutečně většinou žádoucí?

JaySee:
„Vyzívám nás, abychom sem tedy psali konkrétní CSS Resetovací vrstvy a k nim konkrétní a věcné poznatky.“
Ale veď my sme písali, aké sú nevýhody tých, konkrétnych CSS resetov. To, že ich nepoužívame predsa neznamená, že nepoznáme ich prednosti a nedostatky.

Chamurappi:
V tomhle případě bych se zdráhal nazvat to druhem resetu. Reset je z principu nějaká sada pravidel, která ruší původní vlastnosti prvku. To normalize.css nedělá, snaží se pouze sjednotit elementy napříč prohlížeči. Ano, není dokonalý, ale myslím si, že výsledný přínos pro kodéra je větší. Přínos vidím v tom, že zbytečně neresetuji prvky, které bych musel opět nastavit.

Chamurappi:
Ve všech Explorerech budou menší kvůli zápisu:
 Stejná chyba je i v JaySeeho oblíbeném resetu. Kdo z lidí, kteří na spásné účinky resetu spoléhají, bude schopen ji najít?

Nepodařilo se mi tu chybu, respektive změnu v zobrazování, nasimulovat. Můžeš mi prosím přiblížit, nebo udělat print_screen, o co se jedná?
Jinak v resetu od Nathana je tam ještě na 75% element small. Oproti normalize. Ale jak jsem na to koukal, to už je dost rozsáhlej reset. Skoro 500 řádků. Je to sice úhledně a přehledně psané, ale většinu z toho ani nepoužívám. Připadne mi tospíš jako galerie, z čeho si postavit svůj reset na míru.

Jinak děkuji za důsledný pohled na chování elementů, takhle do hloubky jsem o některých věcech ještě neuvažoval.

A reakce na pcmanik:
Vidím to jako Chamurappi, že je to kvůli bold a bolder. Niméně pak ale nechápu, proč by mělo být preferovanější bolder, když řada písem tento řez vůbec nedefinuje. Není tedy lepší definovat bold, jak je provedeno v YUI resetu?

Reakce na shaggy:
Ale veď my sme písali, aké sú nevýhody tých, konkrétnych CSS resetov. To, že ich nepoužívame predsa neznamená, že nepoznáme ich prednosti a nedostatky.
Šlo mi o to, aby se v tom tady dalo vyznat. A taky jsme se část diskuse bavili trochu obšírněji a některá témata uklouzávala mimo.

Reaguji na koucika:
„To normalize.css nedělá, snaží se pouze sjednotit elementy napříč prohlížeči.“
… vyrušením původních vlastností prvků. Reset na nenulové hodnoty je také reset (ve smyslu přenastavení).

„myslím si, že výsledný přínos pro kodéra je větší“
To je možné, ale ty <sup>y a <sub>y mu to fakt rozbije. Kdyby normalize.css nezkoušel jejich vzhled sjednotit, nerozhodil by ho.
Většině tvůrců stránek to vadit nebude, protože horní/dolní indexy se moc často nevyskytují. Takže je otázka, proč je vůbec resetovat/normalizovat.


Reaguji na JaySee:
„nechápu, proč by mělo být preferovanější bolder, když řada písem tento řez vůbec nedefinuje“
Pokud ho nedefinuje, tak je bolder pořád stejně tučné. Pokud ho definuje, je bolder tučnější. Dává-li někdo <b> dovnitř tučného textu, je pravděpodobné, že chce něco ještě víc ztučnit nebo jinak zvýraznit. Podle téhle logiky právě některé prohlížeče mají jako výchozí bolder.

# Ukázka <sup>u s nastaveným font-size: 400%

Návštěvníci s Explorerem budou mít menší radost, než návštěvníci s ostatními prohlížeči: ^radost

Chamurappi:
Pokud ho nedefinuje, tak je bolder pořád stejně tučné. Pokud ho definuje, je bolder tučnější. Dává-li někdo <b> dovnitř tučného textu, je pravděpodobné, že chce něco ještě víc ztučnit nebo jinak zvýraznit. Podle téhle logiky právě některé prohlížeče mají jako výchozí bolder.
1) Takže pak je vhodnější definovat <b> - bolder a pro <strong> - bold.
2) Ale pokud je nastavena tučnost z předchozího prvku, jako třeba p odstavce, tak pak to musí být <strong> - bolder, čímž se ale znovu setře vizuální rozdíl z prvního případu.

Návštěvníci s Explorerem budou mít menší radost, než návštěvníci s ostatními prohlížeči:


Zde je důkaz, že se opravdu radují méně :-D

Chamurappi:
„Reset na nenulové hodnoty je také reset (ve smyslu přenastavení).“
Nezlob se, ale dle této logiky by každé uživatelské pravidlo, které upravuje defaultní styl bylo reset. Nemyslím si, že je to dobrý způsob, jak chápat kaskádové styly. Pokud bychom chtěli být opravdu korektní, tak reset by mělo být ve skutečnosti nastavení na výchozí hodnotu. To nedělá ani CSS reset. Tudíž nemá smysl se dohadovat o terminologii.

Element <sub> v některých prohlížečích (třeba FF) rozbíjí výšku řádku, tudíž dochází k narušení typografie. Normalizace toto odstraňuje, což vidím jako podstatný přínos.

shaggy:
primarne to byl tip na css "reset". jinak html5, modernizr, i podminene komenty jsou na uvazeni kazdeho a jejich pripadne odstraneni by te stalo par minut.

pEeLL:
„jejich pripadne odstraneni by te stalo par minut.“
Ani nie, odstránenie toho všetkého = odstránenie boilerplate. Potom nevidím dôvod využívať nejaký predpripravený balík, keď to napísanie (toho, čo dostanem po odstránení "prebytočných" častí) mi zaberie oveľa menej.

Reaguji na JaySee:
Nenapadá mě žádný důvod, proč by se měly dělat rozdíly mezi <b> a <strong>. Tyto elementy se odjakživa používají jako synonyma, nehledě na přání specifikací.


Reaguji na koucika:
Resetem bych nazval jakoukoliv nástavbu výchozích stylopisů prohlížečů, která se překopírovává jako hotový balík s příslibem zjednodušení práce při započetí díla i za cenu drobné neefektivity. Odstranění nekompatibilit slibují jak nulující resety, tak normalize.css. I tím, že si nulující resety a normalize.css víceméně konkurují, naznačují, že patří do stejné škatulky.

„tak reset by mělo být ve skutečnosti nastavení na výchozí hodnotu“
Některé vlastnosti nemají výchozí hodnotu (třeba color). Zruším-li položkám seznamu margin i padding, neříkám tomu reset, ani částečný reset, nevnímám tu nulu jako něco výchozího.

„Element <sub> v některých prohlížečích (třeba FF) rozbíjí výšku řádku“
Neznám prohlížeč, v němž by se výška řádku nerozbila. Normalizace toto výchozí chování úplně ruší, takže to není pouhé srovnání nekonzistencí. Minimálně v tomhle připomíná (ostatní) resety.

Nekompatibilitu mezi Explorerem a zbytkem světa způsobuje nastavení font-size. Na opravení výšky řádku je potřeba jen vertical-align. Výchozí velikost písma indexů se pohybuje mezi 75 % a 85 %, takže relativní posun topu o 0.5em bez nastaveného font-size vytvoří napříč prohlížeči nekonzistenci velkou nanejvýš 5 % z velikosti písma. Normalizace s nastaveným font-size způsobí, že ve všech Explorerech je písmo (a tedy i posun indexu) o 25 % menší než všude jinde. Z toho mi vychází, že pokud si horní/dolní indexy srovnám sám, dosáhnu lepšího výsledku, než s normalize.css.

Drobností, které se normalize.css snaží řešit, je fakt dost. Spoustu jich neznám a ani nevím, jestli je opravdu znát potřebuji, nebo jestli jsou tam jen proto, aby balík nabobtnal do rozměrů, které zastraší každého začátečníka doufajícího, že nuance prohlížečů zvládne srovnat svépomocí. Když vidím, jak jde zkazit <sup>…