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