Univerzální obecný stylopis pro HTML dokumenty

Účel

Občas je potřeba publikovat nějaký samostatný HTML dokument, například dokumentaci, poznámky, jakékoliv data takového charakteru, u nichž vzhled, styl, vizuální stránka nehraje hlavní roli. Je třeba HTML obléct do základního oblečku – aby se zajistila základní použitelnost (aby text neměl 100% šířku) a aby to vypadalo o trošku lépe, než stránka nastylovaná výchozími styly prohlížeče (ale přitom stále neutrálně). CSS jako uniforma pro HTML dokument.

Jiná řešení

Vím o W3C Core styles, o ničem jiném.

Můj stylopis

Svůj stylopis, kterému můžeme říkat KUCSS prozatím publikuji tady. Jestli se domníváte, že tomu něco podstatného chybí, nestyďte se ozvat. Ale než se ozvete, vězte, že vím o těchto nedostatcích/mož­nostech:

  • Nezkoušel jsem to v IE6 a 7. Mohou tam být odlišnosti. Nechce se mi pouštět VirtualPC.
  • Možná by se TOC dal generovat z nadpisů automaticky (JS). Stejně tak (automaticky) by se mohly nadpisům přiřazovat identifikátory.

Použití

  1. napište HTML (4) dokument jak vám zobák narost
  2. zalinkujte CSS soubor (upraví vzhled)
  3. volitelně zalinkujte JS soubory (doplní lehkou funkčnost navíc)

Manuál aneb „ke psaní HTML“…

… aneb co byste o tomto „frameworku“ měli vědět. Stylopis i JS jsou psány s ohledem na maximální univerzalitu, nediktují, jak zapisovat to, či ono. Nicméně některé konstrukce musely být zapsány napevno, a s těmi – pokud UCSS plánujete použít – byste se mohli předem obeznámit. Prvně ale základ:

  • Jak linkovat styly a skripty: můžete odkazovat na můj server, je-li libo. 
    <link rel="stylesheet" href="http://ucss.kahi.cz/latest/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://ucss.kahi.cz/latest/style.print.css" type="text/css" media="print" />
<script src="http://ucss.kahi.cz/latest/jq.js" type="text/javascript"></script>
<script type="text/javascript">
  var kucss_breadcrumbs = true;
  var kucss_autoanchors = true;
</script>
<script src="http://ucss.kahi.cz/latest/my.js" type="text/javascript"></script>
  • Zápis zarovnaných obrázků je inspirován HTML produktem z Texy převaděče: 
    <div class="figure-right">
      <a href="..."><img src="..." alt="" /></a>
      <p>Optional image description.</p>
</div>
  • Zápis blokové citace se zdrojem: 
    <blockquote>
      <p>Quoted information object.</p>
</blockquote>
<p><cite>The source</cite></p>
  • Jednoduchá galerie je v HTML vyjadřována takto a vyžaduje stejnou výšku miniatur: 
    <ul class="gallery">
      <li><a href="..."><img src="..." alt="" /></a></li>
      ...
</ul>
  • k vyznačování bloků jistých významů můžete využít některé z předpřiprave­ných tříd
    • important
    • download
    • warning
    • positive
    • negative
  • možnost automaticky vytvářet z nadpisů kotvy:
    1. musí být linkovány JS soubory
    2. autokotvy musí být povoleny (var kucss_autoanchors = true;; výchozně jsou povoleny)
    3. nadpis musí mít identifikátor (id)

Příklad a odkaz

Changelog

  • 2009.3 → 2009.4 – přidána funce „Vybrat vše“ pro snažší kopírování blokových kódů; opraveny hodnoty všech hodnot font-size v procentech (chybný výpočet)
  • 2009.2 → 2009.3 – přidán tiskový styl; opravena chyba breadcrumbs

Díky

  • V prvé řadě sobě (že se mi nechtělo dělat na ničem jiném)
  • jQuery (že mi to všechno usnadňuje)
  • Katsushika Hokusai (za uvolnění Kanagawa oki nami-ura jako Public Domain)
  • BorBerovi (za vnuknutí)
  • Microsoft Office 2007 (za inspiraci ve vzhledu)
  • FamFamFam ikonám
  • Snad i Texy
  • A ještě někomu nebo něčemu, nemohu si vzpomenout

O článku Univerzální obecný stylopis pro HTML dokumenty

Komentáře (17)

k formuláři

RSS kanál komentářů

    • Komentář číslo: 1
    • *
    • Jméno: Aleš Roubíček
    • Odesláno:
      20.4. 2009 — 7:20

    Pěkné. Díky!

    • Komentář číslo: 2
    • *
    • Jméno: Petr Urbánek
    • Odesláno:
      20.4. 2009 — 8:10

    Určitě se bude hodit, Díky!

    • Komentář číslo: 3
    • *
    • Jméno: Kahi
    • Odesláno:
      20.4. 2009 — 9:47

    Omlouvám se, měl jsem dojem, že tam ten soubor je. Už tam je. Zip obsahuje HTML, CSS, 2×JS, example obrázky a ikony souborů.

    [pár komentářů jsem smazal]

    • Komentář číslo: 4
    • *
    • Jméno: stanis
    • Odesláno:
      20.4. 2009 — 10:45

    Hezký. Jen u nadpisu u obrázku zarovnanýho vpravo je ten breadcrumb špatně zarovnaný – přes první obrázek. A u druhé tabulky ti chybí uzavření tbody :-)

    • Komentář číslo: 5
    • *
    • Jméno: Peter Láng
    • Odesláno:
      20.4. 2009 — 11:17

    Vím o W3C Core styles, o ničem jiném.

    Chystám http://langi.cz/sa­blony Zatím je to neveřejné ;-)

    • Komentář číslo: 6
    • *
    • Jméno: Kahi
    • Odesláno:
      20.4. 2009 — 12:07

    [4] stanis: Ad Pozice BC: vím, nevím co s tím, resp. ještě jsem se nerozhodl, jak to řešit.

    Ad neuzavřený tbody: Díky! Říkal jsem si co zas ten validátor pyskuje, ale asi jsem koukal do jiné tabulky.

    [5] Peter Láng: Vidaho!

    • Komentář číslo: 7
    • *
    • Jméno: Michal Aichinger
    • Odesláno:
      21.4. 2009 — 11:09

    vypada to moc pekne, v IE6 je to taky pouzitelny, jen me zajima jestli neplanujes i nejaky univerzalni stylopis pro formulare?

    • Komentář číslo: 8
    • *
    • Jméno: Kahi
    • Odesláno:
      21.4. 2009 — 12:50

    [7] Michal Aichinger: Jestli jsi myslel stylopis vyloženě pro formuláře, o tom jsem neuvažoval. (Ostatně – neumím si příliš představit situace, kdy se hodí něco takového.)

    Jestli jsi myslel nastylování formulářů v rámci tohoto stylesheetu… nad tím jsem chvíli uvažoval. Pak jsem od toho upustil, v dojmu, že formuláře jsou přece-jen trochu víc záležitost aplikací, než jednoduchých statických šablon (což je místo, kde svůj stylopis vidím). Ale i tak by myslím nemělo být složité rozjet tam i formulář. Například tabulkový href=„http://­www.plavacek.net/for­mulare/formular-a-tabulka.html“ rel=„nofollow“>http:/­/www.plavacek­.net/formulare/for­mular-a-tabulka.html by nemusel vypadat špatně. (Leda jen dostylovat font-family.)

    • Komentář číslo: 9
    • *
    • Jméno: sBear
    • Odesláno:
      22.4. 2009 — 23:05

    Pěkné. Nápad: ještě bych přidal styl pro odkazy na $mailto: a možná i pro externí odkazy ($http://).

    • Komentář číslo: 10
    • *
    • Jméno: Multimotyl
    • Odesláno:
      22.4. 2009 — 23:29

    Myslím, že by stálo za to aby se písmo v body nastavilo na 91%. Pokud je 90%, tak je u mě relativně špatně rozlišitelné tučné písmo od normálního (vlastně to vůbec nejde)

    • Komentář číslo: 11
    • *
    • Jméno: Kahi
    • Odesláno:
      23.4. 2009 — 10:43

    [10] Multimotyl:, [9] sBear: – díky, upravím/doplním do nejbližší verze.

    Update: je to tam. Font-size, link na mail a pár jiných detailů. Značit linky na externí weby mi nakonec nepřijde jednoznačně přínosné…

    • Komentář číslo: 12
    • *
    • Jméno: myf
    • Odesláno:
      11.5. 2009 — 17:21

    Jak vidím, je tvorba univerzálních CSS v našich krajích překvapivě populární kratochvílí. Nabízí se otázka, kdo má lepší „univerzální HTML“ pro testování/tvorbu onoho stylopisu, tj ‚dummy‘ dokument s co nejvíce (optimálně: všemi) HTML elementy v co nejvíce smysluplných kontextech, který by byl zároveň co nejméně rozlezlý, aby se dal snadno přehlédnout bez posouvání. Nu?

    OT: kdysi pradávno jsem se pokusil napsat univerzální (user)style pro přebarvování stránek href=„http://­userstyles.or­g/styles/2187“ rel=„nofollow“>http:/­/userstyles.or­g/styles/2187 (vhodný pro zasmání a odsouzení).

    • Komentář číslo: 13
    • *
    • Jméno: Kahi
    • Odesláno:
      24.5. 2009 — 1:56

    Vychází nová verze – 2009.3. Zejména opravuje chybu v breadcrumbs a přidává tiskový styl.

    • Komentář číslo: 14
    • *
    • Jméno: Kahi
    • Odesláno:
      20.6. 2009 — 13:45

    Vychází nová verze – 2009.4

    • Komentář číslo: 15
    • *
    • Jméno: tomp
    • Odesláno:
      10.9. 2009 — 16:06

    Mohly by tam být třídy odd nebo even, kdyby někdo chtěl v tabulce zvýrazněný každý druhý řádek.

    U simple forms, které jsou zatím alfa by mohl být nastylovaný fieldset.

    U kódu pokud kliknu na Select All se zmenší všechen text uvnitř a nejde se toho zbavit jinak, než kliknout na jiný Select All v dokumentu. Má vůbec smysl zmenšovat ten text?

    Select All tlačítka měla být skryta v print stylopisu, zkoušel jsem v různých prohlížečích export přes pdf tiskárnu a byla vidět. Stejně tak po vytištění nejde vidět horizontální čára .

    • Komentář číslo: 16
    • *
    • Jméno: Kahi
    • Odesláno:
      11.9. 2009 — 10:57

    [15] tomp: Vřelé díky, do příští verze se to promítne.

  17. […] nezapoměl: Celý jednostránkový web běží na pěkném univerzálním designu od Kahiho, takže tímto mu […]

Přidat komentář

Nápověda ke psaní komentářů

Zde formátuje Texy!

  • *zvýraznění*
  • **silné zvýraznění**
  • > citace
  • "odkaz":http://kam
  • [4] reakce na komentář
  • zdrojové kódy a více

komentáře

úplně nahoru