Petr Pexa - pepe - osobní stránky

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/Edge. 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 front-endu 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.
    Na otestování podpory problematických prvků webových stránek vám nabízím tuto stránku, jejíž cílem je upozornit na ty efekty, které zatím standardně podporovány nejsou a především nalézt funkční řešení. 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 ukázek, testů, tipů a triků, 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 sipka
  2. Přehled základních kódů pro mobilní web (zastaralé, viz níže Responzivní web) sipka
  3. Problematické prvky pro hlavičku a tělo stránky sipka
  4. Problematické prvky pro formátování textu sipka
  5. Problematické prvky pro formátování tabulek sipka
  6. Zobrazení správných XHTML dokumentů (*.xhtml) sipka
  7. Zobrazení XML souborů a CSS vlastností display: table, table-row a table-cell sipka
  8. Barevné rámečky tabulek, obrázků a barvy čar sipka
  9. Dotted (tečkované) rámečky sipka
  10. Alternativní styly sipka
  11. CSS vlastnost position:fixed sipka
  12. Vrstvení webových objektů a CSS vlastnost z-index sipka
  13. CSS vlastnost overflow sipka
  14. CSS vlastnost visibility sipka
  15. Pseudotřídy :hover a :focus sipka
  16. CSS vlastnost text-shadow sipka
  17. Alfa průhlednost u PNG obrázků sipka
  18. Filtry a CSS3 vlastnost opacity sipka
  19. Favicon.ico sipka
  20. Element <object> s vloženými soubory formátu swf, txt, html, jpg, gif a png sipka
  21. Podpora přehrávání multimediálních (audio a video) souborů sipka
  22. Směrování odkazů do rámečku <iframe> a <object> atributem target sipka
  23. Směrování odkazů do nového okna JavaScriptem sipka
  24. CSS pravidlo @import sipka
  25. Tiskové styly (CSS pravidla @page, @media) sipka
  26. Nestandardní zobrazovací (quirk) mód IE6 sipka
  27. Standardní zobrazovací mód sipka
  28. Problematické zobrazení mezer pod obrázkem v tabulce sipka
  29. Vytvoření prostoru pro obrázek při načítání stránky (vlastnosti width a height) sipka
  30. CSS vlastnost display: list-item a list-style-type: decimal sipka
  31. Aktivace odkazu klávesovou zkratkou (atributy accesskey a tabindex) sipka
  32. Dynamické fonty (stahování fontů ze serveru při načtení stránky) sipka
  33. CSS3 efekt zaoblených rohů (border-radius) sipka
  34. CSS3 efekt stínu boxu (box-shadow) sipka
  35. HTML5 - canvas (autor: Tomáš Trantýr) sipka
  36. Vložení menu do stránek z externího souboru pomocí php funkce include sipka
  37. CSS3 efekt rotace (transform) sipka
  38. Průhlednost barvy RGBA modelem sipka
  39. Nastavení velikosti obrázku na pozadí stránky
  40. 2sloupcový web v XHTML, CSS3 a 5 různými typy menu sipka
  41. 2sloupcový web v HTML5, CSS3 a 5 typy menu sipka
  42. 3sloupcový web v XHTML a CSS3 sipka
  43. 3sloupcový web v HTML5 a CSS3 sipka
  44. Mluvené styly sipka
  45. CSS3 efekt gradientu (gradient) sipka
  46. HTML5 Drag and Drop API sipka
  47. HTML5 Geolocation API (autor: Martin Laudát) sipka
  48. CSS3 Animations sipka
  49. Prezentace k přednášce Podpora HTML5 v prohlížečích sipka
  50. Responzivní web - teorie sipka
  51. Základní kostra (šablona) responzivního webu v HTML5 sipka
  52. 2sloupcový responzivní layout v HTML5 (float) sipka
  53. 3sloupcový responzivní layout v HTML5 (float - varianta 1) sipka
  54. 3sloupcový responzivní layout v HTML5 (float - varianta 2) sipka
  55. 4sloupcový responzivní layout v HTML5 sipka
  56. Responzivní layout v HTML5 flexboxem sipka
  57. Nové formulářové prvky v HTML5 Forms sipka
  58. Ukotvení objektu uvnitř jiného objektu při změně rozlišení (position) sipka
  59. Fixované menu s využitím position: sticky sipka
  60. HTML5 elementy <audio> a <video> a podpora nového formátu WebM/VP8 sipka
  61. HTML5 element <picture> a nové formáty obrázků WebP a AVIF sipka
  62. Responzivní layout v HTML5 pomocí CSS Grid sipka
  63. Menu s plynulým rolováním stránky s využitím scroll-behavior: smooth nový sipka

:: Zpět na začátek stránky Nahoru