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. CSS vlastnost overflow sipka
  13. CSS vlastnost visibility sipka
  14. Pseudotřída :hover sipka
  15. CSS vlastnost text-shadow sipka
  16. Alfa průhlednost u PNG obrázků sipka
  17. Filtry a CSS3 vlastnost opacity sipka
  18. Favicon.ico sipka
  19. Element <object> s vloženými soubory formátu swf, txt, html, jpg, gif a png sipka
  20. Podpora přehrávání multimediálních (audio a video) souborů sipka
  21. Směrování odkazů do rámečku <iframe> a <object> atributem target sipka
  22. Směrování odkazů do nového okna JavaScriptem sipka
  23. CSS pravidlo @import sipka
  24. Tiskové styly (CSS pravidla @page, @media) sipka
  25. Nestandardní zobrazovací (quirk) mód IE6 sipka
  26. Standardní zobrazovací mód sipka
  27. Problematické zobrazení mezer pod obrázkem v tabulce sipka
  28. Vytvoření prostoru pro obrázek při načítání stránky (vlastnosti width a height) sipka
  29. CSS vlastnost display: list-item a list-style-type: decimal sipka
  30. Aktivace odkazu klávesovou zkratkou (atributy accesskey a tabindex) sipka
  31. Dynamické fonty (stahování fontů ze serveru při načtení stránky) sipka
  32. CSS3 efekt zaoblených rohů (border-radius) sipka
  33. CSS3 efekt stínu boxu (box-shadow) sipka
  34. HTML5 - podpora nových elementů <video> a <audio> 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. Nové formulářové prvky v HTML5 Forms sipka
  47. HTML5 Drag and Drop API sipka
  48. HTML5 Geolocation API (autor: Martin Laudát) sipka
  49. CSS3 Animations sipka
  50. Prezentace k přednášce Podpora HTML5 v prohlížečích (9.4.2014 PF JU ČB) sipka
  51. Responzivní web sipka
  52. Základní kostra (šablona) responzivního webu v HTML5 sipka
  53. 2sloupcový responzivní layout v HTML5 (float) sipka
  54. 3sloupcový responzivní layout v HTML5 (float - varianta 1) sipka
  55. 3sloupcový responzivní layout v HTML5 (float - varianta 2 sipka
  56. Sloupcový responzivní layout v HTML5 (flexbox) nový sipka

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