Old Browsers Are Holding Back The Web

Joó Ádám · 2012. Júl. 10. (K), 16.31

Nem lehet az újgenerációs technikákat használni, amíg a lemaradó böngészők ki nem vesznek

■

Mit lehet és mit nem?

Hidvégi Gábor · 2012. Júl. 22. (V), 18.12

Ahhoz, hogy magam is átlássam az elérhető/fejlesztés alatt lévő technológiákat, a blogmarkban lévő felsorolás minden elemének utánaolvastam, átgondoltam, hogy miként lehet ezeket alternatív módszerekkel helyettesíteni. A megjegyzés oszlopba írtam a szubjektív véleményem, egyéb megjegyzéseimet.
Sajnos a formázási lehetőségek korlátozottak.

A negyvenöt elemet három táblázatba szedtem, az elsőbe azok kerültek, amelyeket könnyen tudunk meglévő technológiákkal reprodukálni, 70-100%-os pontossággal (29/45 elem).
A második táblázatban vannak a korlátozottan megoldható problémák, ahol az új szabvány kb. felét tudjuk valamilyen formában megvalósítani (12/45 elem).
A harmadik táblába került négy olyan technológia, amire (egyelőre) nem találtam más módszert (4/45 elem).

Első tábla, könnyen megvalósítható technológiák

Megnevezés	Leírás	Megjegyzés	Alternatíva
opacity (without IE filters)	átlátszóság kezelése		css
border-radius	lekerekített sarkak		css
RGBA, HSL/HSLA colors	RGB és HSL színskála, opcionálisan átlátszósággal	grafikus programokban van átszámítási lehetőség RGB-re, számításigényesebb, mint az RGB	css
HTML5 elements	a HTML5-ben bevezetett új elemek	az elemek a dokumentum struktúráját hivatottak gazdagabbá tenni, de többletinformációval nem szolgálnak az adatokról	html
Data URLs	kisméretű fájlokat URL-ben is tarthatunk, így megspórolhatunk egy letöltést	bináris fájlokat base64-gyel kell kódolni, ami a méretet kb. 33%-kal megnöveli; ha tényleg erre van szükségünk, az MHTML szabvány alkalmas erre	html
getElementsByClassName	találjunk meg elemeket a DOM fában a class attribútum alapján	mérnöki szemmel pongyola módja ez az elemek keresésének	js
CSS Transforms	CSS stílusok 2D és 3D animációja		js, flash
<canvas>	kétdimenziós, pixelalapú rajzeszköz	a 3D támogatása rendkívül korlátozott, a 2D is jóval egyszerűbb, mint a Flash-ben	flash
Lots of CSS3 selectors (:nth-child(), :target, :enabled, etc)	új CSS3 selectorok		js
matchesSelector	annak tesztelése, hogy egy DOM elem megfelel-e az adott selectornak		js
Multiple backgrounds	több háttárkép egy elemen		css
background-clip, background-origin, background-size	a háttérképek pozícionálása, méretezése		css
Real HTML5 Video/Audio with no messy fallbacks	<video> és <audio> elemek		flash
WOFF Fonts	WOFF típusú betűkészletek		css
Geolocation	helyzetmeghatározás		flash
Server Sent Events	a szerver kezdeményezi a kommunikációt (server push)		flash
CSS Transitions	stílusok animációja		js
Keyframe Animations	animációk CSS segítségével		flash
Web Sockets	kommunikáció socketek segítségével		flash
3D Transforms	kétdimenziós alakzatok háromdimenziós transzformációi	Photoshoppal akár szebben és kevésbé erőforrásigényesen lehet megoldani, ha csak statikus képekre van szükségünk	flash
Multiple Columns	tartalom több oszlopos tördelése külön HTML elemek létrehozása nélkül		js
The <datalist> element	beviteli mezőkhöz és listboxokhoz adatlista	a hagyományos alkalmazások komboboxának harmatgyenge másolata	js
Application Cache	gyorstárazást biztosít alkalmazásunkoffline módban való használhatóságához	hagyományos HTTP fejlécekkel is meg lehet oldani ugyanezt	http, js
Many HTML5 form features	adatok megadásának könnyítése		js
Native form validation	adatok ellenőrzése a kliensoldalon		js
The <progress> element	folyamatjelző		js
Web Workers	(script) folyamatok futtatása a háttérben a kliensen		flash
Typed Arrays	bináris adatok manipulációja scriptből		flash
Blob URLs	bináris adatok (objektumok) elérése URL-ek segítségével (adatcsere)		flash

Második tábla, korlátozottan megvalósítható technológiák

Megnevezés	Leírás	Megjegyzés	Alternatíva
box-shadow	négyszögletes elemek árnyéka		css
SVG images, inline SVG, SVG in CSS backgrounds	vektorgrafikus képek és háttérképek		flash
text-shadow	szövegek árnyéka		css
Linear and Radial Gradients	színátmenetek		css
flexbox layout	a szabad helytől függően változó méretű tartalmi blokkok	a böngészők megvalósításai eltérnek	js
SVG Filters	vektorgrafikus képeinket effektekkel gazdagíthatjuk	erőforrásigényes, animációknál érdemes inkább használni, statikus képeknél célszerűbb előre legenerálni	flash
pushState, replaceState	böngészőnk history objektumának elemeit módosíthatjuk	AJAX-os alkalmazásoknál vehetjük hasznát	js
indexedDB	kulcs-érték alapú, kliensoldali adatbázis		js, flash
FileReader API	a kliensgépen lévő fájlok elérése script segítségével		flash
The async attribute for <script> elements	scriptek betöltése aszinkron módon		js
XMLHttpRequestLevel 2	fájlok feltöltése, adatok kérése más szerverről AJAX segítségével		html, flash
matchMedia	media query-k Javascriptben		js

Harmadik tábla, nem megvalósítható technológiák

Megnevezés	Leírás	Megjegyzés
Crossorigin Resource Sharing	scriptek segítségével más szerverekről is érhetünk el erőforrásokat
Navigation Timing API	az oldalon való navigáció közben eltelt idők lekérdezése a böngészőből
ECMAScript 5 Strict Mode	szigorú szabványkövetés, hogy a gyakori hibákat, elavult objektumok használatát elkerülhessük	ha ismerjük és alkalmazzuk a szabványt, semmilyen előnyt nem jelent a bekapcsolása
requestAnimationFrame	animációink pontos időzítéséhez

A hozzászóláshoz regisztráció és belépés szükséges
új téma

H	K	Sze	Cs	P	Szo	V
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

Weblabor

Keresés