richhtmldisabled

CopyrightIBMCorporation2011TrademarksHTML5,CSS3,andrelatedtechnologiesPage1of11HTML5,CSS3,andrelatedtechnologiesArapid-fireguidetonewandemergingwebstandardsRobLarsenApril26,2011Manytechnologiesareinformallylumpedunderthe"HTML5"banner.
Thisarticlehelpsclearupanyconfusionaboutwhat'sinandwhat'soutoftheHTMLspecification,whileshininglightonthetechnologiesthemselves,suchasthemanyCSS3modules.
WebstandarddevelopmentandmarketingIt'sagreattimetobeawebdeveloper.
Afteralongperiodofhibernation,thestandardsbodiesandbrowservendorshavebeenextremelybusyoverthepastfewyears,generatingatorrentofexcitingtechnology.
Developersaregreedilyseizingonthiswork,producingdemosandfull-blownapplicationsatasteadypace.
Fedbythisactivityandfurtherboostedbythegrowthoftheirstandards-capablemobilebrowsers,companieslikeGoogleandAppleareusingthesenewstandardstomarkettheirproductsandservices.
Thewiderpressisalsoseizingonthiswaveandpushingstandardshypewellbeyondthenormalcircleofwebdevelopersandbrowservendors.
Thisvolumeofdiscussionhasobviousbenefits,ofcourse.
Peoplegettingexcitedaboutwebstandardsisapositivedevelopmentforeveryoneintheindustry.
Fromthatperspective,thepersistentuseofblanketterms,especiallyHTML5,asasortofbrandshorthandfor"emergingwebtechnology"isausefulshortcut.
Itallowsnontechnicalpeopletograsp—inageneralizedway—theexcitingworkbeingdoneinthestandardsspacerightnow.
Interestingly,eventheW3Chasgottenintotheact,usingHTML5anditsassociatedlogotopublicizethe"webplatform.
"developerWorksibm.
com/developerWorks/HTML5,CSS3,andrelatedtechnologiesPage2of11Figure1.
TheHTML5logoOnthedownside,thevolumeofthespecificationworkbeingdone,coupledwiththefast-and-looselabelinghascreatedabitofconfusion,eveninthedevelopercommunity,surroundingthespecificationsthemselves.
Unlessyou'repayingcloseattentiontothevolumeofwork,there'sarealchanceyou'llgetlostintheacronymsoupofstandardsbeinggenerated.
Thisarticlehelpstoclearupanyconfusionsurroundingtheongoingstandardswork.
Itoutlinesthemajorstandardseffortsandprovidesahandyguidetothetechnologiesthemselves.
HTML5,"HTML5,"andHTML:thelivingstandardThemostimportantofthespecificationsis,withoutadoubt,thelatestiterationofHTML.
Forbetterorworse,"HTML5"hasbecomeacatch-allphraseforallemergingtechnologies.
JavaScriptdeveloperPeterPaulKochsuccinctlydescribedthephenomenoninablogpostfromJanuary2010:"HTML5isanythingyouwantittobeaslongasit'snewandcool.
"AlthoughthatsentencedescribesthesentimentofalotofpeopleandcapturestheessencesoftheHTML5"brand"thathasdevelopedoverthepastcoupleofyears,thereisaneedforpeoplewhobuildwebsitestomovebeyondblankettermsanddigdownintotheactualtechnicalspecificationsthataredrivingthehype.
Asanote,theWebHypertextApplicationTechnologyWorkingGroup(WHATWG)—theworkinggroupdrivingthecurrentHTMLstandardseffort—hasmovedawayfromwhatitcallsthe"snapshotstandardsdevelopmentprocess,"longpracticedbytheW3C.
AlthoughthegroupisworkingcloselywiththeW3CtocreatetheHTML5snapshotspecification,itsownstandardseffortsarefocusedonsimplyprogressingHTMLasa"livingstandard.
"Namingsemanticsaside,let'sstepthroughthetechnologiesactuallypresentintheHTML5snapshotspecification.
Forafull,deepdiveintoanyofthesedocuments,refertotheResourcessection,whichcontainslinkstothisandallotherstandardsdocumentsreferencedinthisarticle.
Forthisspecification,bethankfulforthewebdeveloper-specificversionrecentlyreleasedbytheWHATWG;itremovesseveralhundredpagesofinformationdestinedforbrowservendors,makingforamuchmoreeasilydigesteddocument.
ibm.
com/developerWorks/developerWorksHTML5,CSS3,andrelatedtechnologiesPage3of11TechnologiesintheHTML5snapshotspecificationBeforedivingintothecomponents,it'sworthnotingthattheWHATWGisn'tkiddingwhenitreferstothisasalivingstandard.
It'samovingtarget.
Sometechnologies,liketheCanvas2DAPI,havestartedinthecorespecificationandhavelaterbeenmovedintotheirowndocuments.
NewsemanticelementsOfallthenewpiecesofthespecification,theelementsbeingadoptedmostrapidlyarethenewsemanticelements,likeHeader,Footer,Section,andAside.
ManywerebasedoncommonusagepatternsfoundduringawebcensusconductedbyeditorIanHickson.
ThisisclearlyseeninHeaderandFooter,whichechothecommonid="header"andid="footer"patternsfoundacrosstheweb.
Others,likehgroup,aside,andfigure,werelogicaladditionsandenhancementstotheexistingelementsofHTML.
Althoughspecificbrowsersupportforthenewelementsislimited(browsersdon'tdoanythingspecialwithaheader,forexample),theuseofthenewsemanticelementsisbecomingquitecommon.
Developersareworkingthroughbestpracticesandcreatingcommonpatternsforutilizingthenewelements.
Forexample,althougholderversionsofWindowsInternetExplorerhavesometroublewithunknownelements,librarieslikeModernizrortheHTML5Shivsnippetsmooththewayforcross-browseruseofthenewelements.
NewoutliningalgorithmTogoalongwiththenewsemanticelements,anewoutliningalgorithmisinplacetogeneratemoreflexibledocumentoutlines.
InadditiontothestandardheaderelementsH1throughH6,HTML5introducesseveralnewsectionalelements,suchassection,article,aside,footer,header,andnav.
Theseelementsbreaktheoutlineofthedocumentintoanewsection.
CoupledwiththefamiliarheaderelementsandtheabilitytoaddmorethanoneH1elementonapage,therearenowmuchmorepowerfuloptionsforcreatingsemanticallyrich,structureddocuments.
UsingatoolliketheHTML5outliner(h5o)bookmarkletduringdevelopmentishelpfulforgettingahandleonthenewalgorithm.
Thenewoptionscantakesomegettingusedto,andseeingadocumentbrokenoutinoutlineformthroughoutthedevelopmentcyclecanbringclaritytotheissue.
VideoandaudioPlayingaudioandvideointhebrowserissuchacommoneventonthewebthatit'seasytoforgetthat,formostofthehistoryoftheweb,therewasnonativemethodfordoingso.
EnterthenewHTML5audioandvideoelements.
Fromaspecificationperspective,theinclusionofbrowser-nativeAPIsforplayingaudioandvideoisstraightforwardandwell-designed.
AnyonefamiliarwiththewaythereplacedelementslikeIMGworknowwillunderstandhowtoembedvideoandaudio.
AndtheassociatedAPIissimple,asillustratedinListing1:Listing1.
AsimplevideoexampledeveloperWorksibm.
com/developerWorks/HTML5,CSS3,andrelatedtechnologiesPage4of11yourbrowserdoesnotsupportthevideotagThisisanice,samplewebvideo//theJavaScriptvarvideo=document.
getElementById("video-sample"),toggle=document.
getElementById("video-toggle");toggle.
onclick=function(){if(video.
paused){video.
play();toggle.
className="playing"}else{video.
pause();toggle.
className="paused"}};Unfortunately,gettingtothepointwheretheabovecodeworksinallmajorbrowserswithasinglevideosourceisstillalongwayoff.
Withbrowservendorsfacingoffontwosidesofthecodedivide,it'sfarmorecomplicatedthanitshouldbe.
UntilwemoveawayfromAppleandMicrosoftstandingfirmlybehindthepatent-encumberedh.
264,versusGoogle,Opera,andMozillabackingfree,open,androyalty-freevideoformatslikeWebM,videoonthewebwillremainmore,ratherthanless,complicatedthanitwasintheAdobeFlash-onlyera.
FormelementsandinputtypesHTML5providesseveralnewformelementstobetterreflectcommoninputtasks.
FormatslikeEmailandURLcannowbeindicatedtothebrowserinameaningfulway.
Completelynewforminputsincluderange(foraslider),date(foradatepicker),andcolor(foracolorpicker).
Unfortunately,asresearchbyPeterPaulKochshows,browservendorsotherthanOperaandResearchinMotionhavebeenslowinadoptingthesetechnologies.
Thisisashame.
Althoughelementslikecanvasarecertainlyflashyand"cool,"alotofwebsitesmaketheirmoneyinforms.
Forthem,betterformsmeanbettersites.
Itwouldbearealbenefittoseesomeoftheseenhancementsinfrontofusers.
OfflineWebApplicationsOfflineWebApplicationsdefinedanapplicationcachemanifestthatallowsasiteorapplicationdevelopertospecifyasetoffilesneededtoruntheapplicationwithoutanetworkconnection.
Thisspecificationiscombinedwiththedata-storagecapabilitiesofthewebstoragespecificationtoallowforsomepowerfulofflinecapabilities.
InlinecontenteditingHTML5definedanewAPItoeasecontentediting.
AlthoughtherearenovelJavaScriptimplementations,anativeAPIshouldhelppresentamoreconsistent,effectiveuserexperience.
ibm.
com/developerWorks/developerWorksHTML5,CSS3,andrelatedtechnologiesPage5of11DraganddropThenewdrag-and-dropAPIallowsfordrag-and-dropfileuploadsfromthedesktoptotheweb.
AliveexampleofthisfunctionalitycanbeseeninproductionwithGoogleGmail,inbothMozillaFirefoxandGoogleChrome.
HistoryAPIOneoftheconsistentusabilityissuesoftheAjaxeraisthewayAjax-heavyapplicationsbreakthestandardhistorystack.
Althoughtherearescript-basedsolutionsandcommonschemesavailablenowtohandledynamicstate,theHTML5historyAPIisawelcomeimprovementoveradhocsolutions.
HTML5addsontothepreviousabilitytonavigatethehistorybyincludingamethodtoaddentriestothebrowserhistoryandrespondproperlywhentheuserclicksthebackbutton.
MicrodataHTML5definesastandardizedmethodformarkingupmetadatainthebodyofanHTMLdocument.
MicrodatawillbefamiliartopeoplewhohaveworkedwithmicroformatslikehCardandhCalendar,withsomeimportantdifferences.
Mostimportantly,microdatamovesthepertinentinformationoffoftheclassespreviouslyhijackedbymicroformatsandontoanewitempropattribute.
Inaddition,thestandardaddsotherattributesthatmorepreciselydefinetheformatofmicrodataandamethodthatallowsformorestraightforwardprogrammaticaccesstomicrodata:itemscopesetsthescopeofamicrodatasegment.
itemtypeprovidesaURLthatdefinesthespecificmicrodataformatinuse.
document.
getItems()providesaccesstotop-levelmicrodataitems;themethodreturnsaNodeListcontainingtheitemscorrespondingtoanoptionalitemTypeargumentoralltypes,ifnoargumentisprovided.
TechnologieslumpedintoHTML5thatareinseparatespecificationsandworkinggroupsSeveraltechnologieshavegraduatedoutoftheHTML5specificationintotheirowndocuments.
Others,alwaysseparatefromtheHTMLeffort,havebeengatheredunderthe"webplatform"banner.
SVGProbablythestrangesttechnologytoberopedintotheHTML5catch-allisScalableVectorGraphics(SVG).
SVGisavectorgraphicsgrammardefinedinXML.
TheSVGspecificationhasbeenunderdevelopmentbytheW3Csince1999,soincludingitaseither"new"orpartofHTML5isastretch.
Still,newfoundexcitementforSVGisjustified,asthere'snowsomerealtractionforthestandard.
SomelevelofsupportisnowavailableinthelatestversionsofallthemajorbrowsersandanAPIforolderInternetExplorerversionspresentedbylibrarieslikeRaphael.
js.
developerWorksibm.
com/developerWorks/HTML5,CSS3,andrelatedtechnologiesPage6of11Canvas2DcontextOneoftheearlieststarsoftheHTML5era,theCanvaselementandassociatedAPI,startedlifeasanAppleextensiontoHTML.
Asmentionedearlier,itstartedthestandardsprocessaspartofthemainHTML5specification.
ItnowlivesattheW3Cinaseparatedocument.
TheCanvas2Dcontextprovidesascriptableinterfacefordrawingtwo-dimensionalimagesandbitmapsinthebrowser.
It'salreadybeenleveragedforeverythingfromchartinglibrariestogameengines,apopularsystemfordeliveringcustomfonts,andevenaportoftheProcessingprogramminglanguageintoJavaScript.
ThankfullyforthoselookingtoexploreCanvasnow,there'salevelofsupportforlegacyversionsofInternetExplorerprovidedbytheExplorerCanvaslibrary.
GeolocationTheGeolocationAPIisastandardinterfaceforretrievingthegeographicallocationofadevice.
Itprovidesawindow.
geolocationobjectthatinturnprovidesmethodsthatfigureoutadevice'slocationthroughtheuseoflocationinformationservers.
Locationinformationispulledfromavarietyofsources,includingIPaddress,deviceGPS,Wi-FiandBluetoothMACaddress,radio-frequencyID(RFID),andWi-Ficonnectionlocation.
WebStorageTheWebStoragespecificationdefinesanAPIforpersistentdatastorageofkey-valuepairsinwebbrowsers.
Thisspecificationissimilarto,butgreatlyimprovesupon,thefunctionalitycurrentlyofferedbycookies.
Storagetakestwoforms:sessionStorageandlocalStorage.
Eachprovidessimilarmethodsformanagingitems(setItem(),removeItem(),andgetItem())andforclearingtheentirestorage(clear()).
Sessionstorageisdesignedtoholdinformationforjustthecurrentbrowsingsession.
Localstorageismeantforlonger-termstorageofsitepreferencesorotheruserdata.
There'salsoastorageeventthatcanbelistenedto,forpurposesofmonitoringandreactingtostorageactivity.
Forthoseinterestedinexperiencingthisfunctionalitynow,thePersist.
jslibraryoffersasolid,cross-browsersolutionforusingwebstorageorwebstorageequivalentsinallmajorbrowsers.
TwootherspecificationsgohandinhandwithWebStorage:IndexedDBisarelatedbutgreenspecificationthatoffersevengreateropportunitiesforlong-termdatastorageinthebrowser,includingtheabilitytoquerythedatabaseand,importantly,theabilitytostorecomplexobjects,notjustsimplestrings.
WebWorkersisanincrediblypowerfulspecificationthatdefinesanAPIthatallowsapplicationdeveloperstospawnbackground"workers"runningscriptsinparalleltotheJavaScriptontheirmainpage.
Thisfunctionalityallowsdeveloperstooffloadlengthyprocessingtaskstobackgroundprocesses,freeingupthebrowserforcontinuedinteractionsinthemaincontext.
ibm.
com/developerWorks/developerWorksHTML5,CSS3,andrelatedtechnologiesPage7of11FileAPIThisspecificationprovidesanAPIforworkingwithfilesinwebapplications.
Coupledwithseveralotheremergingandestablishedtechnologies,likeXMLHttpRequest,draganddrop,andWebWorkers,theFileAPIwillallowformuchmorepowerfulinteractionsbetweenthewebandthedesktopthanareavailabletoday.
InsteadofasimplefileuploadinputelementpassingthefiletoawebserverforprocessingoracomplicatedFlashinterface,theFileAPIwillallowdirectaccesstofiledatatothebrowser.
WebSocketTheWebSocketAPIisdesignedtoallowforbidirectional,simultaneouscommunicationsbetweenawebbrowserandwebserveroverasingleTCPsocket.
WebSocketshouldactuallybefaralongintheimplementationgame,withsupportinthelatestversionsofFirefox,Opera,Chrome,andAppleSafari,butasecurityvulnerabilitydiscoveredmeansthatsupportisnowdisabledbydefaultinFirefoxandOpera.
Server-sentEventsThisspecificationdefinesanAPIforopeninganHTTPconnectionforreceivingpushnotificationsfromaserverintheformofDOMevents.
Thisspecificationreversesthecurrentpatternofpollingaserveratregularintervalsforupdates,savingcountlessunnecessaryrequestsandtheassociatedprocessortimeandbandwidth.
WebGLTheWeb-basedGraphicsLibrary(WebGL)enhancesJavaScriptwiththeabilitytocreateinteractive,three-dimensionalgraphicsinthebrowser.
WebGLisacontextofthecanvasHTMLelement.
ThespecificationwenttoVersion1.
0on3March2011andismanagedbythenonprofitKhronosGroup.
XMLHttpRequestLevel2TheXMLHttpRequestLevel2specificationenhancesthecoreXMLHttpRequestobjectwithnewfeatures.
ThemostinterestingoftheseisprobablyCross-OriginResourceSharing,whichisasafewaytogetaroundthesame-originsecuritypolicythatpreventsXMLHttpRequestfrominteractingwithathird-partyserver.
Currently,XMLHttpRequestcanonlycommunicatewiththesameserveronthesameprotocol.
WiththeprevalenceofJSONandJSONP,cross-originsharingmaynothavethesameurgencyitoncedid,butitwillstillopenmanypossibilitiesinsiteandmash-uparchitecturethatwerepreviouslyblockedbythesame-originpolicy.
ThemodularapproachofCSS3ForthelatestversionofCSS,theworkinggroupdecidedtomoveawayfromasingle,monolithicspecificationanddividedtheworkintoseveralseparatedocumentscalledmodules.
EachmoduleaddsanewcapabilityorextendsafeaturesdefinedinCSS,Version2(CSS2).
developerWorksibm.
com/developerWorks/HTML5,CSS3,andrelatedtechnologiesPage8of11Severalmodulesaremature,havingbeenindevelopmentfor5to10(ormore)years.
TheseareeitherproposedrecommendationsorcandidaterecommendationsintheW3C'scompletenesshierarchy.
Thatmeansthey'rebasicallydone.
Let'stakealookatsomeofthemoreinterestingandimportantmodules.
SelectorsCSSdoesn'tworkwithoutselectors.
SelectorsareusedtotargetelementsinanHTMLdocumentinordertostylethem.
ThismodulecontainstheexistingselectorsfromCSS,Version1(CSS1)andCSS2,andextendsthemwithnewfeatures.
Theadditionsfocusprimarilyonagroupofstructuralpseudo-classeslikeE:empty,whichmatchesanemptyelement,andE::nth-child(n),whichmatchesaspecificindexnchildofanelement.
Othernewselectorsincludeanegationpsuedo-classE:not(s),whichnegatesasimpleselector,andtheUIelementstatespseudo-classeslikeE:enabledandE:disabled,whichmatchelementsthatareenabledordisabled.
UsersofpopularJavaScriptlibrarieslikejQuery,Dojo,andYUIwillbefamiliarwiththenewCSS,Version3(CSS3)selectors,astheyhavebeenincludedinthelibraries'CSSselectorenginesforsometimenow.
ColorColorspecifiesthecolor-relatedaspectsofCSS,includingtransparencyandnotationsforcolorvalues.
ThenewcolorvaluesincludeRedGreenBlue+anAlphachannel(RGBA)andHue,Saturation,Lightness+anAlphachannel(HSLA).
BackgroundsandBordersBackgroundsandBordersdefinesthebackgroundproperties,suchasbackground-colorandbackground-image,anddefinesthestyleofborders.
Newfunctionalityinthismoduleincludestheabilitytostretchabackgroundimage,imagesforborders,boxshadows,and,inoneofthemostrequestedfeaturesinthehistoryoftheweb,theabilitytospecifyroundedcornersonabox.
Multi-columnlayoutMulti-columnlayoutallowsdeveloperstoflowcontentintoflexiblydefinedcolumns.
MediaQueriesMediaQueriesisanenhancementofthe@mediarulesofCSSandthemediaattributeinHTML,whichaddsparameterssuchasdisplaysize,colordepth,andaspectratio.
Thismoduleallowsdeveloperstomorespecificallytailorcontenttodifferentsizesandcapabilitiesofdeviceswithinaclass.
MediaQueriesplayastrongroleinEthanMarcotte'sResponsiveWebDesign,thesubjectofapopularAListApartarticleandupcomingbook.
ibm.
com/developerWorks/developerWorksHTML5,CSS3,andrelatedtechnologiesPage9of11Newandin-developmentmodulesThereareexciting,practical,andeminentlyusefulpiecesofthematuremodules,butmuchofthemostexcitingworkbeingdoneintheCSSspaceisinaseriesof(relatively)newlyproposedmodules.
Someofthemostnoteworthyexamplesfollow.
CSSFontsModuleLevel3FontsLevel3isanextensionoftheoriginalandfamiliarfontpropertiesavailablefromthedawnofCSS.
Level3includesthepopular@font-facerule,whichallowsformuchgreatercontroloftypeonthewebbygrantingtheabilitytodirectlyembedcustomfontsintothedocumentusingCSSrules.
CSS2DTransformsModuleLevel3The2DTransformationsmoduleintroducesanewpropertythatallowsfortherotation,translation,scaling,andothertransformationstoabox.
CSS3DTransformsModuleLevel3DevelopedinconjunctionwithSVG,the3DTransformsmoduleextendsthe2DTransformsmodulewithaperspectivetransformation.
CSSAnimationsModuleLevel3andCSSTransitionsModuleLevel3TheAnimationsmoduleallowstheassignmentofanimationstoelements,specifyingthepropertiestoanimate,theanimationtiming,andtheunitstochangeduringtheanimation.
TheTransitionsmoduledefinesapropertytoanimatethetransitionsbetweenpseudo-classes.
Acommonexampleofatransitioniswhenanelemententersorleavesthe:hoverstate.
SeethefutureFigure2.
I'veseenthefuturedeveloperWorksibm.
com/developerWorks/HTML5,CSS3,andrelatedtechnologiesPage10of11Thatendsourtourofthecurrentstateofthewebstandardsworld.
Itreallyisanexcitingtime,especiallybecausesomanyofthesetechnologiesarerapidlybecomingavailabletoworkwithtodayasdemosorevenproductioncode.
Withdevelopersbusydocumentingthequirksofthesenewtechnologiesandcreatinglibrariestofillinsupportforlegacybrowsers,opportunitiesaboundtoexperiencethesenewtechnologiesfirsthand.
Thatfirst-handexperienceisunquestionablythebestwaytoexperiencethefutureoftheweb.
So,ifyou'reinterestedinseeingwherewe'regoing,nowisthetimetodiveinandseewhatallthefussisabout.
ibm.
com/developerWorks/developerWorksHTML5,CSS3,andrelatedtechnologiesPage11of11RelatedtopicsdeveloperWorksWebcontentHTML5specificationforWebdevelopersOpenGLCopyrightIBMCorporation2011(www.
ibm.
com/legal/copytrade.
shtml)Trademarks(www.
ibm.
com/developerworks/ibm/trademarks/)