关闭

关闭

关闭

封号提示

内容

首页 9.Mastering CSS for Web Developers

9.Mastering CSS for Web Developers.pdf

9.Mastering CSS for Web Develop…

bill_mark
2012-07-17 0人阅读 0 0 0 暂无简介 举报

简介:本文档为《9.Mastering CSS for Web Developerspdf》,可适用于IT/计算机领域

ImprintPublishedinAugustSmashingMediaGmbH,Freiburg,GermanyCoverDesign:RicardoGimenesEditing:ThomasBurkertProofreading:BrianGoesslingConcept:SvenLennartz,VitalyFriedmanFoundedinSeptember,SmashingMagazinedeliversusefulandinnovativeinformationtoWebdesignersanddevelopersSmashingMagazine isawellrespectedinternationalonlinepublicationforprofessionalWebdesignersanddevelopers Ourmaingoal istosupporttheWebdesigncommunitywithusefulandvaluablearticlesandresources,writtenandcreatedbyexperienceddesignersanddevelopersISBN:Version:August,SmashingeBook#│MasteringCSSforWebDevelopers│TableofContentsPrefaceWhyWeShouldStartUsingCSSandHTMLTodayCSSThreeConnectingtheDotsModernCSSLayouts:TheEssentialCharacteristicsModernCSSLayouts,Part:TheEssentialTechniquesHowtoUseCSSPseudoClassesTamingAdvancedCSSSelectors!importantCSSDeclarations:HowandWhentoUseThemAnIntroductiontoCSSKeyframeAnimationsCSSSpecificityandInheritanceHowtoUseCSSMediaQueriestoCreateaMobileWebsiteResponsiveWebDesign:WhatItIsandHowtoUseItTheFutureofCSS:ExperimentalCSSPropertiesTechnicalWebTypography:GuidelinesandTechniquesTheFutureofCSSTypographyUsingCSS:OlderBrowsersandCommonConsiderationsTheAuthorsSmashingeBook#│MasteringCSSforWebDevelopers│PrefaceManyWebdesignersarereluctanttoembracethenewtechnologiessuchasCSSorHTMLbecauseofthelackoffullcrossbrowsersupportforthesetechnologiesManydesignersarecomplaininghowthissituationisholdingthembackandtyingtheirhandsButthedayoffullcrossbrowsersupportisnevertrulygoingtodawnanddeliverusthiswonderfulnewWebwhereourworklooksthesamewithanyWebbrowserSomeuserswillstilluseolderbrowsersandsomeuserswillstillhavebrowserswithdeactivatedJavaScriptorimagesSometimesitfeelsthatwearehidingbehindthelackofcrossbrowsercompatibilitytoavoidlearningnewtechniquesthatwouldactuallydramaticallyimproveourworkflowThisSmashingeBook“MasteringCSSforWebDevelopers”iscreatedtohelpWebdesignersembracingtheWeb’sflexibilityandusingCSStechniquesthatworktodayThiseBookcontainsarticlesthatcoverusefultechniques,tricksandguidelinesfromexpertsontopicssuchasmodernCSSlayouts,responsiveWebdesign,CSStypography,CSScrossbrowsercompatibility,aswellasmanyotheradvancedCSStechniquesThearticleshavebeenpublishedonSmashingMagazineinand,andtheyhavebeencarefullyeditedandpreparedforthiseBookWehopethatyouwillfindthiseBookusefulandvaluableWearelookingforwardtoyourfeedbackonTwitterorviaourcontactformThomasBurkert,SmashingeBookEditorSmashingeBook#│MasteringCSSforWebDevelopers│WhyWeShouldStartUsingCSSandHTMLTodayVitalyFriedmanForawhilenow,wehavetakennoticeofhowmanydesignersarereluctanttoembracethenewtechnologiessuchasCSSorHTMLbecauseofthelackoffullcrossbrowsersupportforthesetechnologiesManydesignersarecomplainingaboutthenumerouswayshowthelackofcrossbrowsercompatibilityiseffectivelyholdingusbackandtyingourhandskeepingusfromcompletelybeingabletoshineandshowoffthefullscopeofourabilitiesinourworkManyareholdingontothenotionthatoncethispushismade,wewillwaketoawholenewWebfullofexcitingopportunitiesjustwaitingontheothersideSotheywaitforthisdayWheninreality,theyareeffectivelywaitingforGodotJustliketheelusivecharacterfromBeckett’sclassicplay,thisdayoffullcrossbrowsersupportisnotevertrulygoingtofinditsdawnanddeliverusthiswonderfulnewWebwhereourworklooksthesamewithinthewindowofanyandeveryWebbrowserWhichmeansthatmanyofusintheonlinereaches,fromclientstodesignerstodevelopersandon,aregoingtoneedtoadjustourthinkingsothatwecanrealisticallyapproachtheWebasitisnow,andmorethanlikelyhowitwillbeinthefutureSometimesitfeelsthatwearehidingbehindthelackofcrossbrowsercompatibilitytoavoidlearningnewtechniquesthatwouldactuallydramaticallyimproveourworkflowAndthat’sjustwrongWithoutanadjustment,wewillcontinuetounderselltheWebwehave,andtheSmashingeBook#│MasteringCSSforWebDevelopers│landscapewillremainunexcitinglystaleandboundbythisunderestimationandmindsetAdjustmentinProgressSorryifanybubblesareburstinghere,butwehavetowakeuptothefactthatfullcrossbrowsersupportofnewtechnologiesisjustnotgoingtohappenSomeuserswillstilluseolderbrowsersandsomeuserswillstillhavebrowserswithdeactivatedJavaScriptorimagessomeuserswillbehavingweirdviewportsizesandsomewillnothavecertainpluginsinstalledButthat’sOK,reallyTheWebisadamnflexiblemedium,andrightlysoWeshouldembraceitsflexibilityratherthantryingtosetboundariesfortheavailabletechnologiesinourmindsetandinourdesignsTheearlierwestartdesigningwiththenewtechnologies,thequickertheirwideadoptionwillprogressandthequickerwewillgetbytheincompatibilitycausedbylegacybrowsersMoreandmoreusersareusingmoreadvancedbrowserseverysingleday,andbyusingnewtechnologies,weactuallyencouragethemtoswitch(iftheycan)Someuserswillnotbeabletoupgrade,whichiswhyourdesignsshouldhaveabasicfallbackforolderbrowsers,butitcan’tbethereasontodesignonlythefallbackversionandcallitanightSmashingeBook#│MasteringCSSforWebDevelopers│SelectivizrisoneofthemanytoolsthatmakeitpossibletouseCSStodayTherearesomanyremarkablethingsthatwe,designersanddevelopers,candotoday:beitresponsivedesignswithCSSmediaqueries,richWebtypography(withfullsupporttoday!)orHTMLvideoandaudioAndtherearesomanyusefultoolsandresourcesthatwecanuserightawaytoincorporatenewtechnologiesinourdesignswhilestillsupportingolderbrowsersThereisjustnoreasonnottousethemWearetheoneswhocanpushthecrossbrowsersupportofthesenewtechnologies,encouraginganddemandingthenewfeaturesinfuturebrowsersWehavethispower,andpassingonitjustbecausewedon’tfeelSmashingeBook#│MasteringCSSforWebDevelopers│likethereisnofullsupportofthemyet,shouldnotbeanoptionWeneedtorealizethatwearetheonesputtingthewheelsinmotionandit’suptoustodecidewhatwillbesupportedinthefuturebrowsersandwhatwillnotMoreexcitingthingswillbecominginthefutureWeshoulddesignforthefutureandweshoulddesignfortodaymakingsurethatourprogressivedesignsworkwellinmodernbrowsersandworkfineinolderbrowsersThecrucialmistakewouldbeclingingtothepast,tryingtoworkwiththeoldnastyhacksandworkaroundsthatwillbecomeobsoleteverysoonWecancontinuetoclingtothisnotionandwaitforolderbrowserstobecomeoutdated,therebysellingourselvesandourpotentialshort,orwecanadjustourwayofthinkingaboutthisandcomeattheWebfromawholenewperspectiveOnewhereweunderstandthetruthofthesituationwearefacedwithThatourdesignsarenotgoingtolookthesameineverybrowserandourcodewillnotrenderthesameineverybrowserAndthat’sthebottomlineSmashingeBook#│MasteringCSSforWebDevelopers│Yaili’sbeautifulpieceMyCSSWishlistonwaysArticleslikethesearetheonesthatpushtheboundariesofWebdesignandencouragemoreinnovationintheindustryAndyClarkespokeaboutthisattheDIBIConferenceearlierthisyear(youcancheckhispresentationHardboiledWebDesignonVimeo)Hereallystruckanervewithhispresentation,yetstillwefindsomanystallinginthisdreamofcompleteWebstandardizationSowewantedtoaddressthisissuehereandkeepthisimportantideabeingdiscussedandcirculatedBecausethiswaitingisnotonlyhurtingthoseofusworkingwiththeWeb,SmashingeBook#│MasteringCSSforWebDevelopers│butallofthosewhousetheWebaswellMainlythroughthisplethoraofuntappedpotentialwhichcouldimprovetheoverallexperienceacrossthespectrumforbusinesses,usersandthosewiththeskillstobringthissophisticated,rich,powerfulnewWebintoexistenceForOurClientsNowthiswillmeandifferentthingsfordifferentplayersinthegameForexample,forourclientsthismeansamuchmoredevelopedanduniquelycrafteddesignthatisnotboundbytheboxeswehaveallowedourthinkingtobecontainedinHowever,thisdoescomewithabitofacompromisethatisexpectedonthepartsofourclientsaswellAtleastitdoesforthistoworkinthebalancedandidealizedwaythesethingsshouldplayoutButthisshouldbeexpectedMostchangedoesnotcomewithoutitscompromisesInthiscase,ourclientshavetoacceptthesametruismthatwedoandconcedethattheirprojectswillnotlookthesameacrossvariousbrowsersThisisgettingeasiertoconvincethemofinthesetimesoftheexpandingmobilemarket,buttheymaystillnotbereadytoconcedethisinchonthedesktopsideofthecoinPricesmightbeadjustedinsomecasestoo,andthatmaybeanotherareathattheclientsarenotwillingtoacceptButwithnewdoorsbeingopenedandmoreinnovation,comesmoretimeanddedicatedeffortsTheseareafewoftheimplicationsforourclients,thoughtheexpandedinnovationiswhereweshouldhelpthemfocusSmashingeBook#│MasteringCSSforWebDevelopers│Inshort:•Concedingtotheideathattheprojectwillnotbeabletolookthesameacrossvariousbrowsers,•Thismeansmoredevelopedandunfetteredimaginativedesignsforourclients•Thiscouldleadtoincreasedcostsforclientsaswell,butwithhigherlevelsofinnovation•Client’svisionsforwhattheywantwillbelesshinderedbytheselimitationsFortheUsersTheusersaretheoneswhohavetheleastamountinvestedinmostofwhatisgoingonbehindthescenesTheyonlyseetheendresult,andtheyoftendonotthinktoomuchabouttheprocessthatisinvolvedwhichbringsittothescreensbeforethemAgain,withthemobilemarket,theyhavealreadycomeacrosstheconceptofvaryinginterfacesthroughouttheirvarieddevicesTheyonlycareaboutthefunctionalityandmostprobablythestylethatappealstothembutthisiswheretheirinteresttendstoendUnlessofcourse,theytooarewithintheindustry,andtheymaygiveitasecondthoughtormoreSoallthistalkofcrossbrowsercompatibilityreallydoesn’tconcernthem,theyreallyleaveallthatuptoustoworryaboutUsersonlyevertendtonoticeanythingifandwhensomethingdoesnotworkthewaytheyexpectittofromoneplacetothenextInmostcases,theyarewillingtoshowsomethingtoarelative,friendorcolleague,andsuddenlyfromonedevicetothenext,somethingisdifferentthatdisruptstheirabilitytodosoThatiswhentheyactuallytakenoticeButifwehaveSmashingeBook#│MasteringCSSforWebDevelopers│doneourjobscorrectly,thesetransitionswillremainsmoothevenwiththepushingoftheenvelopesthatwearedoingSothereisnotmuchmorethatisgoingtochangefortheusersotherthanabetterexperienceAnaverageuserisnotgoingtocheckifagivensitehasthesameroundedcornersanddropshadowintwodifferentbrowsersinstalledontheuser’smachineInshort:•Potentiallylessdisruptionsofexperiencefromonedevicetoanother•AnoverallimproveduserexperienceForDesignersDevelopersWe,thedesignersanddevelopersoftheWeb,toohavetomakethesameconcessionourclientsdoandsurrendertheefforttocraftthesameexactpresentationandexperienceacrossthevastspectrumofplatformsanddevicesThisisnotaneasyideatogiveupforalotofthoseplayinginthesefields,butashasbeenalreadymentioned,weareallowingsomuchpotentialtobewastedWecouldbetakingtheWebtonewheights,butweallowourselvestogethunguponwhogetsleftbehindintheprocessandasaresultweallendupgettingleftbehindRatherthanviewingthemasseparateaudiencesandapproachingthemindividually,sotospeak,weallowthelimitationsofonegrouptolimitusallSmashingeBook#│MasteringCSSforWebDevelopers│PerhapsadivideandconquermentalityshouldbeemployedImageCreditSothiscouldmeanabitmorethoughtforthedesiredfollowthrough,andwearenotsuggestingthatwestrivetoappeaseonegrouphereanddamntherestInstead,weshouldjusttakeaunifiedapproach,designingforthosewhocanseeandexperiencethelatest,andanotherforthosewhocannotItwouldn’tmeanmoreworkifwedesignwiththoseusersinmindandproducemeaningfulandcleancodeupfrontandthenjustadjustitforolderbrowsersHavingtorememberthatnoteveryoneisaffordedtheprivilegeofchoosingwhichbrowsertheyareusingAndifnecessary,thisapproachcanbechargedforSoitcouldleadtomorerevenuealongwithexcitingnewopportunitiesbybringingsomeofthefunbackintotheworkthatbeingboxedinwithlimitationshasrobbedusofSmashingeBook#│MasteringCSSforWebDevelopers│Inshort:•Concedingtotheideathattheprojectwillnotbeabletolookthesameacrossvariousbrowsers•Amoreopenplayingfieldfordesignersanddevelopersallaroundlessrestrictedbythisholdingpattern•Moreexcitingandinnovativelandscapetoattractnewclientele•Divisionofprojectaudienceintoseparatepresentationalapproaches•Probablylessworkinvolvedbecausewedon’tneedthemanyhacksandworkaroundswe’veusedbeforeSoWhatAreWeWaitingForSoifthisnewapproach,oradjustedwayofthinking,canyieldpositiveresultsacrossthebrowsersforeveryoneinvolved,thenwhyarewestillholdingbackWhatisitthatwearewaitingforWhynotcastofftheselimitationsthrownuponourfieldsandbreakoutoftheseboxesThenextpartofthediscussiontriestofigureoutsomeofthecontributingfactorsthatcouldberesponsibleforkeepingusrestrainedSmashingeBook#│MasteringCSSforWebDevelopers│FearFactorThefailawaits,andsosomeofusopttostaybackImagebyBenDidierOnecontributingfactorthathastobeconsidered,isperhapsthatwearebeingheldbackoutoffearThismightbeafearoftryingsomethingnew,nowthatwehavegottensocomfortablewaitingforthatmagicdayofcompatibilitytocomeThisfearcouldalsostemfromnotwantingtostanduptosomeparticularclientsandtrytomakethemunderstandthistruismoftheWebandtheconcessionsthatneedtobemadewithregardstoconsistentpresentationacrossthebrowsersWegetintimated,sotospeak,intoplayingalongwiththeseunrealisticexpectations,ratherthantrustingthatwecanmakethemseethetruthofthesituationWhateverthecauseisthatdrivesthisfactor,weneedtofaceourfearsandmoveonSmashingeBook#│MasteringCSSforWebDevelopers│It’sourresponsibilityofprofessionalstodeliverhighqualityworktoourclientsandadvocateonandprotectuser’sinterestsIt’sourresponsibilitytoconfrontclientswhenwehaveto,andwewillhavetodoitatsomepointanyway,becausecrossbrowsercompatibilityisjustnotgoingtohappenComfortableFactorApossiblecontributingfactorthatweshouldalsolookintoisthatsomepeopleinthecommunityarejusttoocomfortablewithhowwedesigntodayandarenotwillingtolearnnewtechnologyTherearethoseofuswhoalreadytireoftheextraworkinvolvedinthetestingandcodingtomakeeverythingworkasitis,sowehavelittletonointerestatallinanapproachthatseeminglycallsformorethoughtandtimeButreally,ifwestartusingnewtechnologiestoday,wewillhavetomasteralearningcurvefirst,buttheadvantagesarecertainlyworthoureffortsWeshouldseeitasthechallengethatwillsaveustimeanddeliverbetterandcleanercodeTosomeextent,todayweareinthesituationinwhichwewereinthebeginningofsatthosetimeswhentheemergenceandgrowingsupportofCSSinbrowsersmademanydevelopersquestiontheirapproachtodesigningWebsiteswithtablesIfthemajorityofdesignerspassedonCSSbackthenandifthewholedesigncommunitydidn’tpushtheWebstandardsforward,weprobablystillwouldbedesigningwithtablesDoubtFactorDoubtisanotherthingwemustconsiderwhenitcomestoourbeinginholdmode,andthiscouldbeamajorcontributortothisissueWebegintodoubtourselvesandourabilitytopulloffthisinnovative,boundarySmashingeBook#│MasteringCSSforWebDevelopers│pushingkindofwork,ortomasterthesenewtechniquesandspecs,sowesinkintothecomfortofplayingthewaitinggameandplayingitsafewithourdesignsandcodeWejustacceptthelimitationsandquietlyworkaroundthem,railingonagainstthevariousvendorsandtheWCWeshouldtakethenewtechnologiesasthechallengetoconquerwe’velearnedHTMLandCSSandwecanlearnHTMLandCSS,tooFaithFactorFaithcanbeagoodthing,butinthiscase,itcanholdyoubackImagebyfotologicUndoubtedly,someofusareholdingoffonmovingforwardintothesenewareasbecausewearefaithfullyclingingtothebeliefthatthecrossbrowsersupportpushwilleventuallyhappenTherearethosesayingthatwewillbeSmashingeBook#│MasteringCSSforWebDevelopers│betteroffasacommunityifweallowedtheWebtoevolve,andthatthisevolutionshouldnotbeforcedButthisisnotforcingevolution,itisjustevolutionJustlikewithDarwin’stheory,theWebevolvesinstages,itdoesnothappenfortheentirepopulationatonceItisagradualchangeovertimeAndthatiswhatweshouldbeallowingtohappenwiththeWeb,graduallyusingandimplementingfeaturesforWebcommunityhereandthereThiswayforwardprogressishappening,andnobodyshouldbeheldbackfromtheseevolutionarystepsuntilweallcantakethem“It’sTooEarly”FactorAnotherpossiblecontributoristheevermocking“It’stooearly”factorSomemembersoftheonlinecommunityfaithfullyfearthatiftheygoaheadandacceptthisnewwayforwardandbegindesigningordevelopinginaccordance,thenassoonastheybegincompletingprojects,thesupportmightbedroppedandtheywouldneedtoupdatetheprojectstheyalreadycompletedinthepastIt’scommontothinkthatit’sjusttooearlytoworkwithnewstandardsuntiltheyarefullyimplementedinmanybrowsersbecauseit’sjustnotsafetoassumethattheywillbeimplementedatallHowever,oneneedstounderstandthedifferencebetweentwogroupsofnewfeatures:thewidelyacceptedones(CSS′smediaqueries,borderradiusdropshadowsandHTMLcanvasarenotgoingtodisappear)andtheexperimentalonesThewidelyacceptedfeaturesaresafetouseandtheywillnotdisappearforcertaintheexperimentalfeaturescanalwaysbeextractedinaseparatestylesheetandbeeasilyupdatedandmaintainedwhennecessaryItmightbea

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/49

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部

举报
资料