CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Client-side decoration - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"8da315ae-ef37-4826-a275-fbe6eaaec0ab","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Client-side_decoration","wgTitle":"Client-side decoration","wgCurRevisionId":1223112768,"wgRevisionId":1223112768,"wgArticleId":56428964,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Articles with short description","Short description is different from Wikidata","Graphical control elements","Graphical user interface elements"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Client-side_decoration","wgRelevantArticleId":56428964,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia", "wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":7000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q48854736","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false, "wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","mediawiki.page.media","ext.scribunto.logs","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init", "ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Client-side decoration - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Client-side_decoration"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Client-side_decoration&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Client-side_decoration"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Client-side_decoration rootpage-Client-side_decoration skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Client-side+decoration" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Client-side+decoration" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Client-side+decoration" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Client-side+decoration" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Terminology" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Terminology"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Terminology</span> </div> </a> <ul id="toc-Terminology-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Implementations" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Implementations"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Implementations</span> </div> </a> <button aria-controls="toc-Implementations-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Implementations subsection</span> </button> <ul id="toc-Implementations-sublist" class="vector-toc-list"> <li id="toc-Widget_toolkits" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Widget_toolkits"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Widget toolkits</span> </div> </a> <ul id="toc-Widget_toolkits-sublist" class="vector-toc-list"> <li id="toc-GTK" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#GTK"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.1</span> <span>GTK</span> </div> </a> <ul id="toc-GTK-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-UWP" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#UWP"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.2</span> <span>UWP</span> </div> </a> <ul id="toc-UWP-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-macOS" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#macOS"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.3</span> <span>macOS</span> </div> </a> <ul id="toc-macOS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Electron" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Electron"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.4</span> <span>Electron</span> </div> </a> <ul id="toc-Electron-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Deepin_Tool_Kit" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Deepin_Tool_Kit"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.5</span> <span>Deepin Tool Kit</span> </div> </a> <ul id="toc-Deepin_Tool_Kit-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Applications" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Applications"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Applications</span> </div> </a> <ul id="toc-Applications-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Display_servers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Display_servers"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Display servers</span> </div> </a> <ul id="toc-Display_servers-sublist" class="vector-toc-list"> <li id="toc-Wayland" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Wayland"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3.1</span> <span>Wayland</span> </div> </a> <ul id="toc-Wayland-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Limitations" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Limitations"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Limitations</span> </div> </a> <ul id="toc-Limitations-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Client-side decoration</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 1 language" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-1" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">1 language</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E3%83%BB%E3%83%87%E3%82%B3%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" title="クライアントサイド・デコレーション – Japanese" lang="ja" hreflang="ja" data-title="クライアントサイド・デコレーション" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q48854736#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Client-side_decoration" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Client-side_decoration" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Client-side_decoration"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Client-side_decoration&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Client-side_decoration&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Client-side_decoration"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Client-side_decoration&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Client-side_decoration&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Client-side_decoration" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Client-side_decoration" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Client-side_decoration&oldid=1223112768" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Client-side_decoration&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Client-side_decoration&id=1223112768&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FClient-side_decoration"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FClient-side_decoration"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Client-side_decoration&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Client-side_decoration&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q48854736" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Graphical user interface design concept</div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:GtkHeaderBar_on_GNOME_Files_--_2014-01.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0a/GtkHeaderBar_on_GNOME_Files_--_2014-01.png/300px-GtkHeaderBar_on_GNOME_Files_--_2014-01.png" decoding="async" width="300" height="62" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0a/GtkHeaderBar_on_GNOME_Files_--_2014-01.png/450px-GtkHeaderBar_on_GNOME_Files_--_2014-01.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0a/GtkHeaderBar_on_GNOME_Files_--_2014-01.png/600px-GtkHeaderBar_on_GNOME_Files_--_2014-01.png 2x" data-file-width="602" data-file-height="125" /></a><figcaption>Example of an application that uses Client-Side Decoration to draw its own window controls. (GtkHeaderBar widget on <a href="/wiki/GNOME_Files" title="GNOME Files">GNOME Files</a>, 2014-01)</figcaption></figure> <p><b>Client-side decoration</b> (<b>CSD</b>) is the concept of allowing a <a href="/wiki/Graphical_user_interface" title="Graphical user interface">graphical</a> <a href="/wiki/Application_software" title="Application software">application software</a> to be responsible for drawing its own <a href="/wiki/Window_decoration" class="mw-redirect" title="Window decoration">window decorations</a>, historically the responsibility of the <a href="/wiki/Window_manager" title="Window manager">window manager</a>.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> </p><p>Sometimes client-side decoration is used to refer to the applications that don't have a traditional title bar. However, this is a misuse of the phrase, as even applications that have a basic title bar can be client side decorated.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p><p>By using client-side decoration rather than traditional server-side decoration, applications are able to draw their own title bar, which allows for a wide range of possibilities to customize window decorations and add additional functionality (<a href="/wiki/Graphical_control_element" class="mw-redirect" title="Graphical control element">graphical control elements</a>) into what otherwise would be a typical window manager bar with much empty space in the maximized windows.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Terminology">Terminology</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=1" title="Edit section: Terminology"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The term <i>Client-Side Decoration</i> comes from the <a href="/wiki/X_Window_System" title="X Window System">X Window System</a>, where a <i>client</i> is the application which renders a window and sends it to the X <i>server</i> that controls the display. The alternative is called <i>Server-Side Decoration</i> (SSD) even though on X the decoration is drawn by the window manager, which is not actually the "server". Those terms are also used in <a href="/wiki/Wayland_(protocol)" title="Wayland (protocol)">Wayland</a>, where a client is the application, which renders a window and sends it to the Wayland server, which controls the display and also functions as a <a href="/wiki/Compositing_window_manager" title="Compositing window manager">compositing window manager</a>. </p> <div class="mw-heading mw-heading2"><h2 id="Implementations">Implementations</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=2" title="Edit section: Implementations"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Widget_toolkits">Widget toolkits</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=3" title="Edit section: Widget toolkits"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading4"><h4 id="GTK">GTK</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=4" title="Edit section: GTK"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a href="/wiki/GTK" title="GTK">GTK</a> was the first GUI toolkit on Linux that implemented client-side decoration using the GtkHeaderBar widget.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> </p><p>GtkHeaderBar merges the <a href="/wiki/Title_bar" class="mw-redirect" title="Title bar">title bar</a>, <a href="/wiki/Menu_bar" title="Menu bar">menu bar</a> and <a href="/wiki/Tool_bar" class="mw-redirect" title="Tool bar">tool bar</a> into one unified horizontal bar in order to give more space to the application content, potentially reducing the amount of wasted space by showing empty bars. This can help to achieve a flexible UI and consistent UX across different <a href="/wiki/Computer_form_factor" class="mw-redirect" title="Computer form factor">computer form factors</a> from desktop systems to <a href="/wiki/Small_form_factor_(desktop_and_motherboard)" class="mw-redirect" title="Small form factor (desktop and motherboard)">small form factor</a> devices by removing the traditional desktop-oriented parts from applications. These have first-class support in <a href="/wiki/GNOME_Shell" title="GNOME Shell">GNOME Shell</a> and are widely used by <a href="/wiki/GNOME_applications" class="mw-redirect" title="GNOME applications">GNOME applications</a>. </p> <div class="mw-heading mw-heading4"><h4 id="UWP">UWP</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=5" title="Edit section: UWP"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a href="/wiki/Universal_Windows_Platform" title="Universal Windows Platform">Universal Windows Platform</a> applications can choose to draw their own title bars.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="macOS">macOS</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=6" title="Edit section: macOS"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In <a href="/wiki/MacOS" title="MacOS">macOS</a>, <a href="/wiki/Application_Kit" class="mw-redirect" title="Application Kit">AppKit</a> applications use client-side decoration when using the NSWindow widget.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Electron">Electron</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=7" title="Edit section: Electron"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a href="/wiki/Electron_(software_framework)" title="Electron (software framework)">Electron</a> has the option to use a frame-less window (without toolbar, menu bar, tabs), however the application is responsible for drawing its own shadows.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Deepin_Tool_Kit">Deepin Tool Kit</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=8" title="Edit section: Deepin Tool Kit"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Deepin_File_Manager_15.4_espa%C3%B1ol.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Deepin_File_Manager_15.4_espa%C3%B1ol.png/220px-Deepin_File_Manager_15.4_espa%C3%B1ol.png" decoding="async" width="220" height="139" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Deepin_File_Manager_15.4_espa%C3%B1ol.png/330px-Deepin_File_Manager_15.4_espa%C3%B1ol.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Deepin_File_Manager_15.4_espa%C3%B1ol.png/440px-Deepin_File_Manager_15.4_espa%C3%B1ol.png 2x" data-file-width="952" data-file-height="602" /></a><figcaption><a href="/wiki/Deepin" title="Deepin">Deepin</a> File Manager, a Qt-based application with client-side decoration.</figcaption></figure> <p><a href="/wiki/Deepin" title="Deepin">Deepin</a> Tool Kit is a small modified <a href="/wiki/Widget_toolkit" title="Widget toolkit">widget toolkit</a> based on <a href="/wiki/Qt_(software)" title="Qt (software)">Qt5</a>, it is used by <a href="/wiki/Deepin_Desktop_Environment" class="mw-redirect" title="Deepin Desktop Environment">Deepin Desktop Environment</a>. </p> <div class="mw-heading mw-heading3"><h3 id="Applications">Applications</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=9" title="Edit section: Applications"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Notable applications with client-side decoration: </p> <ul><li><a href="/wiki/Steam_(service)" title="Steam (service)">Steam</a>, uses its own <a href="/wiki/Widget_toolkit" title="Widget toolkit">widget toolkit</a> called "VGUI".</li> <li><a href="/wiki/Firefox" title="Firefox">Firefox</a> uses client-side decorations when the title bar is disabled.</li> <li><a href="/wiki/Google_Chrome" title="Google Chrome">Google Chrome</a> and other <a href="/wiki/Chromium_(web_browser)" title="Chromium (web browser)">Chromium</a> based browsers use client-side decorations on Windows and macOS, and support both client and server decorations on Linux.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Display_servers">Display servers</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=10" title="Edit section: Display servers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading4"><h4 id="Wayland">Wayland</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=11" title="Edit section: Wayland"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a href="/wiki/Wayland_(display_server_protocol)" class="mw-redirect" title="Wayland (display server protocol)">Wayland</a> was designed to have client-side decorations (including the shadows of windows) by default, but has an optional protocol, known as xdg-decoration, which allows an application (client) to query whether the window manager supports server-side decoration and if so for a client to request it.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> <a href="/wiki/Mutter_(software)" title="Mutter (software)">Mutter</a>, the compositor used by <a href="/wiki/GNOME_Shell" title="GNOME Shell">GNOME Shell</a>, under Wayland only supports client side decoration,<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> whilst <a href="/wiki/KWin" title="KWin">KWin</a> supports both client and server side decoration. </p> <div class="mw-heading mw-heading2"><h2 id="Limitations">Limitations</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=12" title="Edit section: Limitations"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>If the application hangs, the user cannot close it by clicking the close button in the window frame.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=13" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>In 2008 <a href="/wiki/Adobe_Inc." title="Adobe Inc.">Adobe</a> released <a href="/wiki/Adobe_Photoshop" title="Adobe Photoshop">Photoshop</a> CS4 that uses client-side decorations.</li> <li>In 2012 <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> uses client-side decorations in their new <a href="/wiki/Metro_(design_language)" title="Metro (design language)">Metro</a> design language by adding toolbar objects like back buttons to the windows title bar.</li> <li>In 2013 GTK added support for client-side decorations with the release of GTK 3.10.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup></li></ul> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=14" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Ribbon_(computing)" title="Ribbon (computing)">Ribbon (computing)</a></li> <li><a href="/wiki/Window_decoration" class="mw-redirect" title="Window decoration">Window decoration</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Client-side_decoration&action=edit&section=15" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://blogs.gnome.org/mclasen/2014/01/13/client-side-decorations-continued/">"Client-side decorations, continued"</a>. <i>blogs.gnome.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-01-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=blogs.gnome.org&rft.atitle=Client-side+decorations%2C+continued&rft_id=https%3A%2F%2Fblogs.gnome.org%2Fmclasen%2F2014%2F01%2F13%2Fclient-side-decorations-continued%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://blogs.gnome.org/fmuellner/2015/01/30/a-small-note-on-window-decorations/">"A small note on window decorations | Florian Müllner"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-11-13</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=A+small+note+on+window+decorations+%7C+Florian+M%C3%BCllner&rft_id=https%3A%2F%2Fblogs.gnome.org%2Ffmuellner%2F2015%2F01%2F30%2Fa-small-note-on-window-decorations%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.phoronix.com/scan.php?page=news_item&px=GNOME-CSD-Initiative">"The CSD Initiative Is Pushing For Apps To Abandon Title Bars In Favor Of Header Bars - Phoronix"</a>. <a href="/wiki/Phoronix" class="mw-redirect" title="Phoronix">Phoronix</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2018-01-28</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=The+CSD+Initiative+Is+Pushing+For+Apps+To+Abandon+Title+Bars+In+Favor+Of+Header+Bars+-+Phoronix&rft.pub=Phoronix&rft_id=https%3A%2F%2Fwww.phoronix.com%2Fscan.php%3Fpage%3Dnews_item%26px%3DGNOME-CSD-Initiative&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.gnome.org/gtk3/stable/GtkHeaderBar.html">"GtkHeaderBar: GTK+ 3 Reference Manual"</a>. <i>developer.gnome.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-01-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=developer.gnome.org&rft.atitle=GtkHeaderBar%3A+GTK%2B+3+Reference+Manual&rft_id=https%3A%2F%2Fdeveloper.gnome.org%2Fgtk3%2Fstable%2FGtkHeaderBar.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFmijacobs" class="citation web cs1">mijacobs. <a rel="nofollow" class="external text" href="https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar">"Title bar customization - Windows UWP applications"</a>. <i>docs.microsoft.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-01-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=docs.microsoft.com&rft.atitle=Title+bar+customization+-+Windows+UWP+applications&rft.au=mijacobs&rft_id=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fshell%2Ftitle-bar&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.apple.com/documentation/appkit/nswindow">"NSWindow - AppKit | Apple Developer Documentation"</a>. <i>developer.apple.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-06-07</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=developer.apple.com&rft.atitle=NSWindow+-+AppKit+%7C+Apple+Developer+Documentation&rft_id=https%3A%2F%2Fdeveloper.apple.com%2Fdocumentation%2Fappkit%2Fnswindow&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://electronjs.org/docs/api/frameless-window">"Frameless Window | Electron"</a>. <i>electronjs.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-01-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=electronjs.org&rft.atitle=Frameless+Window+%7C+Electron&rft_id=https%3A%2F%2Felectronjs.org%2Fdocs%2Fapi%2Fframeless-window&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://github.com/wayland-project/wayland-protocols"><i>Wayland protocol development</i></a>, Wayland, 2019-10-07<span class="reference-accessdate">, retrieved <span class="nowrap">2019-11-13</span></span></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Wayland+protocol+development&rft.pub=Wayland&rft.date=2019-10-07&rft_id=https%3A%2F%2Fgithub.com%2Fwayland-project%2Fwayland-protocols&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFBernard,_Tobias" class="citation web cs1">Bernard, Tobias. <a rel="nofollow" class="external text" href="https://blogs.gnome.org/tbernard/2018/01/26/csd-initiative/">"Introducing the CSD Initiative – Space and Meaning"</a>. <a href="/wiki/GNOME" title="GNOME">GNOME</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2018-01-28</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Introducing+the+CSD+Initiative+%E2%80%93+Space+and+Meaning&rft.pub=GNOME&rft.au=Bernard%2C+Tobias&rft_id=https%3A%2F%2Fblogs.gnome.org%2Ftbernard%2F2018%2F01%2F26%2Fcsd-initiative%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFZahorodnii2020" class="citation web cs1">Zahorodnii, Vlad (2020-07-23). <a rel="nofollow" class="external text" href="https://blog.vladzahorodnii.com/2020/07/23/csd-support-in-kwin/">"CSD support in KWin"</a>. <i>Vlad Zahorodnii's Blog</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2024-03-05</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Vlad+Zahorodnii%27s+Blog&rft.atitle=CSD+support+in+KWin&rft.date=2020-07-23&rft.aulast=Zahorodnii&rft.aufirst=Vlad&rft_id=https%3A%2F%2Fblog.vladzahorodnii.com%2F2020%2F07%2F23%2Fcsd-support-in-kwin%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://lwn.net/Articles/568191/">"GTK+ 3.10 released [LWN.net]"</a>. <i>lwn.net</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-01-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=lwn.net&rft.atitle=GTK%2B+3.10+released+%5BLWN.net%5D&rft_id=https%3A%2F%2Flwn.net%2FArticles%2F568191%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AClient-side+decoration" class="Z3988"></span></span> </li> </ol></div></div> <p><br /> </p> <div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Graphical_control_elements" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:GUI_widgets" title="Template:GUI widgets"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:GUI_widgets" title="Template talk:GUI widgets"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:GUI_widgets" title="Special:EditPage/Template:GUI widgets"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Graphical_control_elements" style="font-size:114%;margin:0 4em"><a href="/wiki/Graphical_widget" title="Graphical widget">Graphical control elements</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Command input</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Adjustment_handle" title="Adjustment handle">Adjustment handle</a></li> <li><a href="/wiki/Button_(computing)" title="Button (computing)">Button</a></li> <li><a href="/wiki/Context_menu" title="Context menu">Context menu</a></li> <li><a href="/wiki/Drop-down_list" title="Drop-down list">Drop-down list</a></li> <li><a href="/wiki/Hamburger_button" title="Hamburger button">Hamburger button</a></li> <li><a href="/wiki/Menu_(computing)" title="Menu (computing)">Menu</a></li> <li><a href="/wiki/Pie_menu" title="Pie menu">Pie menu</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Data input-output</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Checkbox" title="Checkbox">Checkbox</a></li> <li><a href="/wiki/Color_picker" title="Color picker">Color picker</a></li> <li><a href="/wiki/Combo_box" title="Combo box">Combo box</a></li> <li><a href="/wiki/Cycle_button" title="Cycle button">Cycle button</a></li> <li><a href="/wiki/Date_picker" title="Date picker">Date picker</a></li> <li><a href="/wiki/Grid_view" title="Grid view">Grid view</a></li> <li><a href="/wiki/Toggle_switch_(widget)" title="Toggle switch (widget)">Toggle switch</a></li> <li><a href="/wiki/List_box" title="List box">List box</a></li> <li><a href="/wiki/List_builder" title="List builder">List builder</a></li> <li><a href="/wiki/Radio_button" title="Radio button">Radio button</a></li> <li><a href="/wiki/Scrollbar" title="Scrollbar">Scrollbar</a></li> <li><a href="/wiki/Search_box" title="Search box">Search box</a></li> <li><a href="/wiki/Slider_(computing)" title="Slider (computing)">Slider</a></li> <li><a href="/wiki/Spinner_(computing)" title="Spinner (computing)">Spinner</a></li> <li><a href="/wiki/Text_box" title="Text box">Text box</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Informational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Balloon_help" title="Balloon help">Balloon help</a></li> <li><a href="/wiki/HUD_(computing)" class="mw-redirect" title="HUD (computing)">Head-up display in computing</a></li> <li><a href="/wiki/HUD_(video_gaming)" class="mw-redirect" title="HUD (video gaming)">HUD in video games</a></li> <li><a href="/wiki/Icon_(computing)" title="Icon (computing)">Icon</a></li> <li><a href="/wiki/Infobar" title="Infobar">Infobar</a></li> <li><a href="/wiki/Label_(control)" title="Label (control)">Label</a></li> <li><a href="/wiki/Loading_screen" title="Loading screen">Loading screen</a></li> <li><a href="/wiki/Progress_indicator" title="Progress indicator">Progress indicator</a> <ul><li><a href="/wiki/Progress_bar" title="Progress bar">Progress bar</a></li> <li><a href="/wiki/Splash_screen" title="Splash screen">Splash screen</a></li> <li><a href="/wiki/Throbber" title="Throbber">Throbber</a></li></ul></li> <li><a href="/wiki/Sidebar_(computing)" title="Sidebar (computing)">Sidebar</a></li> <li><a href="/wiki/Status_bar" title="Status bar">Status bar</a></li> <li><a href="/wiki/Pop-up_notification" title="Pop-up notification">Toast</a></li> <li><a href="/wiki/Tooltip" title="Tooltip">Tooltip</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Containers</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Accordion_(GUI)" title="Accordion (GUI)">Accordion</a></li> <li><a href="/wiki/Tree_view" title="Tree view">Tree view</a></li> <li><a class="mw-selflink selflink">Client-side decoration</a></li> <li><a href="/wiki/Disclosure_widget" title="Disclosure widget">Disclosure widget</a></li> <li><a href="/wiki/Frame_(GUI)" title="Frame (GUI)">Frame / Fieldset</a></li> <li><a href="/wiki/Menu_bar" title="Menu bar">Menu bar</a></li> <li><a href="/wiki/Panel_(computer_software)" title="Panel (computer software)">Panel</a></li> <li><a href="/wiki/Popover_(GUI)" title="Popover (GUI)">Popover</a></li> <li><a href="/wiki/Ribbon_(computing)" title="Ribbon (computing)">Ribbon</a></li> <li><a href="/wiki/Tab_(interface)" title="Tab (interface)">Tab</a></li> <li><a href="/wiki/Toolbar" title="Toolbar">Toolbar</a></li> <li><a href="/wiki/Window_(computing)" title="Window (computing)">Window</a> <ul><li><a href="/wiki/Window_decoration" class="mw-redirect" title="Window decoration">Window decoration</a></li></ul></li> <li><a href="/wiki/Workspace" title="Workspace">Workspace</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Navigational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Address_bar" title="Address bar">Address bar</a></li> <li><a href="/wiki/Breadcrumb_navigation" title="Breadcrumb navigation">Breadcrumb navigation</a></li> <li><a href="/wiki/Hyperlink" title="Hyperlink">Hyperlink</a></li> <li><a href="/wiki/Navigation_bar" title="Navigation bar">Navigation bar</a></li> <li><a href="/wiki/Virtual_desktop" title="Virtual desktop">Virtual desktop</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><span class="nowrap">Special <a href="/wiki/Window_(computing)" title="Window (computing)">windows</a></span></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Alert_dialog_box" title="Alert dialog box">Alert dialog box</a></li> <li><a href="/wiki/Dialog_box" title="Dialog box">Dialog box</a></li> <li><a href="/wiki/File_dialog" title="File dialog">File dialog</a></li> <li><a href="/wiki/Inspector_window" title="Inspector window">Inspector window</a></li> <li><a href="/wiki/Modal_window" title="Modal window">Modal window</a></li> <li><a href="/wiki/Palette_window" title="Palette window">Palette window</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related concepts</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/File_viewer" title="File viewer">File viewer</a></li> <li><a href="/wiki/List_of_graphical_user_interface_elements" title="List of graphical user interface elements">List of graphical user interface elements</a></li> <li><a href="/wiki/Layout_manager" title="Layout manager">Layout manager</a></li> <li><a href="/wiki/Look_and_feel" title="Look and feel">Look and feel</a></li> <li><a href="/wiki/Mouseover" title="Mouseover">Mouseover</a></li> <li><a href="/wiki/Scrolling" title="Scrolling">Scrolling</a></li> <li><a href="/wiki/Widget_toolkit" title="Widget toolkit">Widget toolkit</a></li> <li><a href="/wiki/WIMP_(computing)" title="WIMP (computing)">WIMP</a></li> <li><a href="/wiki/Zoomable_user_interface" class="mw-redirect" title="Zoomable user interface">Zoomable user interface</a></li></ul> </div></td></tr></tbody></table></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236075235"></div><div role="navigation" class="navbox" aria-labelledby="GNOME" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:GNOME" title="Template:GNOME"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:GNOME" title="Template talk:GNOME"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:GNOME" title="Special:EditPage/Template:GNOME"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="GNOME" style="font-size:114%;margin:0 4em"><a href="/wiki/GNOME" title="GNOME">GNOME</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/GNOME_Core_Applications" title="GNOME Core Applications">Core Applications</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/GNOME_Boxes" title="GNOME Boxes">Boxes</a></li> <li><a href="/wiki/GNOME_Calculator" title="GNOME Calculator">Calculator</a></li> <li><a href="/w/index.php?title=GNOME_Calendar&action=edit&redlink=1" class="new" title="GNOME Calendar (page does not exist)">Calendar</a></li> <li><a href="/wiki/GNOME_Character_Map" title="GNOME Character Map">Character Map</a></li> <li><a href="/wiki/GNOME_Dictionary" title="GNOME Dictionary">Dictionary</a></li> <li><a href="/wiki/GNOME_Disks" title="GNOME Disks">Disks</a></li> <li><a href="/wiki/Evince" title="Evince">Evince</a></li> <li><a href="/wiki/GNOME_Files" title="GNOME Files">Files</a></li> <li><a href="/wiki/Loupe_(software)" title="Loupe (software)">Loupe</a></li> <li><a href="/wiki/GNOME_Text_Editor" title="GNOME Text Editor">Text Editor</a></li> <li><a href="/wiki/GNOME_Software" title="GNOME Software">Software</a></li> <li><a href="/w/index.php?title=GNOME_Snapshot&action=edit&redlink=1" class="new" title="GNOME Snapshot (page does not exist)">Snapshot</a></li> <li><a href="/wiki/GNOME_Terminal" title="GNOME Terminal">Terminal</a></li> <li><a href="/wiki/GNOME_Videos" title="GNOME Videos">Videos</a></li> <li><a href="/wiki/GNOME_Web" title="GNOME Web">Web</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/List_of_GTK_applications" title="List of GTK applications">Extras</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:9em">Development</th><td class="navbox-list-with-group navbox-list navbox-even" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Anjuta" title="Anjuta">Anjuta</a></li> <li><a href="/wiki/GNOME_Builder" title="GNOME Builder">Builder</a></li> <li><a href="/wiki/Glade_Interface_Designer" title="Glade Interface Designer">Glade Interface Designer</a></li> <li><a href="/wiki/Meld_(software)" title="Meld (software)">Meld</a></li> <li><a href="/wiki/GNOME_Devhelp" title="GNOME Devhelp">GNOME Devhelp</a></li> <li><a href="/wiki/Nemiver" title="Nemiver">Nemiver</a></li> <li><a href="/wiki/Geany" title="Geany">Geany</a></li> <li><a href="/wiki/Gtranslator" title="Gtranslator">Gtranslator</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Office</th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/AbiWord" title="AbiWord">AbiWord</a></li> <li><a href="/wiki/Dia_(software)" title="Dia (software)">Dia</a></li> <li><a href="/wiki/GNOME_Evolution" title="GNOME Evolution">Evolution</a></li> <li><a href="/wiki/GNOME_LaTeX" title="GNOME LaTeX">GNOME LaTeX</a></li> <li><a href="/wiki/Gnumeric" title="Gnumeric">Gnumeric</a></li> <li><a href="/wiki/OCRFeeder" title="OCRFeeder">OCRFeeder</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Graphics</th><td class="navbox-list-with-group navbox-list navbox-even" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/F-Spot" title="F-Spot">F-Spot</a></li> <li><a href="/wiki/GIMP" title="GIMP">GIMP</a></li> <li><a href="/wiki/GThumb" title="GThumb">gThumb</a></li> <li><a href="/wiki/Inkscape" title="Inkscape">Inkscape</a></li> <li><a href="/wiki/Shotwell_(software)" title="Shotwell (software)">Shotwell</a></li> <li><a href="/wiki/Scanner_Access_Now_Easy#Simple_Scan" title="Scanner Access Now Easy">Simple Scan</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Internet</th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Balsa_(email_client)" title="Balsa (email client)">Balsa</a></li> <li><a href="/wiki/Empathy_(software)" title="Empathy (software)">Empathy</a></li> <li><a href="/wiki/Ekiga" title="Ekiga">Ekiga</a></li> <li><a href="/wiki/Geary_(e-mail_client)" title="Geary (e-mail client)">Geary</a></li> <li><a href="/w/index.php?title=GNOME_Connections&action=edit&redlink=1" class="new" title="GNOME Connections (page does not exist)">GNOME Connections</a></li> <li><a href="/wiki/GNOME_Fractal" class="mw-redirect" title="GNOME Fractal">GNOME Fractal</a></li> <li><a href="/wiki/Gobby" title="Gobby">Gobby</a></li> <li><a href="/wiki/Jami_(software)" title="Jami (software)">Jami</a></li> <li><a href="/wiki/Transmission_(BitTorrent_client)" title="Transmission (BitTorrent client)">Transmission-gtk</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Media</th><td class="navbox-list-with-group navbox-list navbox-even" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Banshee_(media_player)" title="Banshee (media player)">Banshee</a></li> <li>EasyTag</li> <li><a href="/wiki/Pitivi" title="Pitivi">Pitivi</a></li> <li><a href="/wiki/Rhythmbox" title="Rhythmbox">Rhythmbox</a></li> <li><a href="/wiki/Sound_Juicer" title="Sound Juicer">Sound Juicer</a></li> <li><a href="/wiki/GNOME_SoundConverter" title="GNOME SoundConverter">SoundConverter</a></li> <li><a href="/wiki/Sushi_(software)" class="mw-redirect" title="Sushi (software)">sushi</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Games</th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/GNOME_Games" class="mw-redirect" title="GNOME Games">GNOME Games</a> <ul><li><a href="/wiki/GNOME_Chess" class="mw-redirect" title="GNOME Chess">Chess</a></li> <li><a href="/wiki/GNOME_Mines" class="mw-redirect" title="GNOME Mines">Mines</a></li></ul></li> <li><a href="/wiki/Gbrainy" class="mw-redirect" title="Gbrainy">gbrainy</a></li> <li><a href="/wiki/PyChess" title="PyChess">PyChess</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Utilities</th><td class="navbox-list-with-group navbox-list navbox-even" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Archive_Manager" class="mw-redirect" title="Archive Manager">Archive Manager</a></li> <li><a href="/wiki/Brasero_(software)" title="Brasero (software)">Brasero</a></li> <li><a href="/wiki/Dconf" title="Dconf">dconf-editor</a></li> <li><a href="/wiki/Gedit" title="Gedit">gedit</a></li> <li><a href="/wiki/Gnote" title="Gnote">gnote</a></li> <li><a href="/wiki/GParted" title="GParted">GParted</a></li> <li><a href="/wiki/Seahorse_(software)" title="Seahorse (software)">Seahorse</a></li> <li><a href="/wiki/Tomboy_(software)" title="Tomboy (software)">Tomboy</a></li> <li><a href="/wiki/Yelp_(software)" title="Yelp (software)">Yelp</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Components</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:9em">User interface</th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%">GNOME 40</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li>Mutter on GSK</li> <li>…</li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">GNOME 3</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Client-Side_Decoration" class="mw-redirect" title="Client-Side Decoration">Client-Side Decoration</a></li> <li><a href="/wiki/Cantarell_(typeface)" title="Cantarell (typeface)">Cantarell</a></li> <li><a href="/wiki/GNOME_Display_Manager" title="GNOME Display Manager">GDM</a></li> <li><a href="/wiki/Mutter_(software)" title="Mutter (software)">Mutter</a></li> <li><a href="/wiki/GNOME_Shell" title="GNOME Shell">GNOME Shell</a></li> <li><a href="/wiki/Tango_Desktop_Project" title="Tango Desktop Project">Tango Desktop Project</a></li> <li><a href="/wiki/Orca_(assistive_technology)" title="Orca (assistive technology)">Orca</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">GNOME 2</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Metacity" title="Metacity">Metacity</a></li> <li><a href="/wiki/GNOME_Panel" class="mw-redirect" title="GNOME Panel">GNOME Panel</a></li> <li><a href="/wiki/Clearlooks" title="Clearlooks">Clearlooks</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Adwaita_(design_language)" title="Adwaita (design language)">Adwaita</a></li> <li><a href="/wiki/Cinnamon_(software)" class="mw-redirect" title="Cinnamon (software)">Cinnamon</a></li> <li><a href="/wiki/MATE_(software)" class="mw-redirect" title="MATE (software)">MATE</a></li> <li><a href="/wiki/Diodon_(software)" title="Diodon (software)">Diodon</a></li> <li><a href="/wiki/GNOME_Do" title="GNOME Do">GNOME Do</a></li> <li><a href="/wiki/Avant_Window_Navigator" title="Avant Window Navigator">Avant Window Navigator</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">GNOME Base</th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/GTK" title="GTK">GTK</a> <ul><li><a href="/wiki/GDK" title="GDK">GDK</a></li> <li><a href="/wiki/GTK_Scene_Graph_Kit" title="GTK Scene Graph Kit">GSK</a></li> <li><a href="/wiki/Accessibility_Toolkit" title="Accessibility Toolkit">ATK</a></li> <li>Clutter</li></ul></li> <li><a href="/wiki/Pango" title="Pango">Pango</a></li> <li><a href="/wiki/GLib" title="GLib">GLib</a> <ul><li><a href="/wiki/GObject" title="GObject">GObject</a></li> <li><a href="/wiki/GIO_(software)" title="GIO (software)">GIO</a></li></ul></li> <li><a href="/wiki/Intelligent_Input_Bus" title="Intelligent Input Bus">IBus</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em">Other</th><td class="navbox-list-with-group navbox-list navbox-even" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Dconf" title="Dconf">dconf</a></li> <li><a href="/wiki/GNOME_Keyring" title="GNOME Keyring">Keyring</a></li> <li><a href="/wiki/GNOME-DB" title="GNOME-DB">GNOME-DB</a></li> <li><a href="/wiki/GVfs" title="GVfs">GVfs</a> <ul><li><a href="/wiki/GnomeVFS" title="GnomeVFS">GnomeVFS</a></li></ul></li> <li><a href="/wiki/Librsvg" title="Librsvg">Librsvg</a></li> <li><a href="/wiki/TinySPARQL" title="TinySPARQL">TinySPARQL</a></li> <li><a href="/wiki/Vala_(programming_language)" title="Vala (programming language)">Vala</a></li> <li><a href="/wiki/Libxslt" title="Libxslt">libxslt</a></li> <li><a href="/wiki/Libxml2" title="Libxml2">libxml2</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:9em"><a href="/wiki/Freedesktop.org" title="Freedesktop.org">freedesktop.org</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/AppStream" title="AppStream">AppStream</a></li> <li><a href="/wiki/D-Bus" title="D-Bus">D-Bus</a></li> <li><a href="/wiki/GStreamer" title="GStreamer">GStreamer</a></li> <li><a href="/wiki/NetworkManager" title="NetworkManager">NetworkManager</a></li> <li><a href="/wiki/Poppler_(software)" title="Poppler (software)">Poppler</a></li> <li><a href="/wiki/Wayland_(display_server_protocol)" class="mw-redirect" title="Wayland (display server protocol)">Wayland</a></li> <li><a href="/wiki/X.Org_Server" title="X.Org Server">X.Org Server</a></li> <li><a href="/wiki/PulseAudio" title="PulseAudio">PulseAudio</a></li> <li><a href="/wiki/PackageKit" title="PackageKit">PackageKit</a></li> <li><a href="/wiki/HarfBuzz" title="HarfBuzz">HarfBuzz</a></li> <li><a href="/wiki/Cairo_(graphics)" title="Cairo (graphics)">Cairo</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Community</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/GNOME_Foundation" title="GNOME Foundation">GNOME Foundation</a></li> <li><a href="/wiki/GNOME_Users_And_Developers_European_Conference" class="mw-redirect" title="GNOME Users And Developers European Conference">GUADEC</a></li> <li><a href="/wiki/The_GNOME_Project" class="mw-redirect" title="The GNOME Project">The GNOME Project</a></li> <li><a href="/wiki/Outreachy" title="Outreachy">Outreachy</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">People</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Miguel_de_Icaza" title="Miguel de Icaza">Miguel de Icaza</a></li> <li><a href="/wiki/Luis_Villa" title="Luis Villa">Luis Villa</a></li> <li><a href="/wiki/Havoc_Pennington" title="Havoc Pennington">Havoc Pennington</a></li> <li><a href="/wiki/Karen_Sandler" title="Karen Sandler">Karen Sandler</a></li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="2" style="font-weight: bold"><div> <ul><li><b><span class="nowrap"><span class="noviewer" typeof="mw:File"><a href="/wiki/File:NewTux.svg" class="mw-file-description"><img alt="icon" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/13px-NewTux.svg.png" decoding="async" width="13" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/20px-NewTux.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/27px-NewTux.svg.png 2x" data-file-width="625" data-file-height="750" /></a></span> </span><a href="/wiki/Portal:Linux" title="Portal:Linux">Linux portal</a></b></li> <li><b><span class="nowrap"><span class="noviewer" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/31/Free_and_open-source_software_logo_%282009%29.svg/16px-Free_and_open-source_software_logo_%282009%29.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/31/Free_and_open-source_software_logo_%282009%29.svg/24px-Free_and_open-source_software_logo_%282009%29.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/31/Free_and_open-source_software_logo_%282009%29.svg/32px-Free_and_open-source_software_logo_%282009%29.svg.png 2x" data-file-width="512" data-file-height="512" /></span></span> </span><a href="/wiki/Portal:Free_and_open-source_software" title="Portal:Free and open-source software">Free and open-source software portal</a></b></li> <li><span class="noviewer" typeof="mw:File"><span title="Category"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/16px-Symbol_category_class.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/23px-Symbol_category_class.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/31px-Symbol_category_class.svg.png 2x" data-file-width="180" data-file-height="185" /></span></span> <a href="/wiki/Category:GNOME" title="Category:GNOME">Category</a></li> <li><span class="noviewer" typeof="mw:File"><span title="Commons page"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/12px-Commons-logo.svg.png" decoding="async" width="12" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/18px-Commons-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/24px-Commons-logo.svg.png 2x" data-file-width="1024" data-file-height="1376" /></span></span> <a href="https://commons.wikimedia.org/wiki/Category:GNOME" class="extiw" title="commons:Category:GNOME">Commons</a></li> <li><span class="noviewer" typeof="mw:File"><span title="WikiProject"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/37/People_icon.svg/16px-People_icon.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/37/People_icon.svg/24px-People_icon.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/37/People_icon.svg/32px-People_icon.svg.png 2x" data-file-width="100" data-file-height="100" /></span></span> <a href="/wiki/Wikipedia:WikiProject_Software/Free_and_open-source_software_task_force" title="Wikipedia:WikiProject Software/Free and open-source software task force">WikiProject</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Client-side_decoration&oldid=1223112768">https://en.wikipedia.org/w/index.php?title=Client-side_decoration&oldid=1223112768</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Graphical_control_elements" title="Category:Graphical control elements">Graphical control elements</a></li><li><a href="/wiki/Category:Graphical_user_interface_elements" title="Category:Graphical user interface elements">Graphical user interface elements</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_is_different_from_Wikidata" title="Category:Short description is different from Wikidata">Short description is different from Wikidata</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 10 May 2024, at 00:02<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Client-side_decoration&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-rkk8l","wgBackendResponseTime":124,"wgPageParseReport":{"limitreport":{"cputime":"0.301","walltime":"0.392","ppvisitednodes":{"value":1027,"limit":1000000},"postexpandincludesize":{"value":70813,"limit":2097152},"templateargumentsize":{"value":590,"limit":2097152},"expansiondepth":{"value":8,"limit":100},"expensivefunctioncount":{"value":3,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":53173,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 310.256 1 -total"," 39.36% 122.129 1 Template:Reflist"," 32.78% 101.689 5 Template:Navbox"," 31.72% 98.416 10 Template:Cite_web"," 25.81% 80.081 1 Template:Short_description"," 24.03% 74.547 1 Template:GUI_widgets"," 13.23% 41.036 3 Template:Main_other"," 12.38% 38.400 1 Template:SDcat"," 9.71% 30.126 2 Template:Pagetype"," 9.05% 28.070 1 Template:GNOME"]},"scribunto":{"limitreport-timeusage":{"value":"0.174","limit":"10.000"},"limitreport-memusage":{"value":4695768,"limit":52428800},"limitreport-logs":"table#1 {\n [\"size\"] = \"tiny\",\n}\ntable#1 {\n [\"size\"] = \"tiny\",\n}\n"},"cachereport":{"origin":"mw-web.codfw.main-f69cdc8f6-2l27l","timestamp":"20241122153240","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Client-side decoration","url":"https:\/\/en.wikipedia.org\/wiki\/Client-side_decoration","sameAs":"http:\/\/www.wikidata.org\/entity\/Q48854736","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q48854736","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2018-01-28T07:02:29Z","dateModified":"2024-05-10T00:02:36Z","headline":"GUI design concept that allows a program's interface to adapt to a user's system"}</script> </body> </html>