it-swarm-eu.dev

Co je nového v HTML5 / CSS3?

Viděl jsem tento web a tento web , ale to je hodně na trávení. Jaké jsou hlavní věci HTML5, díky kterým je odlišný/lepší než běžný starý (X) HTML/CSS?

23
Jason

HTML5 je obrovský , ale také úžasný .

Podle mého názoru jde většinou o interoperabilitu . Specifikace jde a specifikuje dokonce i Edge případy, aby se pokusil a ujistěte se, že všechny prohlížeče čtou označení stejným způsobem .

Za druhé, HTML5 má video a audio, které dělají přesně to, co název říká, že to dělá. Pokud chcete zahrnout video nebo audio, HTML5 by měla snížit potřeby vašeho pluginu.

Na třetím místě obsahuje HTML5 spoustu přístupnosti a sémantické nápovědy. Například prvky jako <section> a <article> help machines zjistí, jaký obsah má být. Nové typy vstupů jako <input type=email> mohou být také užitečné ze stejných důvodů, i když nové typy vstupů obsahují vlastní uživatelská rozhraní, díky nimž jsou užitečné i pro „běžné“ lidské čtenáře.

Nové funkce formulářů jsou mnohem více než nové typy vstupů. Zahrnuje také podporu zástupného textu a několika dalších atributů.

HTML5 obsahuje <canvas>, což umožňuje kreslení 2D (a s WebGL, 3D) tvarů, jako jsou grafy nebo dokonce vykreslování her.

Staré chování je nyní standardizováno, například starověké contentEditable aplikace Internet Explorer.

DOCTYPE je konečně slušný! Nyní si to můžete skutečně zapamatovat! <!DOCTYPE html>

Určení kódování je také jednodušší pomocí <meta charset=utf-8>.

Pokud chcete odesílat data klientovi a přiřadit je k prvkům, můžete to nyní udělat s vlastními atributy. Například <div data-status=open>Open</div> je nyní konečně povoleno. Mějte na paměti, že názvy vlastních atributů musí být předponou data-.

Nyní můžete do HTML dokumentů zahrnout SVG a MathML. Dříve jste to mohli dělat pouze s dokumenty XHTML.

Mezi více novými funkcemi a poli, které definuje HTML5, je jednou z nejpůsobivějších classList, která vám umožňuje snadněji manipulovat s atributem class. Namísto nutnosti getAttribute/setAttribute a použití složitých hacků zjistit, které třídy prvek má a odstranit z něj konkrétní třídu, classList tyto těžké situace velmi zjednodušuje.

Existuje také několik souvisejících specifikací, jako jsou Web Workers, Web Sockets a IndexedDB, které nejsou součástí HTML5, ale všichni o nich mluví, jako by byli. Jsou velmi užitečné pro využití výhod vícejádrových počítačů, komunikaci se servery a lokální ukládání dat.

Pokud jde o CSS3, zahrnuje podporu animací , přechodů , zaoblených ohraničení a model flexibilní krabice .

Nové v CSS3 jsou také nové selektory, které usnadňují přiřazování konkrétních prvků na stránce (například pouze liché nebo sudé řádky v tabulce).

Krytí, nové jednotky, Marquee a Ruby jsou také součástí CSS3.

Myslím, že do značné míry zahrnuje všechny důležité části.

33
luiscubal

Existují základní věci rozvržení, jako je poloměr ohraničení, stíny (rámeček/text), podpora rgba atd.; To je to, co je CSS3 nejznámější. Zajímavější jsou značka plátna, značka videa, místní úložiště, webové zásuvky atd., Které vytvoří mnohem bohatší uživatelské zážitky v prostém HTML/JS/CSS. Tyto funkce mají potenciál být skvělou alternativou pro Flash na webu bez nutnosti dalších doplňků.

4
D4V360

Považuji nové prvky HTML za docela zajímavé ... některé z nich jsou slibné sémantické náhrady za generické divs. Mezi slibné nové prvky patří mimo jiné article, section, aside, figure, nav, header a footer] . Moc se mi líbí myšlenka sémantických prvků nahrazujících nesmyslné kontejnery.

Jo jo, související položka: mnohem zjednodušené doctype - konečně něco, co mohu napsat z paměti!

4
Grant Palin

( Toto je moje odpověď na podobnou otázku na webapps.stackexchange.com

plátno a vlákna pracovního webu jsou nejzajímavějšími aspekty HTML5 pro mě. Napsal jsem několik webových aplikací, které tyto funkce využívají:

GioAUTHor [sic] rozsáhle využívá plátno, aby vám umožnil vykreslit cesty na mapě a poté najít nejkratší cestu od začátku do cíle (pomocí Dijkstraova algoritmu v JavaScriptu).

JavaScript Thread Demo umožňuje použití plátna v omezené míře, ale ukazuje použití pracovních vláken, doplněných demo kódem. Využívá také ovládací prvek posuvníku typu HTML5 = "range" .


Podpora prohlížeče HTML5 je stejně rozmanitá jako samotné prohlížeče. Existuje pěkný web (v HTML5, natch) o HTML5 připravenost , který ukazuje, kdo je na co připraven.

4
Alan

Pokud jde o CSS3 - podívejte se na http://css3please.com/ , abyste viděli, co můžete dělat.

Čím později váš prohlížeč, tím pravděpodobnější budete moci vidět efekty.

2
Sniffer

To nenabízí názor na důležitost, ale je to užitečná delta mezi HTML 4 a 5.

My 2 ¢ o hlavních vylepšeních:

  • <section> a nový algoritmus navrhující hlavičku (řekl jsem, že to byl jen můj 2 ¢)
  • nové prvky formuláře, např. <input type=email>
  • data-* atributy
  • úložiště na straně klienta
  • nativní <audio> a <video>
1
Paul D. Waite

Audio a video tagy umožňují prezentaci médií bez nutnosti pluginů, jako je Flash nebo Silverlight, a hlavně funguje v prohlížečích iPhone a iPad. Je třeba vyřešit některé problémy týkající se kodeků a správy digitálních práv.

1
Steve Tranby

Jeremy Kieth právě vydal opravdu dobrou knihu na téma „HTML5 pro webové designéry“. možná byste to chtěli zkontrolovat.

Je to první kniha od A Book Apart. Vřele doporučuji středně pokročilým až pokročilým návrhářům. A ++

http://books.alistapart.com/

POZNÁMKA: možná budete muset počkat, až si vytisknete kopii

1
Kevin

Protože to nikdo zatím neuvádí:

HTML5 je skvělý pro to, co všichni uvedli, ale zahrnuje také standardní geolokaci, pracovníky webu, web soketu, plátno a localStorage. Všechny tyto nástroje jsou součástí specifikace HTML5, která k tomu využívá spoustu JavaScriptu v zákulisí.

0
Ilan Biala