CSS reset

V článku Základ CSS souboru jaksepatří jsem uvedl tzv. hvězdičkový reset. Nejedná se však o nejlepší řešení. Problém může nastat u formulářových prvků (formuláře se pak obtížněji stylují) a u objemnějších webů, kde hvězdičkový reset příliš vytíží prohlížeč – chvilku totiž trvá, než „hvězdička vynuluje“ všechny elementy našeho webu. Lepší možností je tedy použít jiný CSS reset.

CSS reset – přehled

1. Hvězdičkový CSS reset

* {margin: 0; padding: 0;}

Výhody: Krátký a jednoduchý zápis.
Nevýhody: Může způsobit problémy u formulářových prvků (formuláře se pak obtížněji stylují) a u objemnějších webů, kde hvězdičkový reset příliš vytíží prohlížeč – chvilku totiž trvá, než „hvězdička vynuluje“ všechny elementy našeho webu.

2. Postupné nulování elementů – vlastní CSS reset

„Nulujeme“ pouze tagy, které potřebujeme a u nichž víme, že nezpůsobí neplechu. Příklad takového CSS resetu vypadá následovně:

html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, img, table {
  margin: 0;
  padding: 0;
  border: 0;
  }

Zde k nulovému marginu a paddingu přibyl ještě „nulový“ rámeček. Vybrané elemnety tak vždy budou bez rámečku, pokud ho níže v CSS dokumentu opět nebudeme definovat. CSS reset si samozřejmě můžeme upravit jak je libo.

Výhody: Přesně uzpůsobený našim potřebám.
Nevýhody: Dá o trochu více práce.

3. CSS reset od Erica Meyera

Vypadá následovně:

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
      outline: 0;
}
body {
      line-height: 1;
      color: black;
      background: white;
}
ol, ul {
      list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
      border-collapse: separate;
      border-spacing: 0;
}
caption, th, td {
      text-align: left;
      font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
      content: "";
}
blockquote, q {
      quotes: "" "";
}

Na stránce Erica Meyera pak máme podrobný popis tohoto stylopisu (v angličtině).

Jak je vidět, jedná se o poměrně rozsáhlý stylopis, který má definovánu i spoustu jiných vlastností.

Výhody: Hotové, rychlé řešení. Propracovaný CSS reset, pomocí něhož se nám weby mohou o poznání snadněji stylovat.
Nevýhody: Jelikož se jedná o rozsáhlejší soubor, může chvilku trvat, než se v něm zorientujeme.

Rozsáhlejší CSS reset je pak lepší připojovat jako samostatný CSS soubor:

<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="hlavni-styl.css">

CSS resetů existuje více, než jsem uvedl.

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Více…
 

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 
 TOPlist