Manual:CSS

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Manual:CSS and the translation is 16% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎italiano • ‎日本語 • ‎polski • ‎português • ‎português do Brasil • ‎中文

Cascading style sheet (CSS) rules sets much of the look and feel of MediaWiki: font size, colors, spacing, the logo and background image, even whether site content is displayed or is hidden.

CSS can be used to change the style of the entire wiki, for example to make the background a different color, or you can use inline CSS to style specific pieces of text in your wiki. For example green text can be accomplished by doing <span style="color:green;">green text</span>. If you want to make all text on the wiki larger you can add the code body { font-size: larger; } to MediaWiki:Common.css.

To change the look and feel of MediaWiki's screen display (how it looks in a browser) you can put CSS into MediaWiki:Common.css.

If code added to MediaWiki:Common.css doesn't take effect immediately, you may have to do a hard refresh.

To change the way MediaWiki pages print, you put CSS into MediaWiki:Print.css on your wiki.

If enabled on your wiki, individual users can create custom stylesheets just for themselves at Special:MyPage/<skin_name>.css (for example Special:MyPage/vector.css if they are using the vector skin). Special:MyPage/common.css allows the creation of personal stylesheets for all skins.

MediaWiki 用のカスタム外装 (スキン) を作成することもできます。

ヘルプ[edit]

CSS syntax, attributes and values, must be correct or stuff won't work right. World Wide Web Consortium (W3C) is an excellent reference for checking how to write CSS correctly directly from the standards:

Wikipedia gives a good overview of CSS.

If you prefer an easily consumable reference alongside demos of CSS features Mozilla Developer Network CSS Reference will provide you an "up-to-date" guide to syntax and basic usage of the various elements.

Caveats[edit]

Be sure to keep your HTML markup semantic. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

Normalized CSS[edit]

Much CSS today relies on a "reset" or "normalize" CSS to make all browsers work the same. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and MediaWiki:Common.css.

If you copy CSS, watch if it depends on additional CSS.

一例として jsFiddle には「規準 CSS 」チェックボックスがあります。これは margins を 0 にセットし、要求したリストの数をリセットします。規準 CSS は MediaWiki サイトでまったく走らないため、 MediaWiki 関連のコードのテストには使用禁止です。

jsfiddle has a feature to import CSS. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?[edit]

By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the $wgAllowSiteCSSOnRestrictedPages configuration setting to allow custom CSS to work on these pages.

関連項目[edit]