مساعدة:أنماط القوالب
 |
ملاحظة: بتعديلك هذه الصفحة فإنك توافق على وضع مساهمتك في الملكية العامة وفق CC0. راجع صفحات مساعدة الملكية العامة للمزيد من المعلومات. | |
أنماط القوالب هي أداة لتمكين التصميم المعقد لالقوالب بدون الحاجة إلى صلاحية إداري الواجهة.
كيف تعمل؟
يمكن للمحررين إضافة <templatestyles src="[بعض الصفحات]" /> إلى صفحة وسيجري تحليل محتويات الصفحة المشار إليها كنمط CSS، وتطهيرها وتحميلها على الصفحات التي يجري فيها استخدام علامة <templatestyles> (بشكل مباشر أو عن طريق استخدامها في قالب يستخدم في الصفحة).
[some page] must have the sanitized-css (CSS معقم) content model, which is the default for subpages in the Template namespace that end with .css. The recommended usage pattern is to store the styles for Template:Foo under a subpage like Template:Foo/styles.css.
If [some page] lacks a namespace prefix, it defaults to the Template namespace. Thus, for example, <templatestyles src="Foo/styles.css" /> will load Template:Foo/styles.css.
The <templatestyles> tag should be placed before the content that is styled, e.g. at the top of the template, to avoid a potential flash of unstyled content if the page is partially rendered while being loaded.
ما هي المشاكل التي يحلها؟
Traditionally, there are two ways to style templates (or any other content): by using inline styles (that is, using HTML code and adding attributes like style="margin: 10px" to it) or by using certain special system messages such as MediaWiki:Common.css. Neither of those approaches work very well.
For inline styling:
- There is no separation of content and presentation. In cases where the content does not come from a template (e.g. tables in articles), that will result in article wikitext that's unintelligible for most editors.
- Since styles are mixed with wikitext, syntax highlighting and other forms of CSS editing support are difficult or impossible.
- Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.
- Style attributes are limited to a subset of CSS. Most importantly,
@mediarules needed for responsive design do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.
For system MediaWiki:*.css pages:
- Editing is limited to interface administrators, which is a major barrier to participation.
- Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.
- Changes are impossible to test without saving first (مهمة T112474).
- All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.
TemplateStyles allows editors to associate style rules to specific pages, provides the full power of CSS stylesheets while filtering dangerous constructs, and works with preview/debug tools (such as TemplateSandbox) as expected.
Lowering the access and maintainability barrier will hopefully result in more innovation in the way templates are visually designed, less maintenance overhead, and better adaptability to screen options (especially mobile devices which by now constitute half of Wikipedia pageviews).
هل هو آمن؟
Yes! TemplateStyles includes a full-fledged CSS parser that reads, re-serializes and escapes all code and removes CSS rules which it does not recognize. The parser is sufficiently fine-grained to reject remote resources (such as background images) but allow local ones. CSS selectors are rewritten so that they cannot refer to elements outside article content. (Visually modifying areas outside article content by displacing parts of the article, e.g. via absolute positioning, is not prevented at this time. This is no change from the status quo, as such a thing was already possible with wikitext and inline styles.)
ما هي قواعد CSS المعترف بها؟
Currently, TemplateStyles accepts most CSS3 properties supported by one or more major browser (as of early 2017). Beyond simple rules, @media, @page, @supports, @keyframe and @font-face/@font-feature-values at-rules are also supported (with font-face restricted to fonts whose name starts with TemplateStyles, for security reasons).
For a comprehensive list of allowed properties, see the "$props" parts of the StylePropertySanitizer code from css-sanitizer.
Non-standard properties (including vendor prefixes) are not currently supported. See مهمة T162379 for plans.
كيف يمكنني استهداف دقة الشاشة للأجهزة المحمولة/سطح المكتب؟
Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki has standardised on 640px and 1120px breakpoints to represent tablet and desktop.
كيف يمكنني استهداف أنماط محددة؟
MediaWiki provides various classes on the html and body elements, including one that indicates which skin is in use.
These can be targeted by including a simple selector for the html or body element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).
Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions. See also #How can I target mobile/desktop resolutions?.
/* Elements with class 'foo' will have red text in all skins */
.foo { color: red; }
/* Override that to green for Vector only */
body.skin-vector .foo { color: green; }
/* Add a red border if the user doesn't have JavaScript enabled */
html.client-nojs .foo { border: 1px solid red; }
/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }
/* This does not work! The 'body' element must be specified. */
.skin-vector .foo { background: orange; }
/* These do not work! The descendant combinator must be used */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }
كيف أستخدم الأنماط في رسائل ميدياويكي؟
To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the mw-parser-output CSS class.
If you use a TemplateStyles-based template outside of the content area (e.g. in the sitenotice), you need to provide that class yourself, by wrapping the template in something like <div class="mw-parser-output">...</div>.
بأي ترتيب يتم تجاوز أنماط CSS؟
Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g. div.foo { margin: 10px } is more specific than .foo { margin: 5px }).
In case of equal specificity, CSS styles that come later in the document override earlier styles.
MediaWiki:Commons.css, other site scripts, user scripts and gadgets are loaded in the <head> section of the page.
TemplateStyles stylesheets are loaded in the <body>, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first.
(Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time.
Note also that "later" has to do with document position, not load order.
Gadgets add their CSS after the page has fully loaded, by manipulating the page with JavaScript; some add it on-demand when the user does some action such as clicking a button.
Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.)
كيف يمكن لوحدات Lua التفاعل مع الأنماط؟
TemplateStyles can be called from a Lua module using frame:extensionTag.
Example code is the following:
local p = {};
function p.templateStyle( frame, src )
return frame:extensionTag( 'templatestyles', '', { src = src } );
end
return p;
ما هي ميزات مكافحة الإساءة المقدمة؟
The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model (sanitized-css) so changes to them can be tracked or controlled with Extension:مرشح الإساءة, using the new_content_model variable.
CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "ماذا يصل هنا" option, see what stylesheets are used on a page under "معلومات عن هذه الصفحة" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "تغييرات ذات علاقة".
TemplateStyles also leaves identifying information in the HTML code; to find out where a specific rule comes from, look at the page source, and the enclosing <style> tag will have an attribute like data-mw-deduplicate="TemplateStyles:r123456", where 123456 is the revision ID of the stylesheet (viewable with Special:Diff, for example).
كيف تتخذ القرارات المتعلقة بـ TemplateStyles؟
The idea of including CSS with templates was proposed and accepted in a request for comments. Technical details were pinned down in a second RfC and workflow details in a user consultation.
من يعمل على TemplateStyles؟
TemplateStyles was originally a project of the Wikimedia Reading Infrastructure team (preceded by exploratory work Coren did as a volunteer), consisting of Brad Jorsch (developer), Bryan Davis (manager) and Gergő Tisza (developer) at the time. People and responsibilities have since moved around; see the maintainers page for current ownership.
أين يمكنني الإبلاغ عن الأخطاء / طلب الميزات؟
Please file tasks under the TemplateStyles component in Phabricator.
أين يمكنني رؤيته فعليا؟
You can look at some curated examples.
The feature is enabled on all Wikimedia sites.
انظر أيضا
- امتداد:أنماط القوالب - especially the #Caveats section.
- Wikipedia:TemplateStyles — guideline page on English Wikipedia.