Výukový program pro JavaScript pro začátečníky: Naučte se JavaScript za 1 hodinu [2020]

Nové věci ve formátu HTML5 / CSS3 (Web8!) Zní skvěle! Měl bych to začít používat hned nebo držet css / xhtml počkat, až to bude moci používat více prohlížečů?

  • Co tím myslíš s Web8?
  • 3 html5 + css3 = web8!
  • A co HTTP 1.0 a ECMAScript 5.0?

HTML5 nyní podporují všechny prohlížeče, dokonce i IE5! (Pokud používáte skript html5shiv). Velmi doporučuji přečíst http://diveintohtml5.org Je to jeden z nejlepších zdrojů HTML5.

Pokud jde o CSS3, pokud jej používáte, nezapomeňte také použít predix dodavatele, kromě běžné syntaxe. např.

poloměr ohraničení

-moz-border-radius

-webkit-border-radius

Věřím v postupné zlepšování. Podpora css3 IE9 zní velmi slibně.

  • 2 Myslím, že máte na mysli položit hraniční poloměr na dno, že?
  • 1 Bohužel, původní web Dive Into HTML5 je pryč. K dispozici je mnoho zrcadel. Tady je jedna: diveintohtml5.info

Pravděpodobně.

Existují části HTML5, které můžete použít právě teď, dnes. Například formuláře. Pokud máte <input type='email'> v prohlížeči, který nepodporuje HTML5 (ano, dokonce i IE6), uvidíte jednoduše to samé, co byste viděli, kdybyste použili <input type='text'>. Přesto v prohlížeči, který podporuje prvky formuláře HTML5, získáte výhody email typ: jmenovitě klient zkontroluje hodnotu bez potřeby dalšího JS. I když ano, stále budete potřebovat JS pro prohlížeče jiné než HTML5, v podpůrných prohlížečích budete mít ještě jednu vrstvu ověření.

Další otázka na tomto webu poskytuje dobrý přehled o nových funkcích, které máte k dispozici prostřednictvím HTML5 a CSS3. V této otázce je také spousta dobrých údajů o formulářích.

Vzhledem k tomu, že Internet Explorer (a starší verze Safari a Firefox, i když jsou vzácné) nepodporuje mnoho z těchto funkcí, takže vám zůstanou knihovny JavaScript, které zaplní prázdnotu. Patří mezi ně výkonnostní hit (i když je to jen pro prohlížeče, které je potřebují používat), takže při jejich používání pamatujte na své uživatele.

Chcete-li zmírnit problémy s nedostatečnou podporou funkcí, měli byste se rozhodnout, že tyto nové funkce stojí za to, použijte následující zdroje:

  • html5shiv: skript jazyka JavaScript pro IE k rozpoznávání a stylizaci prvků HTML5.
  • Koláč CSS3: chování připojené IE (an .htc soubor), který umožňuje aplikaci Internet Explorer 6-8 vykreslit několik nejužitečnějších funkcí dekorace CSS3. Při použití na prvek umožňuje IE rozpoznat a zobrazit border-radius, box-shadow, border-image, více obrázků na pozadí a linear-gradient jako obrázek na pozadí.
  • Modernizr: knihovna Javascript, která využívá detekci funkcí k testování aktuálního prohlížeče proti nadcházejícím funkcím CSS3 / HTML5 a přidává třídy do <html> prvek pro ty, které jsou podporovány. Vytvoří také globální objekt JavaScript s vlastním názvem, který obsahuje logickou vlastnost pro každou funkci, true pokud je podporováno a false Pokud ne. Přidává podporu pro styling a tisk prvků HTML5, takže můžete používat prvky jako
    ,
    a
  • ie-css3.js: umožňuje aplikaci Internet Explorer identifikovat selektory pseudotřídy CSS3 a vykreslit s nimi definovaná pravidla stylu. Podporuje různé selektory CSS3 podle toho, jakou knihovnu JavaScript váš web používá.
  • DD_belatedPNG: knihovna Javascript, která přidává podporu obrázků PNG do IE6. Jako PNG můžete použít src z prvek nebo jako background-image vlastnost v CSS. Na rozdíl od AlphaImageLoader, background-position a background-repeat pracovat podle plánu a prvky budou reagovat na a:hover pseudotřída.
  • Oprava TwinHelix IE PNG: chování připojené IE (an .htc soubor), který přidává podporu PNG s opacitou alfa do IE 6. Plné umístění a opakování pozadí CSS podporuje (včetně skriptů CSS) další (součástí) JavaScriptu.
  • Cokoli: vznášet se: chování připojené IE (an .htc soubor), který automaticky opravuje: hover,: active a: focus pro vtípky IE6, IE7 a IE8 a umožňuje vám je používat jako v jiném prohlížeči. Zahrnuje podporu AJAX, což znamená, že se spustí také jakýkoli html, který se vloží do dokumentu pomocí javascript :hover, :active a :focus styly v IE.

Je zajímavé poznamenat, že DD_belatedPNG řeší oba problémy, které řeší Whatever: hover a TwinHelix IE PNG Fix s čistým JavaScriptem, zatímco Whatever: hover a TwinHelix IE PNG Fix používají kombinaci chování JavaScriptu a IE (.htc files).

Lidé, kteří používají prohlížeče jiné než IE, je obvykle na požádání upgradují, a proto IE nese hlavní nápor „Některé prohlížeče však tuto funkci nepodporují!“ stížnosti. Modernizr přidá možnost používat HTML5 / CSS3 do jakéhokoli prohlížeče, který pravděpodobně uvidíte, nejen do IE. ie-css3.js udělá totéž, jednoduše jej musíte implementovat bez podmíněného komentáře IE (což znamená Všechno prohlížeče jej nakonec získají, pokud jej nezahrnete s kontrolami uživatelských agentů na straně serveru - to výrazně sníží výkon všech vašich návštěvníků, nejen uživatelů IE.)

  • Omlouváme se Brysonovi, ale ty věci, které přidávají podporu HTML5 do prohlížeče Internet Explorer, jsou z praktických důvodů naprosté noční můry.
  • 1 Aktualizoval jsem svůj příspěvek o několik dalších bitů informací a uznal výkonnostní hity při používání těchto knihoven JS. Nesouhlasím však s vámi, že jejich použití je noční můra. Všechny z nich jsem použil alespoň jednou a všechny slouží svému účelu. Také mi nezpůsobily žádné další bolesti hlavy. Co vás přimělo říct, že jsou noční můry?
  • Dobře, „naprosté noční můry“ mohou být příliš silným způsobem frázování věcí, ale výkon často trpí natolik špatně, že se stránka stane nepoužitelnou, takže si myslím, že to zveličujete.

Použijte jakoukoli technologii, která nejlépe vyhovuje vašim potřebám.

Eric Meyer napsal pěkný článek o tom, proč začít používat předpony specifické pro dodavatele na pravidlech CSS není lame jako používání hacků s filtrem css.

Myslím, že to samé platí pro HTML5. Pokud můžete zkontrolovat podporu různých funkcí prohlížeče, proč ji nepoužívat. Dokud se stránka ladně degraduje, prožijte ji.

Některé další užitečné odkazy, když se rozhodujete, jaké funkce CSS3 budete chtít použít: http://caniuse.com/ (poskytuje dobrý rozpis toho, jaké prvky a selektory jsou použitelné na různých platformách)

http://css3please.com/ (hřiště upravitelné na stránce, které se zaměří na funkce CSS3, poskytuje také několik rad ohledně toho, jaké techniky a funkce jsou podporovány platformami pro běžně požadované styly, jako jsou zaoblené rohy, pozadí s přechodem, atd.)

Používám to k vylepšení zážitku na moderních prohlížečích, aby uživatelé s dobrým prohlížečem dostali „odměnu“ za hezčí vzhled uživatelského rozhraní (zaoblené rohy, stíny, takové věci). Myslím, že byste jej neměli používat jako náhradu za řekněme vaše současné ověřování formulářů na straně klienta, pokud k tomu nemáte nějaký záložní JS.

Pokud spouštíte nový projekt pomocí HTML5, který by měl být podporován také ve starších prohlížečích, nejlepší možností je použít Initializr -

http://www.initializr.com/

Na backendu používá HTML5 Boilerplate a přidává několik vlastních možností, aby vám poskytl šablonu, kterou můžete nasadit na svůj vlastní web. Zahrnuje knihovny Javascript (jako HTML Shiv nebo Modernizr), díky nimž bude váš web kompatibilní se staršími prohlížeči.

Záleží na tom, jaké publikum je a jaké funkce chcete použít. Očekávám, že to bude ještě několik let, než průměrný projekt může klesnout podporu pro ie6 :(

Pokud je váš web soukromým intranetem a vy buď ovládáte prohlížeč, nebo máte omezenou škálu prohlížečů, s nimiž se můžete vypořádat, můžete klidně pracovat na špičkové technologii.

Pokud ne, bez ohledu na to, co používáte, budete vždy muset vzít v úvahu nejnižšího společného jmenovatele. V tomto případě se jedná pravděpodobně o nějakou kombinaci IE 6 a řady mobilních prohlížečů. Pokud tedy budete pokračovat v používání HTML 5, máte další problém se zajištěním toho, že se váš web pěkně „degraduje“.

HTML5 a CSS3 poskytují nové funkce, takže můžete snadno vytvářet webové stránky. Stejně jako HTML5 zavádí mnoho nových značek jako

,
atd .. CSS3 zavádí neprůhlednost, stínování rámečku, výběr atd. Také CSS3 podporuje responzivní návrhy a produkuje méně řádků kódu. Chcete-li, aby web reagoval, můžete použít css3 / html5 a mnoho dalších výhod, které poskytuje.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?