Webseite:Web. devInhalt
wWeb. deveb.dev{"@context":"schema.org","@type":"Article","headline":""}{"@context":"httpschema.org/","@type":"Organization","name":"web.dev","logo":"/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/web/imes/touchicon-180.png","url":"web.dev/"}{"@context":"httpschema.org","@type":"WebSite","name":"web.dev","url":"web.dev/","potentialAction":{"@type":"SearchAction","target":"web.dev/s/results?q={search_term_string}","query-input":"requiredname=search_term_string"}}ResourcesWebPlatformDiveintothewebplatform,atyourpace.HTMLCSSJaScriptUserexperienceLearnhowtobuildbetteruserexperiences.PerformanceAccessibilityIdentityLearnGetuptospeedonwebdevelopment.LearnHTMLLearnCSSLearnJaScriptLearnPerformanceLearnAccessibilityMorecoursesAdditionalresourcesExplorecontentcollections,patterns,andmore.AIandthewebExplorePeSpeedInsightsPatternsPodcasts&showsDeveloperNewsletterAboutweb.devBaselineBlogCWeb. devaseStudies/EnglishDeutschEspañol–AméricaLatinaFrançaisIndonesiaItalianoPolskiPortuguês–BrasilTiếngViệtTürkçeРусскийעבריתالعربيّةفارسیहिंदीবাংলাภาษาไทย中文–简体中文–繁體語한국어SigninGuidancetobuildmodernwebexperiencesthatworkonanybrowser.ResourcesMoreBaselineBlogCaseStudiesWebPlatformHTMLCSSJaScriptUserexperiencePerformanceAccessibilityIdentityLearnLearnHTMLLearnCSSLearnJaScriptLearnPerformanceLearnAccessibilityMorecoursesAdditionalresourcesAIandthewebExplorePeSpeedInsightsPatternsPodcasts&showsDeveloperNewsletterAboutweb.dev/*Stylesinlinedfrom/explore/patch.css*/[theme=web-theme].devsite-landing-row-3-up.wd-explore-3up.devsite-landing-row-item{text-align:left;}[theme=web-theme].wd-explore-3up.devsite-landing-row-item-list-item-descriptionh4{padding:0;}.wd-explore-3up.devsite-landing-row-item-list-item-descriptiona:hover{text-decoration:underline;}[theme=web-theme].devsite-landing-row-3-up.devsite-landing-row-item.wd-3col-icons-list{text-align:left;}[theme=web-theme].wd-explore-2up.devsite-landing-row-item-list-item-descriptiona:hover{text-decoration:underline;}[theme=web-theme].wd-explore-2up.devsite-landing-row-item-list-item-descriptionh4{padding:0;}[theme=web-theme].devsite-landing-row-item-buttons.left{justify-self:flex-start;}[theme=web-theme].devsite-landing-row-3-up.devsite-landing-row-cardsimg{max-height:200px;object-fit:cover;}web.devStayorganizedwithcollectionsSeandcategorizecontentbasedonyourpreferences.Buildingabetterweb,togetherWewanttohelpyoubuildbeautiful,accessible,fast,andsecurewebsitesthatworkcross-browser,andforallofyourusers.Thissiteisourhomeforcontenttohelpyouonthatjourney,writtenbymembersoftheChrometeam,andexternalexpertswhospecializeinwebdevelopmenttopicssuchasaccessibility,performance,design,andmore.BaselineWebPlatformBaselinebringsclaritytoinformationaboutbrowsersupportforwebplatformfeatures,providingclearinformationaboutwhichwebplatformfeaturesarereadytouseinyourprojectstoday.Whenreadinganarticlehereonweb.dev,ifthefeaturesusedareallpartofBaseline,youcantrustthelevelofbrowsercompatibility.LearnmoreAIandthewebDiscoverresourcescreatedtohelpyouunderstandandbuildperformant,web-firstexperienceswithAI.LearnmoreOptimizeINPInteractiontoNextPaint(INP)isnowaCoreWebVitalmetrics.Startmeasuringandoptimizingyoursite'sINP.LearnmorePayments&IdentityReaduponthelatestfeaturesandbestpracticeswhenitcomestoidentityandpaymentprocessing.LearnmoreExplorethewebplatformThewebplatformisaconstantlyevolvingecosystemofbrowserfeaturesandAPIsthatdeveloperscanusetomakewebsitesthatareeasyanddelightfultouse.Thesepesarepathwaysforyoutodiveintoeachpartofthewebplatformonweb.dev—atyourpace:imeHTMLHTMListhedocumentlayeroftheweb,providingstructureandsemanticsforpes.LearnmorewebCSSCSSisthepresentationlayeroftheweb,andallowsyoutoyourwebpeslookjustlikeyouwantthemto.LearnmoretimerJaScriptJaScriptprovidesrichinteractivitytowebpes,allowingdeveloperstobuildrichlyinteractivewebsitesthathelpuserstoperformtasksandaccomplishgoals.LearnmoreLearnthewebplatformNewtothewebplatform?We'vegotyoucovered!DiveintoeachpartofthewebplatformwiththesecoursescuratedspecificallyforbeginnerstoHTML,CSS,andJaScript.CourseLearnHTMLAsolidoverviewofHTMLfordevelopers,fromnovicetoexpertlevelHTML.StartcourseCourseLearnCSSAguidetoCSSwithmodulescoveringeverythingfromaccessibilitytoz-index.StartcourseCourseLearnJaScriptAnin-depthcourseonthebasicsofJaScript.StartcourseKeepuponwebdevelopmentnewsOurblogcontainsthelatestnewsinwebdevelopment,includingnewwebplatformfeatures,updatestoBaseline,AI,CoreWebVitals,andmore.Keepupwiththelatestblogreadingourblog.ReadtheblogCSSandUIdesignLearnthelatesttipsandtechniquestouseinyourwork,rightnow.ExploreCSSAdaptingtypographytouserpreferenceusingCSSAdaptafonttoyourusers'preferences,sothey'remaximallycomfortablereadingyourcontent.NewCSScolorspacesandfunctionsinallmajorenginesAllmajorenginesnowsupportthenewCSScolorspacesandfunctions.Findouthowtheycanbringvibrancytoyourdesigns.Whataresourcemaps?Improvewebdebuggingexperiencewithsourcemaps.CSSsubgridSubgridisnowinteroperableacrossallthreemajorengines.Findouthowtouseit.CoreWebVitalsBuildfasterwebsitesandappsbyunderstandingCoreWebVitalsandothermetrics.ExploreCoreWebVitalsInteractiontoNextPaintbecomesaCoreWebVitalonMarch12InteractiontoNextPaintwillofficiallybecomeaCoreWebVitalandwillreplaceFirstInputDelayonMarch12.HowtooptimizeINPLearnhowtooptimizefortheInteractiontoNextPaintmetric.OurtopCoreWebVitalsrecommendationsAcollectionofbestpracticesforoptimizingwebsites'CoreWebVitalsperformancebasedonthestateofthewebCommonmisconceptionsabouthowtooptimizeLCPExplorecommonmisconceptionsaboutoptimizingLargestContentfulPaint(LCP)bylookingbeyondimeoptimizationandconsideringfactorslikeTimetoFirstByte(TTFB)andresourceloaddelay.ProgressiveWebAppsCreatecapablewebexperiences.MoreonPWALearnPWAAcoursethatbreaksdowneveryaspectofmodernprogressivewebappdevelopment.TransformStreamisnowsupportedcrossbrowser.NowthattransformstreamsaresupportedinSafari,Firefox,andChrometheyarefinallyreadyforprimetime.NewpatternsforamazingappsDiveintoafantasticcollectionofnewpatternsforamazingapps,includingclipboardpatterns,filepatterns,andadvancedapppatterns.ProjectFuguAPIshowcaseOntheChromeDeveloperssite,explorecapabilitiesAPIs.AccessibleforallLearnhowtomakeyoursitesmoreaccessibleforpeoplewithdisabilities,whetherpermanent,temporary,orsituational.MoreonaccessibilityLearnAccessibilityOurnewcourseisagreatentrypointandreferenceforaccessibilitytopics.TestingwebdesigncolorcontrastAnoverviewofthreetoolsandtechniquesfortestingandverifyingaccessiblecolorcontrastofyourdesign.BuildingthemainnigationforawebsiteThistutorialdescribeshowtobuildanaccessiblemainnigationofawebsite.YoulearnaboutsemanticHTML,accessibility,andhowusingARIAattributescansometimesdomoreharmthangood.Communityhighlight:MelanieSumnerReadourinterviewwithMelanie,asoftwareengineerwhospecializesindigitalaccessibility.PaymentsandidentityFindthelatesttechniquesandbestpracticesforpaymentsandhelpinguserssafelylogintoyoursitesandapps.MoreonidentityCreateapasskeyforpasswordlessloginsPasskeysmakeuseraccountssafer,simpler,easiertouse.SigninwithapasskeyCreateasigninexperiencethatusespasskeyswhilestillaccommodatingexistingpasswordusers.WebpaymentsoverviewLearnmoreaboutWebPaymentsandhowtheywork.PaymentandaddressformbestpracticesMaximizeconversionsbyhelpingyouruserscompleteaddressandpaymentformsasquicklyandeasilyaspossible.DeveloperNewsletterGetthelatestnews,techniquesandupdatesstraighttoyourinbox.[[["Easytounderstand","easyToUnderstand","thumb-up"],["Solvedmyproblem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["MissingtheinformationIneed","missingTheInformationINeed","thumb-down"],["Toocomplicated/toomanysteps","tooComplicatedTooManySteps","thumb-down"],["Outofdate","outOfDate","thumb-down"],["Samples/codeissue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]web.devweb.devWewanttohelpyoubuildbeautiful,accessible,fast,andsecurewebsitesthatworkcross-browser,andforallofyourusers.Thissiteisourhomeforcontenttohelpyouonthatjourney,writtenbymembersoftheChrometeam,andexternalexperts.ContributeFileabugSeeopenissuesRelatedContentChromeforDevelopersChromiumupdatesCasestudiesPodcasts&showsFollow@ChromiumDevonXYouTubeChromeforDevelopersonLinkedInRSSTermsPrivacyManecookiesEnglishDeutschEspañol–AméricaLatinaFrançaisIndonesiaItalianoPolskiPortuguês–BrasilTiếngViệtTürkçeРусскийעבריתالعربيّةفارسیहिंदीবাংলাภาษาไทย中文–简体中文–繁體語한국어(function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i;t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTName(v)[0];E.parentNode.insertBefore(t,E);})(window,document,'script','/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/web/js/app_loader.js','[27,"en",null,"/js/devsite_app_module.js","/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e9Web. dev31f0805efa1009c","/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/web","web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/imes/video-placeholder.svg","/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/web/imes/ficon.png","/devrel-devsite/prod/v5ab6fd0ad9c02b131b4d387b5751ac2cc6dd65b5e931f0805efa1009c/web/imes/lockup.svg","fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["OnSwitch__enable","Cloud__enable_cloudx_experiment_ids","DevPro__enable_developer_subscriptions","TpcFeatures__enable_unmirrored_pe_left_n","Profiles__enable_profile_collections","Profiles__enable_awarding_url","Profiles__enable_completecodelab_endpoint","Profiles__enable_complete_playlist_endpoint","MiscFeatureFls__enable_explain_this_code","Analytics__enable_clearcut_logging","MiscFeatureFls__enable_project_variables","Profiles__enable_public_developer_profiles","Cloud__enable_cloudx_ping","Profiles__enable_join_program_group_endpoint","Cloud__enable_cloud_dlp_service","Cloud__enable_cloud_facet_chat","MiscFeatureFls__enable_view_transitions","Concierge__enable_pushui","Search__enable_dynamic_content_confidential_banner","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_release_notes_notifications","DevPro__enable_cloud_innovators_plus","Cloud__enable_legacy_calculator_redirect","MiscFeatureFls__enable_variable_operator","Search__enable_suggestions_from_borg","Search__enable_pe_map","Profiles__require_profile_eligibility_for_signin","MiscFeatureFls__enable_firebase_utm","TpcFeatures__enable_mirror_tenant_redirects","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFls__emergency_css","Cloud__enable_cloud_shell","Cloud__enable_free_trial_server_call","CloudShell__cloud_shell_button","Search__enable_ai_eligibility_checks","Profiles__enable_pe_sing","BookN__enable_tenant_cache_key","Profiles__enable_developer_profiles_callout","Experiments__reqs_query_experiments","Cloud__enable_llm_concierge_chat","MiscFeatureFls__developers_footer_dark_ime","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFls__developers_footer_ime","Profiles__enable_recognition_badges"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","developerscontentsearch-pa.googleapis.com",2,4,null,"developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/imes/lockup.svg","/imes/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/imes/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]')