Petr Pexa - mobilní verze    

  Front-end webu v HTML5/CSS3: ukázky, testy, tipy a triky

Průběžně jsou stále zveřejňovány nové verze nejpoužívanějších internetových prohlížečů Chrome, Firefox, Opera, Safari a Explorer. Téměř každá taková nová verze má většinou implementovánu lepší podporu nových jazyků či technologií, určených pro tvorbu webových stránek (např. HTML5, CSS3, jQuery apod.) a tím je zajištěno, že mnohé efekty, které dříve nebylo možné vzhledem k jejich rozdílné podpoře v jednotlivých prohlížečích použít, se stávají postupně smysluplnými. Vývoj prohlížeče Safari byl ovšem pro Windows v r. 2012 zastaven, testujte ho tedy již pouze na zařízeních s iOS firmy Apple (iPad, iPhone).
    Na otestování podpory všech známých problematických prvků Vám nabízím tyto stránky, jejichž cílem je především upozornit na ty efekty, které zatím stále standardně podporovány nejsou. Tak Vám tyto testy pomohou zajistit, aby se Vaše webové stránky zobrazovaly ve všech prohlížečích shodně a především splňovaly schválené standardy (byly tedy validní).
    Najdete zde mnoho dílčích testů, které jsou tematicky rozděleny do samostatných testovacích souborů (viz seznam níže). Pro začínající webmastery jsou všechny CSS příklady v jednodušších a syntakticky lépe pochopitelných in-line stylech, profesionálům samozřejmě nemusím připomínat použití deklarace CSS v externím připojeném souboru.


  1. Přehled jednotlivých typů základního kódu webových stránek a testování podpory DTD XHTML 1.1 sipka
  2. Přehled jednotlivých typů základního kódu WAPu sipka
  3. Testování podpory problematických prvků pro hlavičku a tělo stránky sipka
  4. Testování podpory problematických prvků pro formátování textu sipka
  5. Testování podpory problematických prvků pro tabulky sipka
  6. Testování podpory zobrazení správných XHTML dokumentů (*.xhtml), nutný Firefox, Opera nebo Safari (vůbec nepodporuje IE!) sipka
  7. Testování podpory zobrazení XML dokumentů (*.xml) a CSS2 vlastností display: table, table-row a table-cell sipka
  8. Testování zobrazování barevných rámečků u tabulek, obrázků a čar sipka
  9. Testování dotted (tečkovaných) rámečků sipka
  10. Testování podpory alternativních stylů sipka
  11. Testování podpory CSS2 vlastnosti position:fixed sipka
  12. Testování podpory CSS2 vlastnosti overflow sipka
  13. Testování podpory CSS2 vlastnosti visibility sipka
  14. Testování podpory pseudotřídy :hover sipka
  15. Testování podpory CSS2 vlastnosti text-shadow sipka
  16. Testování podpory alfa průhlednosti u PNG obrázků sipka
  17. Testování podpory filtrů a CSS3 vlastnosti opacity sipka
  18. Testování podpory zobrazení favicon.ico sipka
  19. Testování podpory elementu <object> s vloženými soubory formátu swf, txt, html, jpg, gif a png sipka
  20. Testování podpory přehrávání multimediálních (audio a video) souborů sipka
  21. Testování podpory směrování odkazů do rámečku <iframe> a <object> atributem target sipka
  22. Testování podpory směrování odkazů do nového okna JavaScriptem sipka
  23. Testování podpory CSS2 pravidla @import sipka
  24. Testování podpory tiskových stylů (CSS2 pravidla @page, @media) sipka
  25. Testování nestandardního zobrazovacího (quirk) módu IE6 sipka
  26. Testování standardního zobrazovacího módu sipka
  27. Testování problematického zobrazení mezer pod obrázkem v tabulce sipka
  28. Testování vytvoření prostoru pro obrázek při načítání stránky (podpora vlastností width a height) sipka
  29. Testování podpory vlastností display: list-item a list-style-type: decimal sipka
  30. Testování problematické aktivace odkazu klávesovou zkratkou (atributy accesskey a tabindex, přístupnost webu) sipka
  31. Testování podpory tzv. dynamických fontů (stahování fontů ze serveru při načtení stránky) sipka
  32. Testování podpory CSS3 efektu zaoblených rohů (border-radius) sipka
  33. Testování podpory CSS3 efektu stínu boxu (box-shadow) sipka
  34. HTML5 - canvas (autor: Tomáš Trantýr) sipka
  35. Vložení menu do stránek z externího souboru pomocí php funkce include sipka
  36. Testování podpory CSS3 efektu rotace (transform) sipka
  37. Testování průhlednosti barvy RGBA modelem sipka
  38. Testování nastavení velikosti obrázku na pozadí stránky
  39. Test zobrazení 2sloupcového webu v XHTML, CSS3 a 5 různými typy menu sipka
  40. Test zobrazení 2sloupcového webu v HTML5, CSS3 a 5 typy menu sipka
  41. Test zobrazení 3sloupcového webu v XHTML a CSS3 sipka
  42. Test zobrazení 3sloupcového webu v HTML5 a CSS3 sipka
  43. Testování podpory mluvených stylů nový sipka
  44. Testování podpory CSS3 efektu gradientu (gradient) nový sipka
  45. Testování podpory HTML5 Drag and Drop API nový sipka
  46. Testování podpory HTML5 Geolocation API (autor: Martin Laudát) nový sipka
  47. Testování podpory CSS3 Animations nový sipka
  48. Prezentace k přednášce Podpora HTML5 v prohlížečích (17.4.2013 PF JU ČB) nový sipka
  49. Testování podpory nových formulářových prvků v HTML5 Forms nový sipka
  50. HTML5 - podpora nových elementů <video> a <audio> sipka
  51. Responzivní web nový sipka
  52. Základní kostra (šablona) responzivního webu v HTML5 nový sipka
  53. Ukázka responzivního webu v HTML5 nový sipka
  54. Sloupcový responzivní layout v HTML5 flexboxem nový sipka
  55. Fixované menu s využitím position: sticky nový sipka
  56. Ukotvení objektu uvnitř jiného objektu při změně rozlišení (position) nový sipka
  57. HTML5 element <picture> a formát obrázků WebP nový sipka
  58. Sloupcový responzivní layout v HTML5 pomocí CSS Grid nový sipka

  :: Zpět na titulní stránku Nahoru