关闭

关闭

关闭

封号提示

内容

首页 9.Mastering CSS for Web Developers.pdf

9.Mastering CSS for Web Developers.pdf

9.Mastering CSS for Web Develop…

上传者: bill_mark 2012-07-17 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《9.Mastering CSS for Web Developerspdf》,可适用于IT/计算机领域,主题内容包含ImprintPublishedinAugustSmashingMediaGmbH,Freiburg,GermanyCoverDesign:Rica符等。

ImprintPublishedinAugustSmashingMediaGmbH,Freiburg,GermanyCoverDesign:RicardoGimenesEditing:ThomasBurkertProofreading:BrianGoesslingConcept:SvenLennartz,VitalyFriedmanFoundedinSeptember,SmashingMagazinedeliversusefulandinnovativeinformationtoWebdesignersanddevelopersSmashingMagazine isawellrespectedinternationalonlinepublicationforprofessionalWebdesignersanddevelopers Ourmaingoal istosupporttheWebdesigncommunitywithusefulandvaluablearticlesandresources,writtenandcreatedbyexperienceddesignersanddevelopersISBN:Version:August,SmashingeBook#MasteringCSSforWebDevelopersTableofContentsPrefaceWhyWeShouldStartUsingCSSandHTMLTodayCSSThreeConnectingtheDotsModernCSSLayouts:TheEssentialCharacteristicsModernCSSLayouts,Part:TheEssentialTechniquesHowtoUseCSSPseudoClassesTamingAdvancedCSSSelectors!importantCSSDeclarations:HowandWhentoUseThemAnIntroductiontoCSSKeyframeAnimationsCSSSpecificityandInheritanceHowtoUseCSSMediaQueriestoCreateaMobileWebsiteResponsiveWebDesign:WhatItIsandHowtoUseItTheFutureofCSS:ExperimentalCSSPropertiesTechnicalWebTypography:GuidelinesandTechniquesTheFutureofCSSTypographyUsingCSS:OlderBrowsersandCommonConsiderationsTheAuthorsSmashingeBook#MasteringCSSforWebDevelopersPrefaceManyWebdesignersarereluctanttoembracethenewtechnologiessuchasCSSorHTMLbecauseofthelackoffullcrossbrowsersupportforthesetechnologiesManydesignersarecomplaininghowthissituationisholdingthembackandtyingtheirhandsButthedayoffullcrossbrowsersupportisnevertrulygoingtodawnanddeliverusthiswonderfulnewWebwhereourworklooksthesamewithanyWebbrowserSomeuserswillstilluseolderbrowsersandsomeuserswillstillhavebrowserswithdeactivatedJavaScriptorimagesSometimesitfeelsthatwearehidingbehindthelackofcrossbrowsercompatibilitytoavoidlearningnewtechniquesthatwouldactuallydramaticallyimproveourworkflowThisSmashingeBook“MasteringCSSforWebDevelopers”iscreatedtohelpWebdesignersembracingtheWeb’sflexibilityandusingCSStechniquesthatworktodayThiseBookcontainsarticlesthatcoverusefultechniques,tricksandguidelinesfromexpertsontopicssuchasmodernCSSlayouts,responsiveWebdesign,CSStypography,CSScrossbrowsercompatibility,aswellasmanyotheradvancedCSStechniquesThearticleshavebeenpublishedonSmashingMagazineinand,andtheyhavebeencarefullyeditedandpreparedforthiseBookWehopethatyouwillfindthiseBookusefulandvaluableWearelookingforwardtoyourfeedbackonTwitterorviaourcontactformThomasBurkert,SmashingeBookEditorSmashingeBook#MasteringCSSforWebDevelopersWhyWeShouldStartUsingCSSandHTMLTodayVitalyFriedmanForawhilenow,wehavetakennoticeofhowmanydesignersarereluctanttoembracethenewtechnologiessuchasCSSorHTMLbecauseofthelackoffullcrossbrowsersupportforthesetechnologiesManydesignersarecomplainingaboutthenumerouswayshowthelackofcrossbrowsercompatibilityiseffectivelyholdingusbackandtyingourhandskeepingusfromcompletelybeingabletoshineandshowoffthefullscopeofourabilitiesinourworkManyareholdingontothenotionthatoncethispushismade,wewillwaketoawholenewWebfullofexcitingopportunitiesjustwaitingontheothersideSotheywaitforthisdayWheninreality,theyareeffectivelywaitingforGodotJustliketheelusivecharacterfromBeckett’sclassicplay,thisdayoffullcrossbrowsersupportisnotevertrulygoingtofinditsdawnanddeliverusthiswonderfulnewWebwhereourworklooksthesamewithinthewindowofanyandeveryWebbrowserWhichmeansthatmanyofusintheonlinereaches,fromclientstodesignerstodevelopersandon,aregoingtoneedtoadjustourthinkingsothatwecanrealisticallyapproachtheWebasitisnow,andmorethanlikelyhowitwillbeinthefutureSometimesitfeelsthatwearehidingbehindthelackofcrossbrowsercompatibilitytoavoidlearningnewtechniquesthatwouldactuallydramaticallyimproveourworkflowAndthat’sjustwrongWithoutanadjustment,wewillcontinuetounderselltheWebwehave,andtheSmashingeBook#MasteringCSSforWebDeveloperslandscapewillremainunexcitinglystaleandboundbythisunderestimationandmindsetAdjustmentinProgressSorryifanybubblesareburstinghere,butwehavetowakeuptothefactthatfullcrossbrowsersupportofnewtechnologiesisjustnotgoingtohappenSomeuserswillstilluseolderbrowsersandsomeuserswillstillhavebrowserswithdeactivatedJavaScriptorimagessomeuserswillbehavingweirdviewportsizesandsomewillnothavecertainpluginsinstalledButthat’sOK,reallyTheWebisadamnflexiblemedium,andrightlysoWeshouldembraceitsflexibilityratherthantryingtosetboundariesfortheavailabletechnologiesinourmindsetandinourdesignsTheearlierwestartdesigningwiththenewtechnologies,thequickertheirwideadoptionwillprogressandthequickerwewillgetbytheincompatibilitycausedbylegacybrowsersMoreandmoreusersareusingmoreadvancedbrowserseverysingleday,andbyusingnewtechnologies,weactuallyencouragethemtoswitch(iftheycan)Someuserswillnotbeabletoupgrade,whichiswhyourdesignsshouldhaveabasicfallbackforolderbrowsers,butitcan’tbethereasontodesignonlythefallbackversionandcallitanightSmashingeBook#MasteringCSSforWebDevelopersSelectivizrisoneofthemanytoolsthatmakeitpossibletouseCSStodayTherearesomanyremarkablethingsthatwe,designersanddevelopers,candotoday:beitresponsivedesignswithCSSmediaqueries,richWebtypography(withfullsupporttoday!)orHTMLvideoandaudioAndtherearesomanyusefultoolsandresourcesthatwecanuserightawaytoincorporatenewtechnologiesinourdesignswhilestillsupportingolderbrowsersThereisjustnoreasonnottousethemWearetheoneswhocanpushthecrossbrowsersupportofthesenewtechnologies,encouraginganddemandingthenewfeaturesinfuturebrowsersWehavethispower,andpassingonitjustbecausewedon’tfeelSmashingeBook#MasteringCSSforWebDeveloperslikethereisnofullsupportofthemyet,shouldnotbeanoptionWeneedtorealizethatwearetheonesputtingthewheelsinmotionandit’suptoustodecidewhatwillbesupportedinthefuturebrowsersandwhatwillnotMoreexcitingthingswillbecominginthefutureWeshoulddesignforthefutureandweshoulddesignfortodaymakingsurethatourprogressivedesignsworkwellinmodernbrowsersandworkfineinolderbrowsersThecrucialmistakewouldbeclingingtothepast,tryingtoworkwiththeoldnastyhacksandworkaroundsthatwillbecomeobsoleteverysoonWecancontinuetoclingtothisnotionandwaitforolderbrowserstobecomeoutdated,therebysellingourselvesandourpotentialshort,orwecanadjustourwayofthinkingaboutthisandcomeattheWebfromawholenewperspectiveOnewhereweunderstandthetruthofthesituationwearefacedwithThatourdesignsarenotgoingtolookthesameineverybrowserandourcodewillnotrenderthesameineverybrowserAndthat’sthebottomlineSmashingeBook#MasteringCSSforWebDevelopersYaili’sbeautifulpieceMyCSSWishlistonwaysArticleslikethesearetheonesthatpushtheboundariesofWebdesignandencouragemoreinnovationintheindustryAndyClarkespokeaboutthisattheDIBIConferenceearlierthisyear(youcancheckhispresentationHardboiledWebDesignonVimeo)Hereallystruckanervewithhispresentation,yetstillwefindsomanystallinginthisdreamofcompleteWebstandardizationSowewantedtoaddressthisissuehereandkeepthisimportantideabeingdiscussedandcirculatedBecausethiswaitingisnotonlyhurtingthoseofusworkingwiththeWeb,SmashingeBook#MasteringCSSforWebDevelopersbutallofthosewhousetheWebaswellMainlythroughthisplethoraofuntappedpotentialwhichcouldimprovetheoverallexperienceacrossthespectrumforbusinesses,usersandthosewiththeskillstobringthissophisticated,rich,powerfulnewWebintoexistenceForOurClientsNowthiswillmeandifferentthingsfordifferentplayersinthegameForexample,forourclientsthismeansamuchmoredevelopedanduniquelycrafteddesignthatisnotboundbytheboxeswehaveallowedourthinkingtobecontainedinHowever,thisdoescomewithabitofacompromisethatisexpectedonthepartsofourclientsaswellAtleastitdoesforthistoworkinthebalancedandidealizedwaythesethingsshouldplayoutButthisshouldbeexpectedMostchangedoesnotcomewithoutitscompromisesInthiscase,ourclientshavetoacceptthesametruismthatwedoandconcedethattheirprojectswillnotlookthesameacrossvariousbrowsersThisisgettingeasiertoconvincethemofinthesetimesoftheexpandingmobilemarket,buttheymaystillnotbereadytoconcedethisinchonthedesktopsideofthecoinPricesmightbeadjustedinsomecasestoo,andthatmaybeanotherareathattheclientsarenotwillingtoacceptButwithnewdoorsbeingopenedandmoreinnovation,comesmoretimeanddedicatedeffortsTheseareafewoftheimplicationsforourclients,thoughtheexpandedinnovationiswhereweshouldhelpthemfocusSmashingeBook#MasteringCSSforWebDevelopersInshort:•Concedingtotheideathattheprojectwillnotbeabletolookthesameacrossvariousbrowsers,•Thismeansmoredevelopedandunfetteredimaginativedesignsforourclients•Thiscouldleadtoincreasedcostsforclientsaswell,butwithhigherlevelsofinnovation•Client’svisionsforwhattheywantwillbelesshinderedbytheselimitationsFortheUsersTheusersaretheoneswhohavetheleastamountinvestedinmostofwhatisgoingonbehindthescenesTheyonlyseetheendresult,andtheyoftendonotthinktoomuchabouttheprocessthatisinvolvedwhichbringsittothescreensbeforethemAgain,withthemobilemarket,theyhavealreadycomeacrosstheconceptofvaryinginterfacesthroughouttheirvarieddevicesTheyonlycareaboutthefunctionalityandmostprobablythestylethatappealstothembutthisiswheretheirinteresttendstoendUnlessofcourse,theytooarewithintheindustry,andtheymaygiveitasecondthoughtormoreSoallthistalkofcrossbrowsercompatibilityreallydoesn’tconcernthem,theyreallyleaveallthatuptoustoworryaboutUsersonlyevertendtonoticeanythingifandwhensomethingdoesnotworkthewaytheyexpectittofromoneplacetothenextInmostcases,theyarewillingtoshowsomethingtoarelative,friendorcolleague,andsuddenlyfromonedevicetothenext,somethingisdifferentthatdisruptstheirabilitytodosoThatiswhentheyactuallytakenoticeButifwehaveSmashingeBook#MasteringCSSforWebDevelopersdoneourjobscorrectly,thesetransitionswillremainsmoothevenwiththepushingoftheenvelopesthatwearedoingSothereisnotmuchmorethatisgoingtochangefortheusersotherthanabetterexperienceAnaverageuserisnotgoingtocheckifagivensitehasthesameroundedcornersanddropshadowintwodifferentbrowsersinstalledontheuser’smachineInshort:•Potentiallylessdisruptionsofexperiencefromonedevicetoanother•AnoverallimproveduserexperienceForDesignersDevelopersWe,thedesignersanddevelopersoftheWeb,toohavetomakethesameconcessionourclientsdoandsurrendertheefforttocraftthesameexactpresentationandexperienceacrossthevastspectrumofplatformsanddevicesThisisnotaneasyideatogiveupforalotofthoseplayinginthesefields,butashasbeenalreadymentioned,weareallowingsomuchpotentialtobewastedWecouldbetakingtheWebtonewheights,butweallowourselvestogethunguponwhogetsleftbehindintheprocessandasaresultweallendupgettingleftbehindRatherthanviewingthemasseparateaudiencesandapproachingthemindividually,sotospeak,weallowthelimitationsofonegrouptolimitusallSmashingeBook#MasteringCSSforWebDevelopersPerhapsadivideandconquermentalityshouldbeemployedImageCreditSothiscouldmeanabitmorethoughtforthedesiredfollowthrough,andwearenotsuggestingthatwestrivetoappeaseonegrouphereanddamntherestInstead,weshouldjusttakeaunifiedapproach,designingforthosewhocanseeandexperiencethelatest,andanotherforthosewhocannotItwouldn’tmeanmoreworkifwedesignwiththoseusersinmindandproducemeaningfulandcleancodeupfrontandthenjustadjustitforolderbrowsersHavingtorememberthatnoteveryoneisaffordedtheprivilegeofchoosingwhichbrowsertheyareusingAndifnecessary,thisapproachcanbechargedforSoitcouldleadtomorerevenuealongwithexcitingnewopportunitiesbybringingsomeofthefunbackintotheworkthatbeingboxedinwithlimitationshasrobbedusofSmashingeBook#MasteringCSSforWebDevelopersInshort:•Concedingtotheideathattheprojectwillnotbeabletolookthesameacrossvariousbrowsers•Amoreopenplayingfieldfordesignersanddevelopersallaroundlessrestrictedbythisholdingpattern•Moreexcitingandinnovativelandscapetoattractnewclientele•Divisionofprojectaudienceintoseparatepresentationalapproaches•Probablylessworkinvolvedbecausewedon’tneedthemanyhacksandworkaroundswe’veusedbeforeSoWhatAreWeWaitingForSoifthisnewapproach,oradjustedwayofthinking,canyieldpositiveresultsacrossthebrowsersforeveryoneinvolved,thenwhyarewestillholdingbackWhatisitthatwearewaitingforWhynotcastofftheselimitationsthrownuponourfieldsandbreakoutoftheseboxesThenextpartofthediscussiontriestofigureoutsomeofthecontributingfactorsthatcouldberesponsibleforkeepingusrestrainedSmashingeBook#MasteringCSSforWebDevelopersFearFactorThefailawaits,andsosomeofusopttostaybackImagebyBenDidierOnecontributingfactorthathastobeconsidered,isperhapsthatwearebeingheldbackoutoffearThismightbeafearoftryingsomethingnew,nowthatwehavegottensocomfortablewaitingforthatmagicdayofcompatibilitytocomeThisfearcouldalsostemfromnotwantingtostanduptosomeparticularclientsandtrytomakethemunderstandthistruismoftheWebandtheconcessionsthatneedtobemadewithregardstoconsistentpresentationacrossthebrowsersWegetintimated,sotospeak,intoplayingalongwiththeseunrealisticexpectations,ratherthantrustingthatwecanmakethemseethetruthofthesituationWhateverthecauseisthatdrivesthisfactor,weneedtofaceourfearsandmoveonSmashingeBook#MasteringCSSforWebDevelopersIt’sourresponsibilityofprofessionalstodeliverhighqualityworktoourclientsandadvocateonandprotectuser’sinterestsIt’sourresponsibilitytoconfrontclientswhenwehaveto,andwewillhavetodoitatsomepointanyway,becausecrossbrowsercompatibilityisjustnotgoingtohappenComfortableFactorApossiblecontributingfactorthatweshouldalsolookintoisthatsomepeopleinthecommunityarejusttoocomfortablewithhowwedesigntodayandarenotwillingtolearnnewtechnologyTherearethoseofuswhoalreadytireoftheextraworkinvolvedinthetestingandcodingtomakeeverythingworkasitis,sowehavelittletonointerestatallinanapproachthatseeminglycallsformorethoughtandtimeButreally,ifwestartusingnewtechnologiestoday,wewillhavetomasteralearningcurvefirst,buttheadvantagesarecertainlyworthoureffortsWeshouldseeitasthechallengethatwillsaveustimeanddeliverbetterandcleanercodeTosomeextent,todayweareinthesituationinwhichwewereinthebeginningofsatthosetimeswhentheemergenceandgrowingsupportofCSSinbrowsersmademanydevelopersquestiontheirapproachtodesigningWebsiteswithtablesIfthemajorityofdesignerspassedonCSSbackthenandifthewholedesigncommunitydidn’tpushtheWebstandardsforward,weprobablystillwouldbedesigningwithtablesDoubtFactorDoubtisanotherthingwemustconsiderwhenitcomestoourbeinginholdmode,andthiscouldbeamajorcontributortothisissueWebegintodoubtourselvesandourabilitytopulloffthisinnovative,boundarySmashingeBook#MasteringCSSforWebDeveloperspushingkindofwork,ortomasterthesenewtechniquesandspecs,sowesinkintothecomfortofplayingthewaitinggameandplayingitsafewithourdesignsandcodeWejustacceptthelimitationsandquietlyworkaroundthem,railingonagainstthevariousvendorsandtheWCWeshouldtakethenewtechnologiesasthechallengetoconquerwe’velearnedHTMLandCSSandwecanlearnHTMLandCSS,tooFaithFactorFaithcanbeagoodthing,butinthiscase,itcanholdyoubackImagebyfotologicUndoubtedly,someofusareholdingoffonmovingforwardintothesenewareasbecausewearefaithfullyclingingtothebeliefthatthecrossbrowsersupportpushwilleventuallyhappenTherearethosesayingthatwewillbeSmashingeBook#MasteringCSSforWebDevelopersbetteroffasacommunityifweallowedtheWebtoevolve,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)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/49
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部