ugrás a tartalomhoz

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
 ■
1

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ésLeírásMegjegyzésAlternatíva
opacity (without IE filters)átlátszóság kezelésecss
border-radiuslekerekített sarkakcss
RGBA, HSL/HSLA colorsRGB és HSL színskála, opcionálisan átlátszósággalgrafikus programokban van átszámítási lehetőség RGB-re, számításigényesebb, mint az RGBcss
HTML5 elementsa HTML5-ben bevezetett új elemekaz elemek a dokumentum struktúráját hivatottak gazdagabbá tenni, de többletinformációval nem szolgálnak az adatokrólhtml
Data URLskisméretű fájlokat URL-ben is tarthatunk, így megspórolhatunk egy letöltéstbiná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 errehtml
getElementsByClassNametaláljunk meg elemeket a DOM fában a class attribútum alapjánmérnöki szemmel pongyola módja ez az elemek keresésénekjs
CSS TransformsCSS stílusok 2D és 3D animációjajs, flash
<canvas>kétdimenziós, pixelalapú rajzeszköza 3D támogatása rendkívül korlátozott, a 2D is jóval egyszerűbb, mint a Flash-benflash
Lots of CSS3 selectors (:nth-child(), :target, :enabled, etc)új CSS3 selectorokjs
matchesSelectorannak tesztelése, hogy egy DOM elem megfelel-e az adott selectornakjs
Multiple backgroundstöbb háttárkép egy elemencss
background-clip, background-origin, background-sizea háttérképek pozícionálása, méretezésecss
Real HTML5 Video/Audio with no messy fallbacks<video> és <audio> elemekflash
WOFF FontsWOFF típusú betűkészletekcss
Geolocationhelyzetmeghatározásflash
Server Sent Eventsa szerver kezdeményezi a kommunikációt (server push)flash
CSS Transitionsstílusok animációjajs
Keyframe Animationsanimációk CSS segítségévelflash
Web Socketskommunikáció socketek segítségévelflash
3D Transformskétdimenziós alakzatok háromdimenziós transzformációiPhotoshoppal akár szebben és kevésbé erőforrásigényesen lehet megoldani, ha csak statikus képekre van szükségünkflash
Multiple Columnstartalom több oszlopos tördelése külön HTML elemek létrehozása nélküljs
The <datalist> elementbeviteli mezőkhöz és listboxokhoz adatlistaa hagyományos alkalmazások komboboxának harmatgyenge másolatajs
Application Cachegyorstárazást biztosít alkalmazásunkoffline módban való használhatóságáhozhagyományos HTTP fejlécekkel is meg lehet oldani ugyanezthttp, js
Many HTML5 form featuresadatok megadásának könnyítésejs
Native form validationadatok ellenőrzése a kliensoldalonjs
The <progress> elementfolyamatjelzőjs
Web Workers(script) folyamatok futtatása a háttérben a kliensenflash
Typed Arraysbináris adatok manipulációja scriptbőlflash
Blob URLsbiná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ésLeírásMegjegyzésAlternatíva
box-shadownégyszögletes elemek árnyékacss
SVG images, inline SVG, SVG in CSS backgroundsvektorgrafikus képek és háttérképekflash
text-shadowszövegek árnyékacss
Linear and Radial Gradientsszínátmenetekcss
flexbox layouta szabad helytől függően változó méretű tartalmi blokkoka böngészők megvalósításai eltérnekjs
SVG Filtersvektorgrafikus képeinket effektekkel gazdagíthatjukerőforrásigényes, animációknál érdemes inkább használni, statikus képeknél célszerűbb előre legenerálniflash
pushState, replaceStateböngészőnk history objektumának elemeit módosíthatjukAJAX-os alkalmazásoknál vehetjük hasznátjs
indexedDBkulcs-érték alapú, kliensoldali adatbázisjs, flash
FileReader APIa kliensgépen lévő fájlok elérése script segítségévelflash
The async attribute for <script> elementsscriptek betöltése aszinkron módonjs
XMLHttpRequestLevel 2fájlok feltöltése, adatok kérése más szerverről AJAX segítségévelhtml, flash
matchMediamedia query-k Javascriptbenjs

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

MegnevezésLeírásMegjegyzés
Cross­origin Resource Sharingscriptek segítségével más szerverekről is érhetünk el erőforrásokat
Navigation Timing APIaz oldalon való navigáció közben eltelt idők lekérdezése a böngészőből
ECMAScript 5 Strict Modeszigorú szabványkövetés, hogy a gyakori hibákat, elavult objektumok használatát elkerülhessükha ismerjük és alkalmazzuk a szabványt, semmilyen előnyt nem jelent a bekapcsolása
requestAnimationFrameanimációink pontos időzítéséhez